Feed styles fixes
This commit is contained in:
parent
47a647c1d7
commit
12f5479957
|
|
@ -1,3 +1,11 @@
|
|||
.sidebar {
|
||||
max-height: calc(100vh - 120px);
|
||||
overflow: auto;
|
||||
padding-right: 1rem;
|
||||
position: sticky;
|
||||
top: 120px;
|
||||
}
|
||||
|
||||
.counter {
|
||||
align-items: center;
|
||||
align-self: flex-start;
|
||||
|
|
@ -29,6 +37,7 @@
|
|||
.settings {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
|
||||
a {
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ export const FeedSidebar = (props: FeedSidebarProps) => {
|
|||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div class={styles.sidebar}>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#">
|
||||
|
|
@ -78,6 +78,7 @@ export const FeedSidebar = (props: FeedSidebarProps) => {
|
|||
<Icon name="feed-notifications" class={styles.icon} />
|
||||
уведомления
|
||||
</a>
|
||||
<span class={styles.counter}>283</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
|
@ -119,6 +120,6 @@ export const FeedSidebar = (props: FeedSidebarProps) => {
|
|||
{t('Feed settings')}
|
||||
</a>
|
||||
</div>
|
||||
</>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -117,6 +117,10 @@
|
|||
|
||||
&:hover {
|
||||
background: none;
|
||||
|
||||
img {
|
||||
filter: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,16 +14,21 @@
|
|||
}
|
||||
|
||||
ul {
|
||||
margin-bottom: 3rem;
|
||||
margin: 0 0 3rem;
|
||||
}
|
||||
|
||||
li {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 0 0 1rem;
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
|
||||
a {
|
||||
margin-right: 0.5em;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -78,115 +78,118 @@ export const FeedView = () => {
|
|||
return (
|
||||
<>
|
||||
<div class="wide-container feed">
|
||||
<div class="row">
|
||||
<div class={clsx('col-md-3', styles.feedNavigation)}>
|
||||
<div class="shift-content">
|
||||
<div class={clsx('left-col', styles.feedNavigation)}>
|
||||
<FeedSidebar authors={sortedAuthors()} />
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<ul class="feed-filter">
|
||||
<Show when={!!session()?.user?.slug}>
|
||||
<li class="selected">
|
||||
<a href="/feed/my">{t('My feed')}</a>
|
||||
<div class="row">
|
||||
<div class="col-md-8">
|
||||
<ul class="feed-filter">
|
||||
<Show when={!!session()?.user?.slug}>
|
||||
<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>
|
||||
</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>
|
||||
|
||||
<For each={sortedArticles().slice(4)}>
|
||||
{(article) => <ArticleCard article={article} settings={{ isFeedMode: true }} />}
|
||||
</For>
|
||||
</Show>
|
||||
</div>
|
||||
<Show when={sortedArticles().length > 0}>
|
||||
<For each={sortedArticles().slice(0, 4)}>
|
||||
{(article) => <ArticleCard article={article} settings={{ isFeedMode: true }} />}
|
||||
</For>
|
||||
|
||||
<aside class={clsx('col-md-3', styles.feedAside)}>
|
||||
<section class={styles.asideSection}>
|
||||
<h4>{t('Comments')}</h4>
|
||||
<ul class={stylesArticle.comments}>
|
||||
<For each={topComments().filter((item) => item.body)}>
|
||||
{(comment) => {
|
||||
return (
|
||||
<li class={styles.comment}>
|
||||
<div class={clsx('text-truncate', styles.commentBody)} innerHTML={comment.body} />
|
||||
<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>
|
||||
<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>
|
||||
</section>
|
||||
)}
|
||||
</For>
|
||||
</ul>
|
||||
|
||||
<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}>
|
||||
<h4>{t('Topics')}</h4>
|
||||
<For each={topTopics().slice(0, 5)}>
|
||||
{(topic) => (
|
||||
<span class={clsx(stylesTopic.shoutTopic, styles.topic)}>
|
||||
<a href={`/topic/${topic.slug}`}>{topic.title}</a>{' '}
|
||||
</span>
|
||||
)}
|
||||
</For>
|
||||
<h4>{t('Comments')}</h4>
|
||||
<ul class={stylesArticle.comments}>
|
||||
<For each={topComments().filter((item) => item.body)}>
|
||||
{(comment) => {
|
||||
return (
|
||||
<li class={styles.comment}>
|
||||
<div class={clsx('text-truncate', styles.commentBody)} innerHTML={comment.body} />
|
||||
<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>
|
||||
</Show>
|
||||
|
||||
<section class={clsx(styles.asideSection, styles.pinnedLinks)}>
|
||||
<Icon name="pin" class={styles.icon} />
|
||||
<ul class="nodash">
|
||||
<li>
|
||||
<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>
|
||||
<Show when={topTopics().length > 0}>
|
||||
<section class={styles.asideSection}>
|
||||
<h4>{t('Topics')}</h4>
|
||||
<For each={topTopics().slice(0, 5)}>
|
||||
{(topic) => (
|
||||
<span class={clsx(stylesTopic.shoutTopic, styles.topic)}>
|
||||
<a href={`/topic/${topic.slug}`}>{topic.title}</a>{' '}
|
||||
</span>
|
||||
)}
|
||||
</For>
|
||||
</section>
|
||||
</Show>
|
||||
|
||||
<section class={clsx(styles.asideSection, styles.pinnedLinks)}>
|
||||
<Icon name="pin" class={styles.icon} />
|
||||
<ul class="nodash">
|
||||
<li>
|
||||
<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>
|
||||
|
||||
<Show when={isLoadMoreButtonVisible()}>
|
||||
<p class="load-more-container">
|
||||
<button class="button" onClick={loadMore}>
|
||||
|
|
|
|||
|
|
@ -57,8 +57,8 @@
|
|||
|
||||
.feed-filter {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
@include font-size(1.7rem);
|
||||
|
||||
font-weight: 500;
|
||||
list-style: none;
|
||||
margin: 0 0 1.6rem;
|
||||
|
|
@ -66,7 +66,7 @@
|
|||
|
||||
li {
|
||||
border-bottom: 4px solid transparent;
|
||||
margin: 0 1.4em 1em 0;
|
||||
margin: 0 1.4em 0.5em 0;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
|
|
|
|||
|
|
@ -691,11 +691,11 @@ astro-island {
|
|||
.left-col {
|
||||
height: 100%;
|
||||
padding-right: 2rem;
|
||||
position: absolute;
|
||||
right: 100%;
|
||||
top: 0;
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
position: absolute;
|
||||
width: 161px;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user