diff --git a/src/page-circle.pug b/src/page-circle.pug index 0f4e3a9ef982e6b862b950eba5d991cedda1d70d..95146fda45e41eeee0934520bad200b8634842cd 100644 --- a/src/page-circle.pug +++ b/src/page-circle.pug @@ -1,7 +1,7 @@ .views-container.sidebar-is-closed .content-box.flex.full-width.with-form div.content-box__header - sib-ac-checker(permission='acl:Read', bind-resources) + sib-ac-checker.flex.space-between(permission='acl:Read', bind-resources) sib-display( bind-resources fields='name, description' diff --git a/src/page-messages.pug b/src/page-messages.pug index d1254b24a131a295b3a9163d371548c1dded16f0..154a42db46042d24070ea510af1f6a2f28a3de50 100644 --- a/src/page-messages.pug +++ b/src/page-messages.pug @@ -1,16 +1,17 @@ .content-box.flex.full-width - sib-display.content-box__header( - bind-resources - fields='name, parenthesis, username, endParenthesis' - value-parenthesis=" (" - value-endParenthesis=")" + div.content-box__header + sib-display( + bind-resources + fields='name, parenthesis, username, endParenthesis' + value-parenthesis=" (" + value-endParenthesis=")" - class-parenthesis='name' - class-endParenthesis='name' - class-name='name' - class-username='name' - ) + class-parenthesis='h1-like' + class-endParenthesis='h1-like' + class-name='h1-like' + class-username='h1-like' + ) .chat-view sib-chat( diff --git a/src/page-project.pug b/src/page-project.pug index 49329b4f446b9ba0778a9fa91665805729df1344..1c27ec36094cee64d4be7f4eead3f372aa47ce49 100644 --- a/src/page-project.pug +++ b/src/page-project.pug @@ -1,7 +1,7 @@ .views-container.sidebar-is-closed .content-box.flex.full-width.with-form div.content-box__header - sib-ac-checker(permission='acl:Read', bind-resources) + sib-ac-checker.flex.space-between(permission='acl:Read', bind-resources) sib-display( bind-resources fields='const-title1, number, customer.name, name' @@ -9,13 +9,11 @@ class-const-title1='h1-like' class-number='h1-like word-spacing-right' class-customer.name='h1-like' - class-name='h1-aside name' + class-name='h1-aside' value-const-title1='N°' ) - .mobile-sidebar-button.jsMobileSidebarOpenButton - button.icon-arrow-left-circle - span MENU + button.mobile-sidebar-button.jsMobileSidebarOpenButton.icon-arrow-left-circle MENU div sib-ac-checker(permission='acl:Read', bind-resources) #project-chat(hidden) diff --git a/src/styles/base/main.scss b/src/styles/base/main.scss index 880b27241ffc2f8d1350231ebdb210b2ee38895a..ab787f97f1abc0073cbb451c91c518f985d924cb 100644 --- a/src/styles/base/main.scss +++ b/src/styles/base/main.scss @@ -260,12 +260,12 @@ h5 { /* Header inside circle, project view */ .content-box__header { border-bottom: 1px solid var(--color-content-header); - padding: 3rem; + padding: 1.8rem 0 1.4rem; + margin: 0 1.6rem; - sib-display { - @include breakpoint(sm) { - float: left; - } + @include breakpoint(lg) { + padding: 3rem; + margin: 0; } .mobile-sidebar-button { @@ -285,27 +285,42 @@ h5 { } } - div { - - .h1-aside { - font-size: 1.8rem; + sib-display { + @include breakpoint(sm) { + float: left; + } + } - &:not(:empty)::before { - color: var(--color-grey-4); - content: ' - '; - font-size: 2rem; - font-weight: bold; + /* For sib-display on project, circle, or private message view */ + sib-display { + width: calc(100% - 94px); /* 94px = width of .mobile-sidebar-button */ + + div { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + width: calc(100% - 20px); + + .h1-aside { + font-size: 1.8rem; + + &:not(:empty)::before { + color: var(--color-grey-4); + content: ' - '; + font-size: 2rem; + font-weight: bold; + } } - } - .description { - color: var(--color-grey-4); + .description { + color: var(--color-grey-4); - } + } - .name { - color: var(--color-grey-4); - font-weight: normal; + .name { + color: var(--color-grey-4); + font-weight: normal; + } } } }