bugfix: left-menu responsive + button responsive

This commit is contained in:
gaelle morin 2020-06-12 12:19:45 +02:00
parent c09cc4e525
commit fb8e923ec9
No known key found for this signature in database
GPG Key ID: 028426702B95CF9C
7 changed files with 69 additions and 39 deletions

View File

@ -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);
}

View File

@ -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 {

View File

@ -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);

View File

@ -145,7 +145,7 @@
.reversed,
.button-secondary,
.bordered,
.btn-margin-left;
.desktop-btn-margin__left;
}
}
}

View File

@ -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;
}
}

View File

@ -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'

View File

@ -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'