diff --git a/public/icons/user-link-default.svg b/public/icons/user-link-default.svg index d1e03c91..06b47b48 100644 --- a/public/icons/user-link-default.svg +++ b/public/icons/user-link-default.svg @@ -1,5 +1,4 @@ - - + + + diff --git a/public/icons/user-link-facebook.svg b/public/icons/user-link-facebook.svg new file mode 100644 index 00000000..47632b3c --- /dev/null +++ b/public/icons/user-link-facebook.svg @@ -0,0 +1,4 @@ + + + diff --git a/public/icons/user-link-instagram.svg b/public/icons/user-link-instagram.svg new file mode 100644 index 00000000..bce6d6a2 --- /dev/null +++ b/public/icons/user-link-instagram.svg @@ -0,0 +1,4 @@ + + + diff --git a/public/icons/user-link-telegram.svg b/public/icons/user-link-telegram.svg new file mode 100644 index 00000000..9320b127 --- /dev/null +++ b/public/icons/user-link-telegram.svg @@ -0,0 +1,5 @@ + + + + diff --git a/public/icons/user-link-twitter.svg b/public/icons/user-link-twitter.svg new file mode 100644 index 00000000..cb8cb03e --- /dev/null +++ b/public/icons/user-link-twitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/Author/AuthorCard.module.scss b/src/components/Author/AuthorCard.module.scss index fe8e9d29..9ae93a71 100644 --- a/src/components/Author/AuthorCard.module.scss +++ b/src/components/Author/AuthorCard.module.scss @@ -18,6 +18,10 @@ display: flex; flex: 1; + &.authorDetailsShrinked { + flex: 0 0 auto; + } + @include media-breakpoint-down(sm) { flex-wrap: wrap; } @@ -65,22 +69,21 @@ .authorSubscribe { align-items: center; - display: flex; + //display: flex; @include media-breakpoint-down(md) { flex-wrap: wrap; } a { - background: #f7f7f7; border: none; display: inline-block; - height: 32px; + height: 24px; margin-right: 0.4rem; position: relative; transition: background-color 0.2s; vertical-align: middle; - width: 32px; + width: 24px; &::before { background-image: url(/icons/user-link-default.svg); @@ -88,40 +91,39 @@ background-position: 50% 50%; background-size: contain; content: ''; - filter: invert(1); - height: 18px; + height: 100%; left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); transition: filter 0.2s; - width: 18px; + width: 100%; } &:hover { background: #000; &::before { - filter: invert(0); + filter: invert(1); } } } a[href*='facebook.com/'] { &::before { - background-image: url(/icons/facebook-white.svg); + background-image: url(/icons/user-link-facebook.svg); } } a[href*='twitter.com/'] { &::before { - background-image: url(/icons/twitter-white.svg); + background-image: url(/icons/user-link-twitter.svg); } } a[href*='telegram.com/'] { &::before { - background-image: url(/icons/telegram-white.svg); + background-image: url(/icons/user-link-telegram.svg); } } @@ -140,7 +142,7 @@ a[href*='instagram.com/'] { &::before { - background-image: url(/icons/instagram-white.svg); + background-image: url(/icons/user-link-instagram.svg); } } @@ -171,6 +173,7 @@ .authorSubscribeSocial { align-items: center; display: flex; + margin: 0 0.8rem 1.6rem; @include media-breakpoint-down(sm) { flex: 1 100%; @@ -237,8 +240,7 @@ } .authorAbout { - @include font-size(1.7rem); - + @include font-size(2rem); color: #696969; } diff --git a/src/components/Author/AuthorCard.tsx b/src/components/Author/AuthorCard.tsx index 3b1e4004..306b62b6 100644 --- a/src/components/Author/AuthorCard.tsx +++ b/src/components/Author/AuthorCard.tsx @@ -93,6 +93,7 @@ export const AuthorCard = (props: AuthorCardProps) => {
{ [styles.nowrapView]: props.isNowrap }} > - + + } + > +
+ +
+ -
+
@@ -140,6 +164,12 @@ export const AuthorCard = (props: AuthorCardProps) => {
+ +
+ {(link) => } +
+ + { }} disabled={isSubscribing()} > - + - + {t('Follow')} @@ -178,10 +208,10 @@ export const AuthorCard = (props: AuthorCardProps) => { }} disabled={isSubscribing()} > - + - + { }} onClick={initChat} > - + {t('Write')} - - -
- {(link) => } -
-
diff --git a/src/components/Author/Full.module.scss b/src/components/Author/Full.module.scss new file mode 100644 index 00000000..0fe5e7bc --- /dev/null +++ b/src/components/Author/Full.module.scss @@ -0,0 +1,9 @@ +.userDetails { + border-bottom: 2px solid #000; + margin: 0 0 3.6rem; + padding-bottom: 3.6rem; + + @include media-breakpoint-down(md) { + text-align: center; + } +} diff --git a/src/components/Author/Full.scss b/src/components/Author/Full.scss deleted file mode 100644 index d4a8c16c..00000000 --- a/src/components/Author/Full.scss +++ /dev/null @@ -1,30 +0,0 @@ -.user-details { - 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 { - margin-top: 0; - - button { - font-size: 100%; - } - } - - .group__controls { - margin-bottom: 2em !important; - margin-top: 0 !important; - } -} diff --git a/src/components/Author/Full.tsx b/src/components/Author/Full.tsx index 4b280250..73395e37 100644 --- a/src/components/Author/Full.tsx +++ b/src/components/Author/Full.tsx @@ -1,13 +1,12 @@ import type { Author } from '../../graphql/types.gen' import { AuthorCard } from './AuthorCard' -import './Full.scss' +import styles from './Full.module.scss' +import clsx from 'clsx' export const AuthorFull = (props: { author: Author }) => { return ( -
-
- -
+
+
) } diff --git a/src/components/Author/Userpic/Userpic.module.scss b/src/components/Author/Userpic/Userpic.module.scss index 1dc106ac..7e3d1edd 100644 --- a/src/components/Author/Userpic/Userpic.module.scss +++ b/src/components/Author/Userpic/Userpic.module.scss @@ -55,19 +55,23 @@ } &.big { - margin-right: 0; + aspect-ratio: 1/1; + margin: 0 auto; max-width: 168px; - min-width: 168px; - height: 168px; - width: 168px; + height: auto; + width: 100%; @include media-breakpoint-up(md) { - margin-right: 4.8rem; + margin: 0; + max-width: 100%; } .letters { + align-items: center; + display: flex; font-size: 2em; - line-height: 168px; + justify-content: center; + line-height: normal; max-width: 100%; width: 100%; } diff --git a/src/components/Views/Author/Author.module.scss b/src/components/Views/Author/Author.module.scss index 5098043d..3cfd2bbc 100644 --- a/src/components/Views/Author/Author.module.scss +++ b/src/components/Views/Author/Author.module.scss @@ -1,13 +1,26 @@ +.authorPage { + :global(.view-switcher) { + margin-top: 0; + + button { + font-size: 100%; + } + } + + .groupControls { + margin-bottom: 2em !important; + margin-top: 0 !important; + } +} + .ratingContainer { @include font-size(1.5rem); - display: inline-flex; vertical-align: top; } .ratingControl { @include font-size(1.5rem); - display: inline-flex; margin-left: 1em; vertical-align: middle; @@ -38,7 +51,6 @@ .subscribersCounter { @include font-size(1rem); - background: #fff; border: 2px solid #000; border-radius: 100%; diff --git a/src/components/Views/Author/Author.tsx b/src/components/Views/Author/Author.tsx index 171e2e2c..6e0981b1 100644 --- a/src/components/Views/Author/Author.tsx +++ b/src/components/Views/Author/Author.tsx @@ -2,6 +2,7 @@ import { Show, createMemo, createSignal, Switch, onMount, For, Match, createEffe import type { Author, Shout, Topic } 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 { useAuthorsStore } from '../../../stores/zine/authors' @@ -136,12 +137,12 @@ export const AuthorView = (props: AuthorProps) => { } }) return ( -
+
-
+
  • @@ -285,25 +286,39 @@ export const AuthorView = (props: AuthorProps) => {
- - - - - - + + + - - {(page) => ( - <> - - - - - - - - )} - + + + + + + + + + 3}> + + + + + + + + + {(page) => ( + <> + + + + + + + + )} + +