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

Author page style fixes

Browse Source
This commit is contained in:
kvakazyambra 2023-09-29 00:55:15 +03:00
parent 40b1b06875
commit 2e020c749a
6 changed files with 57 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Article/Comment.module.scss
View File

@ -225,7 +225,7 @@
margin-bottom: 1.2rem;
@include media-breakpoint-up(md) {
align-items: start;
align-items: center;
display: flex;
}
}

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

@ -1,5 +1,5 @@
.author {
align-items: baseline;
align-items: center;
display: flex;
flex-flow: row nowrap;
margin-bottom: 1.6rem;
@ -226,8 +226,10 @@
}
.button {
padding-left: 2rem;
padding-right: 2rem;
margin-right: 0.5em;
width: 9em;
//width: 9em;
&:first-of-type {
margin-left: 0;
@ -256,7 +258,7 @@
.authorSubscribeSocial {
align-items: center;
display: flex;
margin: 0 0.8rem 2rem;
margin: 0 0.8rem 2rem 0;
@include media-breakpoint-down(sm) {
flex: 1 100%;
@ -318,25 +320,32 @@
}
}
.buttonWriteAuthorPage {
background: #f6f6f6 !important;
border-radius: 0.8rem;
}
.authorPage {
align-items: center;
@include media-breakpoint-down(md) {
justify-content: center;
}
.authorName {
@include font-size(3.4rem);
font-weight: 500;
@include font-size(4rem);
font-weight: 700;
margin-bottom: 0.2em;
}
.authorAbout {
@include font-size(2rem);
color: #696969;
@include font-size(2rem);
font-weight: 500;
}
.authorSubscribe {
margin: 2rem -0.8rem 0;
margin: 2rem -0.8rem 0 0;
padding-left: 0;
@include media-breakpoint-down(md) {
@ -391,7 +400,7 @@
.button {
min-height: 4rem;
margin: 0 0.8rem;
margin: 0 0.8rem 0 0;
vertical-align: middle;
@include media-breakpoint-down(sm) {
@ -431,12 +440,12 @@
.authorComments {
.authorName {
@include font-size(1.2rem);
line-height: 1.2;
margin-bottom: 0;
}
.circlewrap {
margin-top: -0.6em;
margin-top: -0.4em;
}
}
@ -496,11 +505,21 @@
&:not(:first-child) {
margin-left: -1.8rem;
}
> * {
line-height: 1.8rem;
min-width: auto;
}
}
}
.subscribersCounter {
font-weight: 500;
margin-left: -0.6rem;
&:hover {
color: #696969;
}
}
.listWrapper {

2
src/components/Author/AuthorCard/AuthorCard.tsx
View File

@ -354,7 +354,7 @@ export const AuthorCard = (props: Props) => {
<button
class={styles.button}
classList={{
[styles.buttonSubscribe]: !props.isAuthorsList,
[styles.buttonWriteAuthorPage]: !props.isAuthorsList,
'button--subscribe': !props.isAuthorsList,
'button--subscribe-topic': props.isAuthorsList,
[styles.buttonWrite]: props.liteButtons && props.isAuthorsList

1
src/components/Author/Userpic/Userpic.module.scss
View File

@ -26,6 +26,7 @@
color: #000;
font-size: small;
text-align: center;
text-transform: uppercase;
line-height: 32px;
width: 100%;
height: 100%;

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

@ -8,7 +8,7 @@
}
.groupControls {
margin-bottom: 2em !important;
margin-bottom: 6rem !important;
margin-top: 0 !important;
@include media-breakpoint-down(md) {
@ -19,6 +19,12 @@
}
}
.authorHeader {
border-bottom: 2px solid #000;
margin-bottom: 2.4rem;
padding-bottom: 4rem;
}
.ratingContainer {
@include font-size(1.5rem);
display: inline-flex;

20
src/components/Views/Author/Author.tsx
View File

@ -126,12 +126,14 @@ export const AuthorView = (props: Props) => {
<div class={styles.authorPage}>
<div class="wide-container">
<Show when={author()}>
<div class={styles.authorHeader}>
<AuthorCard
author={author()}
isAuthorPage={true}
followers={followers()}
following={following()}
/>
</div>
</Show>
<div class={clsx(styles.groupControls, 'row')}>
<div class="col-md-16">
@ -204,33 +206,33 @@ export const AuthorView = (props: Props) => {
<Match when={page().route === 'author'}>
<Show when={sortedArticles().length === 1}>
<Row1 article={sortedArticles()[0]} noAuthorLink={true} />
<Row1 article={sortedArticles()[0]} noAuthorLink={true} nodate={true} />
</Show>
<Show when={sortedArticles().length === 2}>
<Row2 articles={sortedArticles()} isEqual={true} noAuthorLink={true} />
<Row2 articles={sortedArticles()} isEqual={true} noAuthorLink={true} nodate={true} />
</Show>
<Show when={sortedArticles().length === 3}>
<Row3 articles={sortedArticles()} noAuthorLink={true} />
<Row3 articles={sortedArticles()} noAuthorLink={true} nodate={true} />
</Show>
<Show when={sortedArticles().length > 3}>
<Row1 article={sortedArticles()[0]} noAuthorLink={true} />
<Row1 article={sortedArticles()[0]} noAuthorLink={true} nodate={true} />
<Row2 articles={sortedArticles().slice(1, 3)} isEqual={true} noAuthorLink={true} />
<Row1 article={sortedArticles()[3]} noAuthorLink={true} />
<Row1 article={sortedArticles()[3]} noAuthorLink={true} nodate={true} />
<Row2 articles={sortedArticles().slice(4, 6)} isEqual={true} noAuthorLink={true} />
<Row1 article={sortedArticles()[6]} noAuthorLink={true} />
<Row1 article={sortedArticles()[6]} noAuthorLink={true} nodate={true} />
<Row2 articles={sortedArticles().slice(7, 9)} isEqual={true} noAuthorLink={true} />
<For each={shouts()}>
{(shout) => (
<>
<Row1 article={shout[0]} noAuthorLink={true} />
<Row1 article={shout[0]} noAuthorLink={true} nodate={true} />
<Row2 articles={shout.slice(1, 3)} isEqual={true} noAuthorLink={true} />
<Row1 article={shout[3]} noAuthorLink={true} />
<Row1 article={shout[3]} noAuthorLink={true} nodate={true} />
<Row2 articles={shout.slice(4, 6)} isEqual={true} noAuthorLink={true} />
<Row1 article={shout[6]} noAuthorLink={true} />
<Row1 article={shout[6]} noAuthorLink={true} nodate={true} />
<Row2 articles={shout.slice(7, 9)} isEqual={true} noAuthorLink={true} />
</>
)}