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

Revert styles for user descriptions

Browse Source
This commit is contained in:
kvakazyambra 2024-04-30 16:56:39 +03:00
parent 4c787fe49c
commit e1484e0aa9
2 changed files with 102 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -16,6 +16,33 @@
gap: 1rem;
}
.picture {
display: block;
width: 40px;
height: 40px;
min-width: 40px;
border-radius: 8px;
background-color: var(--black-50);
background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE5LjUgMTQuMjVDMTkuOTE0MSAxNC4yNSAyMC4yNSAxNC41ODU5IDIwLjI1IDE1QzIwLjI1IDE1LjQxNDEgMTkuOTE0MSAxNS43NSAxOS41IDE1Ljc1SDE1Ljc1VjE5LjVDMTUuNzUgMTkuOTE0MSAxNS40MTQxIDIwLjI1IDE1IDIwLjI1QzE0LjU4NTkgMjAuMjUgMTQuMjUgMTkuOTE0MSAxNC4yNSAxOS41VjE1Ljc1SDkuNzVWMTkuNUM5Ljc1IDE5LjkxNDEgOS40MTQwNiAyMC4yNSA5IDIwLjI1QzguNTg1OTQgMjAuMjUgOC4yNSAxOS45MTQxIDguMjUgMTkuNVYxNS43NUg0LjVDNC4wODU5NCAxNS43NSAzLjc1IDE1LjQxNDEgMy43NSAxNUMzLjc1IDE0LjU4NTkgNC4wODU5NCAxNC4yNSA0LjUgMTQuMjVIOC4yNVY5Ljc1SDQuNUM0LjA4NTk0IDkuNzUgMy43NSA5LjQxNDA2IDMuNzUgOUMzLjc1IDguNTg1OTQgNC4wODU5NCA4LjI1IDQuNSA4LjI1SDguMjVWNC41QzguMjUgNC4wODU5NCA4LjU4NTk0IDMuNzUgOSAzLjc1QzkuNDE0MDYgMy43NSA5Ljc1IDQuMDg1OTQgOS43NSA0LjVWOC4yNUgxNC4yNVY0LjVDMTQuMjUgNC4wODU5NCAxNC41ODU5IDMuNzUgMTUgMy43NUMxNS40MTQxIDMuNzUgMTUuNzUgNC4wODU5NCAxNS43NSA0LjVWOC4yNUgxOS41QzE5LjkxNDEgOC4yNSAyMC4yNSA4LjU4NTk0IDIwLjI1IDlDMjAuMjUgOS40MTQwNiAxOS45MTQxIDkuNzUgMTkuNSA5Ljc1SDE1Ljc1VjE0LjI1SDE5LjVaTTkuNzUgMTQuMjVIMTQuMjVWOS43NUg5Ljc1VjE0LjI1WiIgZmlsbD0iIzlGQTFBNyIvPgo8L3N2Zz4K');
background-position: 50% 50%;
background-repeat: no-repeat;
border: none;
&.smallSize {
width: 32px;
height: 32px;
min-width: 32px;
}
&:hover {
background-color: var(--black-50);
}
&.withImage {
background-size: cover;
}
}
.info {
@include font-size(1.4rem);
border: none;
@ -59,6 +86,50 @@
}
}
.TopicBadgeSubscriptionsMode {
margin-bottom: 2rem;
.content {
margin-bottom: 0.8rem;
}
.info {
&:hover {
.title {
background-color: var(--blue-500);
color: var(--white-500);
}
}
.title {
@include font-size(1.4rem);
font-weight: 500;
line-height: 1em;
color: var(--blue-500);
text-transform: uppercase;
}
.description {
color: var(--black-400);
@include font-size(1.4rem);
font-weight: 500;
margin: 0;
}
}
.actions {
display: flex;
flex-direction: row;
gap: 1rem;
}
.subscribeButton {
border-radius: 0.8rem !important;
margin-right: 0 !important;
width: 9em;
}
}
.stats {
@include font-size(1.5rem);

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

@ -48,9 +48,24 @@ export const TopicBadge = (props: Props) => {
lang() === 'en' ? capitalize(props.topic.slug.replaceAll('-', ' ')) : props.topic.title
return (
<div class={styles.TopicBadge}>
<div class={clsx(styles.TopicBadge, { [styles.TopicBadgeSubscriptionsMode]: props.subscriptionsMode })}>
<div class={styles.content}>
<div class={styles.basicInfo}>
<Show when={props.subscriptionsMode}>
<a
href={`/topic/${props.topic.slug}`}
class={clsx(styles.picture, {
[styles.withImage]: props.topic.pic,
[styles.smallSize]: isMobileView(),
})}
style={
props.topic.pic && {
'background-image': `url('${getImageUrl(props.topic.pic, { width: 40, height: 40 })}')`,
}
}
/>
</Show>
<a href={`/topic/${props.topic.slug}`} class={styles.info}>
<span class={styles.title}>{title()}</span>
@ -75,18 +90,23 @@ export const TopicBadge = (props: Props) => {
/>
</div>
</div>
<div class={styles.stats}>
<span class={styles.statsItem}>{t('shoutsWithCount', { count: props.topic?.stat?.shouts })}</span>
<span class={styles.statsItem}>{t('authorsWithCount', { count: props.topic?.stat?.authors })}</span>
<span class={styles.statsItem}>
{t('FollowersWithCount', { count: props.topic?.stat?.followers })}
</span>
<Show when={props.topic?.stat?.comments}>
<Show when={!props.subscriptionsMode}>
<div class={styles.stats}>
<span class={styles.statsItem}>{t('shoutsWithCount', { count: props.topic?.stat?.shouts })}</span>
<span class={styles.statsItem}>
{t('CommentsWithCount', { count: props.topic?.stat?.comments ?? 0 })}
{t('authorsWithCount', { count: props.topic?.stat?.authors })}
</span>
</Show>
</div>
<span class={styles.statsItem}>
{t('FollowersWithCount', { count: props.topic?.stat?.followers })}
</span>
<Show when={props.topic?.stat?.comments}>
<span class={styles.statsItem}>
{t('CommentsWithCount', { count: props.topic?.stat?.comments ?? 0 })}
</span>
</Show>
</div>
</Show>
</div>
)
}