From fb8e923ec97fd851d76fec17e7f3e70cae6505ae Mon Sep 17 00:00:00 2001 From: gaelle morin Date: Fri, 12 Jun 2020 12:19:45 +0200 Subject: [PATCH] bugfix: left-menu responsive + button responsive --- client.sample.happy-dev.css | 8 ++-- src/styles/base/main.scss | 54 ++++++++++++++++------ src/styles/base/menu-left.scss | 10 ++-- src/styles/base/table.scss | 2 +- src/styles/components/tags.scss | 18 +++++--- src/views/circle/page-circle-profile.pug | 10 ++-- src/views/project/page-project-profile.pug | 6 +-- 7 files changed, 69 insertions(+), 39 deletions(-) diff --git a/client.sample.happy-dev.css b/client.sample.happy-dev.css index 2b883aa..4297296 100644 --- a/client.sample.happy-dev.css +++ b/client.sample.happy-dev.css @@ -139,23 +139,23 @@ } /* Button to delete a channel */ -#circle-profile>div>div.button-end>sib-ac-checker>sib-delete { +#circle-profile>div>div.desktop-button__end>sib-ac-checker>sib-delete { background: var(--color-white); border: 1px solid var(--color-complementary); color: var(--color-complementary); } -#circle-profile>div>div.button-end>sib-ac-checker>sib-delete>button { +#circle-profile>div>div.desktop-button__end>sib-ac-checker>sib-delete>button { color: var(--color-complementary); } -#circle-profile>div>div.button-end>sib-ac-checker>sib-delete:hover { +#circle-profile>div>div.desktop-button__end>sib-ac-checker>sib-delete:hover { background: var(--color-complementary); border: 1px solid var(--color-complementary); color: var(--color-white); } -#circle-profile>div>div.button-end>sib-ac-checker>sib-delete:hover>button { +#circle-profile>div>div.desktop-button__end>sib-ac-checker>sib-delete:hover>button { color: var(--color-white); } diff --git a/src/styles/base/main.scss b/src/styles/base/main.scss index 84acbe4..11c9a9b 100644 --- a/src/styles/base/main.scss +++ b/src/styles/base/main.scss @@ -35,14 +35,6 @@ sib-dashboard section { } } -/*@media (max-width: 767.98px) { - - #conversejs .converse-chatboxes .chatbox .box-flyout { - height: 100% !important; - height: 100vh !important; - } -}*/ - .wrapper { display: grid; grid-template-areas: @@ -84,7 +76,7 @@ sib-dashboard section { display: block; bottom: 0; box-shadow: 0 2px 8px 0 rgba(65, 69, 73, 0.5); - max-width: 86%; + width: 80vw; position: fixed; right: 0; top: 0; @@ -380,7 +372,11 @@ h5 { .content-box__info { flex-direction: column; - padding: 3.2rem; + padding: 1rem; + + @include breakpoint(lg) { + padding: 3.2rem; + } * { box-sizing: border-box; @@ -471,8 +467,13 @@ h5 { display: flex; } -.button-end { - justify-content: flex-end; +.desktop-button__end { + display: block; + + @include breakpoint(lg) { + display: flex; + justify-content: flex-end; + } } .space-between { @@ -538,8 +539,33 @@ a, font-size: 1.4rem; } - &.btn-margin-left { - margin-left: 2.2rem; + &.mobile-full-width { + margin-bottom: 1rem; + padding-left: 5rem; + width: -webkit-fill-available; + width: -moz-available; + + @include breakpoint(lg) { + margin-bottom: 0; + padding-left: 2.5rem; + width: auto; + } + + &::before { + margin-left: -2.6rem; + + @include breakpoint(lg) { + margin-left: 0; + } + } + } + + &.desktop-btn-margin__left { + margin: 0; + + @include breakpoint(lg) { + margin-left: 2.2rem; + } } &.small { diff --git a/src/styles/base/menu-left.scss b/src/styles/base/menu-left.scss index 7a2bd06..4d68192 100644 --- a/src/styles/base/menu-left.scss +++ b/src/styles/base/menu-left.scss @@ -103,7 +103,7 @@ .project-name { box-sizing: border-box; display: block; - width: calc(80vw - 76px); /*76px = padding of the element + width and margin of counter */ + width: calc(80vw - 96px); /*96px = padding of the element + width and margin of counter */ @include breakpoint(lg) { width: 150px; @@ -133,7 +133,7 @@ >div[name='name'] { box-sizing: border-box; padding-left: 0.2em; - width: calc(80vw - 76px); /*76px = padding of the element + width and margin of counter */ + width: calc(80vw - 96px); /*96px = padding of the element + width and margin of counter */ @include breakpoint(lg) { overflow: hidden; @@ -149,7 +149,7 @@ .message-tab>div>sib-display>div>sib-display-div>div { box-sizing: border-box; - width: calc(80vw - 76px); /*76px = padding of the element + width and margin of counter */ + width: calc(80vw - 96px); /*96px = padding of the element + width and margin of counter */ @include breakpoint(lg) { width: 150px; @@ -158,8 +158,8 @@ sib-display.nosub>sib-form[fields="name"]>hubl-search-users>input { margin-left: 30px; - max-width: 82%; - width: 82%; + margin-bottom: 10px; + width: calc(80vw - 71px); display: block; background-color: var(--color-secondary); color: var(--color-grey-6); diff --git a/src/styles/base/table.scss b/src/styles/base/table.scss index 3cee3e7..8307821 100644 --- a/src/styles/base/table.scss +++ b/src/styles/base/table.scss @@ -145,7 +145,7 @@ .reversed, .button-secondary, .bordered, - .btn-margin-left; + .desktop-btn-margin__left; } } } diff --git a/src/styles/components/tags.scss b/src/styles/components/tags.scss index 1337089..018d780 100644 --- a/src/styles/components/tags.scss +++ b/src/styles/components/tags.scss @@ -1,9 +1,13 @@ %tag-admin { - border: 1px solid var(--color-tag-admin-border); - border-radius: 3px; - color: var(--color-tag-admin-text); - font-size: 1.4rem; - font-weight: 400; - margin-left: 0.6rem; - padding: 0.35rem 0.98rem; + display: none; + + @include breakpoint(lg) { + border: 1px solid var(--color-tag-admin-border); + border-radius: 3px; + color: var(--color-tag-admin-text); + font-size: 1.4rem; + font-weight: 400; + margin-left: 0.6rem; + padding: 0.35rem 0.98rem; + } } diff --git a/src/views/circle/page-circle-profile.pug b/src/views/circle/page-circle-profile.pug index b7e9ed4..7f96881 100644 --- a/src/views/circle/page-circle-profile.pug +++ b/src/views/circle/page-circle-profile.pug @@ -18,13 +18,13 @@ sib-router(default-route='circle-profile', hidden) widget-creationDate='sib-display-date' ) sib-ac-checker(permission='acl:Append', bind-resources, nested-field='members') - sib-link(class='button text-bold text-uppercase reversed button-primary bordered with-icon icon-pencil' next='circle-edit' bind-resources) Modifier et ajouter un membre + sib-link(class='button mobile-full-width text-bold text-uppercase reversed button-primary bordered with-icon icon-pencil' next='circle-edit' bind-resources) Modifier et ajouter un membre - div.flex.button-end + div.flex.desktop-button__end sib-ac-checker(permission='acl:Delete', bind-resources) sib-delete( - class='button text-bold text-uppercase button-primary bordered with-icon icon-trash' + class='button mobile-full-width text-bold text-uppercase button-primary bordered with-icon icon-trash' bind-resources data-label='Supprimer le canal' ) @@ -32,14 +32,14 @@ sib-router(default-route='circle-profile', hidden) sib-widget(name='hubl-circle-leave-button') template sib-delete( - class='button btn-margin-left text-bold text-uppercase reversed button-secondary bordered with-icon icon-close' + class='button mobile-full-width desktop-btn-margin__left text-bold text-uppercase reversed button-secondary bordered with-icon icon-close' data-src="${src}" data-label='Quitter le canal' ) sib-widget(name='hubl-circle-join-button') template - button.button.btn-margin-left.text-bold.text-uppercase.reversed.button-primary.bordered.with-icon.icon-arrow-right-circle.flex + button.button.desktop-btn-margin__left.text-bold.text-uppercase.reversed.button-primary.bordered.with-icon.icon-arrow-right-circle.flex sib-form( data-src='' nested-field='members' diff --git a/src/views/project/page-project-profile.pug b/src/views/project/page-project-profile.pug index 4af5645..bb0f97c 100644 --- a/src/views/project/page-project-profile.pug +++ b/src/views/project/page-project-profile.pug @@ -21,7 +21,7 @@ sib-router(default-route='project-profile', hidden) widget-creationDate='sib-display-date' ) sib-ac-checker(permission='acl:Append', bind-resources, nested-field='members') - sib-link(class='button text-bold text-uppercase reversed button-primary bordered with-icon icon-pencil' next='project-edit' bind-resources) Modifier et ajouter un membre + sib-link(class='button mobile-full-width text-bold text-uppercase reversed button-primary bordered with-icon icon-pencil' next='project-edit' bind-resources) Modifier et ajouter un membre .flex.space-between.with-padding @@ -54,13 +54,13 @@ sib-router(default-route='project-profile', hidden) sib-widget(name='hubl-project-leave-button') template sib-delete( - class='button btn-margin-left text-bold text-uppercase reversed button-secondary bordered with-icon icon-close' + class='button desktop-btn-margin__left text-bold text-uppercase reversed button-secondary bordered with-icon icon-close' data-src="${src}" data-label='Quitter le groupe' ) sib-display( - class='flex button-end' + class='flex desktop-button__end' bind-resources nested-field='members' fields='relation'