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

Left-nav bar: new styles + overflow and hovering to handle long names

Browse Source
This commit is contained in:
Gaëlle Morin 2019-11-27 12:06:23 +01:00
parent dbf918f351
commit 1ade7ded23
3 changed files with 72 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
src/menu-left.pug
View File

@ -18,29 +18,30 @@ nav#main__menu
//- div.menu-icon.icon-briefcase
//- sib-route(name='job-offer-create', hidden)
//- sib-route(name='job-offer-edit', use-id, hidden)
//- div.divider
//- div.menu-wrapper
//- div.menu
//- div.menu-chevron
//- div.menu-icon.icon-arrow-up
//- div.menu-label Projects
//- div.menu-icon.icon-folder-alt
//- sib-route(name='project', rdf-type='hd:project', use-id='', hidden)
//- div.sub-menu.menu-notification
//- sib-display(
//- data-src=`${endpoints.projects}`
//- fields='project(customer.name, dash, name), badge'
//- empty-widget='hd-create'
//- empty-value='project'
//- value-dash=' - '
//- search-fields='team'
//- search-widget-team='sib-form-hidden'
//- search-value-team='-'
//- hd-inherit-user-id='search-value-team'
//- hd-inherit-widgets
//- widget-badge='hd-counter'
//- action-badge='badge'
//- )
div.divider
div.menu-wrapper
div.menu
div.menu-chevron
div.menu-icon.icon-arrow-up
div.menu-label Projects
div.menu-icon.icon-folder-alt
sib-route(name='project', rdf-type='hd:project', use-id='', hidden)
div.sub-menu.menu-notification
sib-display(
data-src=`${endpoints.projects}`
fields='project(customer.name, name), badge'
class-customer.name='project-customer'
class-name='project-name'
empty-widget='hd-create'
empty-value='project'
search-fields='team'
search-widget-team='sib-form-hidden'
search-value-team='-'
hd-inherit-user-id='search-value-team'
hd-inherit-widgets
widget-badge='hd-counter'
action-badge='badge'
)
div.divider
div.menu-wrapper
div.menu

11
src/styles/base/main.scss
View File

@ -20,12 +20,11 @@ $breakpoints: (phone: 480px,
background-color: $color-210-25-95;
color: $color-213-4-50;
font-size: 1.6rem;
overflow: hidden;
overflow-wrap: break-word;
display: flex;
flex-direction: column;
height: 100vh;
overflow: hidden;
overflow-y: scroll;
}
html {
overflow-y: scroll;
}
main {

55
src/styles/base/menu-left.scss
View File

@ -2,8 +2,8 @@
background-color: $color-233-18-29;
color: $color-0-0-100;
display: block;
overflow: auto;
flex: 0 0 16em;
height: calc(100vh - 82px);
max-width: 250px;
transition: flex-basis 0.5s ease-in-out;
&.open {
@ -91,6 +91,43 @@
.sub-menu {
sib-set-default[name='project'] {
padding: 10px;
.project-customer,
.project-name {
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.project-customer {
font-weight: bold;
width: 150px;
}
.project-name {
padding-left: 14px;
width: calc(150px - 10px); /* 10px = padding of the sib-set-default = better alignment */
}
&:hover {
background-color: #a2a8bb;
border-radius: 2px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
color: #3D4057;
padding: 10px;
/* transition: all 0.6s cubic-bezier(0.39, 0.575, 0.565, 1); Need better animation */
width: auto;
.project-customer,
.project-name {
width: auto;
}
}
}
sib-display>div {
.create {
@ -110,18 +147,8 @@
padding: 10px 10px 10px 32px;
}
sib-route[name='project'] {
display: flex;
flex: 3;
sib-display-value {
display: block;
height: 20px;
}
sib-display-value[name='dash'] {
margin: 0 0.4em;
}
&[fields="project(customer.name, name), badge"]>div {
padding: 0 0 0 22px;
}
}