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

Profile page fixes

Browse Source
This commit is contained in:
kvakazyambra 2022-12-21 23:31:16 +03:00
parent 0b70289195
commit 09a4f90b1a
10 changed files with 180 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/Article/RatingControl.module.scss
View File

@ -16,8 +16,7 @@
justify-content: center;
height: 0.9em;
line-height: 0;
@include font-size(3.6rem);
font-size: 1.6em;
padding: 0;
width: 0.9em;

38
src/components/Author/Card.module.scss
View File

@ -54,6 +54,10 @@
padding: 0 0 0 42px;
}
@include media-breakpoint-down(md) {
flex-wrap: wrap;
}
a {
background: #f7f7f7;
border: none;
@ -136,6 +140,17 @@
}
}
.authorSubscribeSocial {
align-items: center;
display: flex;
@include media-breakpoint-down(sm) {
flex: 1 100%;
justify-content: center;
margin-top: 1em;
}
}
.buttonSubscribe {
align-items: center;
aspect-ratio: 1/1;
@ -180,9 +195,12 @@
}
.authorPage {
@include media-breakpoint-down(md) {
justify-content: center;
}
.authorName {
@include font-size(3.4rem);
font-weight: 500;
margin-bottom: 0.2em;
}
@ -195,10 +213,18 @@
.authorSubscribe {
margin-top: 2rem;
padding-left: 0;
@include media-breakpoint-down(md) {
justify-content: center;
}
}
.authorDetails {
display: block;
@include media-breakpoint-down(md) {
flex: 1 100%;
}
}
.buttonLabel {
@ -237,6 +263,16 @@
.button {
margin-right: 1.6rem;
vertical-align: middle;
&:last-of-type {
margin-right: 0;
}
@include media-breakpoint-down(sm) {
display: block;
margin-bottom: 0.5em;
margin-right: 0;
}
}
}

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

@ -177,7 +177,9 @@ export const AuthorCard = (props: AuthorCardProps) => {
</button>
<Show when={!props.noSocialButtons}>
<div class={styles.authorSubscribeSocial}>
<For each={props.author.links}>{(link) => <a href={link} />}</For>
</div>
</Show>
</Show>
</div>

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

@ -1,11 +1,22 @@
.user-details {
margin-bottom: 5.4rem;
margin: 0 0 5.4rem;
@include media-breakpoint-up(md) {
margin-left: 160px;
}
@include media-breakpoint-up(lg) {
margin-left: 235px;
}
@include media-breakpoint-down(md) {
text-align: center;
}
}
.author-page {
.view-switcher {
@include font-size(1.5rem);
margin-top: 0;
button {

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

@ -5,7 +5,7 @@ import './Full.scss'
export const AuthorFull = (props: { author: Author }) => {
return (
<div class="row">
<div class="col-md-8 offset-md-2 user-details">
<div class="col-md-9 col-lg-8 user-details">
<AuthorCard author={props.author} compact={false} isAuthorPage={true} />
</div>
</div>

6
src/components/Author/Userpic.module.scss
View File

@ -35,12 +35,16 @@
}
.big.circlewrap {
margin-right: 4.8rem;
margin-right: 0;
max-width: 168px;
min-width: 168px;
height: 168px;
width: 168px;
@include media-breakpoint-up(md) {
margin-right: 4.8rem;
}
.userpic {
font-size: 2em;
line-height: 168px;

55
src/components/Views/Author.module.scss Normal file
View File

@ -0,0 +1,55 @@
.ratingContainer {
@include font-size(1.5rem);
display: inline-block;
vertical-align: top;
}
.ratingControl {
@include font-size(1.5rem);
display: inline-flex;
margin-left: 1em;
vertical-align: middle;
}
.additionalControls {
white-space: nowrap;
@include media-breakpoint-up(md) {
text-align: right;
}
}
.userpic {
background: #fff;
box-shadow: 0 0 0 2px #fff;
display: inline-block;
margin-right: -1.2rem;
vertical-align: top;
}
.subscribers {
cursor: pointer;
display: inline-block;
margin: -0.4rem 2em 0 0;
vertical-align: top;
}
.subscribersCounter {
background: #fff;
border: 2px solid #000;
border-radius: 100%;
@include font-size(1rem);
font-weight: bold;
height: 32px;
line-height: 30px;
position: relative;
text-align: center;
width: 32px;
z-index: 1;
}
.subscribersList {
max-height: 15em;
overflow: auto;
position: relative;
}

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

@ -1,7 +1,7 @@
import { Show, createMemo, createSignal, For, onMount } from 'solid-js'
import type { Author, Shout } from '../../graphql/types.gen'
import { Row1 } from '../Feed/Row1'
import { Row2 } from '../Feed/Row2'
import { Row3 } from '../Feed/Row3'
import { AuthorFull } from '../Author/Full'
import { t } from '../../utils/intl'
import { useAuthorsStore } from '../../stores/zine/authors'
@ -9,9 +9,14 @@ import { loadShouts, useArticlesStore } from '../../stores/zine/articles'
import { useTopicsStore } from '../../stores/zine/topics'
import { useRouter } from '../../stores/router'
import { Beside } from '../Feed/Beside'
import { restoreScrollPosition, saveScrollPosition } from '../../utils/scroll'
import { splitToPages } from '../../utils/splitToPages'
import { RatingControl } from '../Article/RatingControl'
import styles from './Author.module.scss'
import { clsx } from 'clsx'
import Userpic from '../Author/Userpic'
import { Popup } from '../_shared/Popup'
import { AuthorCard } from '../Author/Card'
// TODO: load reactions on client
type AuthorProps = {
@ -38,6 +43,7 @@ export const AuthorView = (props: AuthorProps) => {
const [isLoadMoreButtonVisible, setIsLoadMoreButtonVisible] = createSignal(false)
const author = createMemo(() => authorEntities()[props.authorSlug])
const subscribers = new Array(12).fill(author())
const { searchParams, changeSearchParam } = useRouter<AuthorPageSearchParams>()
const loadMore = async () => {
@ -94,36 +100,54 @@ export const AuthorView = (props: AuthorProps) => {
</li>
</ul>
</div>
<div class="col-md-4">
<div class="mode-switcher">
{`${t('Show')} `}
<span class="mode-switcher__control">{t('All posts')}</span>
<div class={clsx('col-md-4', styles.additionalControls)}>
<Popup
{...props}
trigger={
<div class={styles.subscribers}>
<Userpic user={author()} class={styles.userpic} />
<Userpic user={author()} class={styles.userpic} />
<Userpic user={author()} class={styles.userpic} />
<div class={clsx(styles.userpic, styles.subscribersCounter)}>12</div>
</div>
}
variant="tiny"
>
<ul class={clsx('nodash', styles.subscribersList)}>
<For each={subscribers}>
{(item) => (
<li>
<AuthorCard author={item} hideDescription={true} hideFollow={true} hasLink={true} />
</li>
)}
</For>
</ul>
</Popup>
<div class={styles.ratingContainer}>
Карма
<RatingControl rating={19} class={styles.ratingControl} />
</div>
</div>
</div>
</div>
<Beside
title={t('Topics which supported by author')}
values={topicsByAuthor()[author().slug]?.slice(0, 5)}
beside={sortedArticles()[0]}
wrapper={'topic'}
topicShortDescription={true}
isTopicCompact={true}
isTopicInRow={true}
iconButton={true}
/>
<Row3 articles={sortedArticles().slice(1, 4)} />
<Row2 articles={sortedArticles().slice(4, 6)} />
<Row3 articles={sortedArticles().slice(6, 9)} />
<Row3 articles={sortedArticles().slice(9, 12)} />
<Row1 article={sortedArticles()[0]} />
<Row2 articles={sortedArticles().slice(1, 3)} isEqual={true} />
<Row1 article={sortedArticles()[3]} />
<Row2 articles={sortedArticles().slice(4, 6)} isEqual={true} />
<Row1 article={sortedArticles()[6]} />
<Row2 articles={sortedArticles().slice(7, 9)} isEqual={true} />
<For each={pages()}>
{(page) => (
<>
<Row3 articles={page.slice(0, 3)} />
<Row3 articles={page.slice(3, 6)} />
<Row3 articles={page.slice(6, 9)} />
<Row1 article={page[0]} />
<Row2 articles={page.slice(1, 3)} isEqual={true} />
<Row1 article={page[3]} />
<Row2 articles={page.slice(4, 6)} isEqual={true} />
<Row1 article={page[6]} />
<Row2 articles={page.slice(7, 9)} isEqual={true} />
</>
)}
</For>

25
src/components/_shared/Popup/Popup.module.scss
View File

@ -4,18 +4,19 @@
.popup {
background: #fff;
top: calc(100% + 8px);
opacity: 1;
color: #000;
position: absolute;
z-index: 100;
min-width: 144px;
opacity: 1;
position: absolute;
top: calc(100% + 8px);
z-index: 100;
ul {
margin-bottom: 0;
li {
position: relative;
&:last-child {
margin-bottom: 0;
}
@ -24,11 +25,12 @@
&.bordered {
@include font-size(1.6rem);
border: 2px solid #000;
padding: 2.4rem;
ul li {
margin-bottom: 1.6rem;
&:last-child {
margin-bottom: 0;
}
@ -37,11 +39,12 @@
&.tiny {
@include font-size(1.4rem);
box-shadow: 0 4px 60px rgba(0, 0, 0, 0.1);
padding: 1rem;
ul li {
margin-bottom: 1rem;
&:last-child {
margin-bottom: 0;
}
@ -67,22 +70,22 @@
white-space: nowrap;
&:hover {
img {
.icon img {
filter: invert(0);
}
}
}
.icon {
display: inline-block;
width: 3.6rem;
img {
filter: invert(1);
max-height: 2rem;
max-width: 2rem;
transition: filter 0.3s;
}
.icon {
display: inline-block;
width: 3.6rem;
}
}

1
src/locales/ru.json
View File

@ -52,6 +52,7 @@
"Fill email": "Введите почту",
"Follow": "Подписаться",
"Follow the topic": "Подписаться на тему",
"Followers": "Подписчики",
"Forgot password?": "Забыли пароль?",
"Full name": "Имя и фамилия",
"Get to know the most intelligent people of our time, edit and discuss the articles, share your expertise, rate and decide what to publish in the magazine": "Познакомитесь с выдающимися людьми нашего времени, участвуйте в редактировании и обсуждении статей, выступайте экспертом, оценивайте материалы других авторов со всего мира и определяйте, какие статьи будут опубликованы в журнале",