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

Article card feed mode

Browse Source
This commit is contained in:
kvakazyambra 2023-06-21 23:32:16 +03:00
parent 6871b1a146
commit 236c469c98
11 changed files with 81 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Article/Article.module.scss
View File

@ -1,11 +1,11 @@
h1 {
@include font-size(4rem);
line-height: 1.1;
margin-top: 0.5em;
}
h2 {
@include font-size(4rem);
line-height: 1.1;
}

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

@ -353,7 +353,6 @@
.authorName {
@include font-size(1.2rem);
margin-bottom: 0;
}

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

@ -105,6 +105,7 @@ export const AuthorCard = (props: AuthorCardProps) => {
hasLink={props.hasLink}
isBig={props.isAuthorPage}
isAuthorsList={props.isAuthorsList}
isFeedMode={props.isFeedMode}
class={styles.circlewrap}
/>

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

@ -73,3 +73,10 @@
line-height: 6.4rem;
}
}
.feedMode {
.userpic {
min-width: 16px;
max-width: 16px;
}
}

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

@ -9,6 +9,7 @@ interface UserpicProps {
isBig?: boolean
class?: string
isAuthorsList?: boolean
isFeedMode?: boolean
}
export default (props: UserpicProps) => {
@ -23,7 +24,8 @@ export default (props: UserpicProps) => {
class={clsx(styles.circlewrap, props.class)}
classList={{
[styles.big]: props.isBig,
[styles.authorsList]: props.isAuthorsList
[styles.authorsList]: props.isAuthorsList,
[styles.feedMode]: props.isFeedMode
}}
>
<Show when={props.hasLink}>

17
src/components/Feed/ArticleCard.module.scss
View File

@ -114,11 +114,20 @@
.shoutDetails {
display: flex;
margin-bottom: 1rem;
}
.shoutDetailsFeedMode {
justify-content: space-between;
.shoutAuthor,
.shoutDate {
@include font-size(1.2rem);
}
}
.shoutCardTitle {
@include font-size(2.2rem);
font-weight: 700;
line-height: 1.1;
margin-bottom: 0.8rem;
@ -136,11 +145,15 @@
/* stylelint-disable-next-line */
-webkit-box-decoration-break: clone;
}
.shoutCardTitlesContainerFeedMode & {
@include font-size(3.2rem);
line-height: 1.1;
}
}
.shoutCardSubtitle {
@include font-size(1.8rem);
color: #141414;
font-weight: 400;
line-height: 1.3;

61
src/components/Feed/ArticleCard.tsx
View File

@ -16,6 +16,7 @@ import { getPagePath, openPage } from '@nanostores/router'
import { router, useRouter } from '../../stores/router'
import { imageProxy } from '../../utils/imageProxy'
import { Popover } from '../_shared/Popover'
import { AuthorCard } from '../Author/AuthorCard'
interface ArticleCardProps {
settings?: {
@ -103,7 +104,7 @@ export const ArticleCard = (props: ArticleCardProps) => {
[styles.shoutCardBeside]: props.settings?.isBeside
}}
>
<Show when={!props.settings?.noimage && cover}>
<Show when={!props.settings?.noimage && cover && !props.settings?.isFeedMode}>
<div class={styles.shoutCardCoverContainer}>
<div class={styles.shoutCardCover}>
<img src={imageProxy(cover)} alt={title || ''} loading="lazy" />
@ -112,7 +113,14 @@ export const ArticleCard = (props: ArticleCardProps) => {
</Show>
<div class={styles.shoutCardContent}>
<Show when={layout && layout !== 'article' && !(props.settings?.noicon || props.settings?.noimage)}>
<Show
when={
layout &&
layout !== 'article' &&
!(props.settings?.noicon || props.settings?.noimage) &&
!props.settings?.isFeedMode
}
>
<div class={styles.shoutCardType}>
<a href={`/expo/${layout}`}>
<Icon name={layout} class={styles.icon} />
@ -127,11 +135,16 @@ export const ArticleCard = (props: ArticleCardProps) => {
}
slug={mainTopic.slug}
isFloorImportant={props.settings?.isFloorImportant}
isFeedMode={true}
class={clsx(styles.shoutTopic, { [styles.shoutTopicTop]: props.settings.isShort })}
/>
</Show>
<div class={styles.shoutCardTitlesContainer}>
<div
class={clsx(styles.shoutCardTitlesContainer, {
[styles.shoutCardTitlesContainerFeedMode]: props.settings?.isFeedMode
})}
>
<a href={`/${slug || ''}`}>
<div class={styles.shoutCardTitle}>
<span class={styles.shoutCardLinkContainer}>{title}</span>
@ -146,22 +159,21 @@ export const ArticleCard = (props: ArticleCardProps) => {
</div>
<Show when={!props.settings?.noauthor || !props.settings?.nodate}>
<div class={styles.shoutDetails}>
<div
class={clsx(styles.shoutDetails, { [styles.shoutDetailsFeedMode]: props.settings?.isFeedMode })}
>
<Show when={!props.settings?.noauthor}>
<div class={styles.shoutAuthor}>
<For each={authors}>
{(author, index) => {
let name = author.name
if (lang() !== 'ru') {
name = name === 'Дискурс' ? 'Discours' : translit(name)
}
{(author) => {
return (
<>
<Show when={index() > 0}>, </Show>
<a href={`/author/${author.slug}`}>{name}</a>
</>
<AuthorCard
author={author}
hideWriteButton={true}
hideFollow={true}
isFeedMode={true}
hasLink={props.settings?.isFeedMode}
/>
)
}}
</For>
@ -174,6 +186,25 @@ export const ArticleCard = (props: ArticleCardProps) => {
</Show>
<Show when={props.settings?.isFeedMode}>
<Show when={!props.settings?.noimage && cover}>
<div class={styles.shoutCardCoverContainer}>
<Show
when={
layout && layout !== 'article' && !(props.settings?.noicon || props.settings?.noimage)
}
>
<div class={styles.shoutCardType}>
<a href={`/expo/${layout}`}>
<Icon name={layout} class={styles.icon} />
</a>
</div>
</Show>
<div class={styles.shoutCardCover}>
<img src={imageProxy(cover)} alt={title || ''} loading="lazy" />
</div>
</div>
</Show>
<section
class={styles.shoutCardDetails}
classList={{ [styles.shoutCardDetailsActive]: isActionPopupActive() }}

4
src/components/Feed/CardTopic.module.scss
View File

@ -32,3 +32,7 @@
}
}
}
.shoutTopicFeedMode {
font-size: 1.2rem;
}

4
src/components/Feed/CardTopic.tsx
View File

@ -7,6 +7,7 @@ type CardTopicProps = {
title: string
slug: string
isFloorImportant?: boolean
isFeedMode?: boolean
class?: string
}
@ -14,7 +15,8 @@ export const CardTopic = (props: CardTopicProps) => {
return (
<div
class={clsx(styles.shoutTopic, props.class, {
[styles.shoutTopicFloorImportant]: props.isFloorImportant
[styles.shoutTopicFloorImportant]: props.isFloorImportant,
[styles.shoutTopicFeedMode]: props.isFeedMode
})}
>
<a href={getPagePath(router, 'topic', { slug: props.slug })}>{props.title}</a>

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

@ -370,6 +370,7 @@
}
.userpic {
align-items: center;
margin-right: 0;
img {

3
src/styles/app.scss
View File

@ -123,13 +123,11 @@ h2 {
h1 {
@include font-size(4.8rem);
line-height: 1.1;
}
h2 {
@include font-size(4rem);
line-height: 1.1;
margin-bottom: 0.5em;
margin-top: 1.5em;
@ -137,7 +135,6 @@ h2 {
h3 {
@include font-size(3.2rem);
line-height: 1.1;
margin-bottom: 0.5em;
}