Implement left-top-top navigation design for the responsive_ux layout

src/api/app/assets/javascripts/webui/responsive_ux.js

@@ -1,7 +1,7 @@
 $(function () {
-  $('[data-toggle="offcanvas"]').on('click', function () {
-    $('a[data-toggle="offcanvas"]').toggleClass('active');
-    $('.offcanvas-collapse').toggleClass('open');
+  $('[data-toggle="places"]').on('click', function () {
+    $('a[data-toggle="places"]').toggleClass('active');
+    $('.places-collapse').toggleClass('open');
     $('.watchlist-collapse').removeClass('open');
     $('.actions-collapse').removeClass('open');
     $('a[data-toggle="watchlist"]').removeClass('active');
@@ -11,18 +11,18 @@ $(function () {
   $('[data-toggle="watchlist"]').on('click', function () {
     $('a[data-toggle="watchlist"]').toggleClass('active');
     $('.watchlist-collapse').toggleClass('open');
-    $('.offcanvas-collapse').removeClass('open');
+    $('.places-collapse').removeClass('open');
     $('.actions-collapse').removeClass('open');
-    $('a[data-toggle="offcanvas"]').removeClass('active');
+    $('a[data-toggle="places"]').removeClass('active');
     $('a[data-toggle="actions"]').removeClass('active');
   });
 
   $('[data-toggle="actions"]').on('click', function () {
     $('a[data-toggle="actions"]').toggleClass('active');
     $('.actions-collapse').toggleClass('open');
-    $('.offcanvas-collapse').removeClass('open');
+    $('.places-collapse').removeClass('open');
     $('.watchlist-collapse').removeClass('open');
-    $('a[data-toggle="offcanvas"]').removeClass('active');
+    $('a[data-toggle="places"]').removeClass('active');
     $('a[data-toggle="watchlist"]').removeClass('active');
   });
 
@@ -35,7 +35,7 @@ $(function () {
     $('#username').focus();
   });
 
-  $('#navigation .nav-item').on('click', function (){
+  $('.actions-collapse .nav-item').on('click', function (){
     $('.actions-collapse').removeClass('open');
     $('a[data-toggle="actions"]').removeClass('active');
   });

src/api/app/assets/stylesheets/webui/notifications_redesign/notifications.scss

@@ -66,7 +66,7 @@ body.notifications-redesign  {
   body.notifications-redesign {
     #notifications-filter-desktop {
       &.show { border-top: 1px solid $gray-300; }
-      &.sticky-top { top: $top-bar-height; }
+      &.sticky-top { top: $top-navigation-height; }
       #filters {
         max-height: 100vw; overflow: auto;
         -webkit-box-shadow: 2px 3px 5px rgba(0,0,0,.2);
@@ -83,4 +83,4 @@ body.notifications-redesign  {
       }
     }
   }
-}
+}

src/api/app/assets/stylesheets/webui/responsive_ux/_build-result.scss → src/api/app/assets/stylesheets/webui/responsive_ux/build-result.scss

@@ -1,5 +1,9 @@
 .toggle-build-info { cursor: pointer; }
-.toggle-build-info-parent{ z-index: 2; }
+.toggle-build-info-parent { z-index: 2; }
+
+.build-results .sticky-top, #log-space-wrapper #log-info.position-sticky {
+  top: $top-navigation-height;
+}
 
 .build-info {
   @extend .d-flex;
@@ -11,7 +15,7 @@
   font-size: 90%;
   transition: max-height .3s 0s ease-in-out, margin-bottom .1s .1s linear;
 
-  .triangle{
+  .triangle {
     position: absolute;
     width: 0;
     height: 0;
@@ -51,3 +55,14 @@
     }
   }
 }
+
+@include media-breakpoint-up(md) {
+  .build-info .triangle.left { left: .25rem; }
+}
+
+@include media-breakpoint-between(sm, md) {
+  .build-info .triangle {
+    &.center { margin-left: calc(38% + .75rem); }
+    &.left { left: .5rem; }
+  }
+}

src/api/app/assets/stylesheets/webui/responsive_ux/grid.scss

@@ -0,0 +1,58 @@
+#grid {
+  min-height: 100vh;
+  display: grid;
+  grid-template-columns: 100%;
+  grid-template-rows: $top-navigation-height auto $bottom-navigation-height;
+  grid-template-areas:
+    'top-navigation'
+    'content'
+    'bottom-navigation';
+
+  #top-navigation-area {
+    grid-area: top-navigation;
+  }
+
+  #content-area {
+    grid-area: content;
+  }
+
+  #bottom-navigation-area {
+    grid-area: bottom-navigation;
+  }
+
+  #left-navigation-area {
+    display: none;
+  }
+}
+
+@include media-breakpoint-up(xl) {
+  #grid {
+    grid-template-columns: $left-navigation-width auto;
+    grid-template-rows: $top-navigation-height auto;
+    grid-template-areas:
+      'top-navigation top-navigation'
+      'left-navigation content';
+
+    #left-navigation-area {
+      grid-area: left-navigation;
+      display: block;
+
+      #left-navigation {
+        position: fixed;
+        top: $top-navigation-height;
+        left: 0;
+
+        & a {
+          color: $gray-300;
+          width: $left-navigation-width;
+          white-space: normal !important;
+          &:hover { color: white; }
+        }
+      }
+    }
+
+    #bottom-navigation-area {
+      display: none;
+    }
+  }
+}

src/api/app/assets/stylesheets/webui/responsive_ux/layout.scss

@@ -0,0 +1,96 @@
+.flash-and-announcement.sticky-top { top: $top-navigation-height + .25rem; }
+
+// Place CodeMirror editor header under the top navigation
+#top_0.sticky-top { top: $top-navigation-height; }
+
+// NAVIGATION
+
+#top-navigation-area {
+  .fixed-top { height: $top-navigation-height; }
+  .toggler {
+    @extend .ml-2;
+    @extend .d-none;
+    @extend .d-xl-flex;
+    @extend .align-items-center;
+    cursor: pointer;
+    &.text-center { min-width: 3.875rem; }
+    &:first-of-type { @extend .ml-3;  }
+  }
+
+  .nav .nav-link {
+    color: $gray-300;
+    &:hover { color: white; }
+  }
+
+  .menu-options { font-size: 1.1rem }
+
+  .navbar-brand img { height: 1.875rem; }
+}
+
+#top-navigation-area, #bottom-navigation-area {
+  a.nav-link {
+    span.d-block { line-height: 1rem; }
+
+    &.active {
+      background-color: darken($dark, 10%);
+      @extend .rounded;
+    }
+  }
+}
+
+// BREADCRUMBS
+
+.breadcrumb {
+  padding-bottom: 0;
+  @extend .mt-2;
+  .breadcrumb-item {
+    display: block;
+    line-height: 1.5rem;
+  }
+  .breadcrumb-item::after {
+    display: inline-block;
+    padding: 0 0.5rem 0 0.25rem;
+    color: #6c757d;
+    content: "/";
+  }
+  .breadcrumb-item:last-child::after { content: ''; }
+  .breadcrumb-item + .breadcrumb-item { padding-left: 0; }
+
+  // FIXME: This could be done overriding the variable $breadcrumb-divider: none;
+  .breadcrumb-item + .breadcrumb-item::before { display: none; }
+}
+
+// LOG IN AND SIGN UP
+
+.access-modal {
+  background-color: #00000080;
+  .close { cursor: pointer; }
+  .login-separator {
+    position: relative;
+    span {
+      position: absolute;
+      top: -.7rem;
+      left: 50%;
+      padding: 0 .5rem;
+      margin-left: -1.5rem;
+    }
+  }
+}
+
+// FOOTER
+
+#footer {
+  strong { color: $gray-700; }
+
+  & a {
+    color: $gray-700;
+    &:hover { color: $gray-900; }
+  }
+
+  li { @extend .my-2; }
+
+  #footer-legal {
+    font-size: .9rem;
+    p { color: $gray-700; }
+  }
+}