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

Feed styles fixes

Browse Source
This commit is contained in:
kvakazyambra 2023-01-31 02:09:33 +03:00
parent 47a647c1d7
commit 12f5479957
7 changed files with 124 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/Feed/Sidebar.module.scss
View File

@ -1,3 +1,11 @@
.sidebar {
max-height: calc(100vh - 120px);
overflow: auto;
padding-right: 1rem;
position: sticky;
top: 120px;
}
.counter { .counter {
align-items: center; align-items: center;
align-self: flex-start; align-self: flex-start;
@ -29,6 +37,7 @@
.settings { .settings {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin-bottom: 2em;
} }
a { a {

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

@ -29,7 +29,7 @@ export const FeedSidebar = (props: FeedSidebarProps) => {
} }
return ( return (
<> <div class={styles.sidebar}>
<ul> <ul>
<li> <li>
<a href="#"> <a href="#">
@ -78,6 +78,7 @@ export const FeedSidebar = (props: FeedSidebarProps) => {
<Icon name="feed-notifications" class={styles.icon} /> <Icon name="feed-notifications" class={styles.icon} />
уведомления уведомления
</a> </a>
<span class={styles.counter}>283</span>
</li> </li>
</ul> </ul>
@ -119,6 +120,6 @@ export const FeedSidebar = (props: FeedSidebarProps) => {
{t('Feed settings')} {t('Feed settings')}
</a> </a>
</div> </div>
</> </div>
) )
} }

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

@ -117,6 +117,10 @@
&:hover { &:hover {
background: none; background: none;
img {
filter: none;
}
} }
} }
} }

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

@ -14,16 +14,21 @@
} }
ul { ul {
margin-bottom: 3rem; margin: 0 0 3rem;
} }
li { li {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin: 0 0 1rem; margin: 0 0 1rem;
white-space: nowrap;
width: 100%;
a { a {
margin-right: 0.5em; margin-right: 0.5em;
position: relative;
overflow: hidden;
text-overflow: ellipsis;
} }
} }

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

@ -78,115 +78,118 @@ export const FeedView = () => {
return ( return (
<> <>
<div class="wide-container feed"> <div class="wide-container feed">
<div class="row"> <div class="shift-content">
<div class={clsx('col-md-3', styles.feedNavigation)}> <div class={clsx('left-col', styles.feedNavigation)}>
<FeedSidebar authors={sortedAuthors()} /> <FeedSidebar authors={sortedAuthors()} />
</div> </div>
<div class="col-md-6"> <div class="row">
<ul class="feed-filter"> <div class="col-md-8">
<Show when={!!session()?.user?.slug}> <ul class="feed-filter">
<li class="selected"> <Show when={!!session()?.user?.slug}>
<a href="/feed/my">{t('My feed')}</a> <li class="selected">
<a href="/feed/my">{t('My feed')}</a>
</li>
</Show>
<li>
<a href="/feed/?by=views">{t('Most read')}</a>
</li>
<li>
<a href="/feed/?by=rating">{t('Top rated')}</a>
</li>
<li>
<a href="/feed/?by=comments">{t('Most commented')}</a>
</li> </li>
</Show>
<li>
<a href="/feed/?by=views">{t('Most read')}</a>
</li>
<li>
<a href="/feed/?by=rating">{t('Top rated')}</a>
</li>
<li>
<a href="/feed/?by=comments">{t('Most commented')}</a>
</li>
</ul>
<Show when={sortedArticles().length > 0}>
<For each={sortedArticles().slice(0, 4)}>
{(article) => <ArticleCard article={article} settings={{ isFeedMode: true }} />}
</For>
<div class={stylesBeside.besideColumnTitle}>
<h4>{t('Popular authors')}</h4>
<a href="/authors">
{t('All authors')}
<Icon name="arrow-right" class={stylesBeside.icon} />
</a>
</div>
<ul class={stylesBeside.besideColumn}>
<For each={topAuthors().slice(0, 5)}>
{(author) => (
<li>
<AuthorCard author={author} compact={true} hasLink={true} />
</li>
)}
</For>
</ul> </ul>
<For each={sortedArticles().slice(4)}> <Show when={sortedArticles().length > 0}>
{(article) => <ArticleCard article={article} settings={{ isFeedMode: true }} />} <For each={sortedArticles().slice(0, 4)}>
</For> {(article) => <ArticleCard article={article} settings={{ isFeedMode: true }} />}
</Show> </For>
</div>
<aside class={clsx('col-md-3', styles.feedAside)}> <div class={stylesBeside.besideColumnTitle}>
<section class={styles.asideSection}> <h4>{t('Popular authors')}</h4>
<h4>{t('Comments')}</h4> <a href="/authors">
<ul class={stylesArticle.comments}> {t('All authors')}
<For each={topComments().filter((item) => item.body)}> <Icon name="arrow-right" class={stylesBeside.icon} />
{(comment) => { </a>
return ( </div>
<li class={styles.comment}>
<div class={clsx('text-truncate', styles.commentBody)} innerHTML={comment.body} /> <ul class={stylesBeside.besideColumn}>
<AuthorCard <For each={topAuthors().slice(0, 5)}>
author={comment.createdBy as Author} {(author) => (
isFeedMode={true} <li>
compact={true} <AuthorCard author={author} compact={true} hasLink={true} />
hideFollow={true}
/>
<div class={clsx('text-truncate', styles.commentArticleTitle)}>
<a href={`/${comment.shout.slug}`}>{comment.shout.title}</a>
</div>
</li> </li>
) )}
}} </For>
</For> </ul>
</ul>
</section>
<Show when={topTopics().length > 0}> <For each={sortedArticles().slice(4)}>
{(article) => <ArticleCard article={article} settings={{ isFeedMode: true }} />}
</For>
</Show>
</div>
<aside class={clsx('col-md-4', styles.feedAside)}>
<section class={styles.asideSection}> <section class={styles.asideSection}>
<h4>{t('Topics')}</h4> <h4>{t('Comments')}</h4>
<For each={topTopics().slice(0, 5)}> <ul class={stylesArticle.comments}>
{(topic) => ( <For each={topComments().filter((item) => item.body)}>
<span class={clsx(stylesTopic.shoutTopic, styles.topic)}> {(comment) => {
<a href={`/topic/${topic.slug}`}>{topic.title}</a>{' '} return (
</span> <li class={styles.comment}>
)} <div class={clsx('text-truncate', styles.commentBody)} innerHTML={comment.body} />
</For> <AuthorCard
author={comment.createdBy as Author}
isFeedMode={true}
compact={true}
hideFollow={true}
/>
<div class={clsx('text-truncate', styles.commentArticleTitle)}>
<a href={`/${comment.shout.slug}`}>{comment.shout.title}</a>
</div>
</li>
)
}}
</For>
</ul>
</section> </section>
</Show>
<section class={clsx(styles.asideSection, styles.pinnedLinks)}> <Show when={topTopics().length > 0}>
<Icon name="pin" class={styles.icon} /> <section class={styles.asideSection}>
<ul class="nodash"> <h4>{t('Topics')}</h4>
<li> <For each={topTopics().slice(0, 5)}>
<a href="/about/guide">Как устроен Дискурс</a> {(topic) => (
</li> <span class={clsx(stylesTopic.shoutTopic, styles.topic)}>
<li> <a href={`/topic/${topic.slug}`}>{topic.title}</a>{' '}
<a href="/how-to-write-a-good-article">Как создать хороший текст</a> </span>
</li> )}
<li> </For>
<a href="#">Правила конструктивных дискуссий</a> </section>
</li> </Show>
<li>
<a href="/about/principles">Принципы сообщества</a> <section class={clsx(styles.asideSection, styles.pinnedLinks)}>
</li> <Icon name="pin" class={styles.icon} />
</ul> <ul class="nodash">
</section> <li>
</aside> <a href="/about/guide">Как устроен Дискурс</a>
</li>
<li>
<a href="/how-to-write-a-good-article">Как создать хороший текст</a>
</li>
<li>
<a href="#">Правила конструктивных дискуссий</a>
</li>
<li>
<a href="/about/principles">Принципы сообщества</a>
</li>
</ul>
</section>
</aside>
</div>
</div> </div>
<Show when={isLoadMoreButtonVisible()}> <Show when={isLoadMoreButtonVisible()}>
<p class="load-more-container"> <p class="load-more-container">
<button class="button" onClick={loadMore}> <button class="button" onClick={loadMore}>

4
src/styles/Feed.scss
View File

@ -57,8 +57,8 @@
.feed-filter { .feed-filter {
display: flex; display: flex;
flex-wrap: wrap;
@include font-size(1.7rem); @include font-size(1.7rem);
font-weight: 500; font-weight: 500;
list-style: none; list-style: none;
margin: 0 0 1.6rem; margin: 0 0 1.6rem;
@ -66,7 +66,7 @@
li { li {
border-bottom: 4px solid transparent; border-bottom: 4px solid transparent;
margin: 0 1.4em 1em 0; margin: 0 1.4em 0.5em 0;
&:last-child { &:last-child {
margin-right: 0; margin-right: 0;

2
src/styles/app.scss
View File

@ -691,11 +691,11 @@ astro-island {
.left-col { .left-col {
height: 100%; height: 100%;
padding-right: 2rem; padding-right: 2rem;
position: absolute;
right: 100%; right: 100%;
top: 0; top: 0;
@include media-breakpoint-up(md) { @include media-breakpoint-up(md) {
position: absolute;
width: 161px; width: 161px;
} }