Fixed all authors page

2022-11-11 11:58:22 +03:00 · 2022-11-11 11:58:22 +03:00 · 76d43514e6
commit 76d43514e6
parent 6644e01585
7 changed files with 125 additions and 40 deletions
--- a/src/components/Author/Card.module.scss
+++ b/src/components/Author/Card.module.scss
@ -15,14 +15,26 @@
 .authorDetails {
  display: flex;
  flex: 1;
-  padding-right: 1.2rem;
+  //padding-right: 1.2rem;
  width: max-content;
+
+  @include media-breakpoint-down(sm) {
+    flex-wrap: wrap;
+  }
 }

 .authorDetailsWrapper {
+  flex: 1 100%;
+
+  @include media-breakpoint-up(sm) {
    flex: 1;
  }

+  @include media-breakpoint-up(md) {
+    padding-right: 1.2rem;
+  }
+}
+
 .authorName {
  border: none !important;
  font-size: 1.7rem;
@ -33,6 +45,7 @@
 .authorAbout {
  font-size: 1.5rem;
  color: rgb(0 0 0 / 60%);
+  word-break: break-word;
 }

 .authorSubscribe {
@ -118,6 +131,10 @@

  button {
    margin-right: 0.5em;
+
+    &:last-child {
+      margin-right: 0;
+    }
  }
 }

@ -221,3 +238,22 @@
    vertical-align: middle;
  }
 }
+
+.authorsListItem {
+  .authorName {
+    @include font-size(2.2rem);
+    font-weight: bold;
+  }
+
+  .authorSubscribe {
+    align-items: baseline;
+
+    @include media-breakpoint-down(sm) {
+      padding: 1rem 0 0;
+    }
+  }
+
+  .buttonLabel {
+    display: block;
+  }
+}
--- a/src/components/Author/Card.tsx
+++ b/src/components/Author/Card.tsx
@ -1,7 +1,7 @@
 import type { Author } from '../../graphql/types.gen'
 import Userpic from './Userpic'
 import { Icon } from '../Nav/Icon'
-import style from './Card.module.scss'
+import styles from './Card.module.scss'
 import { createMemo, For, Show } from 'solid-js'
 import { translit } from '../../utils/ru2en'
 import { t } from '../../utils/intl'
@ -19,6 +19,7 @@ interface AuthorCardProps {
  author: Author
  isAuthorPage?: boolean
  noSocialButtons?: boolean
+  isAuthorsList?: boolean
 }

 export const AuthorCard = (props: AuthorCardProps) => {
@ -36,51 +37,81 @@ export const AuthorCard = (props: AuthorCardProps) => {
  }
  // TODO: reimplement AuthorCard
  return (
-    <div class={style.author} classList={{ [style.authorPage]: props.isAuthorPage }}>
-      <Userpic user={props.author} hasLink={props.hasLink} isBig={props.isAuthorPage} />
+    <div
+      class={clsx(styles.author)}
+      classList={{
+        [styles.authorPage]: props.isAuthorPage,
+        [styles.authorsListItem]: props.isAuthorsList
+      }}
+    >
+      <Userpic
+        user={props.author}
+        hasLink={props.hasLink}
+        isBig={props.isAuthorPage}
+        isAuthorsList={props.isAuthorsList}
+      />

-      <div class={style.authorDetails}>
-        <div class={style.authorDetailsWrapper}>
+      <div class={styles.authorDetails}>
+        <div class={styles.authorDetailsWrapper}>
          <Show when={props.hasLink}>
-            <a class={style.authorName} href={`/author/${props.author.slug}`}>
+            <a class={styles.authorName} href={`/author/${props.author.slug}`}>
              {name()}
            </a>
          </Show>
          <Show when={!props.hasLink}>
-            <div class={style.authorName}>{name()}</div>
+            <div class={styles.authorName}>{name()}</div>
          </Show>

          <Show when={!props.hideDescription}>
-            <div class={style.authorAbout}>{bio()}</div>
+            <div class={styles.authorAbout} classList={{ 'text-truncate': props.isAuthorsList }}>
+              {bio()}
+            </div>
          </Show>
        </div>

        <Show when={canFollow()}>
-          <div class={style.authorSubscribe}>
+          <div class={styles.authorSubscribe}>
            <Show
              when={subscribed()}
              fallback={
                <button
                  onClick={() => follow}
-                  class={clsx('button button--subscribe', style.button, style.buttonSubscribe)}
+                  class={clsx('button', styles.button)}
+                  classList={{
+                    [styles.buttonSubscribe]: !props.isAuthorsList,
+                    'button--subscribe': !props.isAuthorsList,
+                    'button--subscribe-topic': props.isAuthorsList,
+                    [styles.buttonWrite]: props.isAuthorsList
+                  }}
                >
-                  <Icon name="author-subscribe" class={style.icon} />
-                  <span class={style.buttonLabel}>&nbsp;{t('Follow')}</span>
+                  <Show when={!props.isAuthorsList}>
+                    <Icon name="author-subscribe" class={styles.icon} />
+                    &nbsp;
+                  </Show>
+                  <span class={styles.buttonLabel}>{t('Follow')}</span>
                </button>
              }
            >
              <button
                onClick={() => unfollow}
-                class={clsx('button button--subscribe', style.button, style.buttonSubscribe)}
+                classList={{
+                  [styles.buttonSubscribe]: !props.isAuthorsList,
+                  'button--subscribe': !props.isAuthorsList,
+                  'button--subscribe-topic': props.isAuthorsList,
+                  [styles.buttonWrite]: props.isAuthorsList
+                }}
              >
-                <Icon name="author-unsubscribe" class={style.icon} />
-                <span class={style.buttonLabel}>-&nbsp;{t('Unfollow')}</span>
+                <Show when={!props.isAuthorsList}>
+                  <Icon name="author-unsubscribe" class={styles.icon} />
+                  &nbsp;
+                </Show>
+                <span class={styles.buttonLabel}>{t('Unfollow')}</span>
              </button>
            </Show>

-            <Show when={!props.compact}>
-              <button class={clsx(style.buttonWrite, style.button, 'button button--subscribe-topic')}>
-                <Icon name="edit" class={style.icon} />
+            <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>

--- a/src/components/Author/Userpic.module.scss
+++ b/src/components/Author/Userpic.module.scss
@ -20,7 +20,7 @@
    border: 2px solid black;
    background-color: white;
    text-align: center;
-    line-height: 32px;
+    line-height: 28px;
  }

  .anonymous {
@ -47,3 +47,15 @@
    width: 100%;
  }
 }
+
+.authorsList {
+  margin-right: 2.4rem;
+  max-height: 6.8rem;
+  min-width: 6.8rem;
+  height: 6.8rem;
+  width: 6.8rem;
+
+  .userpic {
+    line-height: 6.4rem;
+  }
+}
--- a/src/components/Author/Userpic.tsx
+++ b/src/components/Author/Userpic.tsx
@ -1,6 +1,6 @@
 import { Show } from 'solid-js'
 import type { Author } from '../../graphql/types.gen'
-import style from './Userpic.module.scss'
+import styles from './Userpic.module.scss'
 import { clsx } from 'clsx'

 interface UserpicProps {
@ -8,6 +8,7 @@ interface UserpicProps {
  hasLink?: boolean
  isBig?: boolean
  class?: string
+  isAuthorsList?: boolean
 }

 export default (props: UserpicProps) => {
@ -18,7 +19,13 @@ export default (props: UserpicProps) => {
  }

  return (
-    <div class={clsx(style.circlewrap, props.class)} classList={{ [style.big]: props.isBig }}>
+    <div
+      class={clsx(styles.circlewrap, props.class)}
+      classList={{
+        [styles.big]: props.isBig,
+        [styles.authorsList]: props.isAuthorsList
+      }}
+    >
      <Show when={props.hasLink}>
        <a href={`/author/${props.user.slug}`}>
          <Show
@ -31,7 +38,7 @@ export default (props: UserpicProps) => {
              />
            }
          >
-            <div class={style.userpic}>{letters()}</div>
+            <div class={styles.userpic}>{letters()}</div>
          </Show>
        </a>
      </Show>
@ -47,7 +54,7 @@ export default (props: UserpicProps) => {
            />
          }
        >
-          <div class={style.userpic}>{letters()}</div>
+          <div class={styles.userpic}>{letters()}</div>
        </Show>
      </Show>
    </div>
--- a/src/components/Views/AllAuthors.tsx
+++ b/src/components/Views/AllAuthors.tsx
@ -60,15 +60,15 @@ export const AllAuthorsView = (props: Props) => {
    <div class={styles.allTopicsPage}>
      <Show when={sortedAuthors().length > 0}>
        <div class="wide-container">
-          <div class="shift-content">
+          <div class="shift-content container">
            <div class="row">
-              <div class={clsx(styles.pageHeader, 'col-lg-9')}>
+              <div class={clsx(styles.pageHeader, 'col-lg-10 col-xl-8')}>
                <h1>{t('Authors')}</h1>
                <p>{t('Subscribe who you like to tune your personal feed')}</p>
              </div>
            </div>
            <div class="row">
-              <div class="col">
+              <div class="col-lg-10 col-xl-8">
                <ul class={clsx(styles.viewSwitcher, 'view-switcher')}>
                  <li classList={{ selected: searchParams().by === 'shouts' }}>
                    <a href="/authors?by=shouts" onClick={handleClientRouteLinkClick}>
@ -95,7 +95,7 @@ export const AllAuthorsView = (props: Props) => {
                <Show
                  when={!searchParams().by || searchParams().by === 'name'}
                  fallback={() => (
-                    <div class="stats">
+                    <div class={styles.stats}>
                      <For each={sortedAuthors()}>
                        {(author) => (
                          <AuthorCard
@ -104,6 +104,7 @@ export const AllAuthorsView = (props: Props) => {
                            hasLink={true}
                            subscribed={subscribed(author.slug)}
                            noSocialButtons={true}
+                            isAuthorsList={true}
                          />
                        )}
                      </For>
--- a/src/styles/AllTopics.module.scss
+++ b/src/styles/AllTopics.module.scss
@ -1,11 +1,4 @@
 .allTopicsPage {
-  .pageHeader,
-  .group h2 {
-    @include media-breakpoint-down(sm) {
-      margin-left: 1.3rem;
-    }
-  }
-
  .group {
    font-weight: bold;
    margin: 3em 0 9.6rem;
@ -39,8 +32,6 @@
  }
 }

-.viewSwitcher {
-  @include media-breakpoint-down(sm) {
-    margin: 0 2.6rem;
-  }
+.stats {
+  margin-top: 2.4rem;
 }
--- a/src/styles/app.scss
+++ b/src/styles/app.scss
@ -515,6 +515,7 @@ figcaption {

 .view-switcher__search {
  text-align: right;
+  white-space: nowrap;

  @include media-breakpoint-up(sm) {
    flex: 1;
@ -643,6 +644,12 @@ astro-island {

 .container {
  max-width: 1400px;
+  padding: 0;
+  width: auto;
+
+  @include media-breakpoint-down(sm) {
+    padding: 0 $container-padding-x * 0.5;
+  }
 }

 .container--static-page {