Merged commit (issues #137, #174, #188)

This commit includes
- 8446: worked on changes for issues #137, #174, #188,
  added an indicator for user login, and some minor design changes
- 8554: added back content_block headerButtonGroup due to backwards
  compatibility and modified header.html.ep to fit changes (Basis)
- 8555: corrected color of minimize button for snippets to
  nearly-white, and added media query for border-radius of
  the search bar
- 8556: deleted helper class get_user_name and set user_handle
  instead to get the user name
- 8557: added scroll functionality for navbar: hide on scroll down,
  show on scroll up
- 8558: created burger menu and added responsive styles for navbar,
  optimized element positions in header
- 8559: added and styled registration link to fit in login area,
  changed navbar size and input fields, improved positionings of
  logo and icons, fixed animation of navbar when scrolling on
  small devices

Change-Id: Ie7803aeafb6683d18de51f8c918fb7b0dd308fcc

dev/js/src/init.js

@@ -127,6 +127,32 @@ define([
       }
     );
 
+    // Hide and show navbar on scroll
+    let prevScrollPos = window.scrollY;
+
+    window.onscroll = function() {
+      const navbar = document.querySelector('.navbar');
+      let currentScrollPos = window.scrollY;
+      if (prevScrollPos > currentScrollPos) {
+          navbar.style.top = '0';
+      } else {
+        if (!navbar.classList.contains('show')) {
+          navbar.style.top = '-4rem';
+        }
+      }
+      prevScrollPos = currentScrollPos;
+    }
+
+    // Responsive navbar: hide and show burger menu
+    document.querySelector('.burger-icon').addEventListener('click', function() {
+      const navbar = document.querySelector('.navbar');
+      if (navbar.className === 'navbar') {
+        navbar.className += ' show';
+      } else {
+        navbar.className = 'navbar';
+      }
+    })
+
     /**
      * Replace Virtual Corpus field
      */

dev/scss/base/base.scss

@@ -34,16 +34,17 @@ g > text {
   fill: $dark-grey;
 }
 
-html {
-  height: 100vh;
-}
+// html {
+//   height: 100vh;
+// }
 
 body {
-  position:   relative;
   min-height: 100vh;
   font-size:  12pt;
   margin:     0;
   padding:    0;
+  display:    flex;
+  flex-direction: column;
 }
 
 a {
@@ -99,6 +100,8 @@ blockquote {
   border-left:      5px solid $ids-blue-1;
   background-color: $ids-blue-2;
   color:            $ids-blue-1;
+  -webkit-mix-blend-mode: normal; // Safari
+  mix-blend-mode:   soft-light;
 
   &.bug,
   &.missing,

dev/scss/base/icons.scss

@@ -2,6 +2,7 @@
  * Font Awesome symbol table.
  */
 
+$fa-user:         "\f007";
 $fa-bars:         "\f0c9";
 $fa-extlink:      "\f08e";
 $fa-up:           "\f0d8";

dev/scss/footer/footer.scss

@@ -7,9 +7,9 @@
  */
 footer {
   background-color: $dark-grey;
-  position:         absolute;
-
-  bottom:           0;
+  // position:         absolute;
+  // bottom:           0;
+  margin-top:       auto;
   padding-bottom:   2px;
   font-size:        70%;
   width:            100%;
@@ -80,6 +80,6 @@ footer {
 }
 
 aside.active ~ footer {
-  padding-left: $logo-left-distance;
+  // padding-left: $logo-left-distance;
   transition:  all .3s ease-in-out;
 }

dev/scss/header/header.scss

@@ -15,10 +15,170 @@ header {
   @include box-sizing-box();
   position:         relative;
   background-color: $light-green;
-  padding:          $base-padding 0 0 $base-padding;
+  // padding:          $base-padding 0 0 $base-padding;
+  padding-top:      4rem;
   font-size:        10pt;
   color:            $nearly-white;
 
+  .navbar {
+    width: 100%;
+    height: 4rem;
+    background-color: $dark-green;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: end;
+    // overflow: hidden;
+    position: fixed;
+    top: 0;
+    z-index: 999;
+    transition: top .3s ease-in-out;
+    -o-transition: top .3s ease-in-out;
+    -moz-transition: top .3s ease-in-out;
+    -webkit-transition: top .3s ease-in-out;
+
+    &-group {
+
+      fieldset.fieldset-login {
+        display: flex;
+        flex-direction: column;
+        margin-right: 4rem;
+        padding: 0;
+        min-inline-size: unset;
+        border: unset;
+
+        form.login {
+          display: flex;
+          align-items: center;
+
+          input[type=text],
+          input[type=password] {
+            @include input-field;
+            margin-right: 8px;
+            height: 1.5rem;
+          }
+
+          button.btn-login {
+            // width: 3rem;
+            // height: 3rem;
+            // background-color: $dark-green;
+            background-color: unset;
+            color: $nearly-white;
+            // padding: .75rem 1rem;
+            font-size: 180%;
+            border: none;
+            border-color: unset;
+            border-radius: 0;
+            text-shadow: none;
+            font-weight: normal;
+            top: unset;
+            transition:  all .2s ease-in-out;
+            -o-transition: all .2s ease-in-out;
+            -moz-transition: all .2s ease-in-out;
+            -webkit-transition: all .2s ease-in-out;
+
+            &::after {
+              content: $fa-login;
+            }
+
+            &:hover {
+              // background-color: $middle-green;
+              color: $dark-orange;
+            }
+          }
+        }
+
+        p {
+          margin: 0;
+          font-size: .7rem;
+
+          a {
+            color: $dark-orange;
+
+            &:hover {
+              color: $middle-orange;
+            }
+          }
+        }
+      }
+    }
+
+    .dropdown {
+      display: flex;
+      align-items: center;
+      margin-right: 4rem;
+      position: relative;
+
+      &:hover .dropdown-content {
+        display: block;
+      }
+
+      &:hover .dropdown-btn {
+        background-color: $middle-green;
+      }
+
+      &-btn {
+        height: 4rem;
+        padding: 1rem;
+        font-size: 180% !important;
+        color: $nearly-white;
+        transition:  all .2s ease-in-out;
+        -o-transition: all .2s ease-in-out;
+        -moz-transition: all .2s ease-in-out;
+        -webkit-transition: all .2s ease-in-out;
+        cursor: pointer;
+
+        &.profile::before {
+          @include icon-font;
+          content: $fa-user;
+        }
+
+        h3.user-name {
+          padding-right: 2px;
+          font-size: 85%;
+          display: inline;
+        }
+      }
+
+      &-content {
+        display: none;
+        width: fit-content;
+        margin-top: 4rem;
+        padding: 0;
+        background-color: $middle-green;
+        list-style: none;
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 999;
+      }
+
+      &-item {
+        display: block;
+        padding: .75rem;
+        font-size: 120%;
+        color: $nearly-white;
+        transition:  all .2s ease-in-out;
+        -o-transition: all .2s ease-in-out;
+        -moz-transition: all .2s ease-in-out;
+        -webkit-transition: all .2s ease-in-out;
+
+        &:hover {
+          background-color: $light-green;
+        }
+      }
+    }
+
+    .burger-icon {
+      display: none;
+
+      &::after {
+        @include icon-font;
+        content: $fa-bars;
+      }
+    }
+  }
+
   span.select {
     display:     inline-block;
     cursor:      pointer;
@@ -63,9 +223,12 @@ header {
   form {
     position:     relative;
     display:      block;
-    padding-left: $logo-left-distance;
+    // padding-left: $logo-left-distance;
     min-height:   2.7em;
-    margin:       0px;
+
+    &#searchform {
+      margin: 0 4rem;
+    }
   }
 
   input {
@@ -91,7 +254,8 @@ header {
       top:              0;
       right:            0;
       margin-right:     0;
-      width:            math.div($standard-margin,2);
+      width:            20px;
+      // width:            math.div($standard-margin,2);
       background-color: $dark-green;
       text-align:       center;
       height:           100%;
@@ -117,7 +281,6 @@ header {
       @include icon-font;
     }
 
-    // Icons for buttons
     > a.tutorial::after {
       content: $fa-tutorial;
     }

dev/scss/header/searchbar.scss

@@ -10,6 +10,7 @@
   margin-bottom: 3px;
   width:         100%;
   margin:        0;
+  border-radius: 6px;
 
   &::-webkit-search-cancel-button {
     display: none;
@@ -28,13 +29,14 @@
   position:      relative;
   width:         100%;
   padding:       0;
-  padding-right: $right-distance + $button-width;
+  // padding-right: $right-distance + $button-width;
   margin-top: 7pt;
 
   button[type=submit] {
     position: absolute;
     padding:  0;
-    right:    $right-distance;
+    // right:    $right-distance;
+    right: 0;
 
     &:not(.loading)::after {
       content: $fa-search;

dev/scss/header/vc.scss

@@ -14,6 +14,12 @@ $bracket-size: .4em;
 
   .builder {
     position: initial;
+
+    + .action {
+      .minimize::after {
+        color: $dark-grey !important;
+      }
+    }
   }
 
   .docGroup {

dev/scss/main/intro.scss

@@ -5,6 +5,12 @@
  */
 div.intro {
 
+  &-container {
+    margin-top: 3rem;
+    display: flex;
+    gap: 4rem;
+  }
+
   // Visited links
   a:visited {
     color: $darkest-orange
@@ -20,6 +26,16 @@ div.intro {
   }
 }
 
-aside.active ~ main div.intro {
-  margin-left: $logo-left-distance - $standard-margin + $base-padding;
-}
+@media all and (max-width: 42.5em) {
+  div.intro {
+    &-container {
+      margin-top: 1rem;
+      flex-direction: column;
+      gap: 1rem;
+    }
+  }
+}
+
+// aside.active ~ main div.intro {
+//   margin-left: $logo-left-distance - $standard-margin + $base-padding;
+// }