mirror of
https://github.com/PrimalHQ/primal-web-app.git
synced 2024-09-30 00:41:09 +00:00
Fix reads header
This commit is contained in:
parent
cfa16f5964
commit
e445b11019
@ -69,13 +69,25 @@
|
||||
font-size: 24px;
|
||||
font-weight: 800;
|
||||
line-height: 32px;
|
||||
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
.summary {
|
||||
color: var(--text-secondary);
|
||||
color: var(--brand-text);
|
||||
font-size: 15px;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 5;
|
||||
line-clamp: 5;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
}
|
||||
|
||||
@ -93,26 +105,35 @@
|
||||
border-radius: 12px;
|
||||
width: fit-content;
|
||||
margin-block: 4px;
|
||||
margin-right: 6px;
|
||||
margin-inline: 3px;
|
||||
}
|
||||
.estimate {
|
||||
display: inline-block;
|
||||
color: var(--text-secondary);
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
font-weight: 600;
|
||||
line-height: 12px;
|
||||
padding: 6px 10px;
|
||||
border: 1px solid var(--subtile-devider );
|
||||
border-radius: 12px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.image {
|
||||
min-width: 164px;
|
||||
min-height: 70px;
|
||||
max-height: 240px;
|
||||
height: fit-content;
|
||||
border: 1px solid var(--devider);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
|
||||
img {
|
||||
width: 164px;
|
||||
max-width: 162px;
|
||||
max-height: 238px;
|
||||
object-fit: scale-down;
|
||||
}
|
||||
|
||||
|
@ -236,16 +236,21 @@ const ArticlePreview: Component<{
|
||||
</div>
|
||||
</div>
|
||||
<div class={styles.tags}>
|
||||
<For each={props.article.tags}>
|
||||
<div class={styles.estimate}>
|
||||
{Math.ceil(props.article.wordCount / 238)} minute read
|
||||
</div>
|
||||
<For each={props.article.tags.slice(0, 3)}>
|
||||
{tag => (
|
||||
<div class={styles.tag}>
|
||||
{tag}
|
||||
</div>
|
||||
)}
|
||||
</For>
|
||||
<div class={styles.estimate}>
|
||||
{Math.ceil(props.article.wordCount / 238)} minute read
|
||||
</div>
|
||||
<Show when={props.article.tags.length > 3}>
|
||||
<div class={styles.tag}>
|
||||
+ {props.article.tags.length - 3}
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
</div>
|
||||
<div class={styles.image}>
|
||||
|
@ -123,6 +123,13 @@
|
||||
border-bottom: 1px solid var(--devider);
|
||||
z-index: var(--z-index-header);
|
||||
|
||||
&.readsFeed {
|
||||
position: relative;
|
||||
border-bottom: none;
|
||||
padding-inline: 0;
|
||||
z-index: var(--z-index-header);
|
||||
}
|
||||
|
||||
|
||||
.newContentItem {
|
||||
color: var(--accent-links);
|
||||
|
@ -26,8 +26,8 @@ const ReadsHeader: Component< {
|
||||
} > = (props) => {
|
||||
|
||||
return (
|
||||
<div id={props.id} class={styles.fullHeader}>
|
||||
<div class={styles.bigFeedSelect}>
|
||||
<div id={props.id}>
|
||||
<div class={`${styles.bigFeedSelect} ${styles.readsFeed}`}>
|
||||
<ReedSelect big={true} />
|
||||
</div>
|
||||
</div>
|
||||
|
@ -4,6 +4,13 @@
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.readsFeed {
|
||||
position: relative;
|
||||
border: none;
|
||||
min-height: 100vh;
|
||||
border-top: 1px solid var(--devider);
|
||||
}
|
||||
|
||||
.paginate {
|
||||
color: var(--text-tertiary-2);
|
||||
position: absolute;
|
||||
|
@ -154,33 +154,35 @@ const Home: Component = () => {
|
||||
<ReadsSidebar />
|
||||
</StickySidebar>
|
||||
|
||||
<Show
|
||||
when={context?.notes && context.notes.length > 0}
|
||||
>
|
||||
<div class={styles.feed}>
|
||||
<For each={context?.notes} >
|
||||
{note => <ArticlePreview article={note} />}
|
||||
</For>
|
||||
</div>
|
||||
</Show>
|
||||
<div class={styles.readsFeed}>
|
||||
<Show
|
||||
when={context?.notes && context.notes.length > 0}
|
||||
>
|
||||
<div class={styles.feed}>
|
||||
<For each={context?.notes} >
|
||||
{note => <ArticlePreview article={note} />}
|
||||
</For>
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
<Switch>
|
||||
<Match
|
||||
when={!isPageLoading() && context?.notes && context?.notes.length === 0}
|
||||
>
|
||||
<div class={styles.noContent}>
|
||||
<Loader />
|
||||
</div>
|
||||
</Match>
|
||||
<Match
|
||||
when={isPageLoading()}
|
||||
>
|
||||
<div class={styles.noContent}>
|
||||
<Loader />
|
||||
</div>
|
||||
</Match>
|
||||
</Switch>
|
||||
<Paginator loadNextPage={context?.actions.fetchNextPage}/>
|
||||
<Switch>
|
||||
<Match
|
||||
when={!isPageLoading() && context?.notes && context?.notes.length === 0}
|
||||
>
|
||||
<div class={styles.noContent}>
|
||||
<Loader />
|
||||
</div>
|
||||
</Match>
|
||||
<Match
|
||||
when={isPageLoading()}
|
||||
>
|
||||
<div class={styles.noContent}>
|
||||
<Loader />
|
||||
</div>
|
||||
</Match>
|
||||
</Switch>
|
||||
<Paginator loadNextPage={context?.actions.fetchNextPage}/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user