feature: mobile header wip
This commit is contained in:
gaelle morin
parent
01fa6ff5a0
commit
8373a42d04
|
|
@ -44,10 +44,10 @@ html(lang="en")
|
|||
//- include views/partials/notifications.pug
|
||||
include views/partials/widgets.pug
|
||||
|
||||
header#header.segment.lg-full.padding-left-large.padding-right-large.shadow-small.text-disable-selection
|
||||
header#header.segment.sm-full.lg-full.padding-left-large.padding-right-large.shadow-small.text-disable-selection
|
||||
include views/partials/header.pug
|
||||
|
||||
nav#main__menu.scrollbar-nav.segment.bg-color-heading.text-top.lg-quarter
|
||||
nav#main__menu.scrollbar-nav.segment.bg-color-heading.text-top.lg-quarter.jsLeftMenu
|
||||
include views/partials/menu-left.pug
|
||||
|
||||
main#content.segment.lg-three-quarter.text-top.notLoggedIn
|
||||
|
|
|
|||
|
|
@ -22,11 +22,21 @@ header {
|
|||
}
|
||||
}
|
||||
|
||||
.icon-menu {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.tag {
|
||||
align-self: flex-start;
|
||||
padding: 4px 15px;
|
||||
margin-top: 16px;
|
||||
margin-left: 60px;
|
||||
|
||||
@media (max-width: 640px) {
|
||||
align-self: center;
|
||||
margin-top: 0;
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
solid-notifications {
|
||||
|
|
@ -247,6 +257,10 @@ header {
|
|||
}
|
||||
|
||||
details {
|
||||
.icon-arrow-down {
|
||||
|
||||
}
|
||||
|
||||
&[open] {
|
||||
summary {
|
||||
background-color: var(--color-heading);
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
nav {
|
||||
nav#main__menu {
|
||||
height: calc(100vh - 72px);
|
||||
|
||||
.unread {
|
||||
|
|
@ -78,5 +78,28 @@ nav {
|
|||
padding-left: 20px;
|
||||
width: 87%;
|
||||
}
|
||||
|
||||
&.jsLeftMenu {
|
||||
display: none;
|
||||
|
||||
@media(min-width: 1024px) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&.jsLeftMenu[open] {
|
||||
display: block;
|
||||
bottom: 0;
|
||||
box-shadow: 0 2px 8px 0 rgba(65, 69, 73, 0.5);
|
||||
width: 80vw;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 0;
|
||||
z-index: 1000;
|
||||
|
||||
@media(min-width: 1024px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
|
||||
div
|
||||
|
||||
solid-link(next='dashboard')
|
||||
solid-link.segment.sm-hidden(next='dashboard')
|
||||
img.logo(src=`${clientLogo || '/images/logo.webp'}`)
|
||||
button.notLoggedIn.segment.lg-hidden.icon-menu#toggleMainMenu
|
||||
|
||||
|
||||
span.tag.reversed.text-semibold(data-trans='header.beta')
|
||||
|
|
@ -22,7 +23,7 @@ div
|
|||
type="text"
|
||||
)
|
||||
|
||||
details.segment.notLoggedIn
|
||||
details.segment.sm-hidden.notLoggedIn
|
||||
summary.text-right
|
||||
solid-display.labelled-avatar(
|
||||
fields='segment1(account.picture), segment2(first_name), segment3(button)'
|
||||
|
|
@ -70,3 +71,54 @@ div
|
|||
data-client-name=`${clientName || "Hubl"}`
|
||||
)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
details.segment.lg-hidden.notLoggedIn
|
||||
summary.text-right
|
||||
solid-display.labelled-avatar(
|
||||
fields='segment1(account.picture), segment3(button)'
|
||||
class-segment1='segment'
|
||||
class-segment3='segment'
|
||||
class-account.picture="avatar"
|
||||
class-button='icon icon-arrow-down'
|
||||
widget-account.picture='hubl-user-avatar'
|
||||
bind-user
|
||||
)
|
||||
div.panel
|
||||
nav.bg-color-white.text-semibold.text-color-heading
|
||||
ul
|
||||
if (endpoints.uploads || (endpoints.get && endpoints.get.uploads)) && (endpoints.skills || (endpoints.get && endpoints.get.skills)) && (endpoints.users || (endpoints.get && endpoints.get.users))
|
||||
li.border-bottom.border-color-grey
|
||||
solid-link.segment.padding-small.text-hover(next='profile' data-trans='header.myProfile')
|
||||
li.segment.padding-small.border-bottom.border-color-grey
|
||||
div(data-trans='header.admin')
|
||||
ul.text-normal
|
||||
if (endpoints.users || (endpoints.get && endpoints.get.users))
|
||||
solid-route.text-hover(name='admin-communities')
|
||||
li.segment.padding-top-small
|
||||
a.icon.icon-people.icon-third.icon-small.margin-right-xsmall(data-trans='admin.menuRight.community')
|
||||
if endpoints.circles || (endpoints.get && endpoints.get.circles)
|
||||
solid-route.text-hover(name='admin-circles')
|
||||
li.segment.padding-top-small
|
||||
a.icon.icon-globe.icon-third.icon-small.margin-right-xsmall(data-trans='admin.menuRight.circles')
|
||||
if endpoints.projects || (endpoints.get && endpoints.get.projects)
|
||||
solid-route.text-hover(name='admin-projects')
|
||||
li.segment.padding-top-small
|
||||
a.icon.icon-folder-alt.icon-third.icon-small.margin-right-xsmall(data-trans='admin.menuRight.projects')
|
||||
li.border-bottom.border-color-grey
|
||||
solid-link.segment.padding-small.text-hover(next='about' data-trans='header.about')
|
||||
li
|
||||
button.segment.padding-small.text-hover.text-bold.text-color-heading(role='log out' onclick="document.querySelector('sib-auth').logout();" data-trans='header.logOut')
|
||||
|
||||
button.notLoggedIn.segment.lg-hidden.icon-menu#toggleMainMenu
|
||||
|
||||
sib-auth(style='display:none!important', auto-login)
|
||||
sib-auth-provider(
|
||||
data-authority=`${authority}`
|
||||
data-id=`${authorityName || "authority"}`
|
||||
data-client-name=`${clientName || "Hubl"}`
|
||||
)
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue