autonomic-cooperative/hubl
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feature: mobile - header

Browse Source
This commit is contained in:
gaelle morin 2021-01-18 16:21:59 +01:00
parent 8b5caa86cf
commit 922eb0680e
No known key found for this signature in database
GPG Key ID: 028426702B95CF9C
6 changed files with 133 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
package-lock.json generated
View File

@ -1159,9 +1159,9 @@
}
},
"@startinblox/hubl-styling-framework": {
"version": "1.0.46",
"resolved": "https://registry.npmjs.org/@startinblox/hubl-styling-framework/-/hubl-styling-framework-1.0.46.tgz",
"integrity": "sha512-triQEguPDrSSXCBcKwyMTtQRhKz0afkuyHCxQW8Er+4jn+HgMAXMcUcSUZR/hSg6xxxtg7g1YiLOPcDZCZYCjA=="
"version": "1.0.48",
"resolved": "https://registry.npmjs.org/@startinblox/hubl-styling-framework/-/hubl-styling-framework-1.0.48.tgz",
"integrity": "sha512-/bgu6Y2OZvnQhZ485knrgfFZZLm2UyxGcNiIQwtkze96feuJ91h5a0qa6vc6eRmKT4SBQSYHLoDtN4v/2Bcw4Q=="
},
"@types/q": {
"version": "1.5.4",

2
package.json
View File

@ -45,7 +45,7 @@
]
},
"dependencies": {
"@startinblox/hubl-styling-framework": "^1.0.46",
"@startinblox/hubl-styling-framework": "^1.0.48",
"fs-extra": "^9.0.1",
"normalize.css": "^8.0.1",
"parcel-bundler": "^1.12.4",

2
src/index.pug
View File

@ -44,7 +44,7 @@ html(lang="en")
//- include views/partials/notifications.pug
include views/partials/widgets.pug
header#header.segment.sm-full.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.sm-padding-right-xsmall.sm-padding-left-small.shadow-small.text-disable-selection
include views/partials/header.pug
nav#main__menu.scrollbar-nav.segment.bg-color-heading.text-top.lg-quarter.jsLeftMenu

117
src/styles/header/_index.scss
View File

@ -22,21 +22,11 @@ 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 {
@ -257,9 +247,6 @@ header {
}
details {
.icon-arrow-down {
}
&[open] {
summary {
@ -286,9 +273,6 @@ header {
display: none;
}
/* End */
>.labelled-avatar {
padding-top: 11px;
}
}
}
@ -319,4 +303,105 @@ header {
}
}
}
@media (max-width: 768px) {
height: 50px;
.icon-menu {
font-size: 24px;
}
.tag {
align-self: center;
margin: 0;
margin-left: 15px;
}
details.user-menu {
.user-firstname {
display: none;
}
summary {
display: flex;
justify-content: flex-end;
align-items: center;
height: 50px;
padding: 0;
>.labelled-avatar .avatar {
height: 32px;
width: 32px;
}
.sm-arrow-down {
width: 16px;
height: 16px;
background: white;
border-radius: 50%;
text-align: center;
position: absolute;
top: 26px;
right: -1px;
box-shadow: 0 0 4px 0 rgba(46, 63, 87, 0.18);
.icon::before {
font-size: 10px;
}
}
}
&[open] {
width: 100%;
position: absolute;
left: 0;
right: 0;
height: 72px;
summary {
display: flex;
height: 72px;
}
.labelled-avatar {
display: none;
}
.user-firstname {
display: flex;
align-items: center;
padding-right: 15px;
padding-left: 15px;
width: 100%;
[name="segment3"] {
margin-left: auto;
.icon::before {
font-size: 20px;
}
}
}
.panel {
top: 72px;
height: calc(100vh - 72px);
background: white;
>nav {
box-shadow: none;
>ul>li:last-child {
border-bottom: 1px solid #d6cece;
}
}
}
}
}
}
}

2
src/styles/index.scss
View File

@ -175,7 +175,7 @@ solid-display>div {
}
$small: "max-width: 640px";
$small: "max-width: 768px";
.segment {
@media($small) {

43
src/views/partials/header.pug
View File

@ -23,9 +23,10 @@ div
type="text"
)
//- User menu visible on large screens
details.segment.sm-hidden.notLoggedIn
summary.text-right
solid-display.labelled-avatar(
solid-display.labelled-avatar.padding-top-xsmall(
fields='segment1(account.picture), segment2(first_name), segment3(button)'
class-segment1='segment'
class-segment2='segment margin-left-small'
@ -71,17 +72,25 @@ div
data-client-name=`${clientName || "Hubl"}`
)
details.segment.lg-hidden.notLoggedIn
summary.text-right
//- User menu visible on small screens
details.user-menu.segment.lg-hidden.notLoggedIn
summary
solid-display.labelled-avatar(
fields='segment1(account.picture), segment3(button)'
class-segment1='segment'
class-segment3='segment sm-arrow-down'
class-account.picture="avatar"
class-button='icon icon-arrow-down'
widget-account.picture='hubl-user-avatar'
bind-user
)
solid-display.user-firstname(
fields='segment1(account.picture), segment2(first_name), segment3(button)'
class-segment1='segment'
class-segment2='segment margin-left-small'
class-segment3='segment'
class-account.picture="avatar"
class-first_name="text-semibold text-color-heading"
class-button='icon icon-arrow-down'
widget-account.picture='hubl-user-avatar'
bind-user
@ -91,26 +100,26 @@ div
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
solid-link.segment.padding-small.sm-padding-medium.sm-padding-left-xlarge.text-hover(next='profile' data-trans='header.myProfile')
li.segment.padding-small.sm-padding-medium.sm-padding-left-xlarge.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')
li.segment.padding-top-small.sm-padding-top-medium
a.icon.icon-people.icon-third.icon-small.icon-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')
li.segment.padding-top-small.sm-padding-top-medium
a.icon.icon-globe.icon-third.icon-small.icon-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.segment.padding-top-small.sm-padding-top-medium
a.icon.icon-folder-alt.icon-third.icon-small.icon-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')
solid-link.segment.padding-small.sm-padding-medium.sm-padding-left-xlarge.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.segment.padding-small.sm-padding-medium.sm-padding-left-xlarge.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