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

Fixed all authors page

Browse Source
This commit is contained in:
kvakazyambra 2022-11-11 11:58:22 +03:00
parent 6644e01585
commit 76d43514e6
7 changed files with 125 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -15,14 +15,26 @@
.authorDetails { .authorDetails {
display: flex; display: flex;
flex: 1; flex: 1;
padding-right: 1.2rem; //padding-right: 1.2rem;
width: max-content; width: max-content;
@include media-breakpoint-down(sm) {
flex-wrap: wrap;
}
} }
.authorDetailsWrapper { .authorDetailsWrapper {
flex: 1 100%;
@include media-breakpoint-up(sm) {
flex: 1; flex: 1;
} }
@include media-breakpoint-up(md) {
padding-right: 1.2rem;
}
}
.authorName { .authorName {
border: none !important; border: none !important;
font-size: 1.7rem; font-size: 1.7rem;
@ -33,6 +45,7 @@
.authorAbout { .authorAbout {
font-size: 1.5rem; font-size: 1.5rem;
color: rgb(0 0 0 / 60%); color: rgb(0 0 0 / 60%);
word-break: break-word;
} }
.authorSubscribe { .authorSubscribe {
@ -118,6 +131,10 @@
button { button {
margin-right: 0.5em; margin-right: 0.5em;
&:last-child {
margin-right: 0;
}
} }
} }
@ -221,3 +238,22 @@
vertical-align: middle; vertical-align: middle;
} }
} }
.authorsListItem {
.authorName {
@include font-size(2.2rem);
font-weight: bold;
}
.authorSubscribe {
align-items: baseline;
@include media-breakpoint-down(sm) {
padding: 1rem 0 0;
}
}
.buttonLabel {
display: block;
}
}

67
src/components/Author/Card.tsx
View File

@ -1,7 +1,7 @@
import type { Author } from '../../graphql/types.gen' import type { Author } from '../../graphql/types.gen'
import Userpic from './Userpic' import Userpic from './Userpic'
import { Icon } from '../Nav/Icon' import { Icon } from '../Nav/Icon'
import style from './Card.module.scss' import styles from './Card.module.scss'
import { createMemo, For, Show } from 'solid-js' import { createMemo, For, Show } from 'solid-js'
import { translit } from '../../utils/ru2en' import { translit } from '../../utils/ru2en'
import { t } from '../../utils/intl' import { t } from '../../utils/intl'
@ -19,6 +19,7 @@ interface AuthorCardProps {
author: Author author: Author
isAuthorPage?: boolean isAuthorPage?: boolean
noSocialButtons?: boolean noSocialButtons?: boolean
isAuthorsList?: boolean
} }
export const AuthorCard = (props: AuthorCardProps) => { export const AuthorCard = (props: AuthorCardProps) => {
@ -36,51 +37,81 @@ export const AuthorCard = (props: AuthorCardProps) => {
} }
// TODO: reimplement AuthorCard // TODO: reimplement AuthorCard
return ( return (
<div class={style.author} classList={{ [style.authorPage]: props.isAuthorPage }}> <div
<Userpic user={props.author} hasLink={props.hasLink} isBig={props.isAuthorPage} /> class={clsx(styles.author)}
classList={{
[styles.authorPage]: props.isAuthorPage,
[styles.authorsListItem]: props.isAuthorsList
}}
>
<Userpic
user={props.author}
hasLink={props.hasLink}
isBig={props.isAuthorPage}
isAuthorsList={props.isAuthorsList}
/>
<div class={style.authorDetails}> <div class={styles.authorDetails}>
<div class={style.authorDetailsWrapper}> <div class={styles.authorDetailsWrapper}>
<Show when={props.hasLink}> <Show when={props.hasLink}>
<a class={style.authorName} href={`/author/${props.author.slug}`}> <a class={styles.authorName} href={`/author/${props.author.slug}`}>
{name()} {name()}
</a> </a>
</Show> </Show>
<Show when={!props.hasLink}> <Show when={!props.hasLink}>
<div class={style.authorName}>{name()}</div> <div class={styles.authorName}>{name()}</div>
</Show> </Show>
<Show when={!props.hideDescription}> <Show when={!props.hideDescription}>
<div class={style.authorAbout}>{bio()}</div> <div class={styles.authorAbout} classList={{ 'text-truncate': props.isAuthorsList }}>
{bio()}
</div>
</Show> </Show>
</div> </div>
<Show when={canFollow()}> <Show when={canFollow()}>
<div class={style.authorSubscribe}> <div class={styles.authorSubscribe}>
<Show <Show
when={subscribed()} when={subscribed()}
fallback={ fallback={
<button <button
onClick={() => follow} onClick={() => follow}
class={clsx('button button--subscribe', style.button, style.buttonSubscribe)} class={clsx('button', styles.button)}
classList={{
[styles.buttonSubscribe]: !props.isAuthorsList,
'button--subscribe': !props.isAuthorsList,
'button--subscribe-topic': props.isAuthorsList,
[styles.buttonWrite]: props.isAuthorsList
}}
> >
<Icon name="author-subscribe" class={style.icon} /> <Show when={!props.isAuthorsList}>
<span class={style.buttonLabel}>&nbsp;{t('Follow')}</span> <Icon name="author-subscribe" class={styles.icon} />
&nbsp;
</Show>
<span class={styles.buttonLabel}>{t('Follow')}</span>
</button> </button>
} }
> >
<button <button
onClick={() => unfollow} onClick={() => unfollow}
class={clsx('button button--subscribe', style.button, style.buttonSubscribe)} classList={{
[styles.buttonSubscribe]: !props.isAuthorsList,
'button--subscribe': !props.isAuthorsList,
'button--subscribe-topic': props.isAuthorsList,
[styles.buttonWrite]: props.isAuthorsList
}}
> >
<Icon name="author-unsubscribe" class={style.icon} /> <Show when={!props.isAuthorsList}>
<span class={style.buttonLabel}>-&nbsp;{t('Unfollow')}</span> <Icon name="author-unsubscribe" class={styles.icon} />
&nbsp;
</Show>
<span class={styles.buttonLabel}>{t('Unfollow')}</span>
</button> </button>
</Show> </Show>
<Show when={!props.compact}> <Show when={!props.compact && !props.isAuthorsList}>
<button class={clsx(style.buttonWrite, style.button, 'button button--subscribe-topic')}> <button class={clsx(styles.buttonWrite, styles.button, 'button button--subscribe-topic')}>
<Icon name="edit" class={style.icon} /> <Icon name="edit" class={styles.icon} />
{t('Write')} {t('Write')}
</button> </button>

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

@ -20,7 +20,7 @@
border: 2px solid black; border: 2px solid black;
background-color: white; background-color: white;
text-align: center; text-align: center;
line-height: 32px; line-height: 28px;
} }
.anonymous { .anonymous {
@ -47,3 +47,15 @@
width: 100%; width: 100%;
} }
} }
.authorsList {
margin-right: 2.4rem;
max-height: 6.8rem;
min-width: 6.8rem;
height: 6.8rem;
width: 6.8rem;
.userpic {
line-height: 6.4rem;
}
}

15
src/components/Author/Userpic.tsx
View File

@ -1,6 +1,6 @@
import { Show } from 'solid-js' import { Show } from 'solid-js'
import type { Author } from '../../graphql/types.gen' import type { Author } from '../../graphql/types.gen'
import style from './Userpic.module.scss' import styles from './Userpic.module.scss'
import { clsx } from 'clsx' import { clsx } from 'clsx'
interface UserpicProps { interface UserpicProps {
@ -8,6 +8,7 @@ interface UserpicProps {
hasLink?: boolean hasLink?: boolean
isBig?: boolean isBig?: boolean
class?: string class?: string
isAuthorsList?: boolean
} }
export default (props: UserpicProps) => { export default (props: UserpicProps) => {
@ -18,7 +19,13 @@ export default (props: UserpicProps) => {
} }
return ( return (
<div class={clsx(style.circlewrap, props.class)} classList={{ [style.big]: props.isBig }}> <div
class={clsx(styles.circlewrap, props.class)}
classList={{
[styles.big]: props.isBig,
[styles.authorsList]: props.isAuthorsList
}}
>
<Show when={props.hasLink}> <Show when={props.hasLink}>
<a href={`/author/${props.user.slug}`}> <a href={`/author/${props.user.slug}`}>
<Show <Show
@ -31,7 +38,7 @@ export default (props: UserpicProps) => {
/> />
} }
> >
<div class={style.userpic}>{letters()}</div> <div class={styles.userpic}>{letters()}</div>
</Show> </Show>
</a> </a>
</Show> </Show>
@ -47,7 +54,7 @@ export default (props: UserpicProps) => {
/> />
} }
> >
<div class={style.userpic}>{letters()}</div> <div class={styles.userpic}>{letters()}</div>
</Show> </Show>
</Show> </Show>
</div> </div>

9
src/components/Views/AllAuthors.tsx
View File

@ -60,15 +60,15 @@ export const AllAuthorsView = (props: Props) => {
<div class={styles.allTopicsPage}> <div class={styles.allTopicsPage}>
<Show when={sortedAuthors().length > 0}> <Show when={sortedAuthors().length > 0}>
<div class="wide-container"> <div class="wide-container">
<div class="shift-content"> <div class="shift-content container">
<div class="row"> <div class="row">
<div class={clsx(styles.pageHeader, 'col-lg-9')}> <div class={clsx(styles.pageHeader, 'col-lg-10 col-xl-8')}>
<h1>{t('Authors')}</h1> <h1>{t('Authors')}</h1>
<p>{t('Subscribe who you like to tune your personal feed')}</p> <p>{t('Subscribe who you like to tune your personal feed')}</p>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col"> <div class="col-lg-10 col-xl-8">
<ul class={clsx(styles.viewSwitcher, 'view-switcher')}> <ul class={clsx(styles.viewSwitcher, 'view-switcher')}>
<li classList={{ selected: searchParams().by === 'shouts' }}> <li classList={{ selected: searchParams().by === 'shouts' }}>
<a href="/authors?by=shouts" onClick={handleClientRouteLinkClick}> <a href="/authors?by=shouts" onClick={handleClientRouteLinkClick}>
@ -95,7 +95,7 @@ export const AllAuthorsView = (props: Props) => {
<Show <Show
when={!searchParams().by || searchParams().by === 'name'} when={!searchParams().by || searchParams().by === 'name'}
fallback={() => ( fallback={() => (
<div class="stats"> <div class={styles.stats}>
<For each={sortedAuthors()}> <For each={sortedAuthors()}>
{(author) => ( {(author) => (
<AuthorCard <AuthorCard
@ -104,6 +104,7 @@ export const AllAuthorsView = (props: Props) => {
hasLink={true} hasLink={true}
subscribed={subscribed(author.slug)} subscribed={subscribed(author.slug)}
noSocialButtons={true} noSocialButtons={true}
isAuthorsList={true}
/> />
)} )}
</For> </For>

13
src/styles/AllTopics.module.scss
View File

@ -1,11 +1,4 @@
.allTopicsPage { .allTopicsPage {
.pageHeader,
.group h2 {
@include media-breakpoint-down(sm) {
margin-left: 1.3rem;
}
}
.group { .group {
font-weight: bold; font-weight: bold;
margin: 3em 0 9.6rem; margin: 3em 0 9.6rem;
@ -39,8 +32,6 @@
} }
} }
.viewSwitcher { .stats {
@include media-breakpoint-down(sm) { margin-top: 2.4rem;
margin: 0 2.6rem;
}
} }

7
src/styles/app.scss
View File

@ -515,6 +515,7 @@ figcaption {
.view-switcher__search { .view-switcher__search {
text-align: right; text-align: right;
white-space: nowrap;
@include media-breakpoint-up(sm) { @include media-breakpoint-up(sm) {
flex: 1; flex: 1;
@ -643,6 +644,12 @@ astro-island {
.container { .container {
max-width: 1400px; max-width: 1400px;
padding: 0;
width: auto;
@include media-breakpoint-down(sm) {
padding: 0 $container-padding-x * 0.5;
}
} }
.container--static-page { .container--static-page {