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

Fixed subscriptions style

Browse Source
This commit is contained in:
kvakazyambra 2023-10-10 00:22:06 +03:00
parent e2c110140a
commit a9798c3726
8 changed files with 94 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/components/Author/AuthorBadge/AuthorBadge.module.scss
View File

@ -1,15 +1,26 @@
.AuthorBadge {
align-items: flex-start;
display: flex;
flex-flow: row nowrap;
align-items: flex-start;
margin-bottom: 1rem;
margin-bottom: 2rem;
@include media-breakpoint-down(sm) {
flex-wrap: wrap;
margin-bottom: 3rem;
}
.info {
@include font-size(1.4rem);
display: flex;
flex-direction: column;
border: none;
display: flex;
flex: 0 calc(100% - 5.2rem);
flex-direction: column;
line-height: 1.3;
margin-bottom: 1rem;
@include media-breakpoint-up(sm) {
flex: 1 100%;
}
&:hover {
background: unset;
@ -26,7 +37,24 @@
}
.actions {
flex: 0 20%;
margin-left: 5.2rem;
@include media-breakpoint-up(sm) {
margin-left: 2rem;
}
@include media-breakpoint-up(md) {
flex: 1;
margin-left: auto;
padding-left: 1rem;
text-align: right;
}
}
.subscribeButton {
border-radius: 0.8rem !important;
margin-right: 0 !important;
width: 9em;
}
}

12
src/components/Author/AuthorBadge/AuthorBadge.tsx
View File

@ -44,7 +44,13 @@ export const AuthorBadge = (props: Props) => {
return (
<div class={clsx(styles.AuthorBadge)}>
<Userpic hasLink={true} isMedium={true} name={props.author.name} userpic={props.author.userpic} />
<Userpic
hasLink={true}
isMedium={true}
name={props.author.name}
userpic={props.author.userpic}
slug={props.author.slug}
/>
<a href={`/author/${props.author.slug}`} class={styles.info}>
<div class={styles.name}>{props.author.name}</div>
<Switch
@ -84,14 +90,16 @@ export const AuthorBadge = (props: Props) => {
size="S"
value={isSubscribing() ? t('...subscribing') : t('Subscribe')}
onClick={() => handleSubscribe(true)}
class={styles.subscribeButton}
/>
}
>
<Button
variant="secondary"
variant="bordered"
size="S"
value={t('You are subscribed')}
onClick={() => handleSubscribe(false)}
class={styles.subscribeButton}
/>
</Show>
</Show>

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

@ -52,6 +52,10 @@
@include media-breakpoint-between(md, lg) {
flex-wrap: wrap;
.listWrapper & {
flex-wrap: nowrap;
}
}
&.authorDetailsShrinked {
@ -69,6 +73,10 @@
@include media-breakpoint-between(md, lg) {
flex: 1 0 100%;
.listWrapper & {
flex: 1;
}
}
@include media-breakpoint-up(md) {
@ -669,11 +677,6 @@
.listWrapper {
max-height: 70vh;
//padding-right: 2rem;
:global(.row) {
margin-right: 0;
}
}
.switcherCounter {

1
src/components/Nav/Modal/Modal.module.scss
View File

@ -73,6 +73,7 @@
}
.modalInner {
height: 100%;
overflow: auto;
padding: 5.4rem 2.4rem 2.4rem;
position: relative;

4
src/components/Topic/Card.tsx
View File

@ -78,7 +78,7 @@ export const TopicCard = (props: TopicProps) => {
<div
classList={{
[clsx('col-sm-18 col-md-24 col-lg-14 col-xl-15', styles.topicDetails)]: props.isNarrow,
[clsx('col-12 col-xs-17 col-md-18', styles.topicDetails)]: props.compact,
[clsx('col-24 col-sm-17 col-md-18', styles.topicDetails)]: props.compact,
[clsx('col-sm-17 col-md-18', styles.topicDetails)]:
!props.subscribeButtonBottom && !props.isNarrow && !props.compact
}}
@ -122,7 +122,7 @@ export const TopicCard = (props: TopicProps) => {
class={styles.controlContainer}
classList={{
'col-sm-6 col-md-24 col-lg-10 col-xl-9': props.isNarrow,
'col-12 col-xs-7 col-md-6': props.compact,
'col-24 col-sm-7 col-md-6': props.compact,
'col-sm-7 col-md-6': !props.subscribeButtonBottom && !props.isNarrow && !props.compact
}}
>

36
src/components/Topic/TopicBadge/TopicBadge.module.scss
View File

@ -2,8 +2,12 @@
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 1rem;
margin-bottom: 1rem;
margin-bottom: 2rem;
@include media-breakpoint-down(sm) {
flex-wrap: wrap;
margin-bottom: 3rem;
}
.picture {
display: block;
@ -16,6 +20,7 @@
background-position: 50% 50%;
background-repeat: no-repeat;
border: none;
margin-right: 1.2rem;
&:hover {
background-color: var(--black-50);
@ -27,10 +32,16 @@
}
.info {
display: flex;
flex-direction: column;
border: none;
display: flex;
flex: 0 calc(100% - 5.2rem);
flex-direction: column;
@include font-size(1.4rem);
margin-bottom: 1rem;
@include media-breakpoint-up(sm) {
flex: 1 100%;
}
&:hover {
background: unset;
@ -48,7 +59,24 @@
}
.actions {
flex: 0 20%;
margin-left: 5.2rem;
@include media-breakpoint-up(sm) {
margin-left: 2rem;
}
@include media-breakpoint-up(md) {
flex: 1;
margin-left: auto;
padding-left: 1rem;
text-align: right;
}
}
.subscribeButton {
border-radius: 0.8rem !important;
margin-right: 0 !important;
width: 9em;
}
}

4
src/components/Topic/TopicBadge/TopicBadge.tsx
View File

@ -83,14 +83,16 @@ export const TopicBadge = (props: Props) => {
size="S"
value={isSubscribing() ? t('...subscribing') : t('Subscribe')}
onClick={() => subscribe(true)}
class={styles.subscribeButton}
/>
}
>
<Button
onClick={() => subscribe(false)}
variant="secondary"
variant="bordered"
size="S"
value={t('You are subscribed')}
class={styles.subscribeButton}
/>
</Show>
</Show>

2
src/components/_shared/Button/Button.module.scss
View File

@ -118,6 +118,6 @@
height: 32px;
min-width: 53px;
font-size: 15px;
padding: 8px 16px;
padding: 1rem 1.2rem;
}
}