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

Fix profile markup (#259)

Browse Source
This commit is contained in:
Ilya Y 2023-10-13 09:10:24 +03:00 committed by GitHub
parent b1db22aa23
commit 8e6b70eb7e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 284 additions and 291 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Article/AudioHeader/AudioHeader.tsx
View File

@ -5,8 +5,6 @@ import { MediaItem } from '../../../pages/types'
import { createSignal, Show } from 'solid-js' import { createSignal, Show } from 'solid-js'
import { Icon } from '../../_shared/Icon' import { Icon } from '../../_shared/Icon'
import { Topic } from '../../../graphql/types.gen' import { Topic } from '../../../graphql/types.gen'
import { getPagePath } from '@nanostores/router'
import { router } from '../../../stores/router'
import { CardTopic } from '../../Feed/CardTopic' import { CardTopic } from '../../Feed/CardTopic'
type Props = { type Props = {

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

@ -625,7 +625,7 @@
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
font-size: 1.4rem; font-size: 1.4rem;
margin-top: 0.5rem; margin-top: 1.5rem;
gap: 1rem; gap: 1rem;
@include media-breakpoint-down(md) { @include media-breakpoint-down(md) {
@ -637,7 +637,6 @@
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;
border-bottom: unset !important; border-bottom: unset !important;
@ -669,10 +668,6 @@
.subscribersCounter { .subscribersCounter {
font-weight: 500; font-weight: 500;
margin-left: -0.6rem; margin-left: -0.6rem;
&:hover {
color: #696969;
}
} }
.listWrapper { .listWrapper {

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

@ -126,192 +126,168 @@ export const AuthorCard = (props: Props) => {
setUserpicUrl(props.author.userpic.replace('100x', '500x500')) setUserpicUrl(props.author.userpic.replace('100x', '500x500'))
} }
return ( return (
<> <div
class={clsx(styles.author, props.class)}
classList={{
['row']: props.isAuthorPage,
[styles.authorPage]: props.isAuthorPage,
[styles.authorComments]: props.isComments,
[styles.authorsListItem]: props.isAuthorsList,
[styles.feedMode]: props.isFeedMode,
[styles.nowrapView]: props.isNowrap
}}
>
<Show
when={props.isAuthorPage}
fallback={
<Userpic
name={props.author.name}
userpic={props.author.userpic}
hasLink={props.hasLink}
isBig={props.isAuthorPage}
isAuthorsList={props.isAuthorsList}
isFeedMode={props.isFeedMode}
slug={props.author.slug}
class={styles.circlewrap}
/>
}
>
<div class="col-md-5">
<Userpic
name={props.author.name}
userpic={userpicUrl()}
hasLink={props.hasLink}
isBig={props.isAuthorPage}
isAuthorsList={props.isAuthorsList}
isFeedMode={props.isFeedMode}
slug={props.author.slug}
class={styles.circlewrap}
/>
</div>
</Show>
<div <div
class={clsx(styles.author, props.class)} class={styles.authorDetails}
classList={{ classList={{
['row']: props.isAuthorPage, 'col-md-15 col-xl-13': props.isAuthorPage,
[styles.authorPage]: props.isAuthorPage, [styles.authorDetailsShrinked]: props.isAuthorPage
[styles.authorComments]: props.isComments,
[styles.authorsListItem]: props.isAuthorsList,
[styles.feedMode]: props.isFeedMode,
[styles.nowrapView]: props.isNowrap
}} }}
> >
<Show <div class={styles.authorDetailsWrapper}>
when={props.isAuthorPage} <div class={styles.authorNameContainer}>
fallback={ <ConditionalWrapper
<Userpic condition={props.hasLink}
name={props.author.name} wrapper={(children) => (
userpic={props.author.userpic} <a class={styles.authorName} href={`/author/${props.author.slug}`}>
hasLink={props.hasLink} {children}
isBig={props.isAuthorPage} </a>
isAuthorsList={props.isAuthorsList} )}
isFeedMode={props.isFeedMode} >
slug={props.author.slug} <span class={clsx({ [styles.authorName]: !props.hasLink })}>{name()}</span>
class={styles.circlewrap} </ConditionalWrapper>
/>
}
>
<div class="col-md-5">
<Userpic
name={props.author.name}
userpic={userpicUrl()}
hasLink={props.hasLink}
isBig={props.isAuthorPage}
isAuthorsList={props.isAuthorsList}
isFeedMode={props.isFeedMode}
slug={props.author.slug}
class={styles.circlewrap}
/>
</div> </div>
</Show> <Show
when={props.author.bio && !props.hideBio}
fallback={
props.showPublicationsCounter ? (
<div class={styles.authorAbout}>
{t('PublicationsWithCount', { count: props.author.stat?.shouts ?? 0 })}
</div>
) : (
''
)
}
>
<div
class={styles.authorAbout}
classList={{ 'text-truncate': props.truncateBio }}
innerHTML={props.author.bio}
/>
</Show>
<div <Show
class={styles.authorDetails} when={
classList={{ (props.followers && props.followers.length > 0) ||
'col-md-15 col-xl-13': props.isAuthorPage, (props.following && props.following.length > 0)
[styles.authorDetailsShrinked]: props.isAuthorPage }
}} >
> <div class={styles.subscribersContainer}>
<div class={styles.authorDetailsWrapper}> <Switch>
<div class={styles.authorNameContainer}> <Match when={props.followers && props.followers.length > 0 && !props.isCurrentUser}>
<ConditionalWrapper <a href="?modal=followers" class={styles.subscribers}>
condition={props.hasLink} <For each={props.followers.slice(0, 3)}>
wrapper={(children) => ( {(f) => <Userpic name={f.name} userpic={f.userpic} class={styles.userpic} />}
<a class={styles.authorName} href={`/author/${props.author.slug}`}> </For>
{children} <div class={styles.subscribersCounter}>
{t('SubscriptionWithCount', { count: props.followers.length })}
</div>
</a>
</Match>
<Match when={props.followers && props.followers.length > 0 && props.isCurrentUser}>
<Button
variant="secondary"
onClick={() => redirectPage(router, 'profileSettings')}
value={t('Edit profile')}
/>
</Match>
</Switch>
<Switch>
<Match when={props.following && props.following.length > 0 && !props.isCurrentUser}>
<a href="?modal=following" class={styles.subscribers}>
<For each={props.following.slice(0, 3)}>
{(f) => {
if ('name' in f) {
return <Userpic name={f.name} userpic={f.userpic} class={styles.userpic} />
} else if ('title' in f) {
return <Userpic name={f.title} userpic={f.pic} class={styles.userpic} />
}
return null
}}
</For>
<div class={styles.subscribersCounter}>
{t('SubscriberWithCount', { count: props?.following.length ?? 0 })}
</div>
</a>
</Match>
<Match when={props.following && props.following.length > 0 && props.isCurrentUser}>
<SharePopup
containerCssClass={stylesHeader.control}
title={props.author.name}
description={props.author.bio}
imageUrl={props.author.userpic}
shareUrl={getShareUrl({ pathname: `/author/${props.author.slug}` })}
trigger={<Button variant="secondary" value={t('Share')} />}
/>
</Match>
</Switch>
</div>
</Show>
</div>
<ShowOnlyOnClient>
<Show when={isSessionLoaded()}>
<div class={styles.authorSubscribeSocial}>
<For each={props.author.links}>
{(link) => (
<a
class={styles.socialLink}
href={link.startsWith('http') ? link : `https://${link}`}
target="_blank"
rel="nofollow noopener"
>
<span class={styles.authorSubscribeSocialLabel}>
{link.startsWith('http') ? link : `https://${link}`}
</span>
</a> </a>
)} )}
> </For>
<span class={clsx({ [styles.authorName]: !props.hasLink })}>{name()}</span>
</ConditionalWrapper>
</div> </div>
<Show <Show when={canFollow()}>
when={props.author.bio && !props.hideBio} <div class={styles.authorSubscribe}>
fallback={ <Show
props.showPublicationsCounter ? ( when={subscribed()}
<div class={styles.authorAbout}> fallback={
{t('PublicationsWithCount', { count: props.author.stat?.shouts ?? 0 })}
</div>
) : (
''
)
}
>
<div
class={styles.authorAbout}
classList={{ 'text-truncate': props.truncateBio }}
innerHTML={props.author.bio}
/>
</Show>
<Show
when={
(props.followers && props.followers.length > 0) ||
(props.following && props.following.length > 0)
}
>
<div class={styles.subscribersContainer}>
<Switch>
<Match when={props.followers && props.followers.length > 0 && !props.isCurrentUser}>
<a href="?modal=followers" class={styles.subscribers}>
<For each={props.followers.slice(0, 3)}>
{(f) => <Userpic name={f.name} userpic={f.userpic} class={styles.userpic} />}
</For>
<div class={styles.subscribersCounter}>
{t('SubscriptionWithCount', { count: props.followers.length })}
</div>
</a>
</Match>
<Match when={props.followers && props.followers.length > 0 && props.isCurrentUser}>
<Button
variant="secondary"
onClick={() => redirectPage(router, 'profileSettings')}
value={t('Edit profile')}
/>
</Match>
</Switch>
<Switch>
<Match when={props.following && props.following.length > 0 && !props.isCurrentUser}>
<a href="?modal=following" class={styles.subscribers}>
<For each={props.following.slice(0, 3)}>
{(f) => {
if ('name' in f) {
return <Userpic name={f.name} userpic={f.userpic} class={styles.userpic} />
} else if ('title' in f) {
return <Userpic name={f.title} userpic={f.pic} class={styles.userpic} />
}
return null
}}
</For>
<div class={styles.subscribersCounter}>
{t('SubscriberWithCount', { count: props?.following.length ?? 0 })}
</div>
</a>
</Match>
<Match when={props.following && props.following.length > 0 && props.isCurrentUser}>
<SharePopup
containerCssClass={stylesHeader.control}
title={props.author.name}
description={props.author.bio}
imageUrl={props.author.userpic}
shareUrl={getShareUrl({ pathname: `/author/${props.author.slug}` })}
trigger={<Button variant="secondary" value={t('Share')} />}
/>
</Match>
</Switch>
</div>
</Show>
</div>
<ShowOnlyOnClient>
<Show when={isSessionLoaded()}>
<div class={styles.authorSubscribeSocial}>
<For each={props.author.links}>
{(link) => (
<a
class={styles.socialLink}
href={link.startsWith('http') ? link : `https://${link}`}
target="_blank"
rel="nofollow noopener"
>
<span class={styles.authorSubscribeSocialLabel}>
{link.startsWith('http') ? link : `https://${link}`}
</span>
</a>
)}
</For>
</div>
<Show when={canFollow()}>
<div class={styles.authorSubscribe}>
<Show
when={subscribed()}
fallback={
<button
onClick={handleSubscribe}
class={clsx('button', styles.button)}
classList={{
[styles.buttonSubscribe]: !props.isAuthorsList && !props.isTextButton,
'button--subscribe': !props.isAuthorsList,
'button--subscribe-topic': props.isAuthorsList || props.isTextButton,
[styles.buttonWrite]: props.isAuthorsList || props.isTextButton,
[styles.isSubscribing]: isSubscribing()
}}
disabled={isSubscribing()}
>
<Show when={!props.isAuthorsList && !props.isTextButton && !props.isAuthorPage}>
<Icon name="author-subscribe" class={styles.icon} />
</Show>
<Show when={props.isTextButton || props.isAuthorPage}>
<span class={clsx(styles.buttonLabel, styles.buttonLabelVisible)}>
{t('Follow')}
</span>
</Show>
</button>
}
>
<button <button
onClick={() => subscribe(false)} onClick={handleSubscribe}
class={clsx('button', styles.button)} class={clsx('button', styles.button)}
classList={{ classList={{
[styles.buttonSubscribe]: !props.isAuthorsList && !props.isTextButton, [styles.buttonSubscribe]: !props.isAuthorsList && !props.isTextButton,
@ -323,118 +299,139 @@ export const AuthorCard = (props: Props) => {
disabled={isSubscribing()} disabled={isSubscribing()}
> >
<Show when={!props.isAuthorsList && !props.isTextButton && !props.isAuthorPage}> <Show when={!props.isAuthorsList && !props.isTextButton && !props.isAuthorPage}>
<Icon name="author-unsubscribe" class={styles.icon} /> <Icon name="author-subscribe" class={styles.icon} />
</Show> </Show>
<Show when={props.isTextButton || props.isAuthorPage}> <Show when={props.isTextButton || props.isAuthorPage}>
<span <span class={clsx(styles.buttonLabel, styles.buttonLabelVisible)}>
class={clsx( {t('Follow')}
styles.buttonLabel,
styles.buttonLabelVisible,
styles.buttonUnfollowLabel
)}
>
{t('Unfollow')}
</span>
<span
class={clsx(
styles.buttonLabel,
styles.buttonLabelVisible,
styles.buttonSubscribedLabel
)}
>
{t('You are subscribed')}
</span> </span>
</Show> </Show>
</button> </button>
</Show> }
>
<button
onClick={() => subscribe(false)}
class={clsx('button', styles.button)}
classList={{
[styles.buttonSubscribe]: !props.isAuthorsList && !props.isTextButton,
'button--subscribe': !props.isAuthorsList,
'button--subscribe-topic': props.isAuthorsList || props.isTextButton,
[styles.buttonWrite]: props.isAuthorsList || props.isTextButton,
[styles.isSubscribing]: isSubscribing()
}}
disabled={isSubscribing()}
>
<Show when={!props.isAuthorsList && !props.isTextButton && !props.isAuthorPage}>
<Icon name="author-unsubscribe" class={styles.icon} />
</Show>
<Show when={props.isTextButton || props.isAuthorPage}>
<span
class={clsx(
styles.buttonLabel,
styles.buttonLabelVisible,
styles.buttonUnfollowLabel
)}
>
{t('Unfollow')}
</span>
<span
class={clsx(
styles.buttonLabel,
styles.buttonLabelVisible,
styles.buttonSubscribedLabel
)}
>
{t('You are subscribed')}
</span>
</Show>
</button>
</Show>
<Show when={!props.hideWriteButton}> <Show when={!props.hideWriteButton}>
<button <button
class={clsx(styles.button, styles.buttonSubscribe)} class={clsx(styles.button, styles.buttonSubscribe)}
classList={{ classList={{
'button--subscribe': !props.isAuthorsList, 'button--subscribe': !props.isAuthorsList,
'button--subscribe-topic': props.isAuthorsList, 'button--subscribe-topic': props.isAuthorsList,
[styles.buttonWrite]: props.liteButtons && props.isAuthorsList [styles.buttonWrite]: props.liteButtons && props.isAuthorsList
}} }}
onClick={initChat} onClick={initChat}
> >
<Show when={!props.isTextButton && !props.isAuthorPage}> <Show when={!props.isTextButton && !props.isAuthorPage}>
<Icon name="comment" class={styles.icon} /> <Icon name="comment" class={styles.icon} />
</Show> </Show>
<Show when={!props.liteButtons || props.isTextButton}>{t('Write')}</Show> <Show when={!props.liteButtons || props.isTextButton}>{t('Write')}</Show>
</button> </button>
</Show> </Show>
</div> </div>
</Show>
</Show> </Show>
</ShowOnlyOnClient> </Show>
</div> </ShowOnlyOnClient>
<Show when={props.followers}>
<Modal variant="medium" name="followers" onClose={handleCloseFollowModals} maxHeight>
<>
<h2>{t('Followers')}</h2>
<div class={styles.listWrapper}>
<div class="row">
<div class="col-24">
<For each={props.followers}>
{(follower: Author) => <AuthorBadge author={follower} />}
</For>
</div>
</div>
</div>
</>
</Modal>
</Show>
<Show when={props.following}>
<Modal variant="medium" name="following" onClose={handleCloseFollowModals} maxHeight>
<>
<h2>{t('Subscriptions')}</h2>
<ul class="view-switcher">
<li class={clsx({ 'view-switcher__item--selected': subscriptionFilter() === 'all' })}>
<button type="button" onClick={() => setSubscriptionFilter('all')}>
{t('All')}
</button>
<span class="view-switcher__counter">{props.following.length}</span>
</li>
<li class={clsx({ 'view-switcher__item--selected': subscriptionFilter() === 'users' })}>
<button type="button" onClick={() => setSubscriptionFilter('users')}>
{t('Users')}
</button>
<span class="view-switcher__counter">
{props.following.filter((s) => 'name' in s).length}
</span>
</li>
<li class={clsx({ 'view-switcher__item--selected': subscriptionFilter() === 'topics' })}>
<button type="button" onClick={() => setSubscriptionFilter('topics')}>
{t('Topics')}
</button>
<span class="view-switcher__counter">
{props.following.filter((s) => 'title' in s).length}
</span>
</li>
</ul>
<br />
<div class={styles.listWrapper}>
<div class="row">
<div class="col-24">
<For each={following()}>
{(subscription) =>
isAuthor(subscription) ? (
<AuthorBadge author={subscription} />
) : (
<TopicBadge topic={subscription} />
)
}
</For>
</div>
</div>
</div>
</>
</Modal>
</Show>
</div> </div>
</div>
<Show when={props.followers}>
<Modal variant="medium" name="followers" onClose={handleCloseFollowModals} maxHeight>
<>
<h2>{t('Followers')}</h2>
<div class={styles.listWrapper}>
<div class="row">
<div class="col-24">
<For each={props.followers}>
{(follower: Author) => <AuthorBadge author={follower} />}
</For>
</div>
</div>
</div>
</>
</Modal>
</Show>
<Show when={props.following}>
<Modal variant="medium" name="following" onClose={handleCloseFollowModals} maxHeight>
<>
<h2>{t('Subscriptions')}</h2>
<ul class="view-switcher">
<li class={clsx({ 'view-switcher__item--selected': subscriptionFilter() === 'all' })}>
<button type="button" onClick={() => setSubscriptionFilter('all')}>
{t('All')}
</button>
<span class="view-switcher__counter">{props.following.length}</span>
</li>
<li class={clsx({ 'view-switcher__item--selected': subscriptionFilter() === 'users' })}>
<button type="button" onClick={() => setSubscriptionFilter('users')}>
{t('Users')}
</button>
<span class="view-switcher__counter">
{props.following.filter((s) => 'name' in s).length}
</span>
</li>
<li class={clsx({ 'view-switcher__item--selected': subscriptionFilter() === 'topics' })}>
<button type="button" onClick={() => setSubscriptionFilter('topics')}>
{t('Topics')}
</button>
<span class="view-switcher__counter">
{props.following.filter((s) => 'title' in s).length}
</span>
</li>
</ul>
<br />
<div class={styles.listWrapper}>
<div class="row">
<div class="col-24">
<For each={following()}>
{(subscription) =>
isAuthor(subscription) ? (
<AuthorBadge author={subscription} />
) : (
<TopicBadge topic={subscription} />
)
}
</For>
</div>
</div>
</div>
</>
</Modal>
</Show>
</>
) )
} }

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

@ -14,10 +14,13 @@
} }
.authorHeader { .authorHeader {
border-bottom: 2px solid #000; border-bottom: 2px solid var(--default-color);
margin-bottom: 2.4rem; margin-bottom: 2.4rem;
margin-top: -3.2rem;
padding-bottom: 4rem; padding-bottom: 4rem;
@include media-breakpoint-up(lg) {
margin-top: -3.2rem;
}
} }
.ratingContainer { .ratingContainer {