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

feature: mobile - about

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

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

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

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')
div.segment.lg-two-third.margin-top-small.padding-right-xlarge
div.segment.whitespace-normal.shadow.padding-top-xlarge.padding-right-xxlarge.padding-bottom-xxlarge.padding-left-xxlarge.text-center
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.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')
div
p.segment.whitespace-normal.text-large(data-trans='about.card1.paragraph1')
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/
div.segment.lg-third.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.lg-third.sm-full.margin-top-small.text-top
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.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')

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

@ -31,16 +31,16 @@ solid-widget(name='hubl-create')
br
span(data-trans="menuLeft.emptyCircleProject.createNew")
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')
template
solid-link.segment.lg-full(data-src="${value}" next="messages")
solid-display.segment.lg-full.text-color-white.heading-active.bg-color-heading.hover.active(
solid-link.segment.lg-full.sm-full(data-src="${value}" next="messages")
solid-display.segment.lg-full.sm-full.text-color-white.heading-active.bg-color-heading.hover.active(
data-src='${value}'
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-badge='segment badge'
@ -53,11 +53,11 @@ solid-widget(name='hubl-menu-fix-url-contact')
solid-widget(name='hubl-menu-fix-url-circle')
template
solid-link.segment.lg-full(data-src="${value}" next="circle")
solid-display.segment.lg-full.text-color-white.heading-active.bg-color-heading.hover.active(
solid-link.segment.lg-full.sm-full(data-src="${value}" next="circle")
solid-display.segment.lg-full.sm-full.text-color-white.heading-active.bg-color-heading.hover.active(
data-src='${value}'
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'
@ -77,11 +77,11 @@ solid-widget(name='hubl-menu-fix-url-circle')
solid-widget(name='hubl-menu-fix-url-project')
template
solid-link.segment.lg-full(data-src="${value}" next="project")
solid-display.segment.lg-full.text-color-white.heading-active.bg-color-heading.hover.active(
solid-link.segment.lg-full.sm-full(data-src="${value}" next="project")
solid-display.segment.lg-full.sm-full.text-color-white.heading-active.bg-color-heading.hover.active(
data-src='${value}'
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'
@ -103,48 +103,48 @@ solid-widget(name='hubl-menu-fix-url-project')
solid-router#navbar-router(default-route='dashboard')
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.icon.icon-small.icon-home
div.segment.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.dashboard")
div.divider
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.icon.icon-small.icon-people
div.segment.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.profileDirectory")
div.divider
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.icon.icon-small.icon-briefcase
div.segment.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.jobBoard")
div.divider
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.icon.icon-small.icon-docs
div.segment.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.resources")
div.divider
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.icon.icon-small.icon-bubbles
div.segment.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.gov")
div.divider
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.icon.icon-small.icon-calendar
div.segment.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.events")
div.divider
if endpoints.projects || (endpoints.get && endpoints.get.projects)
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')
div.segment.margin-right-xxsmall
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.icon-arrow-up
//- div.menu-icon.icon-arrow-right-circle
@ -169,11 +169,11 @@ solid-router#navbar-router(default-route='dashboard')
div.divider
if endpoints.circles || (endpoints.get && endpoints.get.circles)
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')
div.segment.margin-right-xxsmall
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.icon-arrow-up
//- div.menu-icon.icon-arrow-right-circle
@ -197,10 +197,10 @@ solid-router#navbar-router(default-route='dashboard')
)
div.divider
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.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.icon-arrow-up
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=""
//- data-trans="search-label-contact.name=menuLeft.search"
//- 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
nested-field='contacts'
fields='contact'