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

View switcher unification

Browse Source
This commit is contained in:
kvakazyambra 2023-05-23 01:01:04 +03:00
parent f0d8aa4f5c
commit 186912e2e8
19 changed files with 86 additions and 188 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/Article/Article.module.scss
View File

@ -1,6 +1,5 @@
h1 {
@include font-size(4rem);
line-height: 1.1;
margin-top: 0.5em;
}
@ -334,12 +333,7 @@ img {
}
.commentsViewSwitcher {
margin-top: 0;
}
.commentsViewSwitcherButton {
padding-left: 0 !important;
padding-right: 0 !important;
margin-top: 0 !important;
}
.help {

15
src/components/Article/CommentsTree.tsx
View File

@ -115,35 +115,32 @@ export const CommentsTree = (props: Props) => {
<Show when={comments().length > 0}>
<ul class={clsx(styles.commentsViewSwitcher, 'view-switcher')}>
<Show when={newReactions().length > 0}>
<li classList={{ selected: commentsOrder() === 'newOnly' }}>
<li classList={{ 'view-switcher__item--selected': commentsOrder() === 'newOnly' }}>
<Button
variant="inline"
variant="light"
value={t('New only')}
onClick={() => {
setCommentsOrder('newOnly')
}}
class={styles.commentsViewSwitcherButton}
/>
</li>
</Show>
<li classList={{ selected: commentsOrder() === 'createdAt' }}>
<li classList={{ 'view-switcher__item--selected': commentsOrder() === 'createdAt' }}>
<Button
variant="inline"
variant="light"
value={t('By time')}
onClick={() => {
setCommentsOrder('createdAt')
}}
class={styles.commentsViewSwitcherButton}
/>
</li>
<li classList={{ selected: commentsOrder() === 'rating' }}>
<li classList={{ 'view-switcher__item--selected': commentsOrder() === 'rating' }}>
<Button
variant="inline"
variant="light"
value={t('By rating')}
onClick={() => {
setCommentsOrder('rating')
}}
class={styles.commentsViewSwitcherButton}
/>
</li>
</ul>

2
src/components/Author/Full.scss
View File

@ -16,8 +16,6 @@
.author-page {
.view-switcher {
@include font-size(1.5rem);
margin-top: 0;
button {

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

@ -158,14 +158,14 @@
}
.mainNavigation {
display: inline-flex;
font-weight: 500;
list-style: none;
margin: 0;
margin: 0 !important;
opacity: 1;
padding: 0;
transition: opacity 0.3s;
li {
margin-bottom: 0 !important;
}
@include media-breakpoint-down(md) {
background: #fff;
bottom: 0;
@ -180,7 +180,7 @@
z-index: 1;
li {
margin-bottom: 2.4rem;
margin-bottom: 2.4rem !important;
}
}
@ -195,22 +195,6 @@
display: block !important;
}
}
li {
margin-right: 2.4rem;
}
a,
a:link {
border: none;
}
.selected a {
border-bottom: 2px solid;
color: #000;
cursor: default;
pointer-events: none;
}
}
.headerWithTitle.headerScrolledBottom {

7
src/components/Nav/Header.tsx
View File

@ -111,13 +111,10 @@ export const Header = (props: Props) => {
<Show when={props.title}>
<div class={styles.articleHeader}>{props.title}</div>
</Show>
<ul
class={clsx(styles.mainNavigation, 'col text-xl inline-flex')}
classList={{ fixed: fixed() }}
>
<ul class={clsx('view-switcher', styles.mainNavigation)} classList={{ fixed: fixed() }}>
<For each={resources}>
{(r) => (
<li classList={{ [styles.selected]: r.route === page().route }}>
<li classList={{ 'view-switcher__item--selected': r.route === page().route }}>
<a href={getPagePath(router, r.route)}>{r.name}</a>
</li>
)}

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

@ -99,13 +99,17 @@ export const AllAuthorsView = (props: AllAuthorsViewProps) => {
<p>{t('Subscribe who you like to tune your personal feed')}</p>
<ul class={clsx(styles.viewSwitcher, 'view-switcher')}>
<li classList={{ selected: !searchParams().by || searchParams().by === 'shouts' }}>
<li
classList={{
'view-switcher__item--selected': !searchParams().by || searchParams().by === 'shouts'
}}
>
<a href="/authors?by=shouts">{t('By shouts')}</a>
</li>
<li classList={{ selected: searchParams().by === 'followers' }}>
<li classList={{ 'view-switcher__item--selected': searchParams().by === 'followers' }}>
<a href="/authors?by=followers">{t('By popularity')}</a>
</li>
<li classList={{ selected: searchParams().by === 'name' }}>
<li classList={{ 'view-switcher__item--selected': searchParams().by === 'name' }}>
<a href="/authors?by=name">{t('By name')}</a>
</li>
<Show when={searchParams().by !== 'name'}>

8
src/components/Views/AllTopics.tsx
View File

@ -100,14 +100,14 @@ export const AllTopicsView = (props: AllTopicsViewProps) => {
<h1>{t('Topics')}</h1>
<p>{t('Subscribe what you like to tune your personal feed')}</p>
<ul class={clsx(styles.viewSwitcher, 'view-switcher')}>
<li classList={{ selected: searchParams().by === 'shouts' }}>
<ul class="view-switcher">
<li classList={{ 'view-switcher__item--selected': searchParams().by === 'shouts' }}>
<a href="/topics?by=shouts">{t('By shouts')}</a>
</li>
<li classList={{ selected: searchParams().by === 'authors' }}>
<li classList={{ 'view-switcher__item--selected': searchParams().by === 'authors' }}>
<a href="/topics?by=authors">{t('By authors')}</a>
</li>
<li classList={{ selected: searchParams().by === 'title' }}>
<li classList={{ 'view-switcher__item--selected': searchParams().by === 'title' }}>
<a href="/topics?by=title">{t('By title')}</a>
</li>
<Show when={searchParams().by !== 'title'}>

10
src/components/Views/Author/Author.tsx
View File

@ -140,27 +140,27 @@ export const AuthorView = (props: AuthorProps) => {
<div class="row group__controls">
<div class="col-md-16">
<ul class="view-switcher">
<li classList={{ selected: searchParams().by === 'rating' }}>
<li classList={{ 'view-switcher__item--selected': searchParams().by === 'rating' }}>
<button type="button" onClick={() => changeSearchParam('by', 'rating')}>
{t('Publications')}
</button>
</li>
<li classList={{ selected: searchParams().by === 'followers' }}>
<li classList={{ 'view-switcher__item--selected': searchParams().by === 'followers' }}>
<button type="button" onClick={() => changeSearchParam('by', 'followers')}>
{t('Followers')}
</button>
</li>
<li classList={{ selected: searchParams().by === 'subscriptions' }}>
<li classList={{ 'view-switcher__item--selected': searchParams().by === 'subscriptions' }}>
<button type="button" onClick={() => changeSearchParam('by', 'subscriptions')}>
{t('Subscriptions')}
</button>
</li>
<li classList={{ selected: searchParams().by === 'commented' }}>
<li classList={{ 'view-switcher__item--selected': searchParams().by === 'commented' }}>
<button type="button" onClick={() => changeSearchParam('by', 'commented')}>
{t('Comments')}
</button>
</li>
<li classList={{ selected: searchParams().by === 'about' }}>
<li classList={{ 'view-switcher__item--selected': searchParams().by === 'about' }}>
<button type="button" onClick={() => changeSearchParam('by', 'about')}>
{t('About myself')}
</button>

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

@ -1,3 +1,7 @@
.feedFilter {
margin: 0 0 1.6rem;
}
.feedNavigation {
@include font-size(1.5rem);

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

@ -1,5 +1,4 @@
import { createEffect, createSignal, For, onMount, Show } from 'solid-js'
import '../../styles/Feed.scss'
import { Icon } from '../_shared/Icon'
import { ArticleCard } from '../Feed/ArticleCard'
import { AuthorCard } from '../Author/AuthorCard'
@ -88,9 +87,9 @@ export const FeedView = () => {
</div>
<div class="col-md-12 offset-xl-1">
<ul class="feed-filter">
<ul class={clsx(styles.feedFilter, 'view-switcher')}>
<Show when={!!session()?.user?.slug}>
<li class="selected">
<li class="view-switcher__item--selected">
<a href="/feed/my">{t('My feed')}</a>
</li>
</Show>

2
src/components/Views/FeedSettings.tsx
View File

@ -12,7 +12,7 @@ export const FeedSettingsView = (_props) => {
<h1>{t('Feed settings')}</h1>
<ul class="view-switcher">
<li class="selected">
<li class="view-switcher__item--selected">
<a href="?by=topics">{t('topics')}</a>
</li>
{/*<li>

4
src/components/Views/Search.tsx
View File

@ -69,14 +69,14 @@ export const SearchView = (props: Props) => {
<ul class="view-switcher">
<li
classList={{
selected: searchParams().by === 'relevance'
'view-switcher__item--selected': searchParams().by === 'relevance'
}}
>
<a href="?by=relevance">{t('By relevance')}</a>
</li>
<li
classList={{
selected: searchParams().by === 'rating'
'view-switcher__item--selected': searchParams().by === 'rating'
}}
>
<a href="?by=rating">{t('Top rated')}</a>

12
src/components/Views/Topic.tsx
View File

@ -83,23 +83,27 @@ export const TopicView = (props: TopicProps) => {
<div class={clsx(styles.groupControls, 'row group__controls')}>
<div class="col-md-16">
<ul class="view-switcher">
<li classList={{ selected: searchParams().by === 'recent' || !searchParams().by }}>
<li
classList={{
'view-switcher__item--selected': searchParams().by === 'recent' || !searchParams().by
}}
>
<button type="button" onClick={() => changeSearchParam('by', 'recent')}>
{t('Recent')}
</button>
</li>
{/*TODO: server sort*/}
{/*<li classList={{ selected: getSearchParams().by === 'rating' }}>*/}
{/*<li classList={{ 'view-switcher__item--selected': getSearchParams().by === 'rating' }}>*/}
{/* <button type="button" onClick={() => changeSearchParam('by', 'rating')}>*/}
{/* {t('Popular')}*/}
{/* </button>*/}
{/*</li>*/}
{/*<li classList={{ selected: getSearchParams().by === 'viewed' }}>*/}
{/*<li classList={{ 'view-switcher__item--selected': getSearchParams().by === 'viewed' }}>*/}
{/* <button type="button" onClick={() => changeSearchParam('by', 'viewed')}>*/}
{/* {t('Views')}*/}
{/* </button>*/}
{/*</li>*/}
{/*<li classList={{ selected: getSearchParams().by === 'commented' }}>*/}
{/*<li classList={{ 'view-switcher__item--selected': getSearchParams().by === 'commented' }}>*/}
{/* <button type="button" onClick={() => changeSearchParam('by', 'commented')}>*/}
{/* {t('Discussing')}*/}
{/* </button>*/}

5
src/components/_shared/Button/Button.module.scss
View File

@ -43,6 +43,11 @@
}
}
&.light {
font-weight: inherit;
padding: 0;
}
&.outline,
&.bordered {
border: 3px solid #f2f2f2;

2
src/components/_shared/Button/Button.tsx
View File

@ -5,7 +5,7 @@ import styles from './Button.module.scss'
type Props = {
value: string | JSX.Element
size?: 'S' | 'M' | 'L'
variant?: 'primary' | 'secondary' | 'bordered' | 'inline' | 'outline'
variant?: 'primary' | 'secondary' | 'bordered' | 'inline' | 'light' | 'outline'
type?: 'submit' | 'button'
loading?: boolean
disabled?: boolean

8
src/pages/layoutShouts.page.tsx
View File

@ -80,16 +80,16 @@ export const LayoutShoutsPage = (props: PageProps) => {
<div class={clsx(styles.groupControls, 'row group__controls')}>
<div class="col-md-16">
<ul class="view-switcher">
<li classList={{ selected: getLayout() === 'audio' }}>
<li classList={{ 'view-switcher__item--selected': getLayout() === 'audio' }}>
<a href="/expo/audio">{t('Audio')}</a>
</li>
<li classList={{ selected: getLayout() === 'video' }}>
<li classList={{ 'view-switcher__item--selected': getLayout() === 'video' }}>
<a href="/expo/video">{t('Video')}</a>
</li>
<li classList={{ selected: getLayout() === 'image' }}>
<li classList={{ 'view-switcher__item--selected': getLayout() === 'image' }}>
<a href="/expo/image">{t('Artworks')}</a>
</li>
<li classList={{ selected: getLayout() === 'literature' }}>
<li classList={{ 'view-switcher__item--selected': getLayout() === 'literature' }}>
<a href="/expo/literature">{t('Literature')}</a>
</li>
</ul>

5
src/styles/AllTopics.module.scss
View File

@ -1,7 +1,6 @@
.allTopicsPage {
.group {
@include font-size(1.6rem);
margin: 3em 0 9.6rem;
@include media-breakpoint-down(sm) {
@ -55,9 +54,8 @@
display: flex;
flex-wrap: wrap;
font-weight: 700;
margin: 1.5em -3% 0 0;
@include font-size(1.5rem);
margin: 1.5em -3% 0 0;
li {
min-width: 1.5em;
@ -68,7 +66,6 @@
.articlesCounter {
@include font-size(1.2rem);
margin-left: 0.5em;
vertical-align: super;
}

93
src/styles/Feed.scss
View File

@ -1,93 +0,0 @@
.feed {
.comment__content {
display: flex;
}
.comment__author-image {
background: #ccc;
border-radius: 100%;
height: 40px;
min-width: 40px;
position: relative;
overflow: hidden;
}
.comment__text {
@include font-size(1.5rem);
line-clamp: 5;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
display: box;
margin: 0 1em 0.5em 0;
overflow: hidden;
text-overflow: ellipsis;
}
.comment__details {
@include font-size(1.2rem);
display: flex;
overflow: hidden;
position: relative;
white-space: nowrap;
width: 100%;
&,
a {
border: none;
color: #9ca3af;
}
}
.comment__article {
margin-left: 0.5rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
.icon {
display: inline-block;
margin-right: 0.3em;
vertical-align: middle;
width: 1.2em;
}
}
}
.feed-filter {
@include font-size(1.7rem);
display: flex;
flex-wrap: wrap;
font-weight: 500;
list-style: none;
margin: 0 0 1.6rem;
padding: 0;
li {
border-bottom: 4px solid transparent;
margin: 0 1.4em 0.5em 0;
&:last-child {
margin-right: 0;
}
}
.selected {
border-bottom-color: #000;
a {
&,
&:hover {
background: none;
color: #000;
cursor: default;
}
}
}
a {
border: none;
}
}

46
src/styles/app.scss
View File

@ -530,19 +530,21 @@ figure {
.view-switcher {
@include font-size(1.7rem);
display: flex;
flex-wrap: wrap;
font-weight: bold;
font-weight: 500;
list-style: none;
margin: 3.6rem 0 0;
padding: 0;
li {
display: inline-block;
margin-right: 1em;
margin-right: 2rem;
margin-bottom: 0.6em;
@include media-breakpoint-down(md) {
}
&:last-child {
margin-right: 0;
}
@ -551,34 +553,40 @@ figure {
button {
background: none;
border: none;
border-bottom: 2px solid #fff;
color: #696969;
cursor: pointer;
font-size: inherit;
font-weight: inherit;
padding: 0;
height: auto !important;
font-size: inherit !important;
padding: 0 !important;
}
a {
border-bottom: 2px solid #fff;
color: rgb(0 0 0 / 50%);
&:hover {
color: #fff;
}
}
.selected {
button {
border-color: #000;
color: #000;
cursor: default;
}
a,
button {
border-bottom: 2px solid #fff;
color: #000;
cursor: pointer;
font-weight: inherit;
a {
border-color: #000;
&:hover {
background: #000;
color: #fff;
}
}
.view-switcher__item--selected {
font-weight: bold;
a,
button {
border-bottom: 2px solid #000;
color: #000;
cursor: default;
pointer-events: none;
&:hover {
background: none;