Skip to content

Commit d1a9302

Browse files
Implement puzzle shell with header and new footer with some navigation items
1 parent 2920e00 commit d1a9302

File tree

11 files changed

+88
-60
lines changed

11 files changed

+88
-60
lines changed
Lines changed: 6 additions & 0 deletions
Loading

app/assets/stylesheets/styles.scss

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,7 @@ $skills-dark-blue: #1e5a96;
1919
}
2020

2121
.content {
22-
max-width: 80%;
23-
flex-grow: 1;
22+
width: 80%;
2423
}
2524

2625
.cursor-pointer {
@@ -58,10 +57,6 @@ $skills-dark-blue: #1e5a96;
5857
}
5958
}
6059

61-
pzsh-topbar {
62-
background-color: $skills-blue;
63-
}
64-
6560
.text-gray {
6661
color: $skills-text-gray;
6762
}
@@ -298,7 +293,7 @@ pzsh-topbar {
298293

299294
.profile-header-and-tabs {
300295
position: sticky;
301-
top: 80px;
296+
top: 98px;
302297
background-color: white;
303298
z-index: 2;
304299
}
@@ -411,3 +406,13 @@ a > img {
411406
.model-form-container label {
412407
margin-bottom: 0;
413408
}
409+
410+
.z-top {
411+
z-index: 9999999;
412+
}
413+
414+
@media (max-width: 800px) {
415+
.go-crazy {
416+
display: none !important;
417+
}
418+
}
Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
%pzsh-nav{slot: "nav"}
2+
- tabs.each do |tab|
3+
- unless tab[:admin_only] && !admin?
4+
%pzsh-nav-item{ href: tab[:path], **(active_path == tab[:path] ? {active: ''} : {})}
5+
= tab[:title]
6+
%div
7+
= yield if defined?(do_yield) && do_yield|| false

app/views/layouts/application.html.haml

Lines changed: 53 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -9,62 +9,54 @@
99
%meta{:content => "width=device-width,initial-scale=1", :name => "viewport"}/
1010
= csrf_meta_tags
1111
= csp_meta_tag
12+
= stylesheet_link_tag "https://unpkg.com/@puzzleitc/puzzle-shell/dist/bundle.css"
13+
= javascript_include_tag "https://unpkg.com/@puzzleitc/puzzle-shell/dist/bundle.js", type: "module"
1214
= stylesheet_link_tag "application", "data-turbo-track": "reload"
1315
= javascript_include_tag "application", "data-turbo-track": "reload", type: "module"
14-
= javascript_include_tag "application", "https://unpkg.com/@puzzleitc/puzzle-shell/dist/bundle.js", type: "module"
1516
= favicon_link_tag "favicon.png"
17+
1618
%body#dropdown-wormhole.d-flex.justify-content-center{"data-controller": "skills-empty-space"}
1719
%div.content{"data-skills-empty-space-target": "container"}
18-
%div.position-sticky.top-0.z-3
19-
%div.d-flex.justify-content-between.bg-white.flex-wrap
20-
= link_to root_path, class: "text-decoration-none text-dark" do
21-
%div.d-flex
22-
%div.mb-1.mt-1
23-
%img{:src=> "/assets/logo.svg",:height=>"32"}
24-
%text.d-flex.align-items-end.ms-2.small= "5.1.0"
25-
%ul.navbar.text-gray
20+
%div.position-sticky.top-0.z-top
21+
%pzsh-topbar{href: people_path}
22+
%img{:src=> "/assets/pzsh_skills_logo.svg"}
23+
%pzsh-banner
24+
%pzsh-menu
25+
%div{slot: 'actions'}
26+
%pzsh-menu-action.d-flex.cursor-pointer.h-100.ps-2.pe-2.go-crazy{"data-action": "click->skills-empty-space#goCrazy"}
2627
-# Language selector
27-
%li.d-flex.align-items-center.cursor-pointer.border-start.border-end.h-100.ps-2.pe-2{"data-controller": "dropdown"}
28-
= select :i18n, :language, language_selector, {}, class: "form-control", data:{action: "change->dropdown#navigateOnChange"}
29-
-# Devise/Mockdata
30-
- if Rails.env.development?
31-
%li.d-flex.align-items-center.cursor-pointer.ps-2.pe-2.border-start.border-end.h-100
32-
%span#username
33-
- if devise?
34-
= ti("devise.devise")
35-
- else
36-
= ti("devise.mockdata")
28+
%pzsh-menu-action{href: 'javascript:void(0);', 'data-controller': 'dropdown'}
29+
= select :i18n, :language, language_selector, {}, class: "form-control", data: {action: "change->dropdown#navigateOnChange"}
3730
-# Admin panel
3831
- if conf_admin?
39-
%li.d-flex.align-items-center.cursor-pointer.ps-2.pe-2.border-start.border-end.h-100
40-
= link_to ti("devise.admin_panel"), admin_index_path
41-
-# Username
32+
%pzsh-menu-action{href: admin_index_path}
33+
%pzsh-icon{name: 'sliders-v-alt'}
34+
= ti("devise.admin_panel")
35+
-# Help area
36+
%pzsh-menu-action{href: 'https://github.com/puzzle/skills/issues'}
37+
%pzsh-icon{name: 'question-circle'}
38+
Help
39+
-# User profile dropdown
4240
- if auth_user_signed_in?
43-
%li.d-flex.align-items-center.cursor-pointer.ps-2.pe-2.border-start.border-end.h-100
44-
%div.scale-icon-06(name="user")
45-
%span#username
46-
- if find_person_by_auth_user.nil?
47-
= link_to current_auth_user&.name || current_auth_user&.email, people_path(alert: "true")
48-
- else
49-
= link_to find_person_by_auth_user.name, person_path(find_person_by_auth_user)
50-
- if admin?
51-
= ti "devise.admin"
52-
-# Login/Logout
53-
- if devise?
54-
%li.d-flex.align-items-center.cursor-pointer.border-start.border-end.h-100.ps-2.pe-2
55-
- if auth_user_signed_in?
56-
=link_to ti("devise.sign_out"), destroy_auth_user_session_path, data: { "turbo-method": :delete}, class: "btn btn-link"
57-
- elsif devise_mapping.omniauthable?
58-
=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"}
59-
-# Help
60-
%li.d-flex.align-items-center.cursor-pointer.ps-2.pe-2.border-start.h-100
61-
%a.d-flex.align-items-center{:href => "https://github.com/puzzle/skills/issues"}
62-
%pzsh-icon.scale-icon-08.text-gray(name="question-circle")
63-
%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"}
64-
%div.puzzle-header
65-
%div.d-flex.h-100
66-
= render "application/tabbar", tabs: global_tabs, bar_class: "skills-navbar", active_path: global_navbar_path
67-
%div.container-fluid
41+
%pzsh-menu-dropdown{href: '#'}
42+
%div{slot: 'toggle'}
43+
%pzsh-icon{name: 'user'}
44+
%span#username
45+
= current_auth_user&.name || current_auth_user&.email
46+
= ti 'devise.admin' if admin?
47+
%div{slot: 'items'}
48+
- unless find_person_by_auth_user.nil?
49+
%pzsh-menu-dropdown-item{href: person_path(find_person_by_auth_user)}
50+
%pzsh-icon{name: 'setting'}
51+
= ti('devise.profile')
52+
- if devise?
53+
%pzsh-menu-dropdown-item{href: destroy_auth_user_session_path, data: { "turbo-method": :delete }}
54+
%pzsh-icon{name: 'sign-out-alt'}
55+
= ti("devise.sign_out")
56+
- elsif devise? && devise_mapping.omniauthable?
57+
=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"}
58+
= render "application/header_tabbar", tabs: global_tabs, bar_class: "skills-navbar", active_path: global_navbar_path
59+
%div.container-fluid.min-vh-100
6860
%div.row.d-flex.justify-content-center
6961
%span#flash-messages
7062
= render partial: 'layouts/flash', collection: [:notice, :alert], as: :level
@@ -73,4 +65,17 @@
7365
= yield :actions
7466
= content_for?(:content) ? yield(:content) : yield
7567
76-
= turbo_frame_tag "remote_modal", target: "_top"
68+
= turbo_frame_tag "remote_modal", target: "_top"
69+
%pzsh-footer
70+
%div{slot: 'start'}
71+
%pzsh-footer-link{href: 'https://github.com/puzzle/skills'}
72+
%pzsh-icon{name: 'github'}
73+
Contribute on GitHub
74+
%div{slot: 'center'}
75+
- if Rails.env.development?
76+
- if devise?
77+
= ti("devise.devise")
78+
- else
79+
= ti("devise.mockdata")
80+
%div{slot: 'end'}
81+
%pzsh-footer-link{href: 'https://github.com/puzzle/skills/releases'} Version 5.1.0

config/locales/de-CH.yml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -205,6 +205,7 @@ de-CH:
205205
devise: Devise
206206
mockdata: Mockdata
207207
no_omniauth_providers: Ä Fähler ist uftretä, es si ke Omniauth-Abieter verfügbar, bitte kontaktieren Sie dr Administrator.
208+
profile: Mis Profil
208209
sign_in: Amäudä
209210
sign_in_with: Mit %{provider} amäudä
210211
sign_out: Abmäudä

config/locales/de.yml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -190,6 +190,7 @@ de:
190190
devise: Devise
191191
mockdata: Mockdata
192192
no_omniauth_providers: Ein Fehler ist aufgetreten, es sind keine Omniauth-Anbieter verfügbar, bitte kontaktieren Sie den Administrator.
193+
profile: Mein Profil
193194
sign_in: Anmelden
194195
sign_in_with: Mit %{provider} anmelden
195196
sign_out: Abmelden

config/locales/en.yml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -186,6 +186,7 @@ en:
186186
devise: Devise
187187
mockdata: Mockdata
188188
no_omniauth_providers: An error has occurred, there are no Omniauth providers available, please contact the administrator.
189+
profile: My Profile
189190
sign_in: Log in
190191
sign_in_with: 'Log in with %{provider} '
191192
sign_out: Log out

config/locales/fr.yml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -186,6 +186,7 @@ fr:
186186
devise: Devise
187187
mockdata: Mockdata
188188
no_omniauth_providers: Une erreur s'est produite, aucun fournisseur Omniauth n'est disponible, veuillez contacter l'administrateur.
189+
profile: Mon profil
189190
sign_in: S'inscrire
190191
sign_in_with: 'S''inscrire avec %{provider} '
191192
sign_out: Se désinscrire

config/locales/it.yml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -186,6 +186,7 @@ it:
186186
devise: Motto
187187
mockdata: Mockdata
188188
no_omniauth_providers: Si è verificato un errore, non sono disponibili provider Omniauth, contattare l'amministratore.
189+
profile: Il mio profilo
189190
sign_in: Accedi
190191
sign_in_with: "%{provider} Accedere con"
191192
sign_out: Disconnettersi

spec/features/edit_people_skills_spec.rb

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,8 @@
1212
bob = people(:bob)
1313
visit person_path(bob)
1414

15-
expect(page).to have_css('.nav-link', text: 'Skills', count: 2)
16-
page.all('.nav-link', text: 'Skills')[1].click
15+
expect(page).to have_css('.nav-link', text: 'Skills')
16+
page.first('.nav-link', text: 'Skills').click
1717
end
1818

1919
it 'displays people-skills' do

0 commit comments

Comments
 (0)