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

Merge branch '169-project-name-on-2-lines' into 'staging'

Browse Source 
Resolve "Project name on 2 lines"

See merge request startinblox/applications/sib-app!84
This commit is contained in:
Jean-Baptiste Pasquier 2019-12-10 10:53:27 +00:00
commit 2ba086355e
4 changed files with 54 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/menu-left.pug
View File

@ -18,7 +18,7 @@ nav#main__menu
//- div.menu-icon.icon-briefcase //- div.menu-icon.icon-briefcase
//- sib-route(name='job-offer-create', hidden) //- sib-route(name='job-offer-create', hidden)
//- sib-route(name='job-offer-edit', use-id, hidden) //- sib-route(name='job-offer-edit', use-id, hidden)
//- div.divider div.divider
//- div.menu-wrapper //- div.menu-wrapper
//- div.menu //- div.menu
//- div.menu-chevron //- div.menu-chevron
@ -29,10 +29,11 @@ nav#main__menu
//- div.sub-menu.menu-notification //- div.sub-menu.menu-notification
//- sib-display( //- sib-display(
//- data-src=`${endpoints.projects}` //- data-src=`${endpoints.projects}`
//- fields='project(customer.name, dash, name), badge' //- fields='project(customer.name, name), badge'
//- class-customer.name='project-customer'
//- class-name='project-name'
//- empty-widget='hd-create' //- empty-widget='hd-create'
//- empty-value='project' //- empty-value='project'
//- value-dash=' - '
//- search-fields='team' //- search-fields='team'
//- search-widget-team='sib-form-hidden' //- search-widget-team='sib-form-hidden'
//- search-value-team='-' //- search-value-team='-'
@ -41,7 +42,7 @@ nav#main__menu
//- widget-badge='hd-counter' //- widget-badge='hd-counter'
//- action-badge='badge' //- action-badge='badge'
//- ) //- )
div.divider //- div.divider
div.menu-wrapper div.menu-wrapper
div.menu div.menu
div.menu-chevron div.menu-chevron

2
src/styles/abstracts/_variables.scss
View File

@ -4,6 +4,7 @@ $color-45-95-54: hsl(45, 95%, 54%);
$color-46-100-67: hsl(46, 100%, 67%); $color-46-100-67: hsl(46, 100%, 67%);
$color-46-100-50: hsl(46, 100%, 50%); $color-46-100-50: hsl(46, 100%, 50%);
$color-0-0-100: hsl(0, 0%, 100%); $color-0-0-100: hsl(0, 0%, 100%);
$color-218-100-98: hsl(218, 100%, 98%);
$color-210-17-91: hsl(210, 17%, 91%); $color-210-17-91: hsl(210, 17%, 91%);
$color-222-52-90: hsl(222, 52%, 90%); $color-222-52-90: hsl(222, 52%, 90%);
$color-210-25-95: hsl(210, 25%, 95%); $color-210-25-95: hsl(210, 25%, 95%);
@ -22,5 +23,6 @@ $color-213-4-50: hsl(213, 4%, 50%);
$color-213-13-86: hsla(213, 13%, 86%, 0.2); $color-213-13-86: hsla(213, 13%, 86%, 0.2);
$color-0-0-29: hsl(0, 0%, 29%); $color-0-0-29: hsl(0, 0%, 29%);
$color-233-18-29: hsl(233, 18%, 29%); $color-233-18-29: hsl(233, 18%, 29%);
$color-233-20-17: hsl(233, 20%, 17%);
$color-216-4-22: hsl(216, 4%, 22%); $color-216-4-22: hsl(216, 4%, 22%);
$color-244-73-62: hsl(244, 73%, 62%); $color-244-73-62: hsl(244, 73%, 62%);

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

@ -20,12 +20,11 @@ $breakpoints: (phone: 480px,
background-color: $color-210-25-95; background-color: $color-210-25-95;
color: $color-213-4-50; color: $color-213-4-50;
font-size: 1.6rem; font-size: 1.6rem;
overflow: hidden; overflow-y: scroll;
overflow-wrap: break-word; }
display: flex;
flex-direction: column; html {
height: 100vh; overflow-y: scroll;
overflow: hidden;
} }
main { main {
@ -102,7 +101,7 @@ h5 {
flex: 1; flex: 1;
font-size: 1.6rem; font-size: 1.6rem;
margin: 0 auto; margin: 0 auto;
min-height: calc(100vh - 84px); min-height: 100%;
} }
&.with-padding { &.with-padding {

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

@ -2,8 +2,8 @@
background-color: $color-233-18-29; background-color: $color-233-18-29;
color: $color-0-0-100; color: $color-0-0-100;
display: block; display: block;
overflow: auto; height: auto;
flex: 0 0 16em; max-width: 250px;
transition: flex-basis 0.5s ease-in-out; transition: flex-basis 0.5s ease-in-out;
&.open { &.open {
@ -91,6 +91,41 @@
.sub-menu { .sub-menu {
sib-set-default[name='project'] {
padding: 1rem 1rem 1rem 3.2rem;
.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: $color-233-20-17;
box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.26);
color: $color-218-100-98;
/* 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 { sib-display>div {
.create { .create {
@ -110,18 +145,8 @@
padding: 10px 10px 10px 32px; padding: 10px 10px 10px 32px;
} }
sib-route[name='project'] { &[fields="project(customer.name, name), badge"]>div {
display: flex; padding: 0;
flex: 3;
sib-display-value {
display: block;
height: 20px;
}
sib-display-value[name='dash'] {
margin: 0 0.4em;
}
} }
} }