Merge pull request #550 from sbonardt/feature/backend-aligment-refine…

…ments

Overall refinements, dashboard, titles, titleprefix, filters, layout,…

assets/js/app/listing/Components/Table/Row/_Meta.vue

@@ -2,14 +2,14 @@
   <div class="listing__row--item is-meta">
     <ul class="listing__row--list text-nowrap">
       <li>
-        <span class="status mr-2" :class="`is-${record.status}`" :title="record.status"></span
+        <span class="status" :class="`is-${record.status}`" :title="record.status"></span
         >{{ record.publishedAt|date }}
       </li>
       <li v-if="size === 'normal'">
-        <i class="fas fa-user mr-2"></i> {{ record.authorName }}
+        <i class="fas fa-user"></i> {{ record.authorName }}
       </li>
       <li v-if="size === 'normal'">
-        <i class="fas mr-2" :class="record.extras.icon"></i>
+        <i class="fas" :class="record.extras.icon"></i>
         <template v-if="type === 'dashboard'"
           ><a :href="`/bolt/content/${record.contentType}`">
             {{ record.extras.singular_name }}</a

assets/scss/init/_variables.scss

@@ -89,9 +89,11 @@ $grid-breakpoints: (
         xw: 1750px
 );
 
+// sbonardt: if this is for grid-column of main grid layout, that's set back to 1.5rem. Do not change column-gap of main grid as this breaks the whole feel!
 $column-gap: 3rem;
 
 // Modal Dialog spacing
+// sbonardt: if this is such a specific usage thing, why make it a sass variable?
 $modal-dialog-margin-y-sm-up: 4rem;
 
 // This number determines of a button has white or black text (a11y)
@@ -127,6 +129,7 @@ $yiq-contrasted-threshold:  150;
 
 // Variables for admin, toolbar and admin sidebar
 $admin-toolbar-height: 40px;
+$admin-toolbar-height-wide: 50px;
 $admin-sidebar-width: 200px;
 $admin-sidebar-width-wide: 250px;
 $admin-aside-width: 320px;

assets/scss/layout/_admin.scss

@@ -4,7 +4,9 @@
 .admin {
   margin-top: $admin-toolbar-height;
   min-height: inherit;
-
+  @include media-breakpoint-up(md) {
+    margin-top: $admin-toolbar-height-wide;
+  }
   &__toolbar {
     -webkit-backface-visibility: hidden;
     position: fixed;
@@ -13,6 +15,9 @@
     height: $admin-toolbar-height;
     width: 100vw;
     z-index: 5;
+    @include media-breakpoint-up(md) {
+      height: $admin-toolbar-height-wide;
+    }
   }
 
   &__header {
@@ -33,10 +38,17 @@
     left: 0;
     transition: all 200ms;
     width: auto;
+    min-width: 224px;
+    box-shadow: 5px 0px 15px rgba(40, 40, 40, 0.2);
+    @include media-breakpoint-up(md) {
+      top: $admin-toolbar-height-wide;
+    }
     // the sidebar comes into view on larger screens
     @include media-breakpoint-up(lg) {
       left: 0;
       width: $admin-sidebar-width;
+      min-width: auto;
+      box-shadow: 0 0 0 rgba(255,255,255,100%);
     }
     @include media-breakpoint-up(wd) {
       width: $admin-sidebar-width-wide;
@@ -66,17 +78,23 @@
     }
 
     &--container {
-      padding: $spacer;
+      padding: $spacer * 0.625;
+      @include media-breakpoint-up(sm) {
+        padding: $spacer * 1;
+      }
+      @include media-breakpoint-up(md) {
+        padding: $spacer * 1.25;
+      }
       @include media-breakpoint-up(xl) {
         display: grid;
         //grid with autofit to make columns expand full width if other column(s) not present
         grid-template-columns: repeat(12, 1fr);
         grid-template-rows: auto;
-        grid-column-gap: $column-gap;
+        grid-column-gap: 1.5rem;
       }
       @include media-breakpoint-up(wd) {
-        grid-column-gap: $column-gap;
-        padding: $spacer $spacer*2 $spacer $column-gap;
+        grid-column-gap: 1.8125rem;
+        padding: $spacer $spacer*2 $spacer $spacer*1.5;
       }
       &--has-sidebar {
         // grid-template-columns: 3fr 1fr;
@@ -86,7 +104,7 @@
           }
         }
       }
-      * {
+      > * {
         grid-column: 1/-1;
       }
     }

assets/scss/modules/admin/_header.scss

@@ -1,27 +1,55 @@
 //** Admin | Header
 
 .admin__header {
+  @include media-breakpoint-up(sm) {
+    background-color: var(--background);
+    position: sticky;
+    top: $admin-toolbar-height;
+    z-index: 2;
+  }
+  //resets sticky as we don't use it above this breakpoint for now
+  @include media-breakpoint-up(lg) {
+    position: static;
+    top: 0;
+  }
   &--title {
-    font-weight: $font-weight-normal;
+    font-weight: $font-weight-semibold;
+    font-size: 1.825rem;
     font-size: $h1-font-size;
     color: var(--admin-sidebar);
+    margin-top: $spacer;
+    position: relative;
+    @include media-breakpoint-up(sm) {
+      margin-top: $spacer*1.8125;
+    }
     i {
       color: var(--boltblue);
-      font-size: 2.125rem;
+      font-size: 1.5rem;
       top: -3px;
       position: relative;
     }
+    &__prefix {
+      font-weight: $font-weight-normal;
+      font-size: 1rem;
+      display: block;
+    }
   }
 
   &--topbar {
     display: flex;
     justify-content: space-between;
     align-items: center;
     height: 100%;
-    padding: $spacer;
+    padding: $spacer $spacer*0.625 0;
     position: relative;
+    @include media-breakpoint-up(sm) {
+      padding: $spacer*1 $spacer*1 0;
+    }
+    @include media-breakpoint-up(md) {
+      padding: $spacer*1.25 $spacer*1.25 0;
+    }
     @include media-breakpoint-up(wd) {
-      padding: $spacer*3 $column-gap $spacer;
+      padding: $spacer*1.25 $spacer * 1.8125 1rem;
     }
   }
   &--togglebar {
@@ -34,12 +62,18 @@
   position: absolute;
   z-index: 4;
   width: auto;
-  top: 1.625rem;
-  right: 1rem;
+  top: 0.625rem;
+  right: 0.625rem;
   border: 1px solid var(--primary);
-  padding: $spacer*0.4 $spacer;
+  padding: $spacer*0.4 $spacer*1.1;
   color: $white;
   background-color: var(--primary);
+  @include media-breakpoint-up(sm) {
+    right: $spacer * 1;
+  }
+  @include media-breakpoint-up(md) {
+    right: $spacer * 1.25;
+  }
   @include media-breakpoint-up(lg) {
     display: none;
   }

assets/scss/modules/admin/_sidebar.scss

@@ -4,8 +4,10 @@
   background: var(--admin-sidebar);
   color: var(--admin-sidebar-text);
   height: 100%;
-
   padding-top: 1.625rem;
+  @include media-breakpoint-up(lg) {
+    padding-top: 2.25rem;
+  }
   a {
     font-size: 0.9375rem;
   }
@@ -18,6 +20,9 @@
     text-transform: uppercase;
     font-size: $small-font-size;
     letter-spacing: $letter-spacing;
+    @include media-breakpoint-up(lg) {
+      margin-top: $spacer*2.25;
+    }
   }
 
   &--menu {
@@ -104,7 +109,7 @@
 
       // display only on larger screens
       display: none;
-      @media (min-width: 768px) {
+      @include media-breakpoint-up(lg) {
         display: block;
       }
 
@@ -233,4 +238,19 @@
       }
     }
   }
+}
+
+
+.sidebar {
+
+}
+
+.sidebar--sticky {
+  position: sticky;
+  top: 60px;
+  // reset this as sticky does not work together with display block on hover li's of the sidebar menu, above in this file
+  @include media-breakpoint-up(lg) {
+    position: static;
+    top: 0;
+  }
 }

assets/scss/modules/listing/_filter.scss

@@ -3,7 +3,11 @@
 .listing__filter {
   display: flex;
   justify-content: space-between;
-  height: 35px;
+  min-height: 40px;
+  background-color: #fff;
+  padding: 0.35rem 0.625rem 0.35rem 0.5rem;
+  border-radius: $border-radius;
+  overflow: hidden;
 
   &:first-of-type {
     margin-bottom: $spacer;
@@ -42,7 +46,6 @@
     }
 
     .custom-control {
-      margin-left: $spacer*0.5;
       margin-top: $spacer*0.25;
     }
 

assets/scss/modules/listing/row/_checkbox.scss

@@ -25,8 +25,8 @@
 
       &::before,
       &::after {
-        left: $spacer*0.5;
-        top: 0.625rem;
+        left: $spacer*0.45;
+        top: $spacer*0.6;
       }
     }
   }

assets/scss/modules/listing/row/row.scss

@@ -1,6 +1,6 @@
 //** Listing | Row
 
-$checkbox-row-width: 34px;
+$checkbox-row-width: 32px;
 
 .listing__row {
   box-shadow: $card-box-shadow;
@@ -13,7 +13,7 @@ $checkbox-row-width: 34px;
   flex-wrap: wrap;
   //justify-content: space-between;
   position: relative;
-  padding: $spacer*0.5 $spacer*2 $spacer*0.5 $spacer*0.625;
+  padding: $spacer*0.625;
 
   @include media-breakpoint-up(md) {
     flex-wrap: wrap;
@@ -225,9 +225,17 @@ $checkbox-row-width: 34px;
         top: 0.125rem;
         display: inline-block;
         font-size: 0.8125rem;
+        width: 0.75rem;
+        height: 0.75rem;
+        @include media-breakpoint-up(md) {
+          margin-right: 0.35rem;
+        }
       }
       .status {
-        margin-right: 0.25rem;
+        margin-right: 0.3rem;
+        @include media-breakpoint-up(md) {
+          margin-right: 0.625rem;
+        }
       }
     }
   }

templates/_base/layout.html.twig

@@ -59,7 +59,7 @@
 
     <!-- Admin Sidebar -->
     <div class="admin__sidebar">
-        <div id="sidebar" class="sidebar">
+        <div id="sidebar" class="sidebar sidebar--sticky">
             <admin-sidebar
               :menu="{{ admin_menu_json }}"
               :version="'{{ constant('Bolt\\Version::VERSION')|replace({'alpha': 'α', 'beta': 'β'}) }}'"

templates/content/edit.html.twig

@@ -7,10 +7,12 @@
 {% endfor %}
 
 {% block title %}
+    <span class="admin__header--title__prefix">
+        {{ (app.request.get('_route') == 'bolt_content_duplicate') ? 'caption.duplicate'|trans : 'caption.edit'|trans }}
+        {{ record.definition.singular_name }}
+        »
+    </span>
     {{ icon(record) }}
-    {{ (app.request.get('_route') == 'bolt_content_duplicate') ? 'caption.duplicate'|trans : 'caption.edit'|trans }}
-    {{ record.definition.singular_name }}
-    »
     {{ excerpt(record|title, 50)|default('New') }}
 {% endblock %}
 

templates/content/listing.html.twig

@@ -2,7 +2,13 @@
 
 {% block title %}
     {% if contentType %}
-        <i class='fas mr-2 {{contentType.icon_one}}'></i> {{ contentType.name }}
+        <span class="admin__header--title__prefix">
+            {# get this in proper with translations and label resouces #}
+            Overview for
+            »
+        </span>
+        <i class='fas {{contentType.icon_one}}'></i>
+        {{ contentType.name }}
     {% else %}
         {{ 'title.contentlisting'|trans }}
     {% endif %}

templates/pages/about.html.twig

@@ -1,7 +1,10 @@
 {% extends '@bolt/_base/layout.html.twig' %}
 
 {% block title %}
-    {{ 'caption.about_bolt'|trans }} » {{ 'caption.bolt_payoff'|trans }}
+    <span class="admin__header--title__prefix">
+        {{ 'caption.about_bolt'|trans }} »
+    </span> 
+    {{ 'caption.bolt_payoff'|trans }}
 {% endblock title %}
 
 {% block main %}

templates/pages/dashboard.html.twig

@@ -1,7 +1,11 @@
 {% extends '@bolt/_base/layout.html.twig' %}
 
 {% block title %}
-  <i class='fas mr-2 fa-tachometer-alt'></i>{{ 'caption.dashboard'|trans }}
+  <span class="admin__header--title__prefix">
+      Bolt content management »
+  </span>
+  <i class='fas mr-2 fa-tachometer-alt'></i>
+  {{ 'caption.dashboard'|trans }}
 {% endblock title %}
 
 {# This 'topsection' gets output _before_ the main form, allowing `dump()`, without breaking Vue #}