Placeholders on the user profile page
This commit is contained in:
parent
9542fd0209
commit
0664b5c933
5
public/icons/arrow-right-2.svg
Normal file
5
public/icons/arrow-right-2.svg
Normal file
|
@ -0,0 +1,5 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M19.125 12.75H4.5C4.08854 12.75 3.75 12.4115 3.75 12C3.75 11.5885 4.08854 11.25 4.5 11.25H19.125C19.5365 11.25 19.875 11.5885 19.875 12C19.875 12.4115 19.5365 12.75 19.125 12.75Z" fill="currentColor"/>
|
||||
<path
|
||||
d="M14.0678 18.3593C13.8803 18.3593 13.6928 18.2916 13.547 18.151C13.2501 17.8593 13.2397 17.3853 13.5314 17.0885L18.4584 11.9999L13.5314 6.91137C13.2397 6.6145 13.2501 6.14054 13.547 5.84887C13.8439 5.56241 14.3178 5.57283 14.6043 5.8697L20.0366 11.4791C20.3178 11.7707 20.3178 12.2291 20.0366 12.5207L14.6043 18.1301C14.4584 18.2864 14.2657 18.3593 14.0678 18.3593Z" fill="currentColor"/>
|
||||
</svg>
|
After Width: | Height: | Size: 713 B |
|
@ -46,6 +46,7 @@
|
|||
"Back": "Back",
|
||||
"Be the first to rate": "Be the first to rate",
|
||||
"Become an author": "Become an author",
|
||||
"Block rules": "За что можно получить бан",
|
||||
"Bold": "Bold",
|
||||
"Bookmarked": "Saved",
|
||||
"Bookmarks": "Bookmarks",
|
||||
|
@ -170,6 +171,7 @@
|
|||
"Gallery": "Gallery",
|
||||
"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": "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",
|
||||
"Go to main page": "Go to main page",
|
||||
"Go to discussions": "Перейти к обсуждениям",
|
||||
"Group Chat": "Group Chat",
|
||||
"Groups": "Groups",
|
||||
"Header 1": "Header 1",
|
||||
|
@ -217,9 +219,13 @@
|
|||
"It does not look like url": "It doesn't look like a link",
|
||||
"Italic": "Italic",
|
||||
"Join our maillist": "To receive the best postings, just enter your email",
|
||||
"Join our team of authors": "Join our team of authors",
|
||||
"Join our team of authors text": "Каждый месяц на Дискурсе публикуются десятки новых авторов. Станьте одним из них — предложите свой материал в журнал и присоединитесь к горизонтальной редакции",
|
||||
"Join the community": "Join the community",
|
||||
"Join the global community of authors!": "Join the global community of authors from all over the world!",
|
||||
"Join": "Join",
|
||||
"Join discussions": "Присоединяйтесь к дискуссиям",
|
||||
"Join discussions text": "Дискурс — свободная платформа для осмысленного общения.<br/>Здесь появятся ваши реплики, чтобы в любой момент вернуться к диалогу.",
|
||||
"Just start typing...": "Just start typing...",
|
||||
"Knowledge base": "Knowledge base",
|
||||
"Language": "Language",
|
||||
|
|
|
@ -49,6 +49,7 @@
|
|||
"Back": "Назад",
|
||||
"Be the first to rate": "Оцените первым",
|
||||
"Become an author": "Стать автором",
|
||||
"Block rules": "За что можно получить бан",
|
||||
"Bold": "Жирный",
|
||||
"Bookmarked": "Сохранено",
|
||||
"Bookmarks": "Закладки",
|
||||
|
@ -178,6 +179,7 @@
|
|||
"Get notifications": "Получать уведомления",
|
||||
"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": "Познакомитесь с выдающимися людьми нашего времени, участвуйте в редактировании и обсуждении статей, выступайте экспертом, оценивайте материалы других авторов со всего мира и определяйте, какие статьи будут опубликованы в журнале",
|
||||
"Go to main page": "Перейти на главную",
|
||||
"Go to discussions": "Перейти к обсуждениям",
|
||||
"Group Chat": "Общий чат",
|
||||
"Groups": "Группы",
|
||||
"Header 1": "Заголовок 1",
|
||||
|
@ -227,9 +229,13 @@
|
|||
"It does not look like url": "Это не похоже на ссылку",
|
||||
"Italic": "Курсив",
|
||||
"Join our maillist": "Чтобы получать рассылку лучших публикаций, просто укажите свою почту",
|
||||
"Join our team of authors": "Станьте автором",
|
||||
"Join our team of authors text": "Каждый месяц на Дискурсе публикуются десятки новых авторов.<br/>Станьте одним из них — предложите свой материал в журнал и присоединитесь к горизонтальной редакции",
|
||||
"Join the community": "Присоединиться к сообществу",
|
||||
"Join the global community of authors!": "Присоединятесь к глобальному сообществу авторов со всего мира!",
|
||||
"Join": "Присоединиться",
|
||||
"Join discussions": "Присоединяйтесь к дискуссиям",
|
||||
"Join discussions text": "Дискурс — свободная платформа для осмысленного общения.<br/>Здесь появятся ваши реплики, чтобы в любой момент вернуться к диалогу.",
|
||||
"Just start typing...": "Просто начните печатать...",
|
||||
"Karma": "Карма",
|
||||
"Knowledge base": "База знаний",
|
||||
|
|
BIN
public/placeholder-join.webp
Normal file
BIN
public/placeholder-join.webp
Normal file
Binary file not shown.
After Width: | Height: | Size: 192 KiB |
|
@ -1,9 +1,7 @@
|
|||
.placeholder {
|
||||
aspect-ratio: 1 / 0.8;
|
||||
border-radius: 2.2rem;
|
||||
display: flex;
|
||||
@include font-size(1.4rem);
|
||||
flex-direction: column;
|
||||
font-weight: 500;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
@ -14,19 +12,26 @@
|
|||
|
||||
button,
|
||||
.button {
|
||||
align-items: center;
|
||||
border-radius: 1.2rem;
|
||||
display: block;
|
||||
display: flex;
|
||||
@include font-size(1.5rem);
|
||||
gap: 0.6rem;
|
||||
margin-top: 3rem;
|
||||
padding: 1rem 2rem;
|
||||
width: 100%;
|
||||
|
||||
.icon {
|
||||
height: 2.4rem;
|
||||
width: 2.4rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.placeholderCover {
|
||||
flex: 0 100%;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
.placeholder--feed-mode {
|
||||
aspect-ratio: 1 / 0.8;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
|
||||
&:after {
|
||||
bottom: 0;
|
||||
|
@ -36,35 +41,84 @@
|
|||
position: absolute;
|
||||
width: 100%;
|
||||
|
||||
.placeholder-feed & {
|
||||
.placeholder--feed & {
|
||||
background: linear-gradient(to top, #171032, rgba(23, 16, 50, 0));
|
||||
}
|
||||
|
||||
.placeholder-feedCollaborations & {
|
||||
.placeholder--feedCollaborations & {
|
||||
background: linear-gradient(to top, #070709, rgba(7, 7, 9, 0));
|
||||
}
|
||||
}
|
||||
|
||||
.placeholder-feedDiscussions & {
|
||||
//background: linear-gradient(to top, #E9E9EE, rgba(233, 233, 238, 0));
|
||||
.placeholderCover {
|
||||
flex: 0 100%;
|
||||
width: 100%;
|
||||
|
||||
img {
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.placeholder--profile-mode {
|
||||
min-height: 28rem;
|
||||
|
||||
.placeholderCover {
|
||||
flex: 0 45rem;
|
||||
min-width: 45rem;
|
||||
order: 2;
|
||||
padding: 1.6rem;
|
||||
|
||||
img {
|
||||
height: auto;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.placeholderContent {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
@include font-size(2rem);
|
||||
line-height: 1.2;
|
||||
padding: 3rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
@include font-size(3.8rem);
|
||||
}
|
||||
|
||||
.button {
|
||||
background: var(--background-color-invert);
|
||||
color: var(--default-color-invert);
|
||||
bottom: 2rem;
|
||||
position: absolute;
|
||||
right: 2rem;
|
||||
width: auto;
|
||||
|
||||
.icon {
|
||||
filter: invert(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.placeholderCover {
|
||||
position: relative;
|
||||
|
||||
img {
|
||||
left: 0;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.placeholderContent {
|
||||
padding: 1.6rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.placeholder-feed,
|
||||
.placeholder-feedCollaborations {
|
||||
.placeholder--feed,
|
||||
.placeholder--feedCollaborations {
|
||||
color: var(--default-color-invert);
|
||||
|
||||
button,
|
||||
|
@ -74,7 +128,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.placeholder-feed {
|
||||
.placeholder--feed {
|
||||
background: #171032;
|
||||
|
||||
.placeholderCover {
|
||||
|
@ -84,7 +138,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.placeholder-feedCollaborations {
|
||||
.placeholder--feedCollaborations {
|
||||
background: #070709;
|
||||
|
||||
.placeholderCover {
|
||||
|
@ -94,7 +148,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.placeholder-feedDiscussions {
|
||||
.placeholder--feedDiscussions {
|
||||
background: #E9E9EE;
|
||||
|
||||
.placeholderCover {
|
||||
|
@ -115,3 +169,45 @@
|
|||
color: var(--default-color-invert);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.placeholder--author {
|
||||
background: #E58B72;
|
||||
}
|
||||
|
||||
.placeholder--authorComments {
|
||||
background: #E9E9EE;
|
||||
|
||||
.placeholderCover {
|
||||
img {
|
||||
mix-blend-mode: multiply;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottomLinks {
|
||||
display: flex;
|
||||
@include font-size(1.6rem);
|
||||
gap: 4rem;
|
||||
|
||||
a {
|
||||
border: none !important;
|
||||
padding-left: 2.6rem;
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
.icon {
|
||||
filter: invert(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
filter: invert(1);
|
||||
height: 1.8rem;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
transition: filter 0.2s;
|
||||
width: 1.8rem;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,12 +1,14 @@
|
|||
import { clsx } from 'clsx'
|
||||
import { Show } from 'solid-js'
|
||||
import { For, Show } from 'solid-js'
|
||||
|
||||
import { useLocalize } from '../../../context/localize'
|
||||
import { useSession } from '../../../context/session'
|
||||
import styles from './Placeholder.module.scss'
|
||||
import {Icon} from "../../_shared/Icon";
|
||||
|
||||
export type PlaceholderProps = {
|
||||
type: string
|
||||
type: string,
|
||||
mode: 'feed' | 'profile'
|
||||
}
|
||||
|
||||
export const Placeholder = (props: PlaceholderProps) => {
|
||||
|
@ -35,16 +37,61 @@ export const Placeholder = (props: PlaceholderProps) => {
|
|||
buttonLabel: author() ? t('Current discussions') : t('Enter'),
|
||||
href: '/feed?by=last_comment',
|
||||
},
|
||||
author: {
|
||||
image: 'placeholder-join.webp',
|
||||
header: t('Join our team of authors'),
|
||||
text: t('Join our team of authors text'),
|
||||
buttonLabel: t('Create post'),
|
||||
href: '/create',
|
||||
profileLinks: [
|
||||
{
|
||||
href: '/how-to-write-a-good-article',
|
||||
label: t('How to write a good article')
|
||||
}
|
||||
]
|
||||
},
|
||||
authorComments: {
|
||||
image: 'placeholder-discussions.webp',
|
||||
header: t('Join discussions'),
|
||||
text: t('Placeholder feedDiscussions'),
|
||||
buttonLabel: t('Go to discussions'),
|
||||
href: '/feed?by=last_comment',
|
||||
profileLinks: [
|
||||
{
|
||||
href: '/about/discussion-rules',
|
||||
label: t('Discussion rules')
|
||||
},
|
||||
{
|
||||
href: '/about/discussion-rules#ban',
|
||||
label: t('Block rules')
|
||||
}
|
||||
]
|
||||
},
|
||||
}
|
||||
|
||||
return (
|
||||
<div class={clsx(styles.placeholder, styles[`placeholder-${props.type}`])}>
|
||||
<div class={clsx(styles.placeholder, styles[`placeholder--${props.type}`], styles[`placeholder--${props.mode}-mode`])}>
|
||||
<div class={styles.placeholderCover}>
|
||||
<img src={`/public/${data[props.type].image}`} />
|
||||
</div>
|
||||
<div class={styles.placeholderContent}>
|
||||
<div>
|
||||
<h3 innerHTML={data[props.type].header}/>
|
||||
<p innerHTML={data[props.type].text}/>
|
||||
</div>
|
||||
|
||||
<Show when={data[props.type].profileLinks}>
|
||||
<div class={styles.bottomLinks}>
|
||||
<For each={data[props.type].profileLinks}>
|
||||
{(link) => (
|
||||
<a href={link.href}>
|
||||
<Icon name="link-white" class={styles.icon}/>
|
||||
{link.label}
|
||||
</a>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
<Show
|
||||
when={author()}
|
||||
|
@ -54,7 +101,12 @@ export const Placeholder = (props: PlaceholderProps) => {
|
|||
</a>
|
||||
}
|
||||
>
|
||||
<a href={data[props.type].href}>{data[props.type].buttonLabel}</a>
|
||||
<a class={styles.button} href={data[props.type].href}>
|
||||
{data[props.type].buttonLabel}
|
||||
<Show when={props.mode === 'profile'}>
|
||||
<Icon name="arrow-right-2" class={styles.icon}/>
|
||||
</Show>
|
||||
</a>
|
||||
</Show>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -28,6 +28,7 @@ import { MODALS, hideModal } from '../../../stores/ui'
|
|||
import { byCreated } from '../../../utils/sortby'
|
||||
import stylesArticle from '../../Article/Article.module.scss'
|
||||
import styles from './Author.module.scss'
|
||||
import {Placeholder} from "../../Feed/Placeholder";
|
||||
|
||||
type Props = {
|
||||
authorSlug: string
|
||||
|
@ -259,6 +260,11 @@ export const AuthorView = (props: Props) => {
|
|||
</div>
|
||||
</Match>
|
||||
<Match when={getPage().route === 'authorComments'}>
|
||||
<div class="wide-container">
|
||||
<Placeholder type={getPage().route} mode="profile" />
|
||||
</div>
|
||||
|
||||
|
||||
<div class="wide-container">
|
||||
<div class="row">
|
||||
<div class="col-md-20 col-lg-18">
|
||||
|
@ -279,6 +285,13 @@ export const AuthorView = (props: Props) => {
|
|||
</div>
|
||||
</Match>
|
||||
<Match when={getPage().route === 'author'}>
|
||||
<Show when={session()?.user?.app_data?.profile?.slug === props.authorSlug && !sortedArticles().length}>
|
||||
<div class="wide-container">
|
||||
<Placeholder type={getPage().route} mode="profile" />
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
<Show when={sortedArticles().length > 0}>
|
||||
<Show when={sortedArticles().length === 1}>
|
||||
<Row1 article={sortedArticles()[0]} noauthor={true} nodate={true} />
|
||||
</Show>
|
||||
|
@ -320,6 +333,7 @@ export const AuthorView = (props: Props) => {
|
|||
</button>
|
||||
</p>
|
||||
</Show>
|
||||
</Show>
|
||||
</Match>
|
||||
</Switch>
|
||||
</div>
|
||||
|
|
|
@ -235,7 +235,8 @@ export const FeedView = (props: Props) => {
|
|||
</div>
|
||||
|
||||
<div class="col-md-12 offset-xl-1">
|
||||
<Show when={author() || !sortedArticles().length} fallback={<Placeholder type={page().route} />}>
|
||||
<Show when={author() || !sortedArticles().length}
|
||||
fallback={<Placeholder type={page().route} mode="feed" />}>
|
||||
<div class={styles.filtersContainer}>
|
||||
<ul class={clsx('view-switcher', styles.feedFilter)}>
|
||||
<li
|
||||
|
|
|
@ -40,7 +40,7 @@ export const DiscussionRulesPage = () => {
|
|||
людей рождается истина.
|
||||
</p>
|
||||
|
||||
<h3>За что можно получить дырку в карме и выиграть бан в сообществе</h3>
|
||||
<h3 id="ban">За что можно получить дырку в карме и выиграть бан в сообществе</h3>
|
||||
<ol>
|
||||
<li>
|
||||
<p>
|
||||
|
|
Loading…
Reference in New Issue
Block a user