Profile page fixes

src/components/Article/RatingControl.module.scss

@@ -16,8 +16,7 @@
   justify-content: center;
   height: 0.9em;
   line-height: 0;
-  @include font-size(3.6rem);
+  font-size: 1.6em;
-
   padding: 0;
   width: 0.9em;
 

src/components/Author/Card.module.scss

@@ -54,6 +54,10 @@
     padding: 0 0 0 42px;
   }
 
+  @include media-breakpoint-down(md) {
+    flex-wrap: wrap;
+  }
+
   a {
     background: #f7f7f7;
     border: none;
@@ -136,6 +140,17 @@
   }
 }
 
+.authorSubscribeSocial {
+  align-items: center;
+  display: flex;
+
+  @include media-breakpoint-down(sm) {
+    flex: 1 100%;
+    justify-content: center;
+    margin-top: 1em;
+  }
+}
+
 .buttonSubscribe {
   align-items: center;
   aspect-ratio: 1/1;
@@ -180,9 +195,12 @@
 }
 
 .authorPage {
+  @include media-breakpoint-down(md) {
+    justify-content: center;
+  }
+
   .authorName {
     @include font-size(3.4rem);
-
     font-weight: 500;
     margin-bottom: 0.2em;
   }
@@ -195,10 +213,18 @@
   .authorSubscribe {
     margin-top: 2rem;
     padding-left: 0;
+
+    @include media-breakpoint-down(md) {
+      justify-content: center;
+    }
   }
 
   .authorDetails {
     display: block;
+
+    @include media-breakpoint-down(md) {
+      flex: 1 100%;
+    }
   }
 
   .buttonLabel {
@@ -237,6 +263,16 @@
   .button {
     margin-right: 1.6rem;
     vertical-align: middle;
+
+    &:last-of-type {
+      margin-right: 0;
+    }
+
+    @include media-breakpoint-down(sm) {
+      display: block;
+      margin-bottom: 0.5em;
+      margin-right: 0;
+    }
   }
 }
 

src/components/Author/Card.tsx

@@ -177,7 +177,9 @@ export const AuthorCard = (props: AuthorCardProps) => {
                   </button>
 
                   <Show when={!props.noSocialButtons}>
-                    <For each={props.author.links}>{(link) => <a href={link} />}</For>
+                    <div class={styles.authorSubscribeSocial}>
+                      <For each={props.author.links}>{(link) => <a href={link} />}</For>
+                    </div>
                   </Show>
                 </Show>
               </div>

src/components/Author/Full.scss

@@ -1,11 +1,22 @@
 .user-details {
-  margin-bottom: 5.4rem;
+  margin: 0 0 5.4rem;
+
+  @include media-breakpoint-up(md) {
+    margin-left: 160px;
+  }
+
+  @include media-breakpoint-up(lg) {
+    margin-left: 235px;
+  }
+
+  @include media-breakpoint-down(md) {
+    text-align: center;
+  }
 }
 
 .author-page {
   .view-switcher {
     @include font-size(1.5rem);
-
     margin-top: 0;
 
     button {

src/components/Author/Full.tsx

@@ -5,7 +5,7 @@ import './Full.scss'
 export const AuthorFull = (props: { author: Author }) => {
   return (
     <div class="row">
-      <div class="col-md-8 offset-md-2 user-details">
+      <div class="col-md-9 col-lg-8 user-details">
         <AuthorCard author={props.author} compact={false} isAuthorPage={true} />
       </div>
     </div>

src/components/Author/Userpic.module.scss

@@ -35,12 +35,16 @@
 }
 
 .big.circlewrap {
-  margin-right: 4.8rem;
+  margin-right: 0;
   max-width: 168px;
   min-width: 168px;
   height: 168px;
   width: 168px;
 
+  @include media-breakpoint-up(md) {
+    margin-right: 4.8rem;
+  }
+
   .userpic {
     font-size: 2em;
     line-height: 168px;

src/components/Views/Author.module.scss

@@ -0,0 +1,55 @@
+.ratingContainer {
+  @include font-size(1.5rem);
+  display: inline-block;
+  vertical-align: top;
+}
+
+.ratingControl {
+  @include font-size(1.5rem);
+  display: inline-flex;
+  margin-left: 1em;
+  vertical-align: middle;
+}
+
+.additionalControls {
+  white-space: nowrap;
+
+  @include media-breakpoint-up(md) {
+    text-align: right;
+  }
+}
+
+.userpic {
+  background: #fff;
+  box-shadow: 0 0 0 2px #fff;
+  display: inline-block;
+  margin-right: -1.2rem;
+  vertical-align: top;
+}
+
+.subscribers {
+  cursor: pointer;
+  display: inline-block;
+  margin: -0.4rem 2em 0 0;
+  vertical-align: top;
+}
+
+.subscribersCounter {
+  background: #fff;
+  border: 2px solid #000;
+  border-radius: 100%;
+  @include font-size(1rem);
+  font-weight: bold;
+  height: 32px;
+  line-height: 30px;
+  position: relative;
+  text-align: center;
+  width: 32px;
+  z-index: 1;
+}
+
+.subscribersList {
+  max-height: 15em;
+  overflow: auto;
+  position: relative;
+}

src/components/Views/Author.tsx

@@ -1,7 +1,7 @@
 import { Show, createMemo, createSignal, For, onMount } from 'solid-js'
 import type { Author, Shout } from '../../graphql/types.gen'
+import { Row1 } from '../Feed/Row1'
 import { Row2 } from '../Feed/Row2'
-import { Row3 } from '../Feed/Row3'
 import { AuthorFull } from '../Author/Full'
 import { t } from '../../utils/intl'
 import { useAuthorsStore } from '../../stores/zine/authors'
@@ -9,9 +9,14 @@ import { loadShouts, useArticlesStore } from '../../stores/zine/articles'
 
 import { useTopicsStore } from '../../stores/zine/topics'
 import { useRouter } from '../../stores/router'
-import { Beside } from '../Feed/Beside'
 import { restoreScrollPosition, saveScrollPosition } from '../../utils/scroll'
 import { splitToPages } from '../../utils/splitToPages'
+import { RatingControl } from '../Article/RatingControl'
+import styles from './Author.module.scss'
+import { clsx } from 'clsx'
+import Userpic from '../Author/Userpic'
+import { Popup } from '../_shared/Popup'
+import { AuthorCard } from '../Author/Card'
 
 // TODO: load reactions on client
 type AuthorProps = {
@@ -38,6 +43,7 @@ export const AuthorView = (props: AuthorProps) => {
   const [isLoadMoreButtonVisible, setIsLoadMoreButtonVisible] = createSignal(false)
 
   const author = createMemo(() => authorEntities()[props.authorSlug])
+  const subscribers = new Array(12).fill(author())
   const { searchParams, changeSearchParam } = useRouter<AuthorPageSearchParams>()
 
   const loadMore = async () => {
@@ -94,36 +100,54 @@ export const AuthorView = (props: AuthorProps) => {
                 </li>
               </ul>
             </div>
-            <div class="col-md-4">
+            <div class={clsx('col-md-4', styles.additionalControls)}>
-              <div class="mode-switcher">
+              <Popup
-                {`${t('Show')} `}
+                {...props}
-                <span class="mode-switcher__control">{t('All posts')}</span>
+                trigger={
+                  <div class={styles.subscribers}>
+                    <Userpic user={author()} class={styles.userpic} />
+                    <Userpic user={author()} class={styles.userpic} />
+                    <Userpic user={author()} class={styles.userpic} />
+                    <div class={clsx(styles.userpic, styles.subscribersCounter)}>12</div>
+                  </div>
+                }
+                variant="tiny"
+              >
+                <ul class={clsx('nodash', styles.subscribersList)}>
+                  <For each={subscribers}>
+                    {(item) => (
+                      <li>
+                        <AuthorCard author={item} hideDescription={true} hideFollow={true} hasLink={true} />
+                      </li>
+                    )}
+                  </For>
+                </ul>
+              </Popup>
+
+              <div class={styles.ratingContainer}>
+                Карма
+                <RatingControl rating={19} class={styles.ratingControl} />
               </div>
             </div>
           </div>
         </div>
 
-        <Beside
+        <Row1 article={sortedArticles()[0]} />
-          title={t('Topics which supported by author')}
+        <Row2 articles={sortedArticles().slice(1, 3)} isEqual={true} />
-          values={topicsByAuthor()[author().slug]?.slice(0, 5)}
+        <Row1 article={sortedArticles()[3]} />
-          beside={sortedArticles()[0]}
+        <Row2 articles={sortedArticles().slice(4, 6)} isEqual={true} />
-          wrapper={'topic'}
+        <Row1 article={sortedArticles()[6]} />
-          topicShortDescription={true}
+        <Row2 articles={sortedArticles().slice(7, 9)} isEqual={true} />
-          isTopicCompact={true}
-          isTopicInRow={true}
-          iconButton={true}
-        />
-        <Row3 articles={sortedArticles().slice(1, 4)} />
-        <Row2 articles={sortedArticles().slice(4, 6)} />
-        <Row3 articles={sortedArticles().slice(6, 9)} />
-        <Row3 articles={sortedArticles().slice(9, 12)} />
 
         <For each={pages()}>
           {(page) => (
             <>
-              <Row3 articles={page.slice(0, 3)} />
+              <Row1 article={page[0]} />
-              <Row3 articles={page.slice(3, 6)} />
+              <Row2 articles={page.slice(1, 3)} isEqual={true} />
-              <Row3 articles={page.slice(6, 9)} />
+              <Row1 article={page[3]} />
+              <Row2 articles={page.slice(4, 6)} isEqual={true} />
+              <Row1 article={page[6]} />
+              <Row2 articles={page.slice(7, 9)} isEqual={true} />
             </>
           )}
         </For>

src/components/_shared/Popup/Popup.module.scss

@@ -4,18 +4,19 @@
 
 .popup {
   background: #fff;
-  top: calc(100% + 8px);
-  opacity: 1;
   color: #000;
-  position: absolute;
-  z-index: 100;
   min-width: 144px;
+  opacity: 1;
+  position: absolute;
+  top: calc(100% + 8px);
+  z-index: 100;
 
   ul {
     margin-bottom: 0;
 
     li {
       position: relative;
+
       &:last-child {
         margin-bottom: 0;
       }
@@ -24,11 +25,12 @@
 
   &.bordered {
     @include font-size(1.6rem);
-
     border: 2px solid #000;
     padding: 2.4rem;
+
     ul li {
       margin-bottom: 1.6rem;
+
       &:last-child {
         margin-bottom: 0;
       }
@@ -37,11 +39,12 @@
 
   &.tiny {
     @include font-size(1.4rem);
-
     box-shadow: 0 4px 60px rgba(0, 0, 0, 0.1);
     padding: 1rem;
+
     ul li {
       margin-bottom: 1rem;
+
       &:last-child {
         margin-bottom: 0;
       }
@@ -67,22 +70,22 @@
     white-space: nowrap;
 
     &:hover {
-      img {
+      .icon img {
         filter: invert(0);
       }
     }
   }
 
-  img {
-    filter: invert(1);
-    max-height: 2rem;
-    max-width: 2rem;
-    transition: filter 0.3s;
-  }
-
   .icon {
     display: inline-block;
     width: 3.6rem;
+
+    img {
+      filter: invert(1);
+      max-height: 2rem;
+      max-width: 2rem;
+      transition: filter 0.3s;
+    }
   }
 }
 

src/locales/ru.json

@@ -52,6 +52,7 @@
   "Fill email": "Введите почту",
   "Follow": "Подписаться",
   "Follow the topic": "Подписаться на тему",
+  "Followers": "Подписчики",
   "Forgot password?": "Забыли пароль?",
   "Full name": "Имя и фамилия",
   "Get to know the most intelligent people of our time, edit and discuss the articles, share your expertise, rate and decide what to publish in the magazine": "Познакомитесь с выдающимися людьми нашего времени, участвуйте в редактировании и обсуждении статей, выступайте экспертом, оценивайте материалы других авторов со всего мира и определяйте, какие статьи будут опубликованы в журнале",