diff --git a/src/page-circle.pug b/src/page-circle.pug index 0f4e3a9..95146fd 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 d1254b2..154a42d 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 49329b4..1c27ec3 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 880b272..ab787f9 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 { + sib-display { + @include breakpoint(sm) { + float: left; + } + } - .h1-aside { - font-size: 1.8rem; + /* For sib-display on project, circle, or private message view */ + sib-display { + width: calc(100% - 94px); /* 94px = width of .mobile-sidebar-button */ - &:not(:empty)::before { - color: var(--color-grey-4); - content: ' - '; - font-size: 2rem; - font-weight: bold; + 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; + } } } }