Fixed topics page style

2022-11-09 22:02:12 +03:00 · 2022-11-09 22:02:12 +03:00 · c9958adadc
commit c9958adadc
parent 6da1ff8b8d
6 changed files with 111 additions and 67 deletions
--- 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;
+  }
+}
--- 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>
--- 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>
--- 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>
--- a/src/styles/AllTopics.module.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;
+  }
+}
--- 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;
+}