Merge pull request #648 from mattermost/PLT-12

PLT-12: Work in progress for Admin Console UI

5 files changed, 182 insertions, 16 deletions

diff --git a/web/sass-files/sass/partials/_admin-console.scss b/web/sass-files/sass/partials/_admin-console.scss
new file mode 100644
index 000000000..b32cc1218
--- /dev/null
+++ b/web/sass-files/sass/partials/_admin-console.scss
@@ -0,0 +1,175 @@
+.sidebar--left {
+    &.sidebar--collapsable {
+        background: #333;
+        .team__header {
+            background: transparent;
+            margin-bottom: 5px;
+        }
+        .nav {
+            li {
+                padding: 0;
+                .icon {
+                    width: 15px;
+                }
+                > a {
+                    color: #fff;
+                    padding: 9px 15px;
+                    display: block;
+                    &:hover, &.active, &:focus  {
+                        background-color: $primary-color;
+                    }
+                }
+            }
+            .menu-icon--right {
+                vertical-align: top;
+                padding: 5px 10px;
+                margin: -5px;
+                float: right;
+                .fa {
+                    font-size: 13px;
+                    right: -2px;
+                    position: relative;
+                }
+            }
+            &.nav__sub-menu {
+                padding: 5px 0;
+                background: #111;
+                -webkit-font-smoothing: auto;
+                li {
+                    > a {
+                        font-size: 13px;
+                        padding: 5px 15px;
+                        background: transparent;
+                        color: #bbb;
+                        &:hover {
+                            color: lighten($primary-color, 10);
+                        }
+                        &.active {
+                            color: #fff;
+                            font-weight: 600;
+                        }
+                    }
+                    .nav-more {
+                        font-size: 13px;
+                        padding: 5px 15px;
+                        background: transparent;
+                        color: #bbb;
+                        display: block;
+                        cursor: pointer;
+                        &:hover {
+                            color: lighten($primary-color, 10);
+                        }
+                    }
+                }
+            }
+            &.nav__inner-menu {
+                li {
+                    > a {
+                        padding-left: 20px;
+                    }
+                }
+            }
+        }
+    }
+}
+
+.app__content {
+    &.admin {
+        overflow: auto;
+        background-color: #f1f1f1;
+        padding: 0 20px 20px;
+    }
+    .wrapper--fixed {
+        max-width: 800px;
+    }
+    .form-horizontal {
+        margin-top: 40px;
+        .control-label {
+            text-align: left;
+            padding-right: 0;
+            font-weight: 600;
+        }
+        .form-group {
+            margin-bottom: 25px;
+        }
+        .help-text {
+            margin: 10px 0 0 15px;
+            color: #777;
+            .help-link {
+                margin-right: 5px;
+            }
+            .btn {
+                font-size: 13px;
+            }
+        }
+        .alert {
+            display: inline-block;
+            padding: 5px 7px;
+            margin: 0;
+            top: 1px;
+            position: relative;
+        }
+    }
+    .banner {
+        background: #fff;
+        border: 1px solid #ddd;
+        padding: 0.7em 1.5em;
+        font-size: 0.95em;
+        margin: 2em 0;
+        .banner__heading {
+            font-size: 1.5em;
+        }
+        .banner__content {
+            width: 80%;
+        }
+    }
+    .popover {
+        border-radius: 3px;
+        border: 1px solid #ccc;
+        width: 100%;
+        font-size: 0.95em;
+    }
+    .panel {
+        border: none;
+        background-color: transparent;
+    }
+    .panel-default {
+        > .panel-heading {
+            padding: 10px 0;
+            background-color: transparent;
+        }
+        .panel-body {
+            padding: 30px 0 10px;
+        }
+    }
+    .panel-group {
+        margin-bottom: 50px;
+    }
+    .panel-title {
+        font-size: 24px;
+        line-height: 1.5;
+        a {
+            text-decoration: none;
+            display: block;
+            @include clearfix;
+            &.collapsed {
+                .fa-minus {
+                    display: none;
+                }
+                .fa-plus {
+                    display: inline-block;
+                }
+            }
+            .fa {
+                font-size: 18px;
+                float: right;
+                margin-top: 8px;
+                color: #aaa;
+            }
+            .fa-plus {
+                display: none;
+            }
+        }
+    }
+
+}
\ No newline at end of file
diff --git a/web/sass-files/sass/partials/_command-box.scss b/web/sass-files/sass/partials/_command-box.scss
index 565296fae..44eb9b8df 100644
--- a/web/sass-files/sass/partials/_command-box.scss
+++ b/web/sass-files/sass/partials/_command-box.scss
@@ -4,30 +4,20 @@
     width: 100%;
     border: $border-gray;
     bottom: 38px;
-    overflow: auto;
     @extend %popover-box-shadow;
-    .sidebar--right & {
-        bottom: 100px;
-    }
 }
 
 .command-name {
     position: relative;
     width: 100%;
     background-color: #fff;
-    line-height: 24px;
-    padding: 5px 10px 8px;
+    height: 37px;
+    line-height: 37px;
+    padding: 2px 10px 2px 5px;
     z-index: 101;
-    font-size: 0.95em;
-    border-bottom: 1px solid #ddd;
     &:hover {
         background-color: #e8eaed;
     }
-    .command__desc {
-        margin-left: 5px;
-        color: #999;
-        line-height: normal;
-    }
 }
 
 .command-desc {
diff --git a/web/sass-files/sass/partials/_responsive.scss b/web/sass-files/sass/partials/_responsive.scss
index 32d65b86b..a30782dd0 100644
--- a/web/sass-files/sass/partials/_responsive.scss
+++ b/web/sass-files/sass/partials/_responsive.scss
@@ -687,10 +687,10 @@
         }
     }
     .app__content {
-        padding-top: 50px;
+        padding-top: 45px;
         margin: 0;
         .channel__wrap & {
-            padding-top: 50px;
+            padding-top: 45px;
         }
         .channel-header {
             display: none;
diff --git a/web/sass-files/sass/partials/_sidebar--left.scss b/web/sass-files/sass/partials/_sidebar--left.scss
index e5faff9f8..514d22f24 100644
--- a/web/sass-files/sass/partials/_sidebar--left.scss
+++ b/web/sass-files/sass/partials/_sidebar--left.scss
@@ -66,7 +66,7 @@
         top: 66px;
     }
     .nav-pills__unread-indicator-bottom {
-        bottom: 10px;
+        bottom: 0px;
     }
 
     .nav {
diff --git a/web/sass-files/sass/styles.scss b/web/sass-files/sass/styles.scss
index eb5152a2c..422447b6e 100644
--- a/web/sass-files/sass/styles.scss
+++ b/web/sass-files/sass/styles.scss
@@ -23,6 +23,7 @@
 @import "partials/sidebar--left";
 @import "partials/sidebar--right";
 @import "partials/sidebar--menu";
+@import "partials/admin-console";
 @import "partials/signup";
 @import "partials/files";
 @import "partials/videos";