Feature #835 Header and Banner rework using Puzzle Shell

app/assets/stylesheets/styles.scss

@@ -19,8 +19,7 @@ $skills-dark-blue: #1e5a96;
 }
 
 .content {
-  max-width: 80%;
-  flex-grow: 1;
+  width: 80%;
 }
 
 .cursor-pointer {
@@ -58,10 +57,6 @@ $skills-dark-blue: #1e5a96;
   }
 }
 
-pzsh-topbar {
-  background-color: $skills-blue;
-}
-
 .text-gray {
   color: $skills-text-gray;
 }
@@ -298,7 +293,7 @@ pzsh-topbar {
 
 .profile-header-and-tabs {
   position: sticky;
-  top: 80px;
+  top: 98px;
   background-color: white;
   z-index: 2;
 }
@@ -411,3 +406,13 @@ a > img {
 .model-form-container label {
   margin-bottom: 0;
 }
+
+.z-top {
+  z-index: 9999999;
+}
+
+@media (max-width: 800px) {
+  .go-crazy {
+    display: none !important;
+  }
+}

app/javascript/controllers/scroll_controller.js

@@ -3,14 +3,17 @@ import { Controller } from "@hotwired/stimulus"
 export default class extends Controller {
     static targets = ["list", "listItem", "scrollItem", "parent"]
     currentSelectedIndex = -1;
-    offsetY = this.parentTarget.getBoundingClientRect().top + window.scrollY;
+    offsetY = 0;
 
     connect() {
-        this.listTarget.style.top = `${this.offsetY}px`;
-        document.addEventListener("scroll", () => {
-            this.highlight();
-        });
-        this.highlight()
+        addEventListener('turbo:load', (event) => {
+            this.offsetY = this.parentTarget.getBoundingClientRect().top + window.scrollY;
+            this.listTarget.style.top = `${this.offsetY}px`;
+            document.addEventListener("scroll", () => {
+                this.highlight();
+            });
+            this.highlight()
+        })
     }
 
     disconnect() {

app/views/application/_header_tabbar.html.haml

@@ -0,0 +1,7 @@
+%pzsh-nav{slot: "nav"}
+  - tabs.each do |tab|
+    - unless tab[:admin_only] && !admin?
+      %pzsh-nav-item{ href: tab[:path], **(active_path == tab[:path] ? {active: ''} : {})}
+        = tab[:title]
+%div
+  = yield if defined?(do_yield) && do_yield|| false

app/views/layouts/application.html.haml

@@ -9,61 +9,61 @@
     %meta{:content => "width=device-width,initial-scale=1", :name => "viewport"}/
     = csrf_meta_tags
     = csp_meta_tag
+    = stylesheet_link_tag "https://unpkg.com/@puzzleitc/puzzle-shell/dist/bundle.css"
+    = javascript_include_tag "https://unpkg.com/@puzzleitc/puzzle-shell/dist/bundle.js", type: "module"
     = stylesheet_link_tag "application", "data-turbo-track": "reload"
     = javascript_include_tag "application", "data-turbo-track": "reload", type: "module"
-    = javascript_include_tag "application", "https://unpkg.com/@puzzleitc/puzzle-shell/dist/bundle.js", type: "module"
     = favicon_link_tag "favicon.png"
   %body#dropdown-wormhole.d-flex.justify-content-center{"data-controller": "skills-empty-space"}
     %div.content{"data-skills-empty-space-target": "container"}
-      %div.position-sticky.top-0.z-3
-        %div.d-flex.justify-content-between.bg-white.flex-wrap
-          = link_to root_path, class: "text-decoration-none text-dark" do
-            %div.d-flex
-              %div.mb-1.mt-1
-                %img{:src=> "/assets/logo.svg",:height=>"32"}
-              %text.d-flex.align-items-end.ms-2.small= "5.1.0"
-          %ul.navbar.text-gray
-            -# Language selector
-            %li.d-flex.align-items-center.cursor-pointer.border-start.border-end.h-100.ps-2.pe-2{"data-controller": "dropdown"}
+      %div.position-sticky.top-0.z-top
+        %pzsh-topbar{href: people_path}
+          %img{:src=> "/assets/pzsh_skills_logo.svg"}
+          %div.d-flex
+            %div.mb-1.mt-1
+            %text.d-flex.align-items-end.ms-2.small.text-white= "5.1.0"
+        %pzsh-banner
+        %pzsh-menu
+          %div{slot: 'actions'}
+            %pzsh-menu-action.d-flex.cursor-pointer.h-100.ps-2.pe-2.go-crazy{"data-action": "click->skills-empty-space#goCrazy"}
+            %pzsh-menu-action{'data-controller': 'dropdown', href: 'javascript:void(0);'}
+              -# Language selector
               = select :i18n, :language, language_selector, {}, class: "form-control", data:{action: "change->dropdown#navigateOnChange"}
             -# Devise/Mockdata
             - if Rails.env.development?
-              %li.d-flex.align-items-center.cursor-pointer.ps-2.pe-2.border-start.border-end.h-100
-                %span#username
-                  - if devise?
-                    = ti("devise.devise")
-                  - else
-                    = ti("devise.mockdata")
+              %span.text-white
+                - if devise?
+                  = ti("devise.devise")
+                - else
+                  = ti("devise.mockdata")
             -# Admin panel
             - if conf_admin?
-              %li.d-flex.align-items-center.cursor-pointer.ps-2.pe-2.border-start.border-end.h-100
-                = link_to ti("devise.admin_panel"), admin_index_path
-            -# Username 
+              %pzsh-menu-action{href: admin_index_path}
+                %pzsh-icon{name: 'sliders-v-alt'}
+                = ti("devise.admin_panel")
+            -# Help area
+            %pzsh-menu-action{href: 'https://github.com/puzzle/skills/issues'}
+              %pzsh-icon{name: 'question-circle'}
+              Help
+            -# User profile dropdown
             - if auth_user_signed_in?
-              %li.d-flex.align-items-center.cursor-pointer.ps-2.pe-2.border-start.border-end.h-100
-                %div.scale-icon-06(name="user")
-                %span#username
-                  - if find_person_by_auth_user.nil?
-                    = link_to current_auth_user&.name || current_auth_user&.email, people_path(alert: "true")
-                  - else
-                    = link_to find_person_by_auth_user.name, person_path(find_person_by_auth_user)
-                  - if admin?
-                    = ti "devise.admin"
-            -# Login/Logout
-            - if devise?
-              %li.d-flex.align-items-center.cursor-pointer.border-start.border-end.h-100.ps-2.pe-2
-                - if auth_user_signed_in?
-                  =link_to ti("devise.sign_out"), destroy_auth_user_session_path, data: { "turbo-method": :delete}, class: "btn btn-link"
-                - elsif devise_mapping.omniauthable?
-                  =button_to ti("devise.sign_in"), omniauth_authorize_path(resource_name, resource_class.omniauth_providers.first), {data: { "turbo": false, controller: "instant-click" }, class: "btn btn-link"}
-            -# Help
-            %li.d-flex.align-items-center.cursor-pointer.ps-2.pe-2.border-start.h-100
-              %a.d-flex.align-items-center{:href => "https://github.com/puzzle/skills/issues"}
-                %pzsh-icon.scale-icon-08.text-gray(name="question-circle")
-            %li.d-flex.align-items-center.cursor-pointer.border-start.border-end.h-100.ps-2.pe-2{"data-action": "click->skills-empty-space#goCrazy"}
-        %div.puzzle-header
-          %div.d-flex.h-100
-            = render "application/tabbar", tabs: global_tabs, bar_class: "skills-navbar", active_path: global_navbar_path
+              %pzsh-menu-dropdown{href: '#', id: 'username'}
+                %div{slot: 'toggle'}
+                  %pzsh-icon{name: 'user'}
+                  = current_auth_user&.name || current_auth_user&.email
+                  = ti 'devise.admin' if admin?
+                %div{slot: 'items'}
+                  - unless find_person_by_auth_user.nil?
+                    %pzsh-menu-dropdown-item{href: person_path(find_person_by_auth_user)}
+                      %pzsh-icon{name: 'setting'}
+                      = ti('devise.profile')
+                  - if devise?
+                    %pzsh-menu-dropdown-item{href: destroy_auth_user_session_path, data: { "turbo-method": :delete }}
+                      %pzsh-icon{name: 'sign-out-alt'}
+                      = ti("devise.sign_out")
+            - elsif devise? && devise_mapping.omniauthable?
+              =button_to ti("devise.sign_in"), omniauth_authorize_path(resource_name, resource_class.omniauth_providers.first), {data: { "turbo": false, controller: "instant-click" }, class: "btn btn-link"}
+          = render "application/header_tabbar", tabs: global_tabs, bar_class: "skills-navbar", active_path: global_navbar_path
       %div.container-fluid
         %div.row.d-flex.justify-content-center
           %span#flash-messages
@@ -73,4 +73,4 @@
               = yield :actions
           = content_for?(:content) ? yield(:content) : yield
 
-          = turbo_frame_tag "remote_modal", target: "_top"
+          = turbo_frame_tag "remote_modal", target: "_top"

config/locales/de-CH.yml

@@ -207,6 +207,7 @@ de-CH:
       devise: Devise
       mockdata: Mockdata
       no_omniauth_providers: Ä Fähler ist uftretä, es si ke Omniauth-Abieter verfügbar, bitte kontaktieren Sie dr Administrator.
+      profile: Mis Profil
       sign_in: Amäudä
       sign_in_with: Mit %{provider} amäudä
       sign_out: Abmäudä

config/locales/de.yml

@@ -192,6 +192,7 @@ de:
       devise: Devise
       mockdata: Mockdata
       no_omniauth_providers: Ein Fehler ist aufgetreten, es sind keine Omniauth-Anbieter verfügbar, bitte kontaktieren Sie den Administrator.
+      profile: Mein Profil
       sign_in: Anmelden
       sign_in_with: Mit %{provider} anmelden
       sign_out: Abmelden

config/locales/en.yml

@@ -188,6 +188,7 @@ en:
       devise: Devise
       mockdata: Mockdata
       no_omniauth_providers: An error has occurred, there are no Omniauth providers available, please contact the administrator.
+      profile: My Profile
       sign_in: Log in
       sign_in_with: 'Log in with %{provider} '
       sign_out: Log out

config/locales/fr.yml

@@ -188,6 +188,7 @@ fr:
       devise: Devise
       mockdata: Mockdata
       no_omniauth_providers: Une erreur s'est produite, aucun fournisseur Omniauth n'est disponible, veuillez contacter l'administrateur.
+      profile: Mon profil
       sign_in: S'inscrire
       sign_in_with: 'S''inscrire avec %{provider} '
       sign_out: Se désinscrire

config/locales/it.yml

@@ -188,6 +188,7 @@ it:
       devise: Motto
       mockdata: Mockdata
       no_omniauth_providers: Si è verificato un errore, non sono disponibili provider Omniauth, contattare l'amministratore.
+      profile: Il mio profilo
       sign_in: Accedi
       sign_in_with: "%{provider} Accedere con"
       sign_out: Disconnettersi

spec/features/auth_spec.rb

@@ -28,7 +28,7 @@
     end
 
     it 'Username field contains admin tag' do
-      expect(page.find('#username').text).to end_with("(Admin)")
+      expect(page).to have_css('#username', text: /\(Admin\)/)
     end
 
     it 'Admin can create new skill' do

spec/features/edit_people_skills_spec.rb

@@ -12,8 +12,8 @@
       bob = people(:bob)
       visit person_path(bob)
 
-      expect(page).to have_css('.nav-link', text: 'Skills', count: 2)
-      page.all('.nav-link', text: 'Skills')[1].click
+      expect(page).to have_css('.nav-link', text: 'Skills')
+      page.first('.nav-link', text: 'Skills').click
     end
 
     it 'displays people-skills' do

spec/features/routing_spec.rb

@@ -32,7 +32,7 @@
       end
 
       it "Should open profile with correct language and preserve language in cookie" do
-        select 'Italiano', from: "i18n_language"
+        select 'Italiano', from: 'i18n_language'
 
         select_from_slim_select("#person_id_person", bob.name)
         expect(page).to have_text("Dati personali")

spec/features/tabbar_spec.rb

@@ -41,7 +41,7 @@
           title = hash[:title]
 
           it "Should highlight '#{hash[:title]}' tab using click" do
-            click_link(href: eval(path_helper))
+            page.find("pzsh-nav-item[href='#{eval(path_helper)}']").click
             check_highlighted_tab(t title)
           end
 
@@ -52,7 +52,7 @@
         end
 
         def check_highlighted_tab(text)
-          expect(page).to have_selector("div.skills-navbar .btn .nav-link.active", text: text)
+          expect(page).to have_selector("pzsh-nav-item[active]", text: text)
         end
       end
 
@@ -96,7 +96,7 @@ def check_highlighted_tab(text)
           admin_only = hash[:admin_only]
 
           it "should #{'not' if admin_only} display #{title} tab as user" do
-            expect(page.has_selector?("div.skills-navbar .btn", text: (t title), wait: 0.1)).to eql(!admin_only)
+            expect(page.has_selector?("pzsh-nav-item", text: (t title), wait: 0.1)).to eql(!admin_only)
           end
         end