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

Merge branch 'main' of https://github.com/Discours/discoursio-webapp into feature/sse-test

Browse Source
This commit is contained in:
Tony Rewin 2023-10-10 01:27:59 +03:00
commit 9cedb23ccf
14 changed files with 137 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/Article/Comment.module.scss
View File

@ -98,6 +98,10 @@
}
}
.commentControlDelete {
align-items: center;
}
.commentControl {
border: none;
color: #696969;
@ -106,7 +110,10 @@
line-height: 1.2;
margin-right: 0.8rem;
padding: 0.2em 0.3em;
transition: opacity 0.2s, color 0.3s, background-color 0.3s;
transition:
opacity 0.2s,
color 0.3s,
background-color 0.3s;
vertical-align: top;
&:hover {
@ -123,7 +130,9 @@
filter: invert(0);
margin-right: 0.3em;
opacity: 0.6;
transition: filter 0.3s, opacity 0.2s;
transition:
filter 0.3s,
opacity 0.2s;
img {
margin-bottom: -0.1em;

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

@ -1,15 +1,26 @@
.AuthorBadge {
align-items: flex-start;
display: flex;
flex-flow: row nowrap;
align-items: flex-start;
margin-bottom: 1rem;
margin-bottom: 2rem;
@include media-breakpoint-down(sm) {
flex-wrap: wrap;
margin-bottom: 3rem;
}
.info {
@include font-size(1.4rem);
display: flex;
flex-direction: column;
border: none;
display: flex;
flex: 0 calc(100% - 5.2rem);
flex-direction: column;
line-height: 1.3;
margin-bottom: 1rem;
@include media-breakpoint-up(sm) {
flex: 1 100%;
}
&:hover {
background: unset;
@ -26,7 +37,24 @@
}
.actions {
margin-left: auto;
padding-left: 1rem;
flex: 0 20%;
margin-left: 5.2rem;
@include media-breakpoint-up(sm) {
margin-left: 2rem;
}
@include media-breakpoint-up(md) {
flex: 1;
margin-left: auto;
padding-left: 1rem;
text-align: right;
}
}
.subscribeButton {
border-radius: 0.8rem !important;
margin-right: 0 !important;
width: 9em;
}
}

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

@ -44,7 +44,13 @@ export const AuthorBadge = (props: Props) => {
return (
<div class={clsx(styles.AuthorBadge)}>
<Userpic hasLink={true} isMedium={true} name={props.author.name} userpic={props.author.userpic} />
<Userpic
hasLink={true}
isMedium={true}
name={props.author.name}
userpic={props.author.userpic}
slug={props.author.slug}
/>
<a href={`/author/${props.author.slug}`} class={styles.info}>
<div class={styles.name}>{props.author.name}</div>
<Switch
@ -84,14 +90,16 @@ export const AuthorBadge = (props: Props) => {
size="S"
value={isSubscribing() ? t('...subscribing') : t('Subscribe')}
onClick={() => handleSubscribe(true)}
class={styles.subscribeButton}
/>
}
>
<Button
variant="secondary"
variant="bordered"
size="S"
value={t('You are subscribed')}
onClick={() => handleSubscribe(false)}
class={styles.subscribeButton}
/>
</Show>
</Show>

36
src/components/Author/AuthorCard/AuthorCard.module.scss
View File

@ -52,6 +52,10 @@
@include media-breakpoint-between(md, lg) {
flex-wrap: wrap;
.listWrapper & {
flex-wrap: nowrap;
}
}
&.authorDetailsShrinked {
@ -69,6 +73,10 @@
@include media-breakpoint-between(md, lg) {
flex: 1 0 100%;
.listWrapper & {
flex: 1;
}
}
@include media-breakpoint-up(md) {
@ -82,9 +90,9 @@
.authorName {
border: none !important;
display: block;
font-size: 1.6rem;
font-weight: 500;
line-height: 2;
margin-bottom: 0.8rem;
.listWrapper &:before {
@ -669,30 +677,4 @@
.listWrapper {
max-height: 70vh;
//padding-right: 2rem;
:global(.row) {
margin-right: 0;
}
}
.switcherCounter {
align-items: center;
background: #f7f7f8;
border-radius: 0.8rem;
display: inline-flex;
font-size: 1.2rem;
font-weight: bold;
height: 2.2rem;
justify-content: center;
line-height: 2.2rem;
margin-left: 0.4rem;
min-width: 2.2rem;
padding: 0 0.6rem;
text-align: center;
}
:global(.view-switcher__item--selected) .switcherCounter {
background: #000;
color: #fff;
}

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

@ -401,13 +401,13 @@ export const AuthorCard = (props: Props) => {
<button type="button" onClick={() => setSubscriptionFilter('all')}>
{t('All')}
</button>
<span class={styles.switcherCounter}>{props.following.length}</span>
<span class="view-switcher__counter">{props.following.length}</span>
</li>
<li class={clsx({ 'view-switcher__item--selected': subscriptionFilter() === 'users' })}>
<button type="button" onClick={() => setSubscriptionFilter('users')}>
{t('Users')}
</button>
<span class={styles.switcherCounter}>
<span class="view-switcher__counter">
{props.following.filter((s) => 'name' in s).length}
</span>
</li>
@ -415,7 +415,7 @@ export const AuthorCard = (props: Props) => {
<button type="button" onClick={() => setSubscriptionFilter('topics')}>
{t('Topics')}
</button>
<span class={styles.switcherCounter}>
<span class="view-switcher__counter">
{props.following.filter((s) => 'title' in s).length}
</span>
</li>

10
src/components/Feed/CardTopic.module.scss
View File

@ -17,16 +17,6 @@
color: #fff !important;
}
}
a:before {
content: '';
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 2;
}
}
.shoutTopicFloorImportant {

3
src/components/Nav/Modal/Modal.module.scss
View File

@ -55,6 +55,8 @@
}
&.narrow {
left: 50%;
transform: translateX(-50%);
width: 100%;
@include media-breakpoint-up(sm) {
@ -73,6 +75,7 @@
}
.modalInner {
height: 100%;
overflow: auto;
padding: 5.4rem 2.4rem 2.4rem;
position: relative;

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

@ -78,7 +78,7 @@ export const TopicCard = (props: TopicProps) => {
<div
classList={{
[clsx('col-sm-18 col-md-24 col-lg-14 col-xl-15', styles.topicDetails)]: props.isNarrow,
[clsx('col-12 col-xs-17 col-md-18', styles.topicDetails)]: props.compact,
[clsx('col-24 col-sm-17 col-md-18', styles.topicDetails)]: props.compact,
[clsx('col-sm-17 col-md-18', styles.topicDetails)]:
!props.subscribeButtonBottom && !props.isNarrow && !props.compact
}}
@ -122,7 +122,7 @@ export const TopicCard = (props: TopicProps) => {
class={styles.controlContainer}
classList={{
'col-sm-6 col-md-24 col-lg-10 col-xl-9': props.isNarrow,
'col-12 col-xs-7 col-md-6': props.compact,
'col-24 col-sm-7 col-md-6': props.compact,
'col-sm-7 col-md-6': !props.subscribeButtonBottom && !props.isNarrow && !props.compact
}}
>

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

@ -2,8 +2,12 @@
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 1rem;
margin-bottom: 1rem;
margin-bottom: 2rem;
@include media-breakpoint-down(sm) {
flex-wrap: wrap;
margin-bottom: 3rem;
}
.picture {
display: block;
@ -16,6 +20,7 @@
background-position: 50% 50%;
background-repeat: no-repeat;
border: none;
margin-right: 1.2rem;
&:hover {
background-color: var(--black-50);
@ -27,10 +32,16 @@
}
.info {
display: flex;
flex-direction: column;
border: none;
display: flex;
flex: 0 calc(100% - 5.2rem);
flex-direction: column;
@include font-size(1.4rem);
margin-bottom: 1rem;
@include media-breakpoint-up(sm) {
flex: 1 100%;
}
&:hover {
background: unset;
@ -48,7 +59,24 @@
}
.actions {
margin-left: auto;
padding-left: 1rem;
flex: 0 20%;
margin-left: 5.2rem;
@include media-breakpoint-up(sm) {
margin-left: 2rem;
}
@include media-breakpoint-up(md) {
flex: 1;
margin-left: auto;
padding-left: 1rem;
text-align: right;
}
}
.subscribeButton {
border-radius: 0.8rem !important;
margin-right: 0 !important;
width: 9em;
}
}

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

@ -83,14 +83,16 @@ export const TopicBadge = (props: Props) => {
size="S"
value={isSubscribing() ? t('...subscribing') : t('Subscribe')}
onClick={() => subscribe(true)}
class={styles.subscribeButton}
/>
}
>
<Button
onClick={() => subscribe(false)}
variant="secondary"
variant="bordered"
size="S"
value={t('You are subscribed')}
class={styles.subscribeButton}
/>
</Show>
</Show>

1
src/components/Views/Author/Author.module.scss
View File

@ -17,6 +17,7 @@
border-bottom: 2px solid #000;
margin-bottom: 2.4rem;
padding-bottom: 4rem;
padding-top: 2.6rem;
}
.ratingContainer {

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

@ -138,14 +138,14 @@ export const AuthorView = (props: Props) => {
<div class="col-md-16">
<ul class="view-switcher">
<li classList={{ 'view-switcher__item--selected': page().route === 'author' }}>
<a href={getPagePath(router, 'author', { slug: props.authorSlug })}>
{t('Publications')}&nbsp;({author().stat.shouts})
</a>
<a href={getPagePath(router, 'author', { slug: props.authorSlug })}>{t('Publications')}</a>
<span class="view-switcher__counter">{author().stat.shouts}</span>
</li>
<li classList={{ 'view-switcher__item--selected': page().route === 'authorComments' }}>
<a href={getPagePath(router, 'authorComments', { slug: props.authorSlug })}>
{t('Comments')}&nbsp;({author().stat.commented})
{t('Comments')}
</a>
<span class="view-switcher__counter">{author().stat.commented}</span>
</li>
<li classList={{ 'view-switcher__item--selected': page().route === 'authorAbout' }}>
<a

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

@ -118,6 +118,6 @@
height: 32px;
min-width: 53px;
font-size: 15px;
padding: 8px 16px;
padding: 1rem 1.2rem;
}
}

21
src/styles/app.scss
View File

@ -651,6 +651,27 @@ figure {
}
}
.view-switcher__counter {
align-items: center;
background: #f7f7f8;
border-radius: 0.8rem;
display: inline-flex;
font-size: 1.2rem;
font-weight: bold;
height: 2.2rem;
justify-content: center;
line-height: 2.2rem;
margin-left: 0.4rem;
min-width: 2.2rem;
padding: 0 0.6rem;
text-align: center;
.view-switcher__item--selected & {
background: #000;
color: #fff;
}
}
.view-switcher__search {
flex: 1 100%;
text-align: right;