From 868ea4458b0a29602c5f2a4576a8a2618e88382f Mon Sep 17 00:00:00 2001
From: Sebastian Stehle <sebastian@squidex.io>
Date: Fri, 9 Jun 2017 19:31:22 +0200
Subject: [PATCH] Some more comments and cleanup.

---
 src/Squidex/Views/Account/Login.cshtml        |  2 +-
 src/Squidex/Views/Profile/Profile.cshtml      | 18 +++---
 .../pages/users/user-page.component.html      |  2 +-
 .../pages/schemas/schemas-page.component.html |  2 +-
 .../pages/schemas/schema-form.component.html  |  2 +-
 .../angular/control-errors.component.html     |  2 +-
 .../shared/components/app-form.component.html |  2 +-
 src/Squidex/app/theme/_common.scss            |  2 +-
 src/Squidex/app/theme/_forms.scss             | 59 ++++++++++++++-----
 src/Squidex/app/theme/_lists.scss             | 32 +++++++++-
 src/Squidex/app/theme/_panels.scss            | 39 ++++++++----
 src/Squidex/app/theme/_static.scss            | 26 +++++---
 12 files changed, 136 insertions(+), 52 deletions(-)

diff --git a/src/Squidex/Views/Account/Login.cshtml b/src/Squidex/Views/Account/Login.cshtml
index e092ec9da..0a317d2b1 100644
--- a/src/Squidex/Views/Account/Login.cshtml
+++ b/src/Squidex/Views/Account/Login.cshtml
@@ -64,7 +64,7 @@
          {
             @if (Model.IsFailed)
             {
-                <div class="form-error">Email or password not correct.</div>
+                <div class="form-alert form-alert-error">Email or password not correct.</div>
             }
 
             <form asp-controller="Account" asp-action="Login" asp-route-returnurl="@Model.ReturnUrl" method="post">
diff --git a/src/Squidex/Views/Profile/Profile.cshtml b/src/Squidex/Views/Profile/Profile.cshtml
index c64855702..79b7b123b 100644
--- a/src/Squidex/Views/Profile/Profile.cshtml
+++ b/src/Squidex/Views/Profile/Profile.cshtml
@@ -17,14 +17,14 @@
 
     @if (!string.IsNullOrWhiteSpace(ViewBag.SuccessMessage))
     {
-        <div class="form-success">
+        <div class="form-alert form-alert-success">
             @ViewBag.SuccessMessage
         </div>
     }
 
     @if (!string.IsNullOrWhiteSpace(ViewBag.ErrorMessage))
     {
-        <div class="form-error">
+        <div class="form-alert form-alert-error">
             @ViewBag.ErrorMessage
         </div>
     }
@@ -40,7 +40,7 @@
                     
                     @if (ViewContext.ViewData.ModelState["Email"]?.ValidationState == Microsoft.AspNetCore.Mvc.ModelBinding.ModelValidationState.Invalid)
                     {
-                        <div class="errors-box">
+                        <div class="errors-container">
                             <span asp-validation-for="Email" class="errors"></span>
                         </div>
                     }
@@ -54,7 +54,7 @@
 
                     @if (ViewContext.ViewData.ModelState["DisplayName"]?.ValidationState == Microsoft.AspNetCore.Mvc.ModelBinding.ModelValidationState.Invalid)
                     {
-                        <div class="errors-box">
+                        <div class="errors-container">
                             <span asp-validation-for="DisplayName" class="errors"></span>
                         </div>
                     }
@@ -79,7 +79,7 @@
 
                      @if (ViewContext.ViewData.ModelState["OldPassword"]?.ValidationState == Microsoft.AspNetCore.Mvc.ModelBinding.ModelValidationState.Invalid)
                      {
-                         <div class="errors-box">
+                         <div class="errors-container">
                              <span class="errors">@Html.ValidationMessage("OldPassword")</span>
                          </div>
                      }
@@ -92,7 +92,7 @@
 
                      @if (ViewContext.ViewData.ModelState["Password"]?.ValidationState == Microsoft.AspNetCore.Mvc.ModelBinding.ModelValidationState.Invalid)
                      {
-                         <div class="errors-box">
+                         <div class="errors-container">
                              <span class="errors">@Html.ValidationMessage("Password")</span>
                          </div>
                      }
@@ -105,7 +105,7 @@
 
                      @if (ViewContext.ViewData.ModelState["PasswordConfirm"]?.ValidationState == Microsoft.AspNetCore.Mvc.ModelBinding.ModelValidationState.Invalid)
                      {
-                         <div class="errors-box">
+                         <div class="errors-container">
                              <span class="errors">@Html.ValidationMessage("PasswordConfirm")</span>
                          </div>
                      }
@@ -126,7 +126,7 @@
 
                      @if (ViewContext.ViewData.ModelState["Password"]?.ValidationState == Microsoft.AspNetCore.Mvc.ModelBinding.ModelValidationState.Invalid)
                      {
-                         <div class="errors-box">
+                         <div class="errors-container">
                              <span class="errors">@Html.ValidationMessage("Password")</span>
                          </div>
                      }
@@ -139,7 +139,7 @@
 
                      @if (ViewContext.ViewData.ModelState["PasswordConfirm"]?.ValidationState == Microsoft.AspNetCore.Mvc.ModelBinding.ModelValidationState.Invalid)
                      {
-                         <div class="errors-box">
+                         <div class="errors-container">
                              <span class="errors">@Html.ValidationMessage("PasswordConfirm")</span>
                          </div>
                      }
diff --git a/src/Squidex/app/features/administration/pages/users/user-page.component.html b/src/Squidex/app/features/administration/pages/users/user-page.component.html
index ead6b4e2a..3903086a9 100644
--- a/src/Squidex/app/features/administration/pages/users/user-page.component.html
+++ b/src/Squidex/app/features/administration/pages/users/user-page.component.html
@@ -30,7 +30,7 @@
         <div class="panel-main">
             <div class="panel-content panel-content-blank">
                 <div *ngIf="userFormError">
-                    <div class="form-error">
+                    <div class="form-alert form-alert-error">
                         {{userFormError}}
                     </div>
                 </div>
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 b1d8c6dfa..04119980a 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
@@ -10,7 +10,7 @@
             <i class="icon-close"></i>
         </a>
 
-        <div class="panel-row">
+        <div class="panel-header-row">
             <sqx-shortcut keys="ctrl+shift+f" (trigger)="findInput.focus()"></sqx-shortcut>
 
             <div class="search-form">
diff --git a/src/Squidex/app/features/schemas/pages/schemas/schema-form.component.html b/src/Squidex/app/features/schemas/pages/schemas/schema-form.component.html
index a6c60dcb5..ede5c18ed 100644
--- a/src/Squidex/app/features/schemas/pages/schemas/schema-form.component.html
+++ b/src/Squidex/app/features/schemas/pages/schemas/schema-form.component.html
@@ -1,6 +1,6 @@
 <form [formGroup]="createForm" (ngSubmit)="createSchema()">
     <div *ngIf="createFormError">
-        <div class="form-error">
+        <div class="form-alert form-alert-error">
             {{createFormError}}
         </div>
     </div>
diff --git a/src/Squidex/app/framework/angular/control-errors.component.html b/src/Squidex/app/framework/angular/control-errors.component.html
index 351a7e126..1e12c8b89 100644
--- a/src/Squidex/app/framework/angular/control-errors.component.html
+++ b/src/Squidex/app/framework/angular/control-errors.component.html
@@ -1,4 +1,4 @@
- <div class="errors-box" *ngIf="errorMessages" [@fade]>
+ <div class="errors-container" *ngIf="errorMessages" [@fade]>
     <div class="errors">
         <span *ngFor="let message of errorMessages">
             {{message}}
diff --git a/src/Squidex/app/shared/components/app-form.component.html b/src/Squidex/app/shared/components/app-form.component.html
index 2d64ea8f9..6d7418660 100644
--- a/src/Squidex/app/shared/components/app-form.component.html
+++ b/src/Squidex/app/shared/components/app-form.component.html
@@ -1,6 +1,6 @@
 <form [formGroup]="createForm" (ngSubmit)="createApp()">
     <div *ngIf="createFormError">
-        <div class="form-error">
+        <div class="form-alert form-alert-error">
             {{createFormError}}
         </div>
     </div>
diff --git a/src/Squidex/app/theme/_common.scss b/src/Squidex/app/theme/_common.scss
index 2f694035e..6735bb90a 100644
--- a/src/Squidex/app/theme/_common.scss
+++ b/src/Squidex/app/theme/_common.scss
@@ -5,8 +5,8 @@ body {
     // Default body with padding for fixed navbar and sidebar.
     & {
         background: $color-background;
-        padding-top: $size-navbar-height;
         padding-left: 0;
+        padding-top: $size-navbar-height;
     }
 
     // White body for login and profile page.
diff --git a/src/Squidex/app/theme/_forms.scss b/src/Squidex/app/theme/_forms.scss
index 256b49678..ee3b2d12f 100644
--- a/src/Squidex/app/theme/_forms.scss
+++ b/src/Squidex/app/theme/_forms.scss
@@ -1,6 +1,9 @@
 @import '_mixins';
 @import '_vars';
 
+//
+// Support for Angular validation states.
+// 
 .ng-invalid {
     &.ng-dirty {
         & {
@@ -14,11 +17,16 @@
     }
 }
 
+//
+// Error tooltip.
+//
 .errors {
-    &-box {
+    // Container where the tooltip is placed.
+    &-container {
         position: relative;
     }
 
+    // Small triangle under the error tooltip with the border trick.
     &::after {
         @include absolute(auto, auto, -.7rem, .625rem);
         content: '';
@@ -29,6 +37,7 @@
         width: 0;
     }
 
+    // The tooltip rectangle itself.
     & {
         @include absolute(auto, auto, .4rem, 0);
         @include border-radius(2px);
@@ -44,50 +53,67 @@
     }
 }
 
+//
+// Align labels to the right.
+//
 .col-form-label,
 .col-form-checkbox-label {
     text-align: right;
 }
 
-.form-error,
-.form-success {
-    @include border-radius(4px);
-    color: $color-dark-foreground;
-    margin-top: .25rem;
-    margin-bottom: .8rem;
-    font-size: .9rem;
-    font-weight: normal;
-    padding: .5rem;
-}
+//
+// Form alerts.
+//  
+.form-alert {
+    & {
+        @include border-radius(4px);
+        color: $color-dark-foreground;
+        margin-top: .25rem;
+        margin-bottom: .8rem;
+        font-size: .9rem;
+        font-weight: normal;
+        padding: .5rem;
+    }
 
-.form-error {
-    background: $color-theme-error;
-}
+    &-error {
+        background: $color-theme-error;
+    }
 
-.form-success {
-    background: $color-theme-green-dark;
+    &-success {
+        background: $color-theme-green-dark;
+    }
 }
 
+//
+// Form group error.
+//
 .form-group {
+    // Remove the margin after the last form group.
     &:last-child {
         margin-bottom: 0;
     }
 
+    // Remove the margin if the next element is hidden.
     &~.hidden {
         margin-bottom: 0;
     }
 }
 
+//
+// Custom search form.
+//
 .search-form {
     & {
         @include flex-grow(1);
         position: relative;
     }
 
+    // Keep some additional space for the search icon.
     .form-control {
         padding-right: 3rem;
     }
 
+    // Search icon that is placed within the form control.
     .icon-search {
         @include absolute(.625rem, 1rem, auto, auto);
         color: $color-dark2-focus-foreground;
@@ -96,6 +122,7 @@
     }
 }
 
+// Dark form control for the dark panel.
 .form-control-dark {
     & {
         @include transition(background-color .3s ease);
diff --git a/src/Squidex/app/theme/_lists.scss b/src/Squidex/app/theme/_lists.scss
index 0e500a1bc..6626e490d 100644
--- a/src/Squidex/app/theme/_lists.scss
+++ b/src/Squidex/app/theme/_lists.scss
@@ -1,6 +1,9 @@
 @import '_mixins';
 @import '_vars';
 
+//
+// Custom list that can either be used with a table or divs.
+//
 .table-items {
     & {
         margin-bottom: -.25rem;
@@ -8,20 +11,24 @@
 
     th,
     td {
+        // Unified padding for all table cells.
         & {
             padding: 1rem;
         }
 
+        // Additional padding for the first column.
         &:first-child {
             padding-left: 1.25rem;
         }
 
+        // Additional padding for the last. column.
         &:last-child {
             padding-right: 1.25rem;
         }
     }
 
     thead {
+        // Small font size for the table header, content is more important!
         th {
             color: $color-table-header;
             font-size: .8rem;
@@ -29,12 +36,16 @@
             border: 0;
             padding-top: 0;
 
+            // Auto truncate all header elements.
             & > span {
                 @include truncate;
             }
         }
     }
 
+    //
+    // Use the list style with a table.
+    //
     tbody {
         td {
             margin: 0;
@@ -43,6 +54,7 @@
         }
 
         tr {
+            // Each row is white and a has a border.
             & {
                 @include transition(all .2s ease);
                 background: $color-table;
@@ -51,14 +63,16 @@
                 margin-bottom: .5rem;
             }
 
+            // Transitioned hover effect.
             &:hover {
-                background: darken($color-table, 1%);
+                background: darken($color-table, 2%);
             }
 
             &:focus {
                 outline: none;
             }
 
+            // Blue background and white text when active.
             &.active {
                 & {
                     background: $color-theme-blue;
@@ -69,6 +83,7 @@
                 .btn-link {
                     &,
                     &:hover {
+                        // Enforce white color for links.
                         color: $color-dark-foreground;
                     }
                 }
@@ -76,6 +91,9 @@
         }
     }
 
+    //
+    // Use the list style with divs.
+    //
     &-row {
         & {
             padding: 1rem 1.25rem;
@@ -85,6 +103,7 @@
             margin-bottom: .25rem;
         }
 
+        // Summary row for expandable rows.
         &-summary {
             padding: 1rem 1.25rem;
             position: relative;
@@ -99,11 +118,13 @@
             color: $color-empty;
         }
 
+        // Detail row for expandable rows.
         &-details {
             & {
                 position: relative;
             }
 
+            // Caret that is placed next to the expand button.
             &::before {
                 @include caret-top;
                 @include absolute(-.5rem, 5.5rem, auto, auto);
@@ -123,6 +144,7 @@
         }
     }
 
+    // Footer that typically contains an add-item-form.
     &-footer {
         padding: 1rem 1.25rem;
         background: $color-table-footer;
@@ -131,6 +153,7 @@
         margin-top: .8rem;
     }
 
+    // Edit or expand button.
     &-edit-button {
         & {
             color: $color-theme-blue;
@@ -150,16 +173,23 @@
         }
     }
 
+    // Spacer item between two normal items, because table rows cannot have margins.
     .spacer {
         border: 0;
         height: .3rem;
     }
 }
 
+//
+// Table cell with truncated content.
+//
 .table-cell {
     @include truncate;
 }
 
+//
+// Lightweight pagination controls.
+//
 .pagination {
     & {
         margin-top: 1rem;
diff --git a/src/Squidex/app/theme/_panels.scss b/src/Squidex/app/theme/_panels.scss
index ae513eec6..61c79b1b8 100644
--- a/src/Squidex/app/theme/_panels.scss
+++ b/src/Squidex/app/theme/_panels.scss
@@ -1,12 +1,6 @@
 @import '_mixins';
 @import '_vars';
 
-.panel-container {
-    @include fixed($size-navbar-height, 0, 0, $size-sidebar-width);
-    overflow-x: auto;
-    overflow-y: hidden;
-}
-
 @mixin panel-icon {
     color: $color-panel-icon;
     font-size: 1.2rem;
@@ -27,6 +21,18 @@
     }
 }
 
+//
+// Panel container to enforce horizontal stacking and scrolling.
+//
+.panel-container {
+    @include fixed($size-navbar-height, 0, 0, $size-sidebar-width);
+    overflow-x: auto;
+    overflow-y: hidden;
+}
+
+//
+// Panel element.
+//
 .panel {
     & {
         @include flex-box;
@@ -36,6 +42,7 @@
         border-right: 1px solid $color-border;
     }
 
+    // First row of the panel with the header. Fixed height.
     &-header {
         & {
             background: $panel-light-background;
@@ -57,6 +64,7 @@
         }
     }
 
+    // Second row of the panel with the content.
     &-main {
         @include flex-box;
         @include flex-flow(row);
@@ -64,7 +72,9 @@
         overflow: hidden;
     }
 
+    // First column of the main row (second row) with the main content.
     &-content {
+        // Content area is gray by default to contain scrollable content, e.g. lists.
         & {
             @include flex-grow(1);
             border-top: 1px solid $color-border;
@@ -73,11 +83,13 @@
             overflow-y: auto;
         }
 
+        // White content area, e.g. for history panel.
         &-blank {
             background: $panel-light-background;
             border: 0;
         }
 
+        // Scrolling must be enabled optionally to prevent bugs.
         &-scroll {
             overflow-y: scroll;
         }
@@ -93,6 +105,7 @@
         }
     }
 
+    // Second column of the main row (second row) with additional links.
     &-sidebar {
         & {
             background: $panel-light-background;
@@ -122,6 +135,7 @@
         }
     }
 
+    // Panel title.
     &-title {
         @include truncate;
         line-height: 2rem;
@@ -130,14 +144,12 @@
         padding-right: 2rem;
     }
 
-    &-row {
-        margin-top: 1rem;
-    }
-
+    // Keep some space on the right side for the close icon.
     &-title-row {
         padding-right: $panel-sidebar - $panel-padding;
     }
 
+    // Close button to close the panel.
     &-close {
         @include absolute($panel-padding - .2rem, $panel-padding - .8rem, auto, auto);
         @include panel-icon;
@@ -146,6 +158,9 @@
     }
 }
 
+//
+// Dark panel.
+//
 .panel-dark {
     & {
         @include box-shadow(2px, 0, 1px, .3);
@@ -175,7 +190,9 @@
     }
 }
 
-
+//
+// Fixed main sidebar.
+//
 .sidebar {
     & {
         @include fixed($size-navbar-height, auto, 0, 0);
diff --git a/src/Squidex/app/theme/_static.scss b/src/Squidex/app/theme/_static.scss
index ed1742c84..0876f1330 100644
--- a/src/Squidex/app/theme/_static.scss
+++ b/src/Squidex/app/theme/_static.scss
@@ -1,6 +1,9 @@
 @import '_mixins';
 @import '_vars';
 
+//
+// Noscript element with warning, when javascript is disabled.
+//
 noscript {
     display: block;
     color: $color-theme-error;
@@ -9,6 +12,9 @@ noscript {
     margin-bottom: 20px;
 }
 
+//
+// Profile element
+//
 .profile {
     & {
         max-width: 20rem;
@@ -16,6 +22,7 @@ noscript {
         padding: 1rem 2rem;
     }
 
+    // Lightweight, table like headline.
     &-headline {
         & {
             color: $color-empty;
@@ -34,18 +41,11 @@ noscript {
         }
     }
 
+    // Fixed logo on the top left corner of the screen.
     &-logo {
         @include absolute(1rem, auto, auto, 1rem);
     }
 
-    &-title {
-        margin-bottom: 2rem;
-    }
-
-    &-section {
-        margin-top: 3rem;
-    }
-
     &-lg {
         max-width: 40rem;
     }
@@ -68,6 +68,9 @@ noscript {
         margin-top: 2rem;
     }
 
+    //
+    // Separator element to split two sections.
+    //
     &-separator {
         & {
             text-align: center;
@@ -87,6 +90,7 @@ noscript {
         }
     }
 
+    // External button and icon.
     .external {
         &-button {
             text-align: left;
@@ -104,6 +108,9 @@ noscript {
     }
 }
 
+//
+// Splash text for loader.
+//
 .splash {
     &-h1,
     &-text {
@@ -111,6 +118,9 @@ noscript {
     }
 }
 
+//
+// Loader element.
+//
 .loading {
     & {
         text-align: center;