From 94ce2b13188c0d2265c0e6f6a1ccd2b38687710f Mon Sep 17 00:00:00 2001
From: Sebastian Stehle <sebastian@squidex.io>
Date: Fri, 9 Jun 2017 18:36:27 +0200
Subject: [PATCH] Some first comments.

---
 .../contents/content-item.component.html      |   3 +-
 .../pages/schemas/schemas-page.component.html |   2 +-
 .../pages/schemas/schemas-page.component.html |   5 +-
 .../pages/clients/client.component.scss       |   4 +
 .../settings/settings-area.component.html     |   2 +-
 .../internal/internal-area.component.html     |   2 +-
 src/Squidex/app/theme/_bootstrap.scss         | 123 ++++++++----------
 src/Squidex/app/theme/_common.scss            |  19 ++-
 src/Squidex/app/theme/_mixins.scss            |  30 +++++
 9 files changed, 114 insertions(+), 76 deletions(-)

diff --git a/src/Squidex/app/features/content/pages/contents/content-item.component.html b/src/Squidex/app/features/content/pages/contents/content-item.component.html
index 76465f74a..4be5ce32e 100644
--- a/src/Squidex/app/features/content/pages/contents/content-item.component.html
+++ b/src/Squidex/app/features/content/pages/contents/content-item.component.html
@@ -5,7 +5,8 @@
 </td>
 <td>
     <span class="item-published" [class.unpublished]="!content.isPublished"></span>
-    <span class="item-modified">{{content.lastModified | fromNow}}</span>
+    
+    <small class="item-modified">{{content.lastModified | fromNow}}</small>
 </td>
 <td>
     <img class="user-picture" [attr.title]="content.lastModifiedBy | userNameRef" [attr.src]="content.lastModifiedBy | userPictureRef" />
diff --git a/src/Squidex/app/features/content/pages/schemas/schemas-page.component.html b/src/Squidex/app/features/content/pages/schemas/schemas-page.component.html
index d904a25b9..b1d8c6dfa 100644
--- a/src/Squidex/app/features/content/pages/schemas/schemas-page.component.html
+++ b/src/Squidex/app/features/content/pages/schemas/schemas-page.component.html
@@ -23,7 +23,7 @@
 
     <div class="panel-main">
         <div class="panel-content">
-            <ul class="nav nav-pills flex-column nav-dark nav-dark-bordered">
+            <ul class="nav flex-column nav-dark nav-dark-bordered">
                 <li class="nav-item" *ngFor="let schema of schemasFiltered | async">
                     <a class="nav-link" [routerLink]="schema.name" routerLinkActive="active">{{schema | displayName}} <i class="icon-angle-right"></i></a>
                 </li>
diff --git a/src/Squidex/app/features/schemas/pages/schemas/schemas-page.component.html b/src/Squidex/app/features/schemas/pages/schemas/schemas-page.component.html
index 002f8b43d..587cbd135 100644
--- a/src/Squidex/app/features/schemas/pages/schemas/schemas-page.component.html
+++ b/src/Squidex/app/features/schemas/pages/schemas/schemas-page.component.html
@@ -28,7 +28,7 @@
 
     <div class="panel-main">
         <div class="panel-content">
-            <ul class="nav nav-pills flex-column nav-dark nav-dark-bordered">
+            <ul class="nav flex-column nav-dark nav-dark-bordered">
                 <li class="nav-item" *ngFor="let schema of schemasFiltered">
                     <a class="nav-link" [routerLink]="[schema.name]" routerLinkActive="active">
                         <div class="row">
@@ -41,7 +41,8 @@
                                 </span>
                             </div>
                             <div class="col col-4 schema-modified">
-                                <span class="item-modified">{{schema.lastModified | fromNow}}</span>
+                                <small class="item-modified">{{schema.lastModified | fromNow}}</small>
+                                
                                 <span class="item-published" [class.unpublished]="!schema.isPublished"></span>
                             </div>
                         </div>
diff --git a/src/Squidex/app/features/settings/pages/clients/client.component.scss b/src/Squidex/app/features/settings/pages/clients/client.component.scss
index b97356f97..1f42e3611 100644
--- a/src/Squidex/app/features/settings/pages/clients/client.component.scss
+++ b/src/Squidex/app/features/settings/pages/clients/client.component.scss
@@ -66,6 +66,10 @@ $color-editor: #eceeef;
     }
 }
 
+.btn-cancel {
+    padding: .4rem;
+}
+
 .access-token {
     height: 18rem;
     font-size: 1rem;
diff --git a/src/Squidex/app/features/settings/settings-area.component.html b/src/Squidex/app/features/settings/settings-area.component.html
index f2de9c72f..2d9eefb17 100644
--- a/src/Squidex/app/features/settings/settings-area.component.html
+++ b/src/Squidex/app/features/settings/settings-area.component.html
@@ -13,7 +13,7 @@
 
     <div class="panel-main">
         <div class="panel-content">
-            <ul class="nav nav-pills flex-column nav-dark">
+            <ul class="nav flex-column nav-dark">
                 <li class="nav-item">
                     <a class="nav-link" routerLink="clients" routerLinkActive="active">
                         Clients
diff --git a/src/Squidex/app/shell/pages/internal/internal-area.component.html b/src/Squidex/app/shell/pages/internal/internal-area.component.html
index e0c5653dc..51751bb76 100644
--- a/src/Squidex/app/shell/pages/internal/internal-area.component.html
+++ b/src/Squidex/app/shell/pages/internal/internal-area.component.html
@@ -1,4 +1,4 @@
-<nav class="navbar navbar-fixed-top navbar-inverse bg-primary bg-faded">
+<nav class="navbar fixed-top navbar-inverse bg-primary bg-faded">
     <span class="navbar-brand" routerLink="/app">
         <i class="icon-logo"></i>
     </span>
diff --git a/src/Squidex/app/theme/_bootstrap.scss b/src/Squidex/app/theme/_bootstrap.scss
index bb5042969..879b872d5 100644
--- a/src/Squidex/app/theme/_bootstrap.scss
+++ b/src/Squidex/app/theme/_bootstrap.scss
@@ -3,6 +3,9 @@
 
 @import './../../node_modules/bootstrap/scss/mixins/_buttons';
 
+//
+// Override most common header sizes
+//
 h1 {
     font-size: 1.3rem;
 }
@@ -15,7 +18,11 @@ h3 {
     font-size: 1.05rem;
 }
 
+//
+// Fix navbar.
+// 
 .navbar {
+    // Use fixed height to reduce problems with dynamic elements.
     & {
         height: $size-navbar-height;
     }
@@ -24,29 +31,23 @@ h3 {
         line-height: 2.2rem;
     }
 
-    &-fixed-top {
-        @include fixed(0, 0, auto, 0);
-        z-index: 10000;
-    }
-
+    // Ensure that dropdown is always under nav bar.
     .dropdown-menu {
         top: 2.6rem;
     }
 }
 
-.nav-pills {
-    .nav-link {
-        @include border-radius(0);
-    }
-}
-
 .navbar-nav {
     .nav-link {
         cursor: pointer;
     }
 }
 
+//
+// Restyle dropdown menu.
+//
 .dropdown-menu {
+    // White dropdown menu without border and shadow.
     & {
         @include box-shadow(0, 3px, 16px, .2px);
         border: 0;
@@ -54,6 +55,7 @@ h3 {
     }
 
     a {
+        // Special style for menu item to delete something.
         &.dropdown-item-delete {
             & {
                 color: $color-theme-error;
@@ -65,11 +67,11 @@ h3 {
 
             &:active {
                 background: $color-theme-error-dark;
-                border: 0;
             }
         }
 
         &.dropdown-item {
+            // Make the color white on active.
             &:active {
                 color: $color-dark-foreground;
             }
@@ -77,6 +79,9 @@ h3 {
     }
 }
 
+//
+// Dark vertical menu for dark panels.
+//
 .nav-dark {
     & {
         background: $color-dark2-background;
@@ -94,30 +99,32 @@ h3 {
         .nav-item {
             &:last-child {
                 .nav-link {
+                    // Keep border between two items, not after last item.
                     border: 0;
                 }
             }
         }
     }
 
-    &.nav-pills {
-        .nav-link {
-            & {
-                color: $color-dark2-foreground;
-            }
+    .nav-link {
+        & {
+            color: $color-dark2-foreground;
+        }
 
-            &:hover,
-            &.active {
-                color: $color-dark1-focus-foreground;
-            }
+        &:hover,
+        &.active {
+            color: $color-dark1-focus-foreground;
+        }
 
-            &.active {
-                background: $color-dark2-active-background;
-            }
+        &.active {
+            background: $color-dark2-active-background;
         }
     }
 }
 
+//
+// Tab control navigation.
+//
 .nav-field-tabs {
     & {
         @include absolute(auto, auto, 0, 1.25rem);
@@ -144,34 +151,9 @@ h3 {
     }
 }
 
-@mixin link-button($color) {
-    color: $color;
-    cursor: pointer;
-
-    &:focus {
-        outline-color: transparent;
-    }
-
-    &:disabled {
-        @include opacity(.4);
-    }
-
-    &:disabled,
-    &.disabled {
-        cursor: not-allowed;
-        border-color: transparent;
-    }
-
-    &:focus,
-    &:active,
-    &:hover {
-        color: darken($color, 8%);
-        border-color: transparent;
-        background: transparent;
-        text-decoration: none;
-    }
-}
-
+//
+// Corresponding icon colors for external login buttons.
+//
 .icon {
     &-github {
         color: $color-extern-github-icon;
@@ -186,7 +168,11 @@ h3 {
     }
 }
 
+//
+// Button improvements
+//
 .btn {
+    // Buttons for external logins.
     &-github {
         @include button-variant($color-dark-foreground, $color-extern-github, $color-extern-github);
     }
@@ -199,12 +185,7 @@ h3 {
         @include button-variant($color-dark-foreground, $color-extern-microsoft, $color-extern-microsoft);
     }
 
-    &-cancel {
-        padding: .4rem;
-        font-size: 1.1rem;
-        font-weight: normal;
-    }
-
+    // Special radio button.
     &-radio {
         & {
             color: $color-border-dark;
@@ -227,6 +208,10 @@ h3 {
             line-height: 1.5rem;
         }
 
+        .radio-input {
+            display: none;
+        }
+
         &.active {
             & {
                 @include box-shadow(0, 0, 10px, .5);
@@ -243,31 +228,31 @@ h3 {
         &:hover {
             color: $color-theme-blue;
         }
-
-        .radio-input {
-            display: none;
-        }
     }
 
+    // Link buttons only exists with blue text color in bootstrap. Provide them for all colors.
     &-link {
         & {
-            @include link-button($color-theme-blue);
+            @include build-link-button($color-theme-blue);
         }
 
         &.btn-danger {
-            @include link-button($color-theme-error);
+            @include build-link-button($color-theme-error);
         }
 
         &.btn-success {
-            @include link-button($color-theme-green);
+            @include build-link-button($color-theme-green);
         }
 
         &.btn-decent {
-            @include link-button($color-subtext);
+            @include build-link-button($color-subtext);
         }
     }
 }
 
+//
+// Restyle modal dialogs.
+//
 .modal {
     &-content,
     &-header {
@@ -319,17 +304,23 @@ h3 {
     }
 }
 
+// 
+// Table Helpers
+// 
 .table {
+    // Use fixed width for columns.
     &-fixed {
         table-layout: fixed;
     }
 
+    // Vertical align cells.
     &-middle {
         td {
             vertical-align: middle;
         }
     }
 
+    // Remove all borders.
     &-borderless {
         td {
             border: 0;
diff --git a/src/Squidex/app/theme/_common.scss b/src/Squidex/app/theme/_common.scss
index 202f54da5..2f694035e 100644
--- a/src/Squidex/app/theme/_common.scss
+++ b/src/Squidex/app/theme/_common.scss
@@ -2,25 +2,32 @@
 @import '_vars';
 
 body {
+    // Default body with padding for fixed navbar and sidebar.
     & {
         background: $color-background;
         padding-top: $size-navbar-height;
         padding-left: 0;
     }
 
+    // White body for login and profile page.
     &.white {
         background: $color-dark-foreground;
     }
 }
 
+// User ref for history panel. Must be placed here, because element is created dynamically.
 .user-ref {
     color: $color-theme-blue-dark;
 }
 
+// Marker ref for history panel. Must be placed here, because element is created dynamically.
 .marker-ref {
     color: $color-theme-blue-dark;
 }
 
+//
+// Profile picture in circle
+//
 .user-picture {
     & {
         @include circle(2rem);
@@ -31,6 +38,9 @@ body {
     }
 }
 
+//
+// Green or red circle if element is published or unpublished
+//
 .item-published {
     & {
         @include circle(.5rem);
@@ -59,6 +69,9 @@ body {
     }
 }
 
+//
+// Landing page with loading spinner.
+//
 .landing-page {
     & {
         margin: 8rem auto;
@@ -75,14 +88,12 @@ body {
     }
 }
 
+// Hidden helper (fast *ngIf replacement)
 .hidden {
     display: none;
 }
 
+// Hidden helper (fast *ngIf replacement)
 .invisible {
     visibility: hidden;
-}
-
-.item-modified {
-    font-size: .8rem;
 }
\ No newline at end of file
diff --git a/src/Squidex/app/theme/_mixins.scss b/src/Squidex/app/theme/_mixins.scss
index 8969d23c3..d0f4a21c1 100644
--- a/src/Squidex/app/theme/_mixins.scss
+++ b/src/Squidex/app/theme/_mixins.scss
@@ -10,6 +10,36 @@
     }
 }
 
+@mixin build-link-button($color) {
+    & {
+        color: $color;
+        cursor: pointer;
+    }
+
+    &:focus {
+        outline-color: transparent;
+    }
+
+    &:disabled {
+        @include opacity(.4);
+    }
+
+    &:disabled,
+    &.disabled {
+        cursor: not-allowed;
+        border-color: transparent;
+    }
+
+    &:focus,
+    &:active,
+    &:hover {
+        color: darken($color, 8%);
+        border-color: transparent;
+        background: transparent;
+        text-decoration: none;
+    }
+}
+
 @mixin clearfix() {
     &::after {
         content: '';