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

Home page fixes

Browse Source
This commit is contained in:
kvakazyambra 2022-11-17 00:08:04 +03:00
parent 086e11d4e1
commit 2341e83772
18 changed files with 102 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
public/icons/audio.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="13" height="14" viewBox="0 0 13 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M11.1853 7.68061L11.1746 2.64865L5.05266 3.68025C5.04861 8.28981 5.04659 10.9099 5.04659 11.5405L5.04077 11.5326C4.95203 12.9109 3.85883 14 2.52329 14C1.12972 14 0 12.8142 0 11.3514C0 9.88854 1.12972 8.7027 2.52329 8.7027C2.77381 8.7027 3.0158 8.74102 3.24423 8.81239V1.7027L12.9769 0C13.0077 6.85087 13.0077 10.3193 12.9769 10.4054L12.9711 10.398C12.8821 11.776 11.789 12.8649 10.4536 12.8649C9.06007 12.8649 7.93035 11.679 7.93035 10.2162C7.93035 8.75341 9.06007 7.56757 10.4536 7.56757C10.7081 7.56757 10.9537 7.60709 11.1853 7.68061Z" fill="currentColor"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 675 B

1
public/icons/literature.svg Normal file
View File

@ -0,0 +1 @@
<svg width="12" height="18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.969 1.688l6.181 2.18v12.88H12V2.722L4.2 0 0 1.47v13.668L7.436 18H8.55V4.532L2.147 2.265l1.822-.577z" fill="currentColor"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 215 B

6
src/components/Author/Card.tsx
View File

@ -20,6 +20,7 @@ interface AuthorCardProps {
isAuthorPage?: boolean
noSocialButtons?: boolean
isAuthorsList?: boolean
truncateBio?: boolean
}
export const AuthorCard = (props: AuthorCardProps) => {
@ -63,7 +64,8 @@ export const AuthorCard = (props: AuthorCardProps) => {
</Show>
<Show when={!props.hideDescription}>
<div class={styles.authorAbout} classList={{ 'text-truncate': props.isAuthorsList }}>
{props.isAuthorsList}
<div class={styles.authorAbout} classList={{ 'text-truncate': props.truncateBio }}>
{bio()}
</div>
</Show>
@ -86,7 +88,6 @@ export const AuthorCard = (props: AuthorCardProps) => {
>
<Show when={!props.isAuthorsList}>
<Icon name="author-subscribe" class={styles.icon} />
&nbsp;
</Show>
<span class={styles.buttonLabel}>{t('Follow')}</span>
</button>
@ -103,7 +104,6 @@ export const AuthorCard = (props: AuthorCardProps) => {
>
<Show when={!props.isAuthorsList}>
<Icon name="author-unsubscribe" class={styles.icon} />
&nbsp;
</Show>
<span class={styles.buttonLabel}>{t('Unfollow')}</span>
</button>

5
src/components/Feed/Beside.module.scss
View File

@ -70,6 +70,7 @@
@include font-size(1.5rem);
font-weight: 500;
padding-right: 0.3em;
white-space: nowrap;
img {
@ -108,3 +109,7 @@ button.follow {
max-width: 2em;
max-height: 2em;
}
.shoutCardContainer {
display: flex;
}

30
src/components/Feed/Beside.tsx
View File

@ -4,10 +4,11 @@ import { For, Show } from 'solid-js'
import { ArticleCard } from './Card'
import { AuthorCard } from '../Author/Card'
import { TopicCard } from '../Topic/Card'
import style from './Beside.module.scss'
import styles from './Beside.module.scss'
import type { Author, Shout, Topic, User } from '../../graphql/types.gen'
import { Icon } from '../Nav/Icon'
import { t } from '../../utils/intl'
import { clsx } from 'clsx'
interface BesideProps {
title?: string
@ -29,21 +30,28 @@ export const Beside = (props: BesideProps) => {
<Show when={!!props.values}>
<div class="col-md-4">
<Show when={!!props.title}>
<div class={style.besideColumnTitle}>
<div class={styles.besideColumnTitle}>
<h4>{props.title}</h4>
<Show when={props.wrapper === 'author'}>
<a href="/user/list">
{t('All authors')}
<Icon name="arrow-right" />
<Icon name="arrow-right" class={styles.icon} />
</a>
</Show>
<Show when={props.wrapper === 'topic'}>
<a href="/topics">
{t('All topics')}
<Icon name="arrow-right" class={styles.icon} />
</a>
</Show>
</div>
</Show>
<ul class={style.besideColumn}>
<ul class={styles.besideColumn}>
<For each={[...props.values]}>
{(value: Partial<Shout | User | Topic>) => (
<li classList={{ [style.top]: props.wrapper.startsWith('top-') }}>
<li classList={{ [styles.top]: props.wrapper.startsWith('top-') }}>
<Show when={props.wrapper === 'topic'}>
<TopicCard
topic={value as Topic}
@ -51,10 +59,16 @@ export const Beside = (props: BesideProps) => {
shortDescription={props.topicShortDescription}
isTopicInRow={props.isTopicInRow}
iconButton={props.iconButton}
showPublications={true}
/>
</Show>
<Show when={props.wrapper === 'author'}>
<AuthorCard author={value as Author} compact={true} hasLink={true} />
<AuthorCard
author={value as Author}
compact={true}
hasLink={true}
truncateBio={true}
/>
</Show>
<Show when={props.wrapper === 'article' && value?.slug}>
<ArticleCard article={value as Shout} settings={{ noimage: true }} />
@ -71,8 +85,8 @@ export const Beside = (props: BesideProps) => {
</ul>
</div>
</Show>
<div class="col-md-8">
<ArticleCard article={props.beside} settings={{ isBigTitle: true }} />
<div class={clsx('col-md-8', styles.shoutCardContainer)}>
<ArticleCard article={props.beside} settings={{ isBigTitle: true, isBeside: true }} />
</div>
</div>
</div>

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

@ -675,3 +675,19 @@
@include font-size(2.4rem);
}
}
.shoutCardBeside {
&,
.shoutCardCoverContainer {
flex: 1;
}
.shoutCardCover {
height: 100%;
padding: 0;
}
.shoutCardContent {
padding-top: 1.6rem;
}
}

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

@ -29,6 +29,7 @@ interface ArticleCardProps {
withBorder?: boolean
isCompact?: boolean
isSingle?: boolean
isBeside?: boolean
}
article: Shout
}
@ -82,7 +83,8 @@ export const ArticleCard = (props: ArticleCardProps) => {
[styles.shoutCardVertical]: props.settings?.isVertical,
[styles.shoutCardWithBorder]: props.settings?.withBorder,
[styles.shoutCardCompact]: props.settings?.isCompact,
[styles.shoutCardSingle]: props.settings?.isSingle
[styles.shoutCardSingle]: props.settings?.isSingle,
[styles.shoutCardBeside]: props.settings?.isBeside
}}
>
<Show when={!props.settings?.noimage && cover}>

2
src/components/Feed/Row2.tsx
View File

@ -23,7 +23,7 @@ export const Row2 = (props: { articles: Shout[]; isEqual?: boolean }) => {
<div class={`col-md-${props.isEqual ? '6' : x[y()][i()]}`}>
<ArticleCard
article={a}
settings={{ isWithCover: props.isEqual || x[y()][i()] === '8' }}
settings={{ isWithCover: props.isEqual || x[y()][i()] === '8', nodate: props.isEqual }}
/>
</div>
</Show>

7
src/components/Layouts/MainLayout.tsx
View File

@ -4,12 +4,14 @@ import { Footer } from '../Discours/Footer'
import '../../styles/app.scss'
import { Show } from 'solid-js'
import { clsx } from 'clsx'
type MainLayoutProps = {
headerTitle?: string
children: JSX.Element
isHeaderFixed?: boolean
hideFooter?: boolean
class?: string
}
export const MainLayout = (props: MainLayoutProps) => {
@ -18,7 +20,10 @@ export const MainLayout = (props: MainLayoutProps) => {
return (
<>
<Header title={props.headerTitle} isHeaderFixed={isHeaderFixed} />
<main class="main-content" classList={{ 'main-content--no-padding': !isHeaderFixed }}>
<main
class={clsx('main-content', props.class)}
classList={{ 'main-content--no-padding': !isHeaderFixed }}
>
{props.children}
</main>
<Show when={props.hideFooter !== true}>

3
src/components/Pages/HomePage.module.scss Normal file
View File

@ -0,0 +1,3 @@
.mainContent {
padding-top: 100px;
}

3
src/components/Pages/HomePage.tsx
View File

@ -5,6 +5,7 @@ import { createSignal, onCleanup, onMount, Show } from 'solid-js'
import { loadPublishedArticles, resetSortedArticles } from '../../stores/zine/articles'
import { loadRandomTopics } from '../../stores/zine/topics'
import { Loading } from '../Loading'
import styles from './HomePage.module.scss'
export const HomePage = (props: PageProps) => {
const [isLoaded, setIsLoaded] = createSignal(Boolean(props.homeArticles) && Boolean(props.randomTopics))
@ -23,7 +24,7 @@ export const HomePage = (props: PageProps) => {
onCleanup(() => resetSortedArticles())
return (
<MainLayout>
<MainLayout class={styles.mainContent}>
<Show when={isLoaded()} fallback={<Loading />}>
<HomeView randomTopics={props.randomTopics} recentPublishedArticles={props.homeArticles || []} />
</Show>

11
src/components/Topic/Card.module.scss
View File

@ -28,6 +28,7 @@
@include font-size(2.2rem);
margin-bottom: 1.2rem;
margin-top: 0.5rem !important;
}
.topicAvatar {
@ -104,3 +105,13 @@
text-align: right;
}
}
.topicCompact {
.topicTitle {
@include font-size(1.7rem);
}
}
.buttonCompact {
margin-top: 0.6rem;
}

25
src/components/Topic/Card.tsx
View File

@ -21,6 +21,7 @@ interface TopicProps {
additionalClass?: string
isTopicInRow?: boolean
iconButton?: boolean
showPublications?: boolean
}
export const TopicCard = (props: TopicProps) => {
@ -47,6 +48,7 @@ export const TopicCard = (props: TopicProps) => {
class={styles.topic}
classList={{
row: !props.compact && !props.subscribeButtonBottom,
[styles.topicCompact]: props.compact,
[styles.topicInRow]: props.isTopicInRow
}}
>
@ -75,7 +77,7 @@ export const TopicCard = (props: TopicProps) => {
<Show when={props.topic?.stat}>
<div class={styles.topicDetails}>
<Show when={!props.compact}>
<Show when={props.showPublications}>
<span class={styles.topicDetailsItem} classList={{ compact: props.compact }}>
{props.topic.stat?.shouts +
' ' +
@ -85,6 +87,8 @@ export const TopicCard = (props: TopicProps) => {
locale() === 'ru' ? ['ов', '', 'а'] : ['s', '', 's']
)}
</span>
</Show>
<Show when={!props.compact}>
<span class={styles.topicDetailsItem} classList={{ compact: props.compact }}>
{props.topic.stat?.authors +
' ' +
@ -132,19 +136,30 @@ export const TopicCard = (props: TopicProps) => {
class={styles.controlContainer}
classList={{ 'col-md-3': !props.compact && !props.subscribeButtonBottom }}
>
{}
<Show
when={subscribed()}
fallback={
<button onClick={() => subscribe(true)} class="button--light button--subscribe-topic">
<button
onClick={() => subscribe(true)}
class="button--light button--subscribe-topic"
classList={{
[styles.buttonCompact]: props.compact
}}
>
<Show when={props.iconButton}>+</Show>
<Show when={!props.iconButton}>{t('Follow')}</Show>
</button>
}
>
<button onClick={() => subscribe(false)} class="button--light button--subscribe-topic">
<button
onClick={() => subscribe(false)}
class="button--light button--subscribe-topic"
classList={{
[styles.buttonCompact]: props.compact
}}
>
<Show when={props.iconButton}>-</Show>
<Show when={!props.iconButton}>{t('Unfollow')}</Show>
</button>
</Show>

2
src/components/Topic/Full.module.scss
View File

@ -1,7 +1,7 @@
.topicHeader {
@include font-size(1.7rem);
padding-top: 5.8rem;
padding-top: 2.8rem;
text-align: center;
h1 {

1
src/components/Views/AllAuthors.tsx
View File

@ -109,6 +109,7 @@ export const AllAuthorsView = (props: Props) => {
subscribed={subscribed(author.slug)}
noSocialButtons={true}
isAuthorsList={true}
truncateBio={true}
/>
)}
</For>

9
src/components/Views/Home.tsx
View File

@ -76,14 +76,7 @@ export const HomeView = (props: HomeProps) => {
return (
<Show when={Boolean(selectedRandomLayout)}>
<Group
articles={articlesByLayout()[selectedRandomLayout]}
header={
<div class="layout-icon">
<Icon name={selectedRandomLayout} />
</div>
}
/>
<Group articles={articlesByLayout()[selectedRandomLayout]} header={''} />
</Show>
)
})

1
src/locales/ru.json
View File

@ -4,6 +4,7 @@
"All": "Все",
"All posts": "Все публикации",
"All topics": "Все темы",
"All authors": "Все авторы",
"Authors": "Авторы",
"Back to mainpage": "Вернуться на главную",
"Become an author": "Стать автором",

3
src/styles/app.scss
View File

@ -232,7 +232,6 @@ button {
font-weight: 400;
height: auto;
margin-top: 0.6rem;
padding: 0.6rem 1.2rem 0.6rem 1rem;
}
@ -641,7 +640,7 @@ astro-island {
.main-content {
flex: 1 100%;
min-height: 300px;
padding-top: 100px;
padding-top: 120px;
position: relative;
}