From c4ecec9c063cfd191f08f4287c427816c66a2767 Mon Sep 17 00:00:00 2001
From: kvakazyambra <kvakazyambra@gmail.com>
Date: Wed, 23 Nov 2022 22:14:59 +0300
Subject: [PATCH] Create rating control. Refactoring style.

---
 src/components/Article/FullArticle.tsx        |  84 ++++---
 .../Article/RatingControl.module.scss         |  29 +++
 src/components/Article/RatingControl.tsx      |  19 ++
 src/components/Author/Card.tsx                |  16 +-
 src/components/Feed/Card.module.scss          |  30 ---
 src/components/Feed/Card.tsx                  |   7 +-
 src/components/Views/Article.tsx              |  22 +-
 src/styles/Article.module.scss                | 212 ++++++++++++++++++
 src/styles/Article.scss                       | 204 -----------------
 9 files changed, 337 insertions(+), 286 deletions(-)
 create mode 100644 src/components/Article/RatingControl.module.scss
 create mode 100644 src/components/Article/RatingControl.tsx
 create mode 100644 src/styles/Article.module.scss
 delete mode 100644 src/styles/Article.scss

diff --git a/src/components/Article/FullArticle.tsx b/src/components/Article/FullArticle.tsx
index 6046c682..ecc3c51b 100644
--- a/src/components/Article/FullArticle.tsx
+++ b/src/components/Article/FullArticle.tsx
@@ -3,13 +3,17 @@ import './Full.scss'
 import { Icon } from '../_shared/Icon'
 import ArticleComment from './Comment'
 import { AuthorCard } from '../Author/Card'
-import { createMemo, For, onMount, Show } from 'solid-js'
+import { createMemo, createSignal, For, onMount, Show } from 'solid-js'
 import type { Author, Reaction, Shout } from '../../graphql/types.gen'
 import { t } from '../../utils/intl'
 import { showModal } from '../../stores/ui'
 import MD from './MD'
 import { SharePopup } from './SharePopup'
 import { useSession } from '../../context/session'
+import stylesHeader from '../Nav/Header.module.scss'
+import styles from '../../styles/Article.module.scss'
+import RatingControl from './RatingControl'
+import { clsx } from 'clsx'
 
 const MAX_COMMENT_LEVEL = 6
 
@@ -39,6 +43,7 @@ const formatDate = (date: Date) => {
 export const FullArticle = (props: ArticleProps) => {
   const { session } = useSession()
   const formattedDate = createMemo(() => formatDate(new Date(props.article.createdAt)))
+  const [isSharePopupVisible, setIsSharePopupVisible] = createSignal(false)
 
   const mainTopic = () =>
     (props.article.topics?.find((topic) => topic?.slug === props.article.mainTopic)?.title || '').replace(
@@ -64,8 +69,8 @@ export const FullArticle = (props: ArticleProps) => {
   return (
     <div class="shout wide-container">
       <article class="col-md-6 shift-content">
-        <div class="shout__header">
-          <div class="shout__topic">
+        <div class={styles.shoutHeader}>
+          <div class={styles.shoutTopic}>
             <a href={`/topic/${props.article.mainTopic}`} innerHTML={mainTopic() || ''} />
           </div>
 
@@ -74,7 +79,7 @@ export const FullArticle = (props: ArticleProps) => {
             <h4>{capitalize(props.article.subtitle, false)}</h4>
           </Show>
 
-          <div class="shout__author">
+          <div class={styles.shoutAuthor}>
             <For each={props.article.authors}>
               {(a: Author, index) => (
                 <>
@@ -84,11 +89,11 @@ export const FullArticle = (props: ArticleProps) => {
               )}
             </For>
           </div>
-          <div class="shout__cover" style={{ 'background-image': `url('${props.article.cover}')` }} />
+          <div class={styles.shoutCover} style={{ 'background-image': `url('${props.article.cover}')` }} />
         </div>
 
         <Show when={Boolean(props.article.body)}>
-          <div class="shout__body">
+          <div class={styles.shoutBody}>
             <Show
               when={!props.article.body.startsWith('<')}
               fallback={<div innerHTML={props.article.body} />}
@@ -100,63 +105,82 @@ export const FullArticle = (props: ArticleProps) => {
       </article>
 
       <div class="col-md-8 shift-content">
-        <div class="shout-stats">
-          <div class="shout-stats__item shout-stats__item--likes">
-            <Icon name="like" />
+        <div class={styles.shoutStats}>
+          <div class={styles.shoutStatsItem}>
+            <RatingControl rating={props.article.stat?.rating} />
+          </div>
+
+          <div class={clsx(styles.shoutStatsItem, styles.shoutStatsItemLikes)}>
+            <Icon name="like" class={styles.icon} />
             {props.article.stat?.rating || ''}
           </div>
 
-          <div class="shout-stats__item">
-            <Icon name="comment" />
+          <div class={styles.shoutStatsItem}>
+            <Icon name="comment" class={styles.icon} />
             {props.article.stat?.commented || ''}
           </div>
-          <div class="shout-stats__item">
-            <Icon name="view" />
-            {props.article.stat?.viewed}
-          </div>
           {/*FIXME*/}
-          {/*<div class="shout-stats__item">*/}
+          {/*<div class={styles.shoutStatsItem}>*/}
           {/*  <a href="#bookmark" onClick={() => console.log(props.article.slug, 'articles')}>*/}
           {/*    <Icon name={'bookmark' + (bookmarked() ? '' : '-x')} />*/}
           {/*  </a>*/}
           {/*</div>*/}
-          <div class="shout-stats__item">
+          <div class={styles.shoutStatsItem}>
             <SharePopup
-              trigger={
-                <a href="#" onClick={(event) => event.preventDefault()}>
-                  <Icon name="share" />
-                </a>
-              }
+              onVisibilityChange={(isVisible) => {
+                setIsSharePopupVisible(isVisible)
+              }}
+              containerCssClass={stylesHeader.control}
+              trigger={<Icon name="share" class={styles.icon} />}
             />
           </div>
+          <div class={styles.shoutStatsItem}>
+            <Icon name="bookmark" class={styles.icon} />
+          </div>
+
           {/*FIXME*/}
           {/*<Show when={canEdit()}>*/}
-          {/*  <div class="shout-stats__item">*/}
+          {/*  <div class={styles.shoutStatsItem}>*/}
           {/*    <a href="/edit">*/}
           {/*      <Icon name="edit" />*/}
           {/*      {t('Edit')}*/}
           {/*    </a>*/}
           {/*  </div>*/}
           {/*</Show>*/}
-          <div class="shout-stats__item shout-stats__item--date">{formattedDate}</div>
+          <div class={clsx(styles.shoutStatsItem, styles.shoutStatsItemAdditionalData)}>
+            <div class={clsx(styles.shoutStatsItem, styles.shoutStatsItemAdditionalDataItem)}>
+              {formattedDate}
+            </div>
+
+            <Show when={props.article.stat?.viewed}>
+              <div class={clsx(styles.shoutStatsItem, styles.shoutStatsItemAdditionalDataItem)}>
+                <Icon name="view" class={styles.icon} />
+                {props.article.stat?.viewed}
+              </div>
+            </Show>
+          </div>
         </div>
 
-        <div class="topics-list">
+        <div class={styles.topicsList}>
           <For each={props.article.topics}>
             {(topic) => (
-              <div class="shout__topic">
+              <div class={styles.shoutTopic}>
                 <a href={`/topic/${topic.slug}`}>{topic.title}</a>
               </div>
             )}
           </For>
         </div>
 
-        <div class="shout__authors-list">
+        <div class={styles.shoutAuthorsList}>
           <Show when={props.article?.authors?.length > 1}>
             <h4>{t('Authors')}</h4>
           </Show>
           <For each={props.article?.authors}>
-            {(a: Author) => <AuthorCard author={a} compact={false} hasLink={true} />}
+            {(a: Author) => (
+              <div class="col-md-6">
+                <AuthorCard author={a} compact={false} hasLink={true} liteButtons={true} />
+              </div>
+            )}
           </For>
         </div>
 
@@ -176,7 +200,7 @@ export const FullArticle = (props: ArticleProps) => {
           </For>
         </Show>
         <Show when={!session()?.user?.slug}>
-          <div class="comment-warning" id="comments">
+          <div class={styles.commentWarning} id="comments">
             {t('To leave a comment you please')}
             <a
               href={''}
@@ -190,7 +214,7 @@ export const FullArticle = (props: ArticleProps) => {
           </div>
         </Show>
         <Show when={session()?.user?.slug}>
-          <textarea class="write-comment" rows="1" placeholder={t('Write comment')} />
+          <textarea class={styles.writeComment} rows="1" placeholder={t('Write comment')} />
         </Show>
       </div>
     </div>
diff --git a/src/components/Article/RatingControl.module.scss b/src/components/Article/RatingControl.module.scss
new file mode 100644
index 00000000..68001845
--- /dev/null
+++ b/src/components/Article/RatingControl.module.scss
@@ -0,0 +1,29 @@
+.rating {
+  align-items: center;
+  display: flex;
+}
+
+.ratingValue {
+  font-weight: bold;
+  margin: 0 0.5em;
+}
+
+.ratingControl {
+  align-items: center;
+  border: 2px solid;
+  border-radius: 100%;
+  display: flex;
+  justify-content: center;
+  height: 0.9em;
+  line-height: 0;
+  @include font-size(3.6rem);
+
+  padding: 0;
+  width: 0.9em;
+
+  &:hover {
+    background: #000;
+    border-color: #000;
+    color: #fff;
+  }
+}
diff --git a/src/components/Article/RatingControl.tsx b/src/components/Article/RatingControl.tsx
new file mode 100644
index 00000000..c5ad8a64
--- /dev/null
+++ b/src/components/Article/RatingControl.tsx
@@ -0,0 +1,19 @@
+import styles from './RatingControl.module.scss'
+import { clsx } from 'clsx'
+
+interface RatingControlProps {
+  rating?: number
+  class?: string
+}
+
+export const RatingControl = (props: RatingControlProps) => {
+  return (
+    <div class={clsx(props.class, styles.rating)}>
+      <button class={styles.ratingControl}>&minus;</button>
+      <span class={styles.ratingValue}>{props?.rating || ''}</span>
+      <button class={styles.ratingControl}>+</button>
+    </div>
+  )
+}
+
+export default RatingControl
diff --git a/src/components/Author/Card.tsx b/src/components/Author/Card.tsx
index 0f75c65d..656eed3a 100644
--- a/src/components/Author/Card.tsx
+++ b/src/components/Author/Card.tsx
@@ -9,7 +9,6 @@ import { locale } from '../../stores/ui'
 import { follow, unfollow } from '../../stores/zine/common'
 import { clsx } from 'clsx'
 import { useSession } from '../../context/session'
-import { StatMetrics } from '../_shared/StatMetrics'
 
 interface AuthorCardProps {
   caption?: string
@@ -23,6 +22,7 @@ interface AuthorCardProps {
   noSocialButtons?: boolean
   isAuthorsList?: boolean
   truncateBio?: boolean
+  liteButtons?: boolean
 }
 
 export const AuthorCard = (props: AuthorCardProps) => {
@@ -117,9 +117,17 @@ export const AuthorCard = (props: AuthorCardProps) => {
             </Show>
 
             <Show when={!props.compact && !props.isAuthorsList}>
-              <button class={clsx(styles.buttonWrite, styles.button, 'button button--subscribe-topic')}>
-                <Icon name="edit" class={styles.icon} />
-                {t('Write')}
+              <button
+                class={styles.button}
+                classList={{
+                  [styles.buttonSubscribe]: props.liteButtons && !props.isAuthorsList,
+                  'button--subscribe': props.liteButtons && !props.isAuthorsList,
+                  'button--subscribe-topic': props.liteButtons && props.isAuthorsList,
+                  [styles.buttonWrite]: props.liteButtons && props.isAuthorsList
+                }}
+              >
+                <Icon name="comment" class={styles.icon} />
+                <Show when={!props.liteButtons}>{t('Write')}</Show>
               </button>
 
               <Show when={!props.noSocialButtons}>
diff --git a/src/components/Feed/Card.module.scss b/src/components/Feed/Card.module.scss
index a61aa9d3..84e2de74 100644
--- a/src/components/Feed/Card.module.scss
+++ b/src/components/Feed/Card.module.scss
@@ -460,36 +460,6 @@
   }
 }
 
-.rating {
-  align-items: center;
-  display: flex;
-}
-
-.ratingValue {
-  font-weight: bold;
-  margin: 0 0.5em;
-}
-
-.ratingControl {
-  align-items: center;
-  border: 2px solid;
-  border-radius: 100%;
-  display: flex;
-  justify-content: center;
-  height: 0.9em;
-  line-height: 0;
-  @include font-size(3.6rem);
-
-  padding: 0;
-  width: 0.9em;
-
-  &:hover {
-    background: #000;
-    border-color: #000;
-    color: #fff;
-  }
-}
-
 .shoutCardVertical {
   aspect-ratio: auto;
   height: 100%;
diff --git a/src/components/Feed/Card.tsx b/src/components/Feed/Card.tsx
index 21b2c31e..dd2f099e 100644
--- a/src/components/Feed/Card.tsx
+++ b/src/components/Feed/Card.tsx
@@ -8,6 +8,7 @@ import styles from './Card.module.scss'
 import { locale } from '../../stores/ui'
 import { clsx } from 'clsx'
 import CardTopic from './CardTopic'
+import RatingControl from '../Article/RatingControl'
 
 interface ArticleCardProps {
   settings?: {
@@ -158,11 +159,7 @@ export const ArticleCard = (props: ArticleCardProps) => {
         <Show when={props.settings?.isFeedMode}>
           <section class={styles.shoutCardDetails}>
             <div class={styles.shoutCardDetailsContent}>
-              <div class={clsx(styles.shoutCardDetailsItem, styles.rating)}>
-                <button class={styles.ratingControl}>&minus;</button>
-                <span class={styles.ratingValue}>{stat?.rating || ''}</span>
-                <button class={styles.ratingControl}>+</button>
-              </div>
+              <RatingControl rating={stat?.rating} class={styles.shoutCardDetailsItem} />
               <div
                 class={clsx(
                   styles.shoutCardDetailsItem,
diff --git a/src/components/Views/Article.tsx b/src/components/Views/Article.tsx
index 84c24f41..fe2db36c 100644
--- a/src/components/Views/Article.tsx
+++ b/src/components/Views/Article.tsx
@@ -4,8 +4,6 @@ import { t } from '../../utils/intl'
 import type { Shout, Reaction } from '../../graphql/types.gen'
 import { useReactionsStore } from '../../stores/zine/reactions'
 
-import '../../styles/Article.scss'
-
 interface ArticlePageProps {
   article: Shout
   reactions?: Reaction[]
@@ -32,16 +30,14 @@ export const ArticleView = (props: ArticlePageProps) => {
   })
 
   return (
-    <div class="article-page">
-      <Show fallback={<div class="center">{t('Loading')}</div>} when={props.article}>
-        <Suspense>
-          <FullArticle
-            article={props.article}
-            reactions={reactionsByShout()[props.article.slug]}
-            isCommentsLoading={getIsCommentsLoading()}
-          />
-        </Suspense>
-      </Show>
-    </div>
+    <Show fallback={<div class="center">{t('Loading')}</div>} when={props.article}>
+      <Suspense>
+        <FullArticle
+          article={props.article}
+          reactions={reactionsByShout()[props.article.slug]}
+          isCommentsLoading={getIsCommentsLoading()}
+        />
+      </Suspense>
+    </Show>
   )
 }
diff --git a/src/styles/Article.module.scss b/src/styles/Article.module.scss
new file mode 100644
index 00000000..683c38ea
--- /dev/null
+++ b/src/styles/Article.module.scss
@@ -0,0 +1,212 @@
+h1 {
+  @include font-size(4rem);
+
+  line-height: 1.1;
+  margin-top: 0.5em;
+}
+
+h2 {
+  line-height: 1.1;
+}
+
+img {
+  max-width: 100%;
+}
+
+.shoutHeader {
+  margin-bottom: 2em;
+
+  @include media-breakpoint-up(md) {
+    margin: 0 0 2em;
+  }
+}
+
+.shoutCover {
+  background-size: cover;
+  height: 0;
+  padding-bottom: 56.2%;
+}
+
+.shoutBody {
+  font-size: 1.7rem;
+  line-height: 1.6;
+
+  img {
+    display: block;
+    margin-bottom: 0.5em;
+  }
+
+  blockquote {
+    border-left: 4px solid;
+    font-size: 2rem;
+    font-weight: 500;
+    font-style: italic;
+    line-height: 1.4;
+    margin: 1.5em 0;
+    padding: 0 0 0 1em;
+
+    @include media-breakpoint-up(md) {
+      margin-left: -16.6666%;
+    }
+  }
+
+  mark {
+    background: none;
+    font-size: 2rem;
+    font-weight: bold;
+    line-height: 1.4;
+  }
+}
+
+.shoutAuthor,
+.shoutDate {
+  @include font-size(1.5rem);
+}
+
+.shoutAuthor {
+  margin-bottom: 1.5em;
+
+  a {
+    border: none;
+    color: rgb(0 0 0 / 60%);
+
+    &:hover {
+      color: #fff;
+    }
+  }
+}
+
+.shoutAuthorsList {
+  margin-top: 2em;
+
+  h4 {
+    color: #696969;
+    font-size: 1.5rem;
+    font-weight: normal;
+  }
+}
+
+.writeComment {
+  border: 2px solid #f6f6f6;
+  @include font-size(1.7rem);
+
+  outline: none;
+  padding: 0.2em 0.4em;
+  width: 100%;
+
+  &::placeholder {
+    color: #858585;
+  }
+}
+
+.commentWarning {
+  background: #f6f6f6;
+  @include font-size(2.2rem);
+
+  margin-bottom: 1em;
+  padding: 2.4rem 1.8rem;
+}
+
+.topic a {
+  /* white-space: nowrap; */
+  color: black;
+  padding: 0.3vh;
+
+  &:hover {
+    font-weight: 500;
+  }
+}
+
+.shoutStats {
+  border-bottom: 1px solid #e8e8e8;
+  border-top: 4px solid #000;
+  display: flex;
+  justify-content: flex-start;
+  padding: 3.2rem 0;
+}
+
+.shoutStatsItem {
+  @include font-size(1.7rem);
+
+  font-weight: 500;
+  display: inline-block;
+  margin: 0 3.2rem 1em 0;
+  vertical-align: baseline;
+
+  .icon {
+    display: inline-block;
+    margin-right: 0.2em;
+    transition: filter 0.2s;
+    vertical-align: middle;
+  }
+
+  img {
+    display: block;
+  }
+
+  a {
+    border: none;
+
+    &:hover {
+      .icon {
+        filter: invert(1);
+      }
+    }
+  }
+}
+
+.shoutStatsItemLikes {
+  .icon {
+    vertical-align: baseline;
+  }
+
+  .icon:last-of-type {
+    // transform: rotate(180deg);
+    transform-origin: center;
+    margin-left: 0.3em;
+    vertical-align: middle;
+  }
+}
+
+.shoutStatsItemAdditionalData {
+  color: rgb(0 0 0 / 40%);
+  font-weight: normal;
+  justify-self: flex-end;
+  margin-right: 0;
+  margin-left: auto;
+  white-space: nowrap;
+
+  .icon {
+    opacity: 0.4;
+  }
+}
+
+.shoutStatsItemAdditionalDataItem {
+  display: inline-block;
+  margin-left: 2rem;
+}
+
+.topicsList {
+  @include font-size(1.2rem);
+
+  letter-spacing: 0.08em;
+  margin: 1.6rem 0;
+
+  .shoutTopic {
+    display: inline-block;
+    margin: 0.8rem 0.8rem 0.8rem 0;
+
+    a {
+      background: #f6f6f6;
+      color: #000;
+      border: none;
+      padding: 0.4rem 0.8rem;
+      transition: background-color 0.2s;
+      text-transform: uppercase;
+
+      &:hover {
+        background-color: rgb(0 0 0 / 20%);
+      }
+    }
+  }
+}
diff --git a/src/styles/Article.scss b/src/styles/Article.scss
deleted file mode 100644
index 75ee66e1..00000000
--- a/src/styles/Article.scss
+++ /dev/null
@@ -1,204 +0,0 @@
-.article-page {
-  h1 {
-    @include font-size(4rem);
-
-    line-height: 1.1;
-    margin-top: 0.5em;
-  }
-
-  h2 {
-    line-height: 1.1;
-  }
-
-  img {
-    max-width: 100%;
-  }
-
-  .shout__header {
-    margin-bottom: 2em;
-
-    @include media-breakpoint-up(md) {
-      margin: 0 0 2em;
-    }
-  }
-
-  .shout__cover {
-    background-size: cover;
-    height: 0;
-    padding-bottom: 56.2%;
-  }
-
-  .shout__body {
-    font-size: 1.7rem;
-    line-height: 1.6;
-
-    img {
-      display: block;
-      margin-bottom: 0.5em;
-    }
-
-    blockquote {
-      border-left: 4px solid;
-      font-size: 2rem;
-      font-weight: 500;
-      font-style: italic;
-      line-height: 1.4;
-      margin: 1.5em 0;
-      padding: 0 0 0 1em;
-
-      @include media-breakpoint-up(md) {
-        margin-left: -16.6666%;
-      }
-    }
-
-    mark {
-      background: none;
-      font-size: 2rem;
-      font-weight: bold;
-      line-height: 1.4;
-    }
-  }
-
-  .shout__author,
-  .shout__date {
-    @include font-size(1.5rem);
-  }
-
-  .shout__author {
-    margin-bottom: 1.5em;
-
-    a {
-      border: none;
-      color: rgb(0 0 0 / 60%);
-
-      &:hover {
-        color: #fff;
-      }
-    }
-  }
-
-  .shout__authors-list {
-    margin-top: 2em;
-
-    h4 {
-      color: #696969;
-      font-size: 1.5rem;
-      font-weight: normal;
-    }
-  }
-
-  .write-comment {
-    border: 2px solid #f6f6f6;
-    @include font-size(1.7rem);
-
-    outline: none;
-    padding: 0.2em 0.4em;
-    width: 100%;
-
-    &::placeholder {
-      color: #858585;
-    }
-  }
-
-  .comment-warning {
-    background: #f6f6f6;
-    @include font-size(2.2rem);
-
-    margin-bottom: 1em;
-    padding: 2.4rem 1.8rem;
-  }
-
-  .topic a {
-    /* white-space: nowrap; */
-    color: black;
-    padding: 0.3vh;
-
-    &:hover {
-      font-weight: 500;
-    }
-  }
-
-  .shout-stats {
-    border-bottom: 1px solid #e8e8e8;
-    border-top: 4px solid #000;
-    display: flex;
-    justify-content: flex-start;
-    padding: 3.2rem 0;
-  }
-
-  .shout-stats__item {
-    @include font-size(1.7rem);
-
-    font-weight: 500;
-    display: inline-block;
-    margin: 0 3.2rem 1em 0;
-    vertical-align: baseline;
-
-    .icon {
-      display: inline-block;
-      margin-right: 0.2em;
-      transition: filter 0.2s;
-      vertical-align: middle;
-    }
-
-    img {
-      display: block;
-    }
-
-    a {
-      border: none;
-
-      &:hover {
-        .icon {
-          filter: invert(1);
-        }
-      }
-    }
-  }
-
-  .shout-stats__item--likes {
-    .icon {
-      vertical-align: baseline;
-    }
-
-    .icon:last-of-type {
-      // transform: rotate(180deg);
-      transform-origin: center;
-      margin-left: 0.3em;
-      vertical-align: middle;
-    }
-  }
-
-  .shout-stats__item--date {
-    color: rgb(0 0 0 / 40%);
-    font-weight: normal;
-    justify-self: flex-end;
-    margin-right: 0;
-    margin-left: auto;
-  }
-
-  .topics-list {
-    @include font-size(1.2rem);
-
-    letter-spacing: 0.08em;
-    margin: 1.6rem 0;
-
-    .shout__topic {
-      display: inline-block;
-      margin: 0.8rem 0.8rem 0.8rem 0;
-
-      a {
-        background: #f6f6f6;
-        color: #000;
-        border: none;
-        padding: 0.4rem 0.8rem;
-        transition: background-color 0.2s;
-        text-transform: uppercase;
-
-        &:hover {
-          background-color: rgb(0 0 0 / 20%);
-        }
-      }
-    }
-  }
-}