discours.io/webapp
5
0
Fork 0
Code Issues Pull Requests Actions Projects Wiki Activity

Mobile: author page style fixes

Browse Source
This commit is contained in:
kvakazyambra 2023-09-21 23:44:41 +03:00
parent 097157288b
commit bfc6599149
2 changed files with 49 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
src/components/Author/AuthorCard/AuthorCard.module.scss
View File

@ -2,12 +2,16 @@
align-items: flex-start; align-items: flex-start;
display: flex; display: flex;
flex-flow: row nowrap; flex-flow: row nowrap;
margin-bottom: 2.4rem; margin-bottom: 1.6rem;
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
@include media-breakpoint-up(md) {
margin-bottom: 2.4rem;
}
@include media-breakpoint-down(lg) { @include media-breakpoint-down(lg) {
flex-wrap: wrap; flex-wrap: wrap;
} }
@ -21,22 +25,25 @@
display: flex; display: flex;
} }
&.authorDetailsShrinked {
flex: 0 0 auto;
}
@include media-breakpoint-down(sm) { @include media-breakpoint-down(sm) {
flex-wrap: wrap; flex-wrap: wrap;
} }
@include media-breakpoint-down(md) {
text-align: center;
}
@include media-breakpoint-between(md, lg) { @include media-breakpoint-between(md, lg) {
flex-wrap: wrap; flex-wrap: wrap;
} }
&.authorDetailsShrinked {
flex: 0 0 auto;
}
} }
.authorDetailsWrapper { .authorDetailsWrapper {
flex: 1 0; flex: 1 0;
padding-right: 1em;
@include media-breakpoint-up(sm) { @include media-breakpoint-up(sm) {
flex: 1; flex: 1;
@ -226,6 +233,10 @@
margin-right: 0.5em; margin-right: 0.5em;
width: 9em; width: 9em;
&:first-of-type {
margin-left: 0;
}
&:last-child { &:last-child {
margin-right: 0; margin-right: 0;
} }
@ -249,13 +260,21 @@
.authorSubscribeSocial { .authorSubscribeSocial {
align-items: center; align-items: center;
display: flex; display: flex;
margin: 0 0.8rem 1.6rem; margin: 0 0.8rem 2rem;
@include media-breakpoint-down(sm) { @include media-breakpoint-down(sm) {
flex: 1 100%; flex: 1 100%;
justify-content: center; justify-content: center;
margin-top: 1em; margin-top: 1em;
} }
@include media-breakpoint-down(md) {
justify-content: center;
}
a:link {
border: none;
}
} }
.buttonSubscribe { .buttonSubscribe {
@ -449,23 +468,36 @@
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
font-size: 1.4rem; font-size: 1.4rem;
margin-top: 1em; margin-top: 0.5rem;
@include media-breakpoint-down(md) {
justify-content: center;
}
} }
.subscribers { .subscribers {
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
display: inline-flex; display: inline-flex;
margin-top: 1rem;
margin-right: 3rem; margin-right: 3rem;
vertical-align: top; vertical-align: top;
&:last-child {
margin-right: 0;
}
.userpic { .userpic {
background: var(--background-color); background: var(--background-color);
box-shadow: 0 0 0 2px var(--background-color); box-shadow: 0 0 0 2px var(--background-color);
height: 1.8rem;
min-width: 1.8rem;
max-width: 1.8rem;
vertical-align: top; vertical-align: top;
width: 1.8rem;
&:not(:first-child) { &:not(:first-child) {
margin-left: -2.2rem; margin-left: -1.8rem;
} }
} }
} }

8
src/components/Views/Author/Author.module.scss
View File

@ -10,6 +10,12 @@
.groupControls { .groupControls {
margin-bottom: 2em !important; margin-bottom: 2em !important;
margin-top: 0 !important; margin-top: 0 !important;
@include media-breakpoint-down(md) {
border-top: 2px solid #000;
margin-top: -1.6rem;
padding-top: 1.6rem;
}
} }
} }
@ -27,9 +33,11 @@
} }
.additionalControls { .additionalControls {
display: none;
white-space: nowrap; white-space: nowrap;
@include media-breakpoint-up(md) { @include media-breakpoint-up(md) {
display: block;
text-align: right; text-align: right;
} }
} }