-
diff --git a/src/components/Author/Userpic.module.scss b/src/components/Author/Userpic.module.scss
index 20ed085e..18855e50 100644
--- a/src/components/Author/Userpic.module.scss
+++ b/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;
diff --git a/src/components/Views/Author.module.scss b/src/components/Views/Author.module.scss
new file mode 100644
index 00000000..9b279d03
--- /dev/null
+++ b/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;
+}
diff --git a/src/components/Views/Author.tsx b/src/components/Views/Author.tsx
index 37b3030a..85378e8d 100644
--- a/src/components/Views/Author.tsx
+++ b/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
()
const loadMore = async () => {
@@ -94,36 +100,54 @@ export const AuthorView = (props: AuthorProps) => {