feature: header - new classes

src/header.pug

@@ -1,21 +1,18 @@
-.header-left
+.segment.lg-three-quarter.float-left
   .logo
     solid-link(next='dashboard')
       img(src=`${clientLogo || '/images/logo.png'}` style=`max-height:${clientLogoHeight || '32px'}`)
     
-  span.beta-tag(data-trans='header.beta')
+  span.tag.beta.reversed.color-primary(data-trans='header.beta')
 
+.segment.lg-quarter.float-right
+  .segment.lg-auto.float-left
     solid-notifications.notLoggedIn(
       nested-field="inbox"
       bind-user
     )
 
-//- Templates for notifications from circles and from other users
+  .segment.lg-auto.float-right
-include views/notifications/message-circle.pug
-include views/notifications/message-private.pug
-
-include templates/hubl-user-avatar.pug
-
     details#user-controls.notLoggedIn
       summary(tabindex='0' role='button')
         solid-display#user-controls__profile(
@@ -37,7 +34,7 @@ details#user-controls.notLoggedIn
               solid-link(next='about' data-trans='header.about')
           button(role='log out' onclick="document.querySelector('sib-auth').logout();" data-trans='header.logOut')
 
-button.loggedIn(role='log in' onclick="document.querySelector('sib-auth').login();" data-trans='header.logIn')
+  button.loggedIn.segment.float-right(role='log in' onclick="document.querySelector('sib-auth').login();" data-trans='header.logIn')
 
   button.notLoggedIn.mobile-menu-icon.icon-menu#toggleMainMenu
 
@@ -48,3 +45,57 @@ sib-auth(style='display:none!important')
       data-client-name=`${clientName || "Hubl"}`
     )
 
+
+
+
+
+//-.header-left
+  .logo
+    solid-link(next='dashboard')
+      img(src=`${clientLogo || '/images/logo.png'}` style=`max-height:${clientLogoHeight || '32px'}`)
+
+  span.beta-tag(data-trans='header.beta')
+
+//-solid-notifications.notLoggedIn(
+  nested-field="inbox"
+  bind-user
+//-)
+
+//- Templates for notifications from circles and from other users
+include views/notifications/message-circle.pug
+include views/notifications/message-private.pug
+
+include templates/hubl-user-avatar.pug
+
+//-details#user-controls.notLoggedIn
+  summary(tabindex='0' role='button')
+    solid-display#user-controls__profile(
+      fields='first_name, account.picture'
+      class-first_name='flex'
+      class-account.picture='avatar'
+      widget-account.picture='hubl-user-avatar'
+      bind-user
+    )
+  #user-controls__panel
+    nav(role="user's functionalities menu")
+      ul
+        if (endpoints.uploads || (endpoints.get && endpoints.get.uploads)) && (endpoints.skills || (endpoints.get && endpoints.get.skills)) && (endpoints.users || (endpoints.get && endpoints.get.users))
+          li
+            solid-link(next='profile' data-trans='header.myProfile')
+        li
+          solid-link(next='admin' data-trans='header.admin')
+        li
+          solid-link(next='about' data-trans='header.about')
+      button(role='log out' onclick="document.querySelector('sib-auth').logout();" data-trans='header.logOut')
+
+//-button.loggedIn(role='log in' onclick="document.querySelector('sib-auth').login();" data-trans='header.logIn')
+
+//-button.notLoggedIn.mobile-menu-icon.icon-menu#toggleMainMenu
+
+//-sib-auth(style='display:none!important')
+  sib-auth-provider(
+    data-authority=`${authority}`
+    data-id=`${authorityName || "authority"}`
+    data-client-name=`${clientName || "Hubl"}`
+  )
+

src/index.pug

@@ -16,9 +16,10 @@ html(lang="en")
 
   body
 
-    .wrapper
+    //- header#header.header.is-spaced(role='banner')
+      include header.pug
 
-      header#header.header.is-spaced(role='banner')
+    header#header.segment.shadow
       include header.pug
 
     nav#main__menu.left-menu.jsLeftMenu

src/styles/base/header.scss

@@ -1,4 +1,11 @@
 #header {
+  height: 72px;
+  z-index: 999;
+  /*box-shadow: 0 2px 4px rgba(0, 0, 0, 0.09);*/ /*mockup value*/
+  padding: 0 25px;
+}
+
+/*#header {
   max-height: 50px;
   height: 50px;
   display: flex;
@@ -60,10 +67,10 @@
     @include breakpoint(lg) {
       margin-left: 0;
     }
-  }
+  }*/
 
   /* Fix: to remove the place taken by these elements */
-  solid-widget[name='hubl-user-avatar'] {
+  /*solid-widget[name='hubl-user-avatar'] {
     display: contents;
   }
 
@@ -71,17 +78,12 @@
   solid-notifications-template[data-rdf-type='foaf:user'] {
     position: absolute;
   }
-}
+}*/
   
 /* General styling for both notification and user's panel */
 details {
-  margin-right: 0;
   position: relative;
 
-  @include breakpoint(lg) {
-    margin-right: 2.5rem;
-  }
-
   summary {
 
     &::-moz-list-bullet {
@@ -298,10 +300,6 @@ solid-notifications {
     cursor: pointer;
     display: block; /* To remove the disclosure triangle on Firefox v.>=69 */
     
-    @include breakpoint(lg) {
-      padding: 18px;
-    }
-    
     &:focus {
       background-color: transparent;
       color: var(--color-user-panel-header-text-open);

src/styles/base/main.scss

@@ -22,6 +22,119 @@
   }
 }
 
+.segment {
+  background: white;
+  position: relative;
+
+  .content-vertically-centered {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+  &.lg-{
+    &hidden {
+      display: none;
+    }
+    &quarter {
+      width: 25%;
+    }
+    &third {
+      width: 33.333%;
+    }
+    &half {
+      width: 50%;
+    }
+    &two-third {
+      width: 66.666%;
+    }
+    &three-quarter {
+      width: 75%;
+    }
+    &full {
+      width: 100%;
+    }
+    &auto {
+      width: auto;
+    }
+  }
+  &.float-left {
+    float: left;
+  }
+  &.float-right {
+    float: right;
+  }
+}
+
+.shadow {
+  box-shadow: 0 0 5px 0 rgba(133, 140, 148, 0.09);
+}
+
+.logo {
+  height: 34px;
+  width: 220px;
+  display: inline-block;
+
+  >solid-link {
+    cursor: pointer;
+    background: none;
+    display: inline-block;
+    padding: 0;
+    border: none;
+
+    >img {
+      max-height: 100%;
+      max-width: 100%;
+    }
+  }
+}
+
+.tag {
+  height: 17px;
+  font-size: 12px;
+  letter-spacing: 0.24px;
+  line-height: 17px;
+  border: 1px solid var(--color-primary);
+  border-radius: 3px;
+  padding: 4px 11px;
+  
+  &.beta {
+    font-size: 14px;
+    font-weight: 600;
+  }
+  &.color-primary {
+    background: white;
+    border: 1px solid var(--color-primary);
+    color: var(--color-primary);
+  }
+  &.color-secondary {
+    background: white;
+    border: 1px solid var(--color-secondary);
+    color: var(--color-secondary);
+  }
+  &.color-third {
+    background: white;
+    border: 1px solid var(--color-third);
+    color: var(--color-third);
+  }
+  &.reversed {
+    &.color-primary {
+      background: var(--color-primary);
+      border: 1px solid var(--color-primary);
+      color: white;
+    }
+    &.color-secondary {
+      background: var(--color-secondary);
+      border: 1px solid var(--color-secondary);
+      color: white;
+    }
+    &.color-third {
+      background: var(--color-third);
+      border: 1px solid var(--color-third);
+      color: white;
+    }
+  }
+}
+
 /* Fix for solid-dashboard fixture */
 solid-dashboard section {
   padding: 1rem !important;
@@ -35,7 +148,7 @@ solid-dashboard section {
   }
 }
 
-.wrapper {
+/*.wrapper {
   display: grid;
   grid-template-areas: 
     "header"
@@ -47,11 +160,11 @@ solid-dashboard section {
       "header header"
       "leftmenu content";
   }
-}
+}*/
 
-.header {
+/*.header {
   grid-area: header;
-}
+}*/
 
 .left-menu {
   grid-area: leftmenu;