feature: left-menu - main tabs and project sub-tab
This commit is contained in:
gaelle morin
parent
008e2e75a9
commit
d34a0dceba
@ -47,8 +47,8 @@ html(lang="en")
|
||||
header#header.segment.lg-full.padding-left-large.padding-right-large.shadow-small.text-disable-selection
|
||||
include views/partials/header.pug
|
||||
|
||||
//- nav#main__menu.segment.bg-color-heading.lg-quarter.float-left
|
||||
//- include views/partials/menu-left.pug
|
||||
nav#main__menu.segment.bg-color-heading.lg-quarter
|
||||
include views/partials/menu-left.pug
|
||||
|
||||
//- main#content.segment.lg-three-quarter.float-left.notLoggedIn
|
||||
|
||||
|
||||
@ -1,3 +1,83 @@
|
||||
nav {
|
||||
height: calc(100vh - 72px);
|
||||
|
||||
.unread {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
solid-route.menu,
|
||||
solid-link.menu,
|
||||
div.menu {
|
||||
|
||||
.icon {
|
||||
padding: 8px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
&:hover .icon,
|
||||
&[active] .icon {
|
||||
color: white;
|
||||
background: var(--color-heading);
|
||||
}
|
||||
&[active]+.divider {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Styles for the small icon */
|
||||
.sub-menu-icon {
|
||||
margin-left: 3px;
|
||||
margin-right: 3px;
|
||||
opacity: 0.8;
|
||||
vertical-align: top;
|
||||
|
||||
div {
|
||||
font-family: simple-line-icons;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.sub-menu-name {
|
||||
margin-right: 14px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* Ellipsis for project tab */
|
||||
.project-tab {
|
||||
|
||||
hubl-menu-fix-url-project {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.project-customer,
|
||||
.project-name {
|
||||
display: block;
|
||||
width: calc(80vw - 96px);
|
||||
|
||||
@media(min-width: 1024px) {
|
||||
width: calc(100% - 10px);
|
||||
}
|
||||
}
|
||||
|
||||
.project-customer,
|
||||
.project-name>div {
|
||||
|
||||
@media(min-width: 1024px) {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.divider {
|
||||
height: 1px;
|
||||
background-color: #D7DBE0;
|
||||
opacity: 0.2;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -66,12 +66,18 @@ solid-widget(name='hubl-menu-fix-url-project')
|
||||
solid-link.segment.lg-full(data-src="${value}" next="project")
|
||||
solid-display(
|
||||
data-src='${value}'
|
||||
fields='status, project(customer.name, name, jabberID), badge'
|
||||
class-project='sub-menu-name'
|
||||
class-status='sub-menu-icon'
|
||||
class-name='project-name'
|
||||
class-customer.name='project-customer'
|
||||
class-badge='badge'
|
||||
fields='segment(status, project(customer.name, name, jabberID), badge)'
|
||||
class-segment="segment lg-full padding-top-xxsmall padding-right-small padding-left-medium"
|
||||
|
||||
class-status='segment sub-menu-icon'
|
||||
|
||||
class-project='segment lg-three-quarter sub-menu-name'
|
||||
|
||||
class-customer.name='segment project-customer'
|
||||
class-name='segment project-name'
|
||||
|
||||
class-badge='segment badge text-top'
|
||||
|
||||
value-badge='${value}'
|
||||
widget-status='hubl-menu-publicprivate'
|
||||
widget-jabberID='hubl-menu-jabberid'
|
||||
@ -83,45 +89,51 @@ 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-auto.padding.text-bold(name='dashboard')
|
||||
div.menu-icon.icon-home.segment.lg-auto.margin-right-xsmall.float-left
|
||||
div.menu-label.segment.text-uppercase.text-letter-spacing-large.float-left(data-trans="menuLeft.dashboard")
|
||||
solid-route.menu.segment.lg-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-auto.padding.text-bold(name='members')
|
||||
div.menu-icon.icon-people.segment.lg-auto.margin-right-xsmall.float-left
|
||||
div.menu-label.segment.text-uppercase.text-letter-spacing-large.float-left(data-trans="menuLeft.profileDirectory")
|
||||
solid-route.menu.segment.lg-full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(name='members')
|
||||
div.segment.margin-right-xxsmall
|
||||
div.segment.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-auto.padding.text-bold(name='job-offers', rdf-type='hd:joboffer')
|
||||
div.menu-icon.icon-briefcase.segment.lg-auto.margin-right-xsmall.float-left
|
||||
div.menu-label.segment.text-uppercase.text-letter-spacing-large.float-left(data-trans="menuLeft.jobBoard")
|
||||
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')
|
||||
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-auto.padding.text-bold(name='resources')
|
||||
div.menu-icon.icon-docs.segment.lg-auto.margin-right-xsmall.float-left
|
||||
div.menu-label.segment.text-uppercase.text-letter-spacing-large.float-left(data-trans="menuLeft.resources")
|
||||
solid-route.menu.segment.lg-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-auto.padding.text-bold(name='polls')
|
||||
div.menu-icon.icon-bubbles.segment.lg-auto.margin-right-xsmall.float-left
|
||||
div.menu-label.segment.text-uppercase.text-letter-spacing-large.float-left(data-trans="menuLeft.gov")
|
||||
solid-route.menu.segment.lg-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-auto.padding.text-bold(name='events')
|
||||
div.menu-icon.icon-calendar.segment.lg-auto.margin-right-xsmall.float-left
|
||||
div.menu-label.segment.text-uppercase.text-letter-spacing-large.float-left(data-trans="menuLeft.events")
|
||||
solid-route.menu.segment.lg-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.segment.lg-full
|
||||
solid-link.menu.segment.lg-full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active
|
||||
//- (next='admin-project-list')
|
||||
div.menu.segment.lg-auto.padding.text-bold
|
||||
div.menu-icon.icon-folder-alt.segment.lg-auto.margin-right-xsmall.float-left
|
||||
div.menu-label.segment.lg-three-quarter.text-uppercase.text-letter-spacing-large.float-left(data-trans="menuLeft.projects")
|
||||
div.menu-chevron.segment.lg-auto.float-left
|
||||
div.menu-icon.icon-arrow-up
|
||||
//- div.menu-icon.icon-arrow-right-circle
|
||||
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.menu-chevron.segment
|
||||
div.icon-arrow-up
|
||||
//- div.menu-icon.icon-arrow-right-circle
|
||||
solid-route(name='project', rdf-type='hd:project', use-id='', hidden)
|
||||
div.sub-menu.menu-notification
|
||||
div#loader-projects.loader.loader-menu
|
||||
@ -129,7 +141,7 @@ solid-router#navbar-router(default-route='dashboard')
|
||||
div
|
||||
div
|
||||
div
|
||||
solid-display.project-tab.segment.lg-full(
|
||||
solid-display.project-tab.text-color-white(
|
||||
bind-user
|
||||
nested-field='projects'
|
||||
fields='project'
|
||||
@ -143,14 +155,14 @@ solid-router#navbar-router(default-route='dashboard')
|
||||
div.divider
|
||||
if endpoints.circles || (endpoints.get && endpoints.get.circles)
|
||||
div.menu-wrapper
|
||||
solid-link.segment.lg-full
|
||||
solid-link.menu.segment.lg-full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active
|
||||
//- (next='admin-circle-list')
|
||||
div.menu.segment.lg-auto.padding.text-bold
|
||||
div.menu-icon.icon-folder-alt.segment.lg-auto.margin-right-xsmall.float-left
|
||||
div.menu-label.segment.lg-three-quarter.text-uppercase.text-letter-spacing-large.float-left(data-trans="menuLeft.circles")
|
||||
div.menu-chevron.segment.lg-auto.float-left
|
||||
div.menu-icon.icon-arrow-up
|
||||
//- div.menu-icon.icon-arrow-right-circle
|
||||
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.menu-chevron.segment
|
||||
div.icon-arrow-up
|
||||
//- div.menu-icon.icon-arrow-right-circle
|
||||
solid-route(name='circle', rdf-type='hd:circle', use-id='', hidden)
|
||||
div.sub-menu.menu-notification
|
||||
div#loader-circles.loader.loader-menu
|
||||
@ -171,11 +183,12 @@ solid-router#navbar-router(default-route='dashboard')
|
||||
)
|
||||
div.divider
|
||||
div.menu-wrapper
|
||||
div.menu.segment.lg-auto.padding.text-bold
|
||||
div.menu-icon.icon-envelope-letter.segment.lg-auto.margin-right-xsmall.float-left
|
||||
div.menu-label.segment.lg-three-quarter.text-uppercase.text-letter-spacing-large.float-left(data-trans="menuLeft.messages")
|
||||
div.menu-chevron.segment.lg-auto.float-left
|
||||
div.menu-icon.icon-arrow-up
|
||||
div.menu.segment.lg-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.menu-chevron.segment
|
||||
div.icon-arrow-up
|
||||
solid-route(name='messages', rdf-type='foaf:user', use-id='', hidden)
|
||||
div.sub-menu.menu-notification
|
||||
div#loader-messages.loader.loader-menu
|
||||
|
||||
Loading…
Reference in New Issue
Block a user