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

Merge remote-tracking branch 'hub/dev' into feature/glitchtip

Browse Source
This commit is contained in:
Untone 2024-05-04 14:57:33 +03:00
commit b1cd3d917b
11 changed files with 165 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/locales/ru/translation.json
View File

@ -532,7 +532,7 @@
"resend confirmation link": "отправить ссылку ещё раз",
"shout": "пост",
"shout not found": "публикация не найдена",
"shoutsWithCount": "{count} {count, plural, one {пост} few {поста} other {постов}}",
"shoutsWithCount": "{count} {count, plural, one {публикация} few {публикации} other {публикаций}}",
"sign in": "войти",
"sign up or sign in": "зарегистрироваться или войти",
"sign up": "зарегистрироваться",

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

@ -60,11 +60,13 @@
.bio {
@include font-size(1.2rem);
color: var(--black-400);
display: flex;
flex-direction: row;
gap: 1rem;
color: var(--black-400);
font-weight: 500;
gap: 1rem;
max-width: 100%;
word-break: break-word;
}
.actions {

3
src/components/Author/AuthorBadge/AuthorBadge.tsx
View File

@ -27,6 +27,7 @@ type Props = {
inviteView?: boolean
onInvite?: (id: number) => void
selected?: boolean
subscriptionsMode?: boolean
}
export const AuthorBadge = (props: Props) => {
const { mediaMatches } = useMediaQuery()
@ -114,7 +115,7 @@ export const AuthorBadge = (props: Props) => {
<div class={clsx('text-truncate', styles.bio)} innerHTML={props.author.bio} />
</Match>
</Switch>
<Show when={props.author?.stat}>
<Show when={props.author?.stat && !props.subscriptionsMode}>
<div class={styles.bio}>
<Show when={props.author?.stat.shouts > 0}>
<div>{t('PublicationsWithCount', { count: props.author.stat?.shouts ?? 0 })}</div>

4
src/components/Author/AuthorCard/AuthorCard.tsx
View File

@ -312,9 +312,9 @@ export const AuthorCard = (props: Props) => {
<For each={authorSubs()}>
{(subscription) =>
isAuthor(subscription) ? (
<AuthorBadge author={subscription} />
<AuthorBadge author={subscription} subscriptionsMode={true} />
) : (
<TopicBadge topic={subscription} />
<TopicBadge topic={subscription} subscriptionsMode={true} />
)
}
</For>

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

@ -298,10 +298,6 @@
box-sizing: content-box;
display: inline-flex;
@include media-breakpoint-up(sm) {
padding-left: divide($container-padding-x, 2);
}
@include media-breakpoint-up(lg) {
display: none;
}
@ -425,7 +421,7 @@
width: 100%;
@include media-breakpoint-up(xl) {
right: 9rem;
right: 1.4rem;
}
.control {
@ -457,6 +453,14 @@
}
}
.articleControlsAuthorized {
right: 3.6rem;
@include media-breakpoint-up(xl) {
right: 9rem;
}
}
.userControl {
align-items: center;
display: flex;
@ -484,7 +488,8 @@
}
.editorControl {
border-radius: 1.2em;
border-radius: 2em;
font-size: 1.4rem !important;
&:hover {
background: var(--background-color-invert);
@ -518,6 +523,7 @@
height: 2.8rem;
justify-content: center;
margin: 0 0.4rem;
order: 2;
position: relative;
transition: margin-left 0.3s;
width: 2.8rem;
@ -528,7 +534,7 @@
width: 3.2rem;
}
@include media-breakpoint-down(sm) {
@include media-breakpoint-down(xl) {
margin-left: 0.4rem !important;
}
@ -579,6 +585,10 @@
.userControlItemSearch {
margin: 0 1rem 0 2.2rem;
@include media-breakpoint-down(xl) {
order: 1;
}
}
.userControlItemUserpic {
@ -591,13 +601,6 @@
}
}
.userControlItemInbox,
.userControlItemSearch {
@include media-breakpoint-down(sm) {
display: none;
}
}
.userControlItemVerbose {
align-items: stretch;
display: flex;
@ -677,7 +680,9 @@
}
&:hover {
@include media-breakpoint-up(xl) {
background-color: var(--link-hover-background);
}
&,
.textLabel {
@ -703,6 +708,18 @@
}
}
.userControlItemCreate {
.icon {
height: 2.8rem;
width: 2.8rem;
@include media-breakpoint-up(md) {
height: 3.2rem;
width: 3.2rem;
}
}
}
.subnavigation {
background: #000;
color: #fff;

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

@ -59,6 +59,7 @@ export const Header = (props: Props) => {
const [isTopicsVisible, setIsTopicsVisible] = createSignal(false)
const [isZineVisible, setIsZineVisible] = createSignal(false)
const [isFeedVisible, setIsFeedVisible] = createSignal(false)
const { isAuthenticated } = useSession()
const toggleFixed = () => setFixed(!fixed())
@ -330,7 +331,11 @@ export const Header = (props: Props) => {
</div>
<HeaderAuth setIsProfilePopupVisible={setIsProfilePopupVisible} />
<Show when={props.title}>
<div class={clsx(styles.articleControls, 'col-auto')}>
<div
class={clsx(styles.articleControls, 'col-auto', {
[styles.articleControlsAuthorized]: isAuthenticated(),
})}
>
<SharePopup
title={props.title}
imageUrl={props.cover}

41
src/components/Nav/HeaderAuth.tsx
View File

@ -110,11 +110,17 @@ export const HeaderAuth = (props: Props) => {
<div class={clsx('col-auto col-lg-7', styles.usernav)}>
<div class={styles.userControl}>
<Show when={isCreatePostButtonVisible() && author()?.id}>
<div class={clsx(styles.userControlItem, styles.userControlItemVerbose)}>
<div
class={clsx(
styles.userControlItem,
styles.userControlItemVerbose,
styles.userControlItemCreate,
)}
>
<a href={getPagePath(router, 'create')}>
<span class={styles.textLabel}>{t('Create post')}</span>
<Icon name="pencil" class={styles.icon} />
<Icon name="pencil" class={clsx(styles.icon, styles.iconHover)} />
<Icon name="pencil-outline" class={styles.icon} />
<Icon name="pencil-outline-hover" class={clsx(styles.icon, styles.iconHover)} />
</a>
</div>
</Show>
@ -217,12 +223,18 @@ export const HeaderAuth = (props: Props) => {
</div>
</Show>
<Show when={isCreatePostButtonVisible() && !author()?.id}>
<div class={clsx(styles.userControlItem, styles.userControlItemVerbose)}>
<Show when={isCreatePostButtonVisible() && ! !author()?.id}>
<div
class={clsx(
styles.userControlItem,
styles.userControlItemVerbose,
styles.userControlItemCreate,
)}
>
<a href={getPagePath(router, 'create')}>
<span class={styles.textLabel}>{t('Create post')}</span>
<Icon name="pencil" class={styles.icon} />
<Icon name="pencil" class={clsx(styles.icon, styles.iconHover)} />
<Icon name="pencil-outline" class={styles.icon} />
<Icon name="pencil-outline-hover" class={clsx(styles.icon, styles.iconHover)} />
</a>
</div>
</Show>
@ -235,15 +247,13 @@ export const HeaderAuth = (props: Props) => {
<a href="?m=auth&mode=login">
<span class={styles.textLabel}>{t('Enter')}</span>
<Icon name="key" class={styles.icon} />
{/*<Icon name="user-default" class={clsx(styles.icon, styles.iconHover)} />*/}
<Icon name="key" class={clsx(styles.icon, styles.iconHover)} />
</a>
</div>
</Show>
}
>
<Show
when={isSaveButtonVisible()}
fallback={
<Show when={!isSaveButtonVisible()}>
<div class={clsx(styles.userControlItem, styles.userControlItemInbox)}>
<a href={getPagePath(router, 'inbox')}>
<div classList={{ entered: page().path === '/inbox' }}>
@ -252,15 +262,6 @@ export const HeaderAuth = (props: Props) => {
</div>
</a>
</div>
}
>
<div class={clsx(styles.userControlItem, styles.userControlItemVerbose)}>
<button onClick={handleSaveClick}>
<span class={styles.textLabel}>{t('Save')}</span>
<Icon name="save" class={styles.icon} />
<Icon name="save" class={clsx(styles.icon, styles.iconHover)} />
</button>
</div>
</Show>
</Show>
</div>

61
src/components/Topic/TopicBadge/TopicBadge.module.scss
View File

@ -1,12 +1,11 @@
.TopicBadge {
margin-bottom: 2rem;
margin-bottom: 4.8rem;
gap: 1rem;
.content {
align-items: flex-start;
display: flex;
flex-direction: row;
margin-bottom: .8rem;
}
.basicInfo {
@ -46,18 +45,64 @@
.info {
@include font-size(1.4rem);
border: none;
display: flex;
flex-direction: column;
//display: flex;
//flex-direction: column;
&:hover {
background: unset;
color: inherit;
.title {
background: var(--background-color-invert);
color: var(--default-color-invert);
}
}
.title {
@include font-size(2.2rem);
font-weight: bold;
}
.description {
@include font-size(1.6rem);
line-height: 1.4;
margin: 0.8rem 0;
-webkit-line-clamp: 2;
}
}
.actions {
display: flex;
flex-direction: row;
gap: 1rem;
margin-bottom: -1rem;
}
.subscribeButton {
border-radius: 0.8rem !important;
margin-right: 0 !important;
width: 9em;
}
}
.TopicBadgeSubscriptionsMode {
margin-bottom: 2rem;
.content {
margin-bottom: 0.8rem;
}
.info {
&:hover {
.title {
background-color: var(--blue-500);
color: var(--white-500);
}
}
.title {
@include font-size(1.4rem);
font-weight: 500;
line-height: 1em;
color: var(--blue-500);
@ -66,7 +111,9 @@
.description {
color: var(--black-400);
@include font-size(1.2rem);
font-weight: 500;
margin: 0;
}
}
@ -88,7 +135,6 @@
color: var(--secondary-color);
display: flex;
margin: 0 0 1em;
@include media-breakpoint-down(md) {
flex-wrap: wrap;
@ -101,6 +147,7 @@
.statsItem {
@include font-size(1.4rem);
font-weight: 500;
margin-right: 1.6rem;
white-space: nowrap;

14
src/components/Topic/TopicBadge/TopicBadge.tsx
View File

@ -15,6 +15,7 @@ type Props = {
topic: Topic
minimizeSubscribeButton?: boolean
showStat?: boolean
subscriptionsMode?: boolean
}
export const TopicBadge = (props: Props) => {
@ -47,9 +48,10 @@ export const TopicBadge = (props: Props) => {
lang() === 'en' ? capitalize(props.topic.slug.replaceAll('-', ' ')) : props.topic.title
return (
<div class={styles.TopicBadge}>
<div class={clsx(styles.TopicBadge, { [styles.TopicBadgeSubscriptionsMode]: props.subscriptionsMode })}>
<div class={styles.content}>
<div class={styles.basicInfo}>
<Show when={props.subscriptionsMode}>
<a
href={`/topic/${props.topic.slug}`}
class={clsx(styles.picture, {
@ -62,8 +64,11 @@ export const TopicBadge = (props: Props) => {
}
}
/>
</Show>
<a href={`/topic/${props.topic.slug}`} class={styles.info}>
<span class={styles.title}>{title()}</span>
<Show
when={props.topic.body}
fallback={
@ -86,9 +91,13 @@ export const TopicBadge = (props: Props) => {
/>
</div>
</div>
<Show when={!props.subscriptionsMode}>
<div class={styles.stats}>
<span class={styles.statsItem}>{t('shoutsWithCount', { count: props.topic?.stat?.shouts })}</span>
<span class={styles.statsItem}>{t('authorsWithCount', { count: props.topic?.stat?.authors })}</span>
<span class={styles.statsItem}>
{t('authorsWithCount', { count: props.topic?.stat?.authors })}
</span>
<span class={styles.statsItem}>
{t('FollowersWithCount', { count: props.topic?.stat?.followers })}
</span>
@ -98,6 +107,7 @@ export const TopicBadge = (props: Props) => {
</span>
</Show>
</div>
</Show>
</div>
)
}

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

@ -80,7 +80,7 @@ export const AllTopics = (props: Props) => {
const AllTopicsHead = () => (
<div class="row">
<div class="col-lg-20 col-xl-18">
<div class="col-lg-18 col-xl-15">
<h1>{t('Topics')}</h1>
<p>{t('Subscribe what you like to tune your personal feed')}</p>
@ -129,7 +129,7 @@ export const AllTopics = (props: Props) => {
<Show when={filteredResults().length > 0}>
<Show when={searchParams().by === 'title'}>
<div class="col-lg-20 col-xl-18">
<div class="col-lg-18 col-xl-15">
<ul class={clsx('nodash', styles.alphabet)}>
<For each={ALPHABET}>
{(letter, index) => (
@ -180,7 +180,7 @@ export const AllTopics = (props: Props) => {
<Show when={searchParams().by && searchParams().by !== 'title'}>
<div class="row">
<div class="col-lg-20 col-xl-18 py-4">
<div class="col-lg-18 col-xl-15 py-4">
<For each={filteredResults().slice(0, limit())}>
{(topic) => (
<>

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

@ -141,7 +141,7 @@
float: none;
padding-bottom: 0.6rem;
padding-top: 0.6rem;
width: 10em;
width: 9em;
.icon {
img {