Merge pull request #2152 from asaadmahmoodspin/ui-fixes

Multiple UI Improvements

web/react/components/admin_console/user_item.jsx

@@ -353,7 +353,7 @@ export default class UserItem extends React.Component {
 
         return (
             <tr>
-                <td className='row member-div'>
+                <td className='row member-div padding--equal'>
                     <img
                         className='post-profile-img pull-left'
                         src={`/api/v1/users/${user.id}/image?time=${user.update_at}&${Utils.getSessionIndex()}`}

web/react/components/channel_info_modal.jsx

@@ -56,7 +56,7 @@ class ChannelInfoModal extends React.Component {
                         </div>
                         <div className='col-sm-9'>{channelURL}</div>
                     </div>
-                    <div className='row'>
+                    <div className='row form-group'>
                         <div className='col-sm-3 info__label'>
                             <FormattedMessage
                                 id='channel_info.id'

web/react/components/navbar.jsx

@@ -25,6 +25,7 @@ const ActionTypes = Constants.ActionTypes;
 import AppDispatcher from '../dispatcher/app_dispatcher.jsx';
 
 import {FormattedMessage} from 'mm-intl';
+import attachFastClick from 'fastclick';
 
 const Popover = ReactBootstrap.Popover;
 const OverlayTrigger = ReactBootstrap.OverlayTrigger;
@@ -59,6 +60,7 @@ export default class Navbar extends React.Component {
         ChannelStore.addChangeListener(this.onChange);
         ChannelStore.addExtraInfoChangeListener(this.onChange);
         $('.inner__wrap').click(this.hideSidebars);
+        attachFastClick(document.body);
     }
     componentWillUnmount() {
         ChannelStore.removeChangeListener(this.onChange);

web/react/components/team_general_tab.jsx

@@ -486,13 +486,9 @@ class GeneralTab extends React.Component {
             inputs.push(
                 <div key='teamInviteSetting'>
                     <div className='row'>
-                        <label className='col-sm-5 control-label'>
+                        <label className='col-sm-5 control-label visible-xs-block'>
-                            <FormattedMessage
-                                id='general_tab.codeTitle'
-                                defaultMessage='Invite Code'
-                            />
                         </label>
-                        <div className='col-sm-7'>
+                        <div className='col-sm-12'>
                             <input
                                 className='form-control'
                                 type='text'

web/react/components/user_settings/manage_incoming_hooks.jsx

@@ -183,7 +183,7 @@ export default class ManageIncomingHooks extends React.Component {
             <div key='addIncomingHook'>
                 <FormattedHTMLMessage
                     id='user.settings.hooks_in.description'
-                    defaultMessage='Create webhook URLs for use in external integrations. Please see<a href="http://mattermost.org/webhooks" target="_blank">http://mattermost.org/webhooks</a> to learn more.'
+                    defaultMessage='Create webhook URLs for use in external integrations. Please see <a href="http://mattermost.org/webhooks" target="_blank">http://mattermost.org/webhooks</a> to learn more.'
                 />
                 <div><label className='control-label padding-top x2'>
                     <FormattedMessage

web/react/package.json

@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "autolinker": "0.22.0",
+    "fastclick": "^1.0.6",
     "flux": "2.1.1",
     "highlight.js": "8.9.1",
     "keymirror": "0.1.1",

web/react/utils/markdown.jsx

@@ -222,7 +222,7 @@ class MattermostMarkdownRenderer extends marked.Renderer {
     }
 
     table(header, body) {
-        return `<table class="markdown__table"><thead>${header}</thead><tbody>${body}</tbody></table>`;
+        return `<div class="table-responsive"><table class="markdown__table"><thead>${header}</thead><tbody>${body}</tbody></table></div>`;
     }
 
     listitem(text) {

web/sass-files/sass/partials/_markdown.scss

@@ -31,6 +31,7 @@
 }
 
 .post-body--code__language {
+	-webkit-transform: translate3d(0,0,0);
 	position: absolute;
 	top: 0;
 	right: 0;

web/sass-files/sass/partials/_modal.scss

@@ -7,6 +7,67 @@
 	padding: 20px 15px;
 	overflow: auto;
 }
+.more-table {
+	margin: 0;
+	table-layout: fixed;
+	p {
+		font-size: 0.9em;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		@include opacity(0.8);
+		margin: 5px 0;
+	}
+	.profile-img {
+		-moz-border-radius: 50px;
+		-webkit-border-radius: 50px;
+		border-radius: 50px;
+		margin-right: 8px;
+	}
+	.more-name {
+		font-weight: 600;
+		font-size: 0.95em;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+	.more-description {
+		@include opacity(0.7);
+		display: block;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+	tbody {
+		> tr {
+			&:hover td {
+				background: #f7f7f7;
+			}
+			&:first-child {
+				td {
+					border: none;
+				}
+			}
+			td {
+				width: 100%;
+				white-space: nowrap;
+				@include legacy-pie-clearfix;
+				text-overflow: ellipsis;
+				padding: 8px 8px 8px 15px;
+				&.padding--equal {
+					padding: 8px;
+				}
+				&.td--action {
+					text-align: right;
+					padding: 8px 15px 8px 8px;
+					width: 80px;
+					vertical-align: middle;
+					position: relative;
+					&.lg {
+						width: 110px;
+					}
+				}
+			}
+		}
+	}
+}
 .modal {
 	width: 100%;
 	color: #333;
@@ -148,64 +209,6 @@
 			padding: 0;
 		}
 	}
-	.more-table {
-		margin: 0;
-		table-layout: fixed;
-		p {
-			font-size: 0.9em;
-			overflow: hidden;
-			text-overflow: ellipsis;
-			@include opacity(0.8);
-			margin: 5px 0;
-		}
-		.profile-img {
-			-moz-border-radius: 50px;
-			-webkit-border-radius: 50px;
-			border-radius: 50px;
-			margin-right: 8px;
-		}
-		.more-name {
-			font-weight: 600;
-			font-size: 0.95em;
-			overflow: hidden;
-			text-overflow: ellipsis;
-		}
-		.more-description {
-			@include opacity(0.7);
-			display: block;
-			overflow: hidden;
-			text-overflow: ellipsis;
-		}
-		tbody {
-			> tr {
-				&:hover td {
-					background: #f7f7f7;
-				}
-				&:first-child {
-					td {
-						border: none;
-					}
-				}
-				td {
-					width: 100%;
-					white-space: nowrap;
-					@include legacy-pie-clearfix;
-					text-overflow: ellipsis;
-					padding: 8px 8px 8px 15px;
-					&.td--action {
-						text-align: right;
-						padding: 8px 15px 8px 8px;
-						width: 80px;
-						vertical-align: middle;
-						position: relative;
-						&.lg {
-							width: 110px;
-						}
-					}
-				}
-			}
-		}
-	}
 	.modal-image {
 		position:relative;
 		width:100%;

web/sass-files/sass/partials/_responsive.scss

@@ -776,6 +776,24 @@
     }
 }
 @media screen and (max-width: 480px) {
+    .settings-modal {
+
+         .settings-table {
+
+            .security-links {
+                margin-bottom: 10px;
+                display: block;
+
+                &:last-child {
+                    margin-bottom: 0;
+                }
+
+            }
+
+         }
+
+    }
+
     .tip-overlay.tip-overlay--sidebar {
         min-height: 350px;
     }

web/sass-files/sass/partials/_settings.scss

@@ -207,6 +207,7 @@
         .section-title {
             margin-bottom: 5px;
             font-weight: 600;
+            padding-right: 50px;
         }
 
         .section-edit {

web/sass-files/sass/partials/_tutorial.scss

@@ -105,7 +105,7 @@
         font-size: 12px;
 
         span {
-            @include opacity(0.5);
+            @include opacity(0.9);
         }
 
     }