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

On the article page make article footer same as on the feed page

Browse Source
This commit is contained in:
kvakazyambra 2023-11-06 22:15:13 +03:00
parent 38ab3ddc4b
commit 2a29e69d21
9 changed files with 136 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -299,8 +299,9 @@ img {
display: flex;
justify-content: flex-start;
padding: 3rem 0 0;
position: relative;
@include media-breakpoint-down(sm) {
@include media-breakpoint-down(lg) {
flex-wrap: wrap;
}
}
@ -311,11 +312,11 @@ img {
align-items: center;
font-weight: 500;
display: flex;
margin: 0 6% 1em 0;
margin: 0 2rem 1em 0;
vertical-align: baseline;
cursor: pointer;
@include media-breakpoint-up(sm) {
@include media-breakpoint-up(xl) {
margin-right: 3.2rem;
}
@ -359,6 +360,14 @@ img {
}
}
.shoutStatsItemBookmarks {
margin-left: auto;
@include media-breakpoint-up(lg) {
margin-left: 0;
}
}
.shoutStatsItemInner {
cursor: pointer;
@ -382,32 +391,41 @@ img {
.shoutStatsItemAdditionalData {
color: rgb(0 0 0 / 40%);
cursor: default;
font-weight: normal;
justify-self: flex-end;
margin-right: 0;
margin-left: auto;
white-space: nowrap;
cursor: default;
.icon {
opacity: 0.4;
height: 2rem;
}
@include media-breakpoint-down(sm) {
flex: 1 40%;
@include media-breakpoint-down(lg) {
flex: 1 100%;
order: 9;
.shoutStatsItemAdditionalDataItem {
margin-left: 0;
}
}
}
.shoutStatsItemViews {
color: rgb(0 0 0 / 0.4);
cursor: default;
font-weight: normal;
margin-left: auto;
white-space: nowrap;
@include media-breakpoint-down(sm) {
color: rgb(0 0 0 / 40%);
@include media-breakpoint-down(lg) {
bottom: 0;
flex: 1 40%;
justify-content: end;
margin-right: 0;
order: 10;
position: absolute;
right: 0;
.icon {
display: none !important;
@ -416,15 +434,20 @@ img {
}
.shoutStatsItemLabel {
font-weight: normal;
margin-left: 0.3em;
}
.commentsTextLabel {
display: none;
@include media-breakpoint-up(sm) {
display: none;
display: block;
}
}
.shoutStatsItemCount {
@include media-breakpoint-down(sm) {
@include media-breakpoint-down(lg) {
display: none;
}
}
@ -432,7 +455,7 @@ img {
.shoutStatsItemAdditionalDataItem {
font-weight: normal;
display: inline-block;
margin-left: 2rem;
//margin-left: 2rem;
margin-right: 0;
margin-bottom: 0;
cursor: default;
@ -486,8 +509,10 @@ img {
}
.commentsHeaderWrapper {
@include media-breakpoint-up(sm) {
display: flex;
justify-content: space-between;
}
}
.commentsHeader {
@ -623,3 +648,19 @@ a[data-toggle='tooltip'] {
font-weight: 700;
}
}
.articlePopupOpener {
.iconHover {
display: none;
}
&:hover {
.icon {
display: none;
}
.iconHover {
display: inline-block;
}
}
}

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

@ -4,16 +4,17 @@
transition: background-color 0.3s;
position: relative;
list-style: none;
background: rgb(0 0 0 / 0.1);
@include media-breakpoint-down(sm) {
padding-right: 0;
}
&.isNew {
border-radius: 6px;
background: rgb(38 56 217 / 5%);
}
@include media-breakpoint-down(sm) {
margin-right: -1.2rem;
}
.comment {
margin-right: -1rem;
@ -66,6 +67,8 @@
}
.commentContent {
padding: 0 1rem 1rem 0;
&:hover {
.commentControlReply,
.commentControlShare,
@ -76,6 +79,10 @@
opacity: 1;
}
}
p:last-child {
margin-bottom: 0;
}
}
.commentControlReply,

76
src/components/Article/FullArticle.tsx
View File

@ -12,7 +12,7 @@ import { DEFAULT_HEADER_OFFSET, router, useRouter } from '../../stores/router'
import { getDescription } from '../../utils/meta'
import { TableOfContents } from '../TableOfContents'
import { AudioPlayer } from './AudioPlayer'
import { SharePopup } from './SharePopup'
import { getShareUrl, SharePopup } from './SharePopup'
import { ShoutRatingControl } from './ShoutRatingControl'
import { CommentsTree } from './CommentsTree'
import stylesHeader from '../Nav/Header/Header.module.scss'
@ -26,6 +26,7 @@ import { CardTopic } from '../Feed/CardTopic'
import { createPopper } from '@popperjs/core'
import { AuthorBadge } from '../Author/AuthorBadge'
import { getImageUrl } from '../../utils/getImageUrl'
import { FeedArticlePopup } from '../Feed/FeedArticlePopup'
type Props = {
article: Shout
@ -229,6 +230,8 @@ export const FullArticle = (props: Props) => {
})
})
const [isActionPopupActive, setIsActionPopupActive] = createSignal(false)
return (
<>
<Title>{props.article.title}</Title>
@ -348,25 +351,43 @@ export const FullArticle = (props: Props) => {
<Popover content={t('Comment')}>
{(triggerRef: (el) => void) => (
<div class={styles.shoutStatsItem} ref={triggerRef} onClick={scrollToComments}>
<div class={clsx(styles.shoutStatsItem)} ref={triggerRef} onClick={scrollToComments}>
<Icon name="comment" class={styles.icon} />
<Icon name="comment-hover" class={clsx(styles.icon, styles.iconHover)} />
{props.article.stat?.commented ?? ''}
<span class={styles.commentsTextLabel}>
{props.article.stat?.commented || t('Add' + ' comment')}
</span>
</div>
)}
</Popover>
<Show when={props.article.stat?.viewed}>
<div class={clsx(styles.shoutStatsItem, styles.shoutStatsItemViews)}>
<Icon name="eye" class={styles.icon} />
<Icon name="eye" class={clsx(styles.icon, styles.iconHover)} />
<span class={styles.shoutStatsItemCount}>{props.article.stat?.viewed}</span>
<span class={styles.shoutStatsItemLabel}>
{t('viewsWithCount', { count: props.article.stat?.viewed })}
</span>
</div>
</Show>
<div class={clsx(styles.shoutStatsItem, styles.shoutStatsItemAdditionalData)}>
<div class={clsx(styles.shoutStatsItem, styles.shoutStatsItemAdditionalDataItem)}>
{formattedDate()}
</div>
</div>
<Popover content={t('Add to bookmarks')}>
{(triggerRef: (el) => void) => (
<div
class={clsx(styles.shoutStatsItem, styles.shoutStatsItemBookmarks)}
ref={triggerRef}
onClick={handleBookmarkButtonClick}
>
<div class={styles.shoutStatsItemInner}>
<Icon name="bookmark" class={styles.icon} />
<Icon name="bookmark-hover" class={clsx(styles.icon, styles.iconHover)} />
</div>
</div>
)}
</Popover>
<Popover content={t('Share')}>
{(triggerRef: (el) => void) => (
<div class={styles.shoutStatsItem} ref={triggerRef}>
@ -385,16 +406,7 @@ export const FullArticle = (props: Props) => {
</div>
)}
</Popover>
<Popover content={t('Add to bookmarks')}>
{(triggerRef: (el) => void) => (
<div class={styles.shoutStatsItem} ref={triggerRef} onClick={handleBookmarkButtonClick}>
<div class={styles.shoutStatsItemInner}>
<Icon name="bookmark" class={styles.icon} />
<Icon name="bookmark-hover" class={clsx(styles.icon, styles.iconHover)} />
</div>
</div>
)}
</Popover>
<Show when={canEdit()}>
<Popover content={t('Edit')}>
{(triggerRef: (el) => void) => (
@ -410,20 +422,34 @@ export const FullArticle = (props: Props) => {
)}
</Popover>
</Show>
<div class={clsx(styles.shoutStatsItem, styles.shoutStatsItemAdditionalData)}>
<div class={clsx(styles.shoutStatsItem, styles.shoutStatsItemAdditionalDataItem)}>
{formattedDate()}
<FeedArticlePopup
isOwner={canEdit()}
containerCssClass={clsx(stylesHeader.control, styles.articlePopupOpener)}
title={props.article.title}
description={getDescription(props.article.body)}
imageUrl={props.article.cover}
shareUrl={getShareUrl({ pathname: `/${props.article.slug}` })}
isVisible={(value) => setIsActionPopupActive(value)}
trigger={
<button>
<Icon name="ellipsis" class={clsx(styles.icon)} />
<Icon name="ellipsis" class={clsx(styles.icon, styles.iconHover)} />
</button>
}
/>
</div>
</div>
</div>
<div class={styles.help}>
<Show when={isAuthenticated() && !canEdit()}>
<div class={styles.help}>
<button class="button">{t('Cooperate')}</button>
</div>
</Show>
<Show when={canEdit()}>
<div class={styles.help}>
<button class="button button--light">{t('Invite to collab')}</button>
</Show>
</div>
</Show>
<Show when={props.article.topics.length}>
<div class={styles.topicsList}>

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

@ -42,7 +42,6 @@
display: flex;
flex-direction: column;
line-height: 1.3;
margin-bottom: 1rem;
@include media-breakpoint-up(sm) {
flex: 1 100%;

6
src/components/Feed/ArticleCard/ArticleCard.module.scss
View File

@ -579,6 +579,12 @@
}
}
.shoutCardDetailsItemLabel {
@include media-breakpoint-down(sm) {
display: none;
}
}
.shoutCardComments,
.shoutCardDetailsViewed {
align-items: center;

2
src/components/Feed/ArticleCard/ArticleCard.tsx
View File

@ -230,7 +230,7 @@ export const ArticleCard = (props: ArticleCardProps) => {
name="comment-hover"
class={clsx(styles.icon, styles.iconHover, styles.feedControlIcon)}
/>
<span class={styles.shoutCardLinkContainer}>
<span class={clsx(styles.shoutCardLinkContainer, styles.shoutCardDetailsItemLabel)}>
{props.article.stat?.commented || t('Add comment')}
</span>
</a>

5
src/components/Feed/FeedArticlePopup.module.scss
View File

@ -3,8 +3,9 @@
border: 1px solid rgb(0 0 0 / 15%);
border-radius: 1.6rem;
padding: 1.6rem !important;
text-align: left;
@include media-breakpoint-between(sm, md) {
@include media-breakpoint-down(md) {
left: auto !important;
right: 0;
transform: none !important;
@ -13,6 +14,8 @@
button {
font-size: inherit;
font-weight: 500;
text-align: left;
white-space: nowrap;
&:hover {
background: #000;

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

@ -575,7 +575,7 @@
}
.userControlItemVerbose {
margin-left: 1.2em !important;
margin-left: 0.9em !important;
&:first-child {
margin-left: 0 !important;

2
src/context/localize.tsx
View File

@ -73,7 +73,7 @@ export const LocalizeProvider = (props: { children: JSX.Element }) => {
let result = date.toLocaleDateString(lang(), opts)
if (lang() === 'ru') {
result = result.replace(' г.', '')
result = result.replace(' г.', '').replace('г.', '')
}
return result