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

Fixed feed

Browse Source
This commit is contained in:
kvakazyambra 2022-10-26 00:45:37 +03:00
parent 7f2becb2fa
commit 6c648fad81
5 changed files with 73 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/Feed/Card.module.scss
View File

@ -418,7 +418,7 @@
display: flex; display: flex;
} }
.shoutCardDetailsTtem { .shoutCardDetailsItem {
align-items: center; align-items: center;
display: flex; display: flex;
margin-right: 1.7em; margin-right: 1.7em;
@ -454,6 +454,12 @@
} }
} }
.shoutCardDetailsViewed {
.icon {
margin-top: -0.1em;
}
}
.rating { .rating {
align-items: center; align-items: center;
display: flex; display: flex;

86
src/components/Feed/Card.tsx
View File

@ -5,7 +5,7 @@ import type { Shout } from '../../graphql/types.gen'
import { capitalize } from '../../utils' import { capitalize } from '../../utils'
import { translit } from '../../utils/ru2en' import { translit } from '../../utils/ru2en'
import { Icon } from '../Nav/Icon' import { Icon } from '../Nav/Icon'
import style from './Card.module.scss' import styles from './Card.module.scss'
import { locale } from '../../stores/ui' import { locale } from '../../stores/ui'
import { handleClientRouteLinkClick } from '../../stores/router' import { handleClientRouteLinkClick } from '../../stores/router'
import { getLogger } from '../../utils/logger' import { getLogger } from '../../utils/logger'
@ -75,33 +75,33 @@ export const ArticleCard = (props: ArticleCardProps) => {
return ( return (
<section <section
class={clsx(style.shoutCard, `${props.settings?.additionalClass || ''}`)} class={clsx(styles.shoutCard, `${props.settings?.additionalClass || ''}`)}
classList={{ classList={{
[style.shoutCardShort]: props.settings?.isShort, [styles.shoutCardShort]: props.settings?.isShort,
[style.shoutCardPhotoBottom]: props.settings?.noimage && props.settings?.photoBottom, [styles.shoutCardPhotoBottom]: props.settings?.noimage && props.settings?.photoBottom,
[style.shoutCardFeed]: props.settings?.isFeedMode, [styles.shoutCardFeed]: props.settings?.isFeedMode,
[style.shoutCardFloorImportant]: props.settings?.isFloorImportant, [styles.shoutCardFloorImportant]: props.settings?.isFloorImportant,
[style.shoutCardWithCover]: props.settings?.isWithCover, [styles.shoutCardWithCover]: props.settings?.isWithCover,
[style.shoutCardBigTitle]: props.settings?.isBigTitle, [styles.shoutCardBigTitle]: props.settings?.isBigTitle,
[style.shoutCardVertical]: props.settings?.isVertical, [styles.shoutCardVertical]: props.settings?.isVertical,
[style.shoutCardWithBorder]: props.settings?.withBorder, [styles.shoutCardWithBorder]: props.settings?.withBorder,
[style.shoutCardCompact]: props.settings?.isCompact, [styles.shoutCardCompact]: props.settings?.isCompact,
[style.shoutCardSingle]: props.settings?.isSingle [styles.shoutCardSingle]: props.settings?.isSingle
}} }}
> >
<Show when={!props.settings?.noimage && cover}> <Show when={!props.settings?.noimage && cover}>
<div class={style.shoutCardCoverContainer}> <div class={styles.shoutCardCoverContainer}>
<div class={style.shoutCardCover}> <div class={styles.shoutCardCover}>
<img src={cover || ''} alt={title || ''} loading="lazy" /> <img src={cover || ''} alt={title || ''} loading="lazy" />
</div> </div>
</div> </div>
</Show> </Show>
<div class={style.shoutCardContent}> <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)}>
<div class={style.shoutCardType}> <div class={styles.shoutCardType}>
<a href={`/topic/${mainTopic.slug}`}> <a href={`/topic/${mainTopic.slug}`}>
<Icon name={layout} class={style.icon} /> <Icon name={layout} class={styles.icon} />
</a> </a>
</div> </div>
</Show> </Show>
@ -116,24 +116,24 @@ export const ArticleCard = (props: ArticleCardProps) => {
/> />
</Show> </Show>
<div class={style.shoutCardTitlesContainer}> <div class={styles.shoutCardTitlesContainer}>
<a href={`/${slug || ''}`} onClick={handleClientRouteLinkClick}> <a href={`/${slug || ''}`} onClick={handleClientRouteLinkClick}>
<div class={style.shoutCardTitle}> <div class={styles.shoutCardTitle}>
<span class={style.shoutCardLinkContainer}>{title}</span> <span class={styles.shoutCardLinkContainer}>{title}</span>
</div> </div>
<Show when={!props.settings?.nosubtitle && subtitle}> <Show when={!props.settings?.nosubtitle && subtitle}>
<div class={style.shoutCardSubtitle}> <div class={styles.shoutCardSubtitle}>
<span class={style.shoutCardLinkContainer}>{subtitle}</span> <span class={styles.shoutCardLinkContainer}>{subtitle}</span>
</div> </div>
</Show> </Show>
</a> </a>
</div> </div>
<Show when={!props.settings?.noauthor || !props.settings?.nodate}> <Show when={!props.settings?.noauthor || !props.settings?.nodate}>
<div class={style.shoutDetails}> <div class={styles.shoutDetails}>
<Show when={!props.settings?.noauthor}> <Show when={!props.settings?.noauthor}>
<div class={style.shoutAuthor}> <div class={styles.shoutAuthor}>
<For each={authors}> <For each={authors}>
{(author, index) => { {(author, index) => {
const name = const name =
@ -153,44 +153,50 @@ export const ArticleCard = (props: ArticleCardProps) => {
</Show> </Show>
<Show when={!props.settings?.nodate}> <Show when={!props.settings?.nodate}>
<div class={style.shoutDate}>{formattedDate()}</div> <div class={styles.shoutDate}>{formattedDate()}</div>
</Show> </Show>
</div> </div>
</Show> </Show>
<Show when={props.settings?.isFeedMode}> <Show when={props.settings?.isFeedMode}>
<section class={style.shoutCardDetails}> <section class={styles.shoutCardDetails}>
<div class={style.shoutCardDetailsContent}> <div class={styles.shoutCardDetailsContent}>
<div class={clsx(style.shoutCardDetailsItem, 'rating')}> <div class={clsx(styles.shoutCardDetailsItem, styles.rating)}>
<button class="rating__control">&minus;</button> <button class={styles.ratingControl}>&minus;</button>
<span class="rating__value">{stat?.rating || ''}</span> <span class={styles.ratingValue}>{stat?.rating || ''}</span>
<button class="rating__control">+</button> <button class={styles.ratingControl}>+</button>
</div> </div>
<div class={clsx(style.shoutCardDetailsItem, style.shoutCardComments)}> <div
<Icon name="eye" class={style.icon} /> class={clsx(
styles.shoutCardDetailsItem,
styles.shoutCardDetailsViewed,
styles.shoutCardComments
)}
>
<Icon name="eye" class={styles.icon} />
{stat?.viewed} {stat?.viewed}
</div> </div>
<div class={clsx(style.shoutCardDetailsTtem, style.shoutCardComments)}> <div class={clsx(styles.shoutCardDetailsItem, styles.shoutCardComments)}>
<a href={`/${slug + '#comments' || ''}`}> <a href={`/${slug + '#comments' || ''}`}>
<Icon name="comment" class={style.icon} /> <Icon name="comment" class={styles.icon} />
{stat?.commented || ''} {stat?.commented || ''}
</a> </a>
</div> </div>
<div class={style.shoutCardDetailsItem}> <div class={styles.shoutCardDetailsItem}>
<button> <button>
<Icon name="bookmark" class={style.icon} /> <Icon name="bookmark" class={styles.icon} />
</button> </button>
</div> </div>
<div class={style.shoutCardDetailsItem}> <div class={styles.shoutCardDetailsItem}>
<button> <button>
<Icon name="ellipsis" class={style.icon} /> <Icon name="ellipsis" class={styles.icon} />
</button> </button>
</div> </div>
</div> </div>
<button class="button--light shout-card__edit-control">{t('Collaborate')}</button> <button class={clsx('button--light', styles.shoutCardEditControl)}>{t('Collaborate')}</button>
</section> </section>
</Show> </Show>
</div> </div>

6
src/components/Feed/Sidebar.tsx
View File

@ -85,12 +85,12 @@ export const FeedSidebar = (props: FeedSidebarProps) => {
</For> </For>
</ul> </ul>
<p class="settings"> <div class="settings">
<a href="/feed/settings"> <a href="/feed/settings">
<strong>{t('Feed settings')}</strong> <strong>{t('Feed settings')}</strong>
</a>
<Icon name="settings" /> <Icon name="settings" />
</p> </a>
</div>
</> </>
) )
} }

5
src/components/Views/Feed.tsx
View File

@ -1,6 +1,7 @@
import { createMemo, For, Show } from 'solid-js' import { createMemo, For, Show } from 'solid-js'
import type { Shout, Reaction } from '../../graphql/types.gen' import type { Shout, Reaction } from '../../graphql/types.gen'
import '../../styles/Feed.scss' import '../../styles/Feed.scss'
import stylesBeside from '../../components/Feed/Beside.module.scss'
import { Icon } from '../Nav/Icon' import { Icon } from '../Nav/Icon'
import { byCreated, sortBy } from '../../utils/sortby' import { byCreated, sortBy } from '../../utils/sortby'
import { TopicCard } from '../Topic/Card' import { TopicCard } from '../Topic/Card'
@ -90,7 +91,7 @@ export const FeedView = (props: FeedProps) => {
{(article) => <ArticleCard article={article} settings={{ isFeedMode: true }} />} {(article) => <ArticleCard article={article} settings={{ isFeedMode: true }} />}
</For> </For>
<div class="beside-column-title"> <div class={stylesBeside.besideColumnTitle}>
<h4>{t('Popular authors')}</h4> <h4>{t('Popular authors')}</h4>
<a href="/user/list"> <a href="/user/list">
{t('All authors')} {t('All authors')}
@ -98,7 +99,7 @@ export const FeedView = (props: FeedProps) => {
</a> </a>
</div> </div>
<ul class="beside-column"> <ul class={stylesBeside.besideColumn}>
<For each={topAuthors().slice(0, 5)}> <For each={topAuthors().slice(0, 5)}>
{(author) => ( {(author) => (
<li> <li>

14
src/styles/Feed.scss
View File

@ -120,11 +120,25 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
img {
transition: filter 0.3s;
}
a { a {
margin-right: 0.3em; margin-right: 0.3em;
&:hover {
img {
filter: invert(1);
}
}
} }
.icon { .icon {
display: inline-block;
line-height: 1;
margin-left: 0.3em;
vertical-align: middle;
width: 1em; width: 1em;
} }
} }