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

feature: mobile - about

Browse Source
This commit is contained in:
gaelle morin 2021-01-18 18:33:34 +01:00
parent 922eb0680e
commit ba9fe94ca7
No known key found for this signature in database
GPG Key ID: 028426702B95CF9C
3 changed files with 45 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/styles/left-nav/_index.scss
View File

@ -54,14 +54,15 @@ nav#main__menu {
.ellipsis-content, .ellipsis-content,
.ellipsis-content>div { .ellipsis-content>div {
@media(min-width: 1024px) {
display: block; display: block;
line-height: 19px; line-height: 19px;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
width: 100%; width: 100%;
@media (max-width: 768px) {
display: block;
} }
} }
} }
@ -88,17 +89,17 @@ nav#main__menu {
} }
&.jsLeftMenu[open] { &.jsLeftMenu[open] {
display: none;
@media (max-width: 768px) {
display: block; display: block;
bottom: 0; bottom: 0;
box-shadow: 0 2px 8px 0 rgba(65, 69, 73, 0.5); box-shadow: 0 2px 8px 0 rgba(65, 69, 73, 0.5);
width: 80vw; width: 100%;
position: fixed; position: fixed;
right: 0; right: 0;
top: 0; top: 50px;
z-index: 1000; z-index: 1000;
@media(min-width: 1024px) {
display: none;
} }
} }
} }

10
src/views/page-about.pug
View File

@ -1,16 +1,16 @@
div.segment.padding-top-small.padding-right-large.padding-bottom-small.padding-left-large div.segment.padding-top-small.padding-right-large.padding-bottom-small.padding-left-large.sm-padding-top-xxsmall.sm-padding-left-xsmall.sm-padding-right-xsmall.sm-padding-bottom-medium.whitespace-normal
h2.text-xlarge.text-color-heading.text-uppercase(data-trans='about.title') h2.text-xlarge.text-color-heading.text-uppercase(data-trans='about.title')
div.segment.lg-two-third.margin-top-small.padding-right-xlarge div.segment.lg-two-third.sm-full.margin-top-small.sm-margin-top-xxsmall.padding-right-xlarge.sm-padding-none
div.segment.whitespace-normal.shadow.padding-top-xlarge.padding-right-xxlarge.padding-bottom-xxlarge.padding-left-xxlarge.text-center div.segment.whitespace-normal.shadow.padding-top-xlarge.padding-right-xxlarge.padding-bottom-xxlarge.padding-left-xxlarge.sm-padding-medium.sm-padding-top-xxsmall.sm-padding-bottom-xlarge.text-center
h3.text-color-heading.text-semibold.text-uppercase(data-trans='about.card1.subTitle') h3.text-color-heading.text-semibold.text-uppercase(data-trans='about.card1.subTitle')
div div
p.segment.whitespace-normal.text-large(data-trans='about.card1.paragraph1') p.segment.whitespace-normal.text-large(data-trans='about.card1.paragraph1')
p.segment.whitespace-normal.text-large(data-trans='about.card1.paragraph2') p.segment.whitespace-normal.text-large(data-trans='about.card1.paragraph2')
a.link.text-xlarge(href="https://startinblox.com/fr/" target="_blank") https://startinblox.com/fr/ a.link.text-xlarge(href="https://startinblox.com/fr/" target="_blank") https://startinblox.com/fr/
div.segment.lg-third.margin-top-small.text-top div.segment.lg-third.sm-full.margin-top-small.text-top
div.segment.whitespace-normal.shadow.padding-top-xlarge.padding-right-xxlarge.padding-bottom-xxlarge.padding-left-xxlarge.text-center div.segment.sm-full.whitespace-normal.shadow.padding-top-xlarge.padding-right-xxlarge.padding-bottom-xxlarge.padding-left-xxlarge.sm-padding-medium.sm-padding-bottom-xlarge.text-center
div.segment.margin-top-small div.segment.margin-top-small
div.segment.center.icon.icon-xlarge.rounded-third.rounded.rounded-large.icon-envelope.icon-secondary div.segment.center.icon.icon-xlarge.rounded-third.rounded.rounded-large.icon-envelope.icon-secondary
h3.text-color-heading.text-semibold.text-uppercase.text-medium(data-trans='about.card2.subTitle') h3.text-color-heading.text-semibold.text-uppercase.text-medium(data-trans='about.card2.subTitle')

46
src/views/partials/menu-left.pug
View File

@ -31,16 +31,16 @@ solid-widget(name='hubl-create')
br br
span(data-trans="menuLeft.emptyCircleProject.createNew") span(data-trans="menuLeft.emptyCircleProject.createNew")
span   span  
solid-link.segment.lg-full(next="${value == 'projet' ? 'admin-projects' : 'admin-circles'}", data-trans="menuLeft.emptyCircleProject.adminPanel") solid-link.segment.lg-full.sm-full(next="${value == 'projet' ? 'admin-projects' : 'admin-circles'}", data-trans="menuLeft.emptyCircleProject.adminPanel")
solid-widget(name='hubl-menu-fix-url-contact') solid-widget(name='hubl-menu-fix-url-contact')
template template
solid-link.segment.lg-full(data-src="${value}" next="messages") solid-link.segment.lg-full.sm-full(data-src="${value}" next="messages")
solid-display.segment.lg-full.text-color-white.heading-active.bg-color-heading.hover.active( solid-display.segment.lg-full.sm-full.text-color-white.heading-active.bg-color-heading.hover.active(
data-src='${value}' data-src='${value}'
fields='segment(message(name, chatProfile.jabberID), badge)' fields='segment(message(name, chatProfile.jabberID), badge)'
class-segment="segment lg-full padding-top-xxsmall padding-bottom-xxsmall padding-right-small padding-left-medium" class-segment="segment lg-full sm-full padding-top-xxsmall padding-bottom-xxsmall padding-right-small padding-left-medium"
class-message='segment lg-three-quarter sub-menu-name' class-message='segment lg-three-quarter sub-menu-name'
class-badge='segment badge' class-badge='segment badge'
@ -53,11 +53,11 @@ solid-widget(name='hubl-menu-fix-url-contact')
solid-widget(name='hubl-menu-fix-url-circle') solid-widget(name='hubl-menu-fix-url-circle')
template template
solid-link.segment.lg-full(data-src="${value}" next="circle") solid-link.segment.lg-full.sm-full(data-src="${value}" next="circle")
solid-display.segment.lg-full.text-color-white.heading-active.bg-color-heading.hover.active( solid-display.segment.lg-full.sm-full.text-color-white.heading-active.bg-color-heading.hover.active(
data-src='${value}' data-src='${value}'
fields='segment(status, circle(name, jabberID), badge)' fields='segment(status, circle(name, jabberID), badge)'
class-segment="segment lg-full padding-top-xxsmall padding-bottom-xxsmall padding-right-small padding-left-medium" class-segment="segment lg-full sm-full padding-top-xxsmall padding-bottom-xxsmall padding-right-small padding-left-medium"
class-status='segment text-top sub-menu-icon' class-status='segment text-top sub-menu-icon'
@ -77,11 +77,11 @@ solid-widget(name='hubl-menu-fix-url-circle')
solid-widget(name='hubl-menu-fix-url-project') solid-widget(name='hubl-menu-fix-url-project')
template template
solid-link.segment.lg-full(data-src="${value}" next="project") solid-link.segment.lg-full.sm-full(data-src="${value}" next="project")
solid-display.segment.lg-full.text-color-white.heading-active.bg-color-heading.hover.active( solid-display.segment.lg-full.sm-full.text-color-white.heading-active.bg-color-heading.hover.active(
data-src='${value}' data-src='${value}'
fields='segment(status, project(customer.name, name, jabberID), badge)' fields='segment(status, project(customer.name, name, jabberID), badge)'
class-segment="segment lg-full padding-top-xxsmall padding-bottom-xxsmall padding-right-small padding-left-medium" class-segment="segment lg-full sm-full padding-top-xxsmall padding-bottom-xxsmall padding-right-small padding-left-medium"
class-status='segment text-top sub-menu-icon' class-status='segment text-top sub-menu-icon'
@ -103,48 +103,48 @@ solid-widget(name='hubl-menu-fix-url-project')
solid-router#navbar-router(default-route='dashboard') solid-router#navbar-router(default-route='dashboard')
if endpoints.dashboards || (endpoints.get && endpoints.get.dashboards) if endpoints.dashboards || (endpoints.get && endpoints.get.dashboards)
solid-route.menu.segment.lg-full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(name='dashboard') solid-route.menu.segment.lg-full.sm-full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(name='dashboard')
div.segment.margin-right-xxsmall div.segment.margin-right-xxsmall
div.icon.icon-small.icon-home div.icon.icon-small.icon-home
div.segment.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.dashboard") div.segment.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.dashboard")
div.divider div.divider
if publicDirectory && (endpoints.users || (endpoints.get && endpoints.get.users)) if publicDirectory && (endpoints.users || (endpoints.get && endpoints.get.users))
solid-route.menu.segment.lg-full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(name='members') solid-route.menu.segment.lg-full.sm-full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(name='members')
div.segment.margin-right-xxsmall div.segment.margin-right-xxsmall
div.icon.icon-small.icon-people div.icon.icon-small.icon-people
div.segment.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.profileDirectory") div.segment.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.profileDirectory")
div.divider div.divider
if endpoints.joboffers || (endpoints.get && endpoints.get.joboffers) if endpoints.joboffers || (endpoints.get && endpoints.get.joboffers)
solid-route.menu.segment.lg-full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(name='job-offers', rdf-type='hd:joboffer') solid-route.menu.segment.lg-full.sm-full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(name='job-offers', rdf-type='hd:joboffer')
div.segment.margin-right-xxsmall div.segment.margin-right-xxsmall
div.segment.icon.icon-small.icon-briefcase div.segment.icon.icon-small.icon-briefcase
div.segment.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.jobBoard") div.segment.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.jobBoard")
div.divider div.divider
if endpoints.resources || (endpoints.get && endpoints.get.resources) if endpoints.resources || (endpoints.get && endpoints.get.resources)
solid-route.menu.segment.lg-full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(name='resources') solid-route.menu.segment.lg-full.sm-full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(name='resources')
div.segment.margin-right-xxsmall div.segment.margin-right-xxsmall
div.segment.icon.icon-small.icon-docs div.segment.icon.icon-small.icon-docs
div.segment.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.resources") div.segment.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.resources")
div.divider div.divider
if endpoints.polls || (endpoints.get && endpoints.get.polls) if endpoints.polls || (endpoints.get && endpoints.get.polls)
solid-route.menu.segment.lg-full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(name='polls') solid-route.menu.segment.lg-full.sm-full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(name='polls')
div.segment.margin-right-xxsmall div.segment.margin-right-xxsmall
div.segment.icon.icon-small.icon-bubbles div.segment.icon.icon-small.icon-bubbles
div.segment.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.gov") div.segment.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.gov")
div.divider div.divider
if endpoints.events || (endpoints.get && endpoints.get.events) if endpoints.events || (endpoints.get && endpoints.get.events)
solid-route.menu.segment.lg-full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(name='events') solid-route.menu.segment.lg-full.sm-full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(name='events')
div.segment.margin-right-xxsmall div.segment.margin-right-xxsmall
div.segment.icon.icon-small.icon-calendar div.segment.icon.icon-small.icon-calendar
div.segment.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.events") div.segment.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.events")
div.divider div.divider
if endpoints.projects || (endpoints.get && endpoints.get.projects) if endpoints.projects || (endpoints.get && endpoints.get.projects)
div.menu-wrapper div.menu-wrapper
solid-link.menu.segment.lg-full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active solid-link.menu.segment.lg-full.sm-full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active
//- (next='admin-project-list') //- (next='admin-project-list')
div.segment.margin-right-xxsmall div.segment.margin-right-xxsmall
div.segment.icon.icon-small.icon-folder-alt div.segment.icon.icon-small.icon-folder-alt
div.segment.lg-three-quarter.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.projects") div.segment.lg-three-quarter.sm-three-quarter.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.projects")
div.menu-chevron.segment div.menu-chevron.segment
div.icon-arrow-up div.icon-arrow-up
//- div.menu-icon.icon-arrow-right-circle //- div.menu-icon.icon-arrow-right-circle
@ -169,11 +169,11 @@ solid-router#navbar-router(default-route='dashboard')
div.divider div.divider
if endpoints.circles || (endpoints.get && endpoints.get.circles) if endpoints.circles || (endpoints.get && endpoints.get.circles)
div.menu-wrapper div.menu-wrapper
solid-link.menu.segment.lg-full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active solid-link.menu.segment.lg-full.sm-full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active
//- (next='admin-circle-list') //- (next='admin-circle-list')
div.segment.margin-right-xxsmall div.segment.margin-right-xxsmall
div.segment.icon.icon-small.icon-folder-alt div.segment.icon.icon-small.icon-folder-alt
div.segment.lg-three-quarter.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.circles") div.segment.lg-three-quarter.sm-three-quarter.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.circles")
div.menu-chevron.segment div.menu-chevron.segment
div.icon-arrow-up div.icon-arrow-up
//- div.menu-icon.icon-arrow-right-circle //- div.menu-icon.icon-arrow-right-circle
@ -197,10 +197,10 @@ solid-router#navbar-router(default-route='dashboard')
) )
div.divider div.divider
div.menu-wrapper div.menu-wrapper
div.menu.segment.lg-full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active div.menu.segment.lg-full.sm-full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active
div.segment.margin-right-xxsmall div.segment.margin-right-xxsmall
div.segment.icon.icon-small.icon-envelope-letter div.segment.icon.icon-small.icon-envelope-letter
div.segment.lg-three-quarter.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.messages") div.segment.lg-three-quarter.sm-three-quarter.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.messages")
div.menu-chevron.segment div.menu-chevron.segment
div.icon-arrow-up div.icon-arrow-up
solid-route(name='messages', rdf-type='foaf:user', use-id='', hidden) solid-route(name='messages', rdf-type='foaf:user', use-id='', hidden)
@ -214,7 +214,7 @@ solid-router#navbar-router(default-route='dashboard')
//- search-label-contact.name="" //- search-label-contact.name=""
//- data-trans="search-label-contact.name=menuLeft.search" //- data-trans="search-label-contact.name=menuLeft.search"
//- search-widget-contact.name="hubl-search-users" //- search-widget-contact.name="hubl-search-users"
solid-display.segment.lg-full.whitespace-normal( solid-display.segment.lg-full.sm-full.whitespace-normal(
bind-user bind-user
nested-field='contacts' nested-field='contacts'
fields='contact' fields='contact'