Topic header fixes
This commit is contained in:
parent
7d24fe5598
commit
9ec36168ae
|
|
@ -429,64 +429,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.subscribersContainer {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
font-size: 1.4rem;
|
||||
margin-top: 1.5rem;
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.subscribers {
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
margin: 0 2% 1rem;
|
||||
vertical-align: top;
|
||||
border-bottom: unset !important;
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.subscribersItem {
|
||||
position: relative;
|
||||
|
||||
&:nth-child(1) {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: -4px;
|
||||
box-shadow: 0 0 0 1px var(--background-color);
|
||||
}
|
||||
}
|
||||
|
||||
.subscribersCounter {
|
||||
font-weight: 500;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: none !important;
|
||||
|
||||
.subscribersCounter {
|
||||
background: var(--background-color-invert);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.listWrapper {
|
||||
max-height: 70vh;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,6 +18,7 @@ import { Modal } from '../../Nav/Modal'
|
|||
import { TopicBadge } from '../../Topic/TopicBadge'
|
||||
import { Button } from '../../_shared/Button'
|
||||
import { ShowOnlyOnClient } from '../../_shared/ShowOnlyOnClient'
|
||||
import { Subscribers } from '../../_shared/Subscribers'
|
||||
import { AuthorBadge } from '../AuthorBadge'
|
||||
import { Userpic } from '../Userpic'
|
||||
|
||||
|
|
@ -126,59 +127,7 @@ export const AuthorCard = (props: Props) => {
|
|||
<div class={styles.authorAbout} innerHTML={props.author.bio} />
|
||||
</Show>
|
||||
<Show when={props.followers?.length > 0 || props.following?.length > 0}>
|
||||
<div class={styles.subscribersContainer}>
|
||||
<Show when={props.followers && props.followers.length > 0}>
|
||||
<a href="?m=followers" class={styles.subscribers}>
|
||||
<For each={props.followers.slice(0, 3)}>
|
||||
{(f) => (
|
||||
<Userpic size={'XS'} name={f.name} userpic={f.pic} class={styles.subscribersItem} />
|
||||
)}
|
||||
</For>
|
||||
<div class={styles.subscribersCounter}>
|
||||
{t('SubscriberWithCount', {
|
||||
count: props.followers.length ?? 0,
|
||||
})}
|
||||
</div>
|
||||
</a>
|
||||
</Show>
|
||||
|
||||
<Show when={props.following && props.following.length > 0}>
|
||||
<a href="?m=following" class={styles.subscribers}>
|
||||
<For each={props.following.slice(0, 3)}>
|
||||
{(f) => {
|
||||
if ('name' in f) {
|
||||
return (
|
||||
<Userpic
|
||||
size={'XS'}
|
||||
name={f.name}
|
||||
userpic={f.pic}
|
||||
class={styles.subscribersItem}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
if ('title' in f) {
|
||||
return (
|
||||
<Userpic
|
||||
size={'XS'}
|
||||
name={f.title}
|
||||
userpic={f.pic}
|
||||
class={styles.subscribersItem}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
return null
|
||||
}}
|
||||
</For>
|
||||
<div class={styles.subscribersCounter}>
|
||||
{t('SubscriptionWithCount', {
|
||||
count: props?.following.length ?? 0,
|
||||
})}
|
||||
</div>
|
||||
</a>
|
||||
</Show>
|
||||
</div>
|
||||
<Subscribers followers={props.followers} following={props.following} />
|
||||
</Show>
|
||||
</div>
|
||||
<ShowOnlyOnClient>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
.topicHeader {
|
||||
@include font-size(1.7rem);
|
||||
|
||||
font-weight: 500;
|
||||
padding: 2.8rem $container-padding-x 0;
|
||||
text-align: center;
|
||||
|
||||
|
|
@ -12,10 +11,16 @@
|
|||
}
|
||||
}
|
||||
|
||||
.topicDescription {
|
||||
@include font-size(1.8rem);
|
||||
line-height: 1.4;
|
||||
margin: 1rem 0 2rem;
|
||||
}
|
||||
|
||||
.topicActions {
|
||||
margin-top: 2.8rem;
|
||||
|
||||
.write {
|
||||
.writeControl {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
|
@ -23,13 +28,34 @@
|
|||
min-width: 64px;
|
||||
font-size: 17px;
|
||||
padding: 8px 16px;
|
||||
background: var(--background-color-invert);
|
||||
color: var(--default-color-invert);
|
||||
border: none;
|
||||
border: 1px solid #f7f7f7;
|
||||
background: #f7f7f7;
|
||||
color: var(--default-color);
|
||||
font-weight: 500;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
margin: 0 1.2rem 1em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.followControl,
|
||||
.writeControl {
|
||||
border-radius: 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
.topicDetails {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
font-size: 1.4rem;
|
||||
justify-content: center;
|
||||
gap: 4rem;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.topicDetailsItem {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.topicDetailsIcon {
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,6 +9,8 @@ import { useSession } from '../../context/session'
|
|||
import { FollowingEntity } from '../../graphql/schema/core.gen'
|
||||
import { Button } from '../_shared/Button'
|
||||
|
||||
import { Icon } from '../_shared/Icon'
|
||||
import { Subscribers } from '../_shared/Subscribers'
|
||||
import styles from './Full.module.scss'
|
||||
|
||||
type Props = {
|
||||
|
|
@ -40,14 +42,29 @@ export const FullTopic = (props: Props) => {
|
|||
return (
|
||||
<div class={clsx(styles.topicHeader, 'col-md-16 col-lg-12 offset-md-4 offset-lg-6')}>
|
||||
<h1>#{props.topic?.title}</h1>
|
||||
<p innerHTML={props.topic?.body} />
|
||||
<p class={styles.topicDescription} innerHTML={props.topic?.body} />
|
||||
|
||||
<div class={styles.topicDetails}>
|
||||
<Show when={props.topic?.stat}>
|
||||
<div class={styles.topicDetailsItem}>
|
||||
<Icon name="feed-all" class={styles.topicDetailsIcon} />
|
||||
{t('PublicationsWithCount', {
|
||||
count: props.topic?.stat.shouts ?? 0,
|
||||
})}
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
<Subscribers followers={props.topic?.followers} following={props.topic?.following} />
|
||||
</div>
|
||||
|
||||
<div class={clsx(styles.topicActions)}>
|
||||
<Button
|
||||
variant="primary"
|
||||
onClick={handleFollowClick}
|
||||
value={followed() ? t('Unfollow the topic') : t('Follow the topic')}
|
||||
class={styles.followControl}
|
||||
/>
|
||||
<a class={styles.write} href={`/create/?topicId=${props.topic?.id}`}>
|
||||
<a class={styles.writeControl} href={`/create/?topicId=${props.topic?.id}`}>
|
||||
{t('Write about the topic')}
|
||||
</a>
|
||||
</div>
|
||||
|
|
|
|||
57
src/components/_shared/Subscribers/Subscribers.module.scss
Normal file
57
src/components/_shared/Subscribers/Subscribers.module.scss
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
.subscribersContainer {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
font-size: 1.4rem;
|
||||
margin-top: 1.5rem;
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.subscribers {
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
margin: 0 2% 1rem;
|
||||
vertical-align: top;
|
||||
border-bottom: unset !important;
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.subscribersItem {
|
||||
position: relative;
|
||||
|
||||
&:nth-child(1) {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: -4px;
|
||||
box-shadow: 0 0 0 1px var(--background-color);
|
||||
}
|
||||
}
|
||||
|
||||
.subscribersCounter {
|
||||
font-weight: 500;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: none !important;
|
||||
|
||||
.subscribersCounter {
|
||||
background: var(--background-color-invert);
|
||||
}
|
||||
}
|
||||
}
|
||||
57
src/components/_shared/Subscribers/Subscribers.tsx
Normal file
57
src/components/_shared/Subscribers/Subscribers.tsx
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
import { For, Show } from 'solid-js'
|
||||
|
||||
import { useLocalize } from '../../../context/localize'
|
||||
|
||||
import { Author, Topic } from '../../../graphql/schema/core.gen'
|
||||
import { Userpic } from '../../Author/Userpic'
|
||||
|
||||
import styles from './Subscribers.module.scss'
|
||||
|
||||
type Props = {
|
||||
followers: Author[]
|
||||
following?: Array<Author | Topic>
|
||||
}
|
||||
|
||||
export const Subscribers = (props: Props) => {
|
||||
const { t } = useLocalize()
|
||||
|
||||
return (
|
||||
<div class={styles.subscribersContainer}>
|
||||
<Show when={props.followers && props.followers.length > 0}>
|
||||
<a href="?m=followers" class={styles.subscribers}>
|
||||
<For each={props.followers.slice(0, 3)}>
|
||||
{(f) => <Userpic size={'XS'} name={f.name} userpic={f.pic} class={styles.subscribersItem} />}
|
||||
</For>
|
||||
<div class={styles.subscribersCounter}>
|
||||
{t('SubscriberWithCount', {
|
||||
count: props.followers.length ?? 0,
|
||||
})}
|
||||
</div>
|
||||
</a>
|
||||
</Show>
|
||||
|
||||
<Show when={props.following && props.following.length > 0}>
|
||||
<a href="?m=following" class={styles.subscribers}>
|
||||
<For each={props.following.slice(0, 3)}>
|
||||
{(f) => {
|
||||
if ('name' in f) {
|
||||
return <Userpic size={'XS'} name={f.name} userpic={f.pic} class={styles.subscribersItem} />
|
||||
}
|
||||
|
||||
if ('title' in f) {
|
||||
return <Userpic size={'XS'} name={f.title} userpic={f.pic} class={styles.subscribersItem} />
|
||||
}
|
||||
|
||||
return null
|
||||
}}
|
||||
</For>
|
||||
<div class={styles.subscribersCounter}>
|
||||
{t('SubscriptionWithCount', {
|
||||
count: props?.following.length ?? 0,
|
||||
})}
|
||||
</div>
|
||||
</a>
|
||||
</Show>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
1
src/components/_shared/Subscribers/index.ts
Normal file
1
src/components/_shared/Subscribers/index.ts
Normal file
|
|
@ -0,0 +1 @@
|
|||
export { Subscribers } from './Subscribers'
|
||||
Loading…
Reference in New Issue
Block a user