From c9958adadc2b21dcd3091ed237879fdeb3e6232b Mon Sep 17 00:00:00 2001
From: kvakazyambra <kvakazyambra@gmail.com>
Date: Wed, 9 Nov 2022 22:02:12 +0300
Subject: [PATCH] Fixed topics page style

---
 src/components/Topic/Card.module.scss         | 19 +++--
 src/components/Topic/Card.tsx                 | 22 ++---
 src/components/Views/AllAuthors.tsx           | 13 +--
 src/components/Views/AllTopics.tsx            | 80 ++++++++++---------
 .../{AllTopics.scss => AllTopics.module.scss} | 10 ++-
 src/styles/app.scss                           | 34 ++++++--
 6 files changed, 111 insertions(+), 67 deletions(-)
 rename src/styles/{AllTopics.scss => AllTopics.module.scss} (84%)

diff --git a/src/components/Topic/Card.module.scss b/src/components/Topic/Card.module.scss
index 801f7eaa..bbfab772 100644
--- a/src/components/Topic/Card.module.scss
+++ b/src/components/Topic/Card.module.scss
@@ -9,10 +9,6 @@
 
     .topicDetailsItem {
       margin-bottom: 1.2rem;
-
-      @include media-breakpoint-up(md) {
-        margin-bottom: 3.2rem;
-      }
     }
   }
 }
@@ -33,9 +29,9 @@
 
 .topicTitle {
   font-weight: bold;
-  @include font-size(1.7rem);
+  @include font-size(2.2rem);
 
-  margin-bottom: 0.8rem;
+  margin-bottom: 1.2rem;
 }
 
 .topicAvatar {
@@ -56,10 +52,10 @@
 }
 
 .topicDescription {
-  @include font-size(1.5rem);
+  @include font-size(1.6rem);
 
   color: #696969;
-  margin: 0 0 0.8rem;
+  margin: 0 0 1.6rem;
 
   &.compact {
     font-size: medium;
@@ -85,6 +81,7 @@
 }
 
 .topicDetailsItem {
+  @include font-size(1.5rem);
   margin-right: 1.6rem;
   white-space: nowrap;
 
@@ -104,3 +101,9 @@
     float: right;
   }
 }
+
+.controlContainer {
+  @include media-breakpoint-up(md) {
+    text-align: right;
+  }
+}
diff --git a/src/components/Topic/Card.tsx b/src/components/Topic/Card.tsx
index da9d6d3f..16594b58 100644
--- a/src/components/Topic/Card.tsx
+++ b/src/components/Topic/Card.tsx
@@ -8,6 +8,7 @@ import { locale } from '../../stores/ui'
 import { useAuthStore } from '../../stores/auth'
 import { follow, unfollow } from '../../stores/zine/common'
 import { getLogger } from '../../utils/logger'
+import { clsx } from 'clsx'
 
 const log = getLogger('TopicCard')
 
@@ -49,11 +50,11 @@ export const TopicCard = (props: TopicProps) => {
         [styles.topicInRow]: props.isTopicInRow
       }}
     >
-      <div classList={{ 'col-md-7': !props.compact && !props.subscribeButtonBottom }}>
+      <div classList={{ 'col-md-9 col-lg-7': !props.compact && !props.subscribeButtonBottom }}>
         <Show when={props.topic.title}>
-          <div class={styles.topicTitle}>
+          <h3 class={styles.topicTitle}>
             <a href={`/topic/${props.topic.slug}`}>{capitalize(props.topic.title || '')}</a>
-          </div>
+          </h3>
         </Show>
         <Show when={props.topic.pic}>
           <div class={styles.topicAvatar}>
@@ -65,7 +66,7 @@ export const TopicCard = (props: TopicProps) => {
 
         <Show when={!props.compact && props.topic?.body}>
           <div
-            class={styles.topicDescription}
+            class={clsx(styles.topicDescription, 'text-truncate')}
             classList={{ 'topic-description--short': props.shortDescription }}
           >
             {props.topic.body}
@@ -75,7 +76,7 @@ export const TopicCard = (props: TopicProps) => {
         <Show when={props.topic?.stat}>
           <div class={styles.topicDetails}>
             <Show when={!props.compact}>
-              <span class={styles.topicDetailsTtem} classList={{ compact: props.compact }}>
+              <span class={styles.topicDetailsItem} classList={{ compact: props.compact }}>
                 {props.topic.stat?.shouts +
                   ' ' +
                   t('post') +
@@ -84,7 +85,7 @@ export const TopicCard = (props: TopicProps) => {
                     locale() === 'ru' ? ['ов', '', 'а'] : ['s', '', 's']
                   )}
               </span>
-              <span class={styles.topicDetailsTtem} classList={{ compact: props.compact }}>
+              <span class={styles.topicDetailsItem} classList={{ compact: props.compact }}>
                 {props.topic.stat?.authors +
                   ' ' +
                   t('author') +
@@ -127,21 +128,24 @@ export const TopicCard = (props: TopicProps) => {
           </div>
         </Show>
       </div>
-      <div classList={{ 'col-md-3': !props.compact && !props.subscribeButtonBottom }}>
+      <div
+        class={styles.controlContainer}
+        classList={{ 'col-md-3': !props.compact && !props.subscribeButtonBottom }}
+      >
         <Show
           when={subscribed()}
           fallback={
             <button onClick={() => subscribe(true)} class="button--light button--subscribe-topic">
               <Show when={props.iconButton}>+</Show>
 
-              <Show when={!props.iconButton}>+&nbsp;{t('Follow')}</Show>
+              <Show when={!props.iconButton}>{t('Follow')}</Show>
             </button>
           }
         >
           <button onClick={() => subscribe(false)} class="button--light button--subscribe-topic">
             <Show when={props.iconButton}>-</Show>
 
-            <Show when={!props.iconButton}>-&nbsp;{t('Unfollow')}</Show>
+            <Show when={!props.iconButton}>{t('Unfollow')}</Show>
           </button>
         </Show>
       </div>
diff --git a/src/components/Views/AllAuthors.tsx b/src/components/Views/AllAuthors.tsx
index 7c4ad362..070738ba 100644
--- a/src/components/Views/AllAuthors.tsx
+++ b/src/components/Views/AllAuthors.tsx
@@ -6,7 +6,8 @@ import { t } from '../../utils/intl'
 import { useAuthorsStore, setAuthorsSort } from '../../stores/zine/authors'
 import { handleClientRouteLinkClick, useRouter } from '../../stores/router'
 import { useAuthStore } from '../../stores/auth'
-import '../../styles/AllTopics.scss'
+import styles from '../../styles/AllTopics.module.scss'
+import { clsx } from 'clsx'
 
 type AllAuthorsPageSearchParams = {
   by: '' | 'name' | 'shouts' | 'rating'
@@ -56,19 +57,19 @@ export const AllAuthorsView = (props: Props) => {
   // log.debug(getSearchParams())
 
   return (
-    <div class="all-topics-page">
+    <div class={styles.allTopicsPage}>
       <Show when={sortedAuthors().length > 0}>
         <div class="wide-container">
           <div class="shift-content">
             <div class="row">
-              <div class="col-md-9 page-header">
+              <div class={clsx(styles.pageHeader, 'col-lg-9')}>
                 <h1>{t('Authors')}</h1>
                 <p>{t('Subscribe who you like to tune your personal feed')}</p>
               </div>
             </div>
             <div class="row">
               <div class="col">
-                <ul class="view-switcher">
+                <ul class={clsx(styles.viewSwitcher, 'view-switcher')}>
                   <li classList={{ selected: searchParams().by === 'shouts' }}>
                     <a href="/authors?by=shouts" onClick={handleClientRouteLinkClick}>
                       {t('By shouts')}
@@ -111,13 +112,13 @@ export const AllAuthorsView = (props: Props) => {
                 >
                   <For each={sortedKeys()}>
                     {(letter) => (
-                      <div class="group">
+                      <div class={clsx(styles.group, 'group')}>
                         <h2>{letter}</h2>
                         <div class="container">
                           <div class="row">
                             <For each={byLetter()[letter]}>
                               {(author: Author) => (
-                                <div class="topic col-sm-6 col-md-3">
+                                <div class={clsx(styles.topic, 'topic col-sm-6 col-md-3')}>
                                   <div class="topic-title">
                                     <a href={`/author/${author.slug}`}>{author.name}</a>
                                   </div>
diff --git a/src/components/Views/AllTopics.tsx b/src/components/Views/AllTopics.tsx
index 91f28e90..618811a4 100644
--- a/src/components/Views/AllTopics.tsx
+++ b/src/components/Views/AllTopics.tsx
@@ -6,7 +6,9 @@ import { setTopicsSort, useTopicsStore } from '../../stores/zine/topics'
 import { handleClientRouteLinkClick, useRouter } from '../../stores/router'
 import { TopicCard } from '../Topic/Card'
 import { useAuthStore } from '../../stores/auth'
-import '../../styles/AllTopics.scss'
+import styles from '../../styles/AllTopics.module.scss'
+import cardStyles from '../Topic/Card.module.scss'
+import { clsx } from 'clsx'
 
 type AllTopicsPageSearchParams = {
   by: 'shouts' | 'authors' | 'title' | ''
@@ -52,54 +54,58 @@ export const AllTopicsView = (props: AllTopicsViewProps) => {
   const subscribed = (s) => Boolean(session()?.news?.topics && session()?.news?.topics?.includes(s || ''))
 
   return (
-    <div class="all-topics-page">
+    <div class={styles.allTopicsPage}>
       <Show when={sortedTopics().length > 0}>
         <div class="wide-container">
           <div class="shift-content">
             <div class="row">
-              <div class="col-md-9 page-header">
+              <div class={clsx(styles.pageHeader, 'col-lg-9')}>
                 <h1>{t('Topics')}</h1>
-                <p>{t('Subscribe what you like to tune your personal feed')}</p>
+                <div class="col-lg-10">
+                  <p>{t('Subscribe what you like to tune your personal feed')}</p>
+                </div>
               </div>
             </div>
 
             <div class="row">
               <div class="col">
-                <ul class="view-switcher">
-                  <li classList={{ selected: searchParams().by === 'shouts' || !searchParams().by }}>
-                    <a href="/topics?by=shouts" onClick={handleClientRouteLinkClick}>
-                      {t('By shouts')}
-                    </a>
-                  </li>
-                  <li classList={{ selected: searchParams().by === 'authors' }}>
-                    <a href="/topics?by=authors" onClick={handleClientRouteLinkClick}>
-                      {t('By authors')}
-                    </a>
-                  </li>
-                  <li classList={{ selected: searchParams().by === 'title' }}>
-                    <a
-                      href="/topics?by=title"
-                      onClick={(ev) => {
-                        // just an example
-                        ev.preventDefault()
-                        changeSearchParam('by', 'title')
-                      }}
-                    >
-                      {t('By alphabet')}
-                    </a>
-                  </li>
-                  <li class="view-switcher__search">
-                    <a href="/topic/search">
-                      <Icon name="search" />
-                      {t('Search topic')}
-                    </a>
-                  </li>
-                </ul>
+                <div class="row">
+                  <ul class={clsx(styles.viewSwitcher, 'view-switcher col-lg-10')}>
+                    <li classList={{ selected: searchParams().by === 'shouts' || !searchParams().by }}>
+                      <a href="/topics?by=shouts" onClick={handleClientRouteLinkClick}>
+                        {t('By shouts')}
+                      </a>
+                    </li>
+                    <li classList={{ selected: searchParams().by === 'authors' }}>
+                      <a href="/topics?by=authors" onClick={handleClientRouteLinkClick}>
+                        {t('By authors')}
+                      </a>
+                    </li>
+                    <li classList={{ selected: searchParams().by === 'title' }}>
+                      <a
+                        href="/topics?by=title"
+                        onClick={(ev) => {
+                          // just an example
+                          ev.preventDefault()
+                          changeSearchParam('by', 'title')
+                        }}
+                      >
+                        {t('By alphabet')}
+                      </a>
+                    </li>
+                    <li class="view-switcher__search">
+                      <a href="/topic/search">
+                        <Icon name="search" />
+                        {t('Search topic')}
+                      </a>
+                    </li>
+                  </ul>
+                </div>
 
                 <Show
                   when={searchParams().by === 'title'}
                   fallback={() => (
-                    <div class="stats">
+                    <div class={cardStyles.stats}>
                       <For each={sortedTopics()}>
                         {(topic) => (
                           <TopicCard topic={topic} compact={false} subscribed={subscribed(topic.slug)} />
@@ -110,13 +116,13 @@ export const AllTopicsView = (props: AllTopicsViewProps) => {
                 >
                   <For each={sortedKeys()}>
                     {(letter) => (
-                      <div class="group">
+                      <div class={clsx(styles.group, 'group')}>
                         <h2>{letter}</h2>
                         <div class="container">
                           <div class="row">
                             <For each={byLetter()[letter]}>
                               {(topic) => (
-                                <div class="topic col-sm-6 col-md-3">
+                                <div class={clsx(styles.topic, 'topic col-sm-6 col-md-3')}>
                                   <div class="topic-title">
                                     <a href={`/topic/${topic.slug}`}>{topic.title}</a>
                                   </div>
diff --git a/src/styles/AllTopics.scss b/src/styles/AllTopics.module.scss
similarity index 84%
rename from src/styles/AllTopics.scss
rename to src/styles/AllTopics.module.scss
index 2fd3ab75..5dca6c2a 100644
--- a/src/styles/AllTopics.scss
+++ b/src/styles/AllTopics.module.scss
@@ -1,5 +1,5 @@
-.all-topics-page {
-  .page-header,
+.allTopicsPage {
+  .pageHeader,
   .group h2 {
     @include media-breakpoint-down(sm) {
       margin-left: 1.3rem;
@@ -38,3 +38,9 @@
     width: auto;
   }
 }
+
+.viewSwitcher {
+  @include media-breakpoint-down(sm) {
+    margin: 0 2.6rem;
+  }
+}
diff --git a/src/styles/app.scss b/src/styles/app.scss
index 0b63000e..7258a3ed 100644
--- a/src/styles/app.scss
+++ b/src/styles/app.scss
@@ -404,12 +404,14 @@ figcaption {
 }
 
 .view-switcher {
-  @include font-size(2.2rem);
+  @include font-size(1.7rem);
 
+  display: flex;
+  flex-wrap: wrap;
   font-weight: bold;
   list-style: none;
-  margin: 0;
-  padding: 0;
+  margin: 2.4rem 0 0;
+  //padding: 0;
 
   .all-topics-page & {
     @include media-breakpoint-down(sm) {
@@ -420,7 +422,11 @@ figcaption {
   li {
     display: inline-block;
     margin-right: 1em;
-    margin-bottom: 0.5em;
+    margin-bottom: 0.6em;
+
+    &:last-child {
+      margin-right: 0;
+    }
   }
 
   button {
@@ -436,6 +442,11 @@ figcaption {
 
   a {
     border-bottom: 2px solid #fff;
+    color: rgba(0, 0, 0, 0.5);
+
+    &:hover {
+      color: #fff;
+    }
   }
 
   .selected {
@@ -458,7 +469,12 @@ figcaption {
 }
 
 .view-switcher__search {
-  margin-left: 2em;
+  text-align: right;
+
+  @include media-breakpoint-up(sm) {
+    flex: 1;
+    margin-left: 2em;
+  }
 
   .icon {
     display: inline-block;
@@ -685,3 +701,11 @@ details {
     }
   }
 }
+
+.text-truncate {
+  display: -webkit-box !important;
+  overflow: hidden;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  white-space: normal;
+}