Change author page style
This commit is contained in:
parent
6d49e4e2f0
commit
20d7c585e8
|
|
@ -1,5 +1,4 @@
|
|||
<?xml version="1.0"?>
|
||||
<svg width="12px" height="12px" viewBox="0 0 12 12"
|
||||
enable-background="new 0 0 12 12" version="1.1"
|
||||
xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><path
|
||||
d="M3.7796631,8.75C4.1953125,10.6790771,5.0326538,12,6,12s1.8046875-1.3209229,2.2203369-3.25H3.7796631z" fill="#fff"/><path d="M9.2371216,3.25h2.0916748c-0.664978-1.2857056-1.779541-2.2975464-3.1375122-2.8312378 C8.6710815,1.1671753,9.0209351,2.1549683,9.2371216,3.25z" fill="#fff"/><path d="M8.3912964,4.25H3.6087036C3.5383911,4.803833,3.5,5.3909912,3.5,6s0.0383911,1.196167,0.1087036,1.75 h4.7825928C8.4616089,7.196167,8.5,6.6090088,8.5,6S8.4616089,4.803833,8.3912964,4.25z" fill="#fff"/><path d="M9.5,6c0,0.5882568-0.0372925,1.1765137-0.1055298,1.75h2.3445435C11.9077148,7.196167,12,6.6090088,12,6 s-0.0922852-1.196167-0.2609863-1.75H9.3944702C9.4627075,4.8234863,9.5,5.4117432,9.5,6z" fill="#fff"/><path d="M8.2203369,3.25C7.8046875,1.3209229,6.9673462,0,6,0S4.1953125,1.3209229,3.7796631,3.25H8.2203369z" fill="#fff"/><path d="M2.7628784,8.75H0.6712036c0.664978,1.2857056,1.779541,2.2975464,3.1375122,2.8312378 C3.3289185,10.8328247,2.9790649,9.8450317,2.7628784,8.75z" fill="#fff"/><path d="M2.5,6c0-0.5882568,0.0372925-1.1765137,0.1055298-1.75H0.2609863C0.0922852,4.803833,0,5.3909912,0,6 s0.0922852,1.196167,0.2609863,1.75h2.3445435C2.5372925,7.1765137,2.5,6.5882568,2.5,6z" fill="#fff"/><path d="M9.2371216,8.75c-0.2161865,1.0950317-0.56604,2.0828247-1.0458374,2.8312378 C9.5492554,11.0475464,10.6638184,10.0357056,11.3287964,8.75H9.2371216z" fill="#fff"/><path d="M2.7628784,3.25c0.2161865-1.0950317,0.56604-2.0828247,1.0458374-2.8312378 C2.4507446,0.9524536,1.3361816,1.9642944,0.6712036,3.25H2.7628784z" fill="#fff"/></svg>
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M15.4476 3.67969C14.2002 3.67969 12.9502 4.15625 11.9997 5.10677L9.87988 7.22656C7.97624 9.1276 7.97624 12.2188 9.87988 14.1198C10.4554 14.6953 11.1325 15.0938 11.8617 15.3203L12.2653 14.9167C12.5283 14.6536 12.7132 14.3411 12.8148 14.0078C12.1273 13.9036 11.4658 13.5885 10.9398 13.0599C9.62467 11.7448 9.62467 9.60156 10.9398 8.28646L13.0596 6.16667C14.3747 4.85156 16.5179 4.85156 17.833 6.16667C19.1481 7.48177 19.1481 9.625 17.833 10.9401L16.5622 12.2083C16.695 12.8984 16.7028 13.6068 16.5908 14.2943C16.6507 14.237 16.7132 14.1797 16.7731 14.1198L18.8929 12C20.7939 10.099 20.7939 7.00781 18.8929 5.10677C17.9424 4.15625 16.695 3.67969 15.4476 3.67969ZM12.1377 8.67969L11.734 9.08333C11.4736 9.34635 11.2861 9.65885 11.1872 9.99219C11.8721 10.0964 12.5335 10.4115 13.0596 10.9401C14.3747 12.2552 14.3747 14.3958 13.0596 15.7109L10.9398 17.8333C9.62467 19.1484 7.48145 19.1484 6.16634 17.8333C4.85124 16.5182 4.85124 14.375 6.16634 13.0599L7.43717 11.7917C7.30436 11.1016 7.29655 10.3932 7.40853 9.70573C7.34863 9.76302 7.28613 9.82031 7.22624 9.88021L5.10645 12C3.2054 13.901 3.2054 16.9922 5.10645 18.8932C7.00749 20.7943 10.0986 20.7943 11.9997 18.8932L14.1195 16.7734C16.0231 14.8724 16.0231 11.7813 14.1195 9.88021C13.5439 9.30469 12.8669 8.90625 12.1377 8.67969Z" fill="currentColor"/>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.4 KiB |
4
public/icons/user-link-facebook.svg
Normal file
4
public/icons/user-link-facebook.svg
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M8.91406 4.5C4.82031 4.5 4.5 4.82031 4.5 8.91406V15.0859C4.5 19.1797 4.82031 19.5 8.91406 19.5H15.0859C19.1797 19.5 19.5 19.1797 19.5 15.0859V8.91406C19.5 4.82031 19.1797 4.5 15.0859 4.5H8.91406ZM7.9375 6H16.0625C17.8594 6 18 6.14063 18 7.9375V16.0625C18 17.8594 17.8594 18 16.0625 18H14.4818V13.5156H16.2578L16.5365 11.5182H14.4818C14.4818 11.5182 14.4792 10.349 14.4818 10.0573C14.487 9.48698 14.9635 9.20052 15.3724 9.20313C15.7839 9.20833 16.6302 9.20573 16.6302 9.20573V7.36458C16.6302 7.36458 15.8958 7.27083 15.1276 7.26302C14.4792 7.25521 13.7656 7.42969 13.1875 8.01302C12.6016 8.60417 12.5078 9.48437 12.4974 10.5599C12.4948 10.8698 12.4974 11.5182 12.4974 11.5182H10.7604V13.513H12.4974V18H7.9375C6.14063 18 6 17.8594 6 16.0625V7.9375C6 6.14063 6.14063 6 7.9375 6Z" fill="currentColor"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 913 B |
4
public/icons/user-link-instagram.svg
Normal file
4
public/icons/user-link-instagram.svg
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M11.9323 4.5C5.03906 4.5 4.5 5.03906 4.5 11.9323V12.0677C4.5 18.9609 5.03906 19.5 11.9323 19.5H12.0677C18.9609 19.5 19.5 18.9609 19.5 12.0677V12C19.5 5.04427 18.9557 4.5 12 4.5H11.9323ZM10.5 6H13.5C17.6745 6 18 6.32552 18 10.5V13.5C18 17.6745 17.6745 18 13.5 18H10.5C6.32552 18 6 17.6745 6 13.5V10.5C6 6.32552 6.32552 6 10.5 6ZM15.7474 7.5C15.3333 7.5 15 7.83854 15 8.2526C15 8.66667 15.3385 9 15.7526 9C16.1667 9 16.5 8.66146 16.5 8.2474C16.5 7.83333 16.1615 7.5 15.7474 7.5ZM11.9922 8.25C9.91927 8.25521 8.24479 9.9375 8.25 12.0078C8.25521 14.0807 9.9375 15.7552 12.0078 15.75C14.0807 15.7448 15.7552 14.0625 15.75 11.9922C15.7448 9.91927 14.0625 8.24479 11.9922 8.25ZM11.9948 9.75C13.237 9.7474 14.2474 10.7526 14.25 11.9948C14.2526 13.237 13.2474 14.2474 12.0052 14.25C10.763 14.2526 9.7526 13.2474 9.75 12.0052C9.7474 10.763 10.7526 9.7526 11.9948 9.75Z" fill="currentColor"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 996 B |
5
public/icons/user-link-telegram.svg
Normal file
5
public/icons/user-link-telegram.svg
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M8.91406 4.5C4.82031 4.5 4.5 4.82031 4.5 8.91406V15.0859C4.5 19.1797 4.82031 19.5 8.91406 19.5H15.0859C19.1797 19.5 19.5 19.1797 19.5 15.0859V8.91406C19.5 4.82031 19.1797 4.5 15.0859 4.5H8.91406ZM7.9375 6H16.0625C17.8594 6 18 6.14063 18 7.9375V16.0625C18 17.8594 17.8594 18 16.0625 18H7.9375C6.14063 18 6 17.8594 6 16.0625V7.9375C6 6.14063 6.14063 6 7.9375 6Z" fill="currentColor"/>
|
||||
<path
|
||||
d="M6.67663 11.836L8.98083 12.6262L9.8727 15.2616C9.92977 15.4304 10.1544 15.4928 10.3035 15.3808L11.5879 14.4187C11.7225 14.3179 11.9143 14.3129 12.055 14.4067L14.3716 15.9521C14.5311 16.0586 14.7571 15.9783 14.7971 15.8012L16.4941 8.30075C16.5378 8.1073 16.3309 7.94593 16.1304 8.01717L6.67393 11.3691C6.44056 11.4518 6.4426 11.7554 6.67663 11.836ZM9.72897 12.2055L14.2322 9.65707C14.3132 9.61141 14.3964 9.71196 14.3269 9.77119L10.6104 12.9455C10.4798 13.0572 10.3955 13.2067 10.3717 13.369L10.2451 14.2311C10.2283 14.3462 10.0523 14.3576 10.0178 14.2462L9.53087 12.6742C9.4751 12.4949 9.55637 12.3034 9.72897 12.2055Z" fill="currentColor"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
3
public/icons/user-link-twitter.svg
Normal file
3
public/icons/user-link-twitter.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M8.91406 4.5C4.82031 4.5 4.5 4.82031 4.5 8.91406V15.0859C4.5 19.1797 4.82031 19.5 8.91406 19.5H15.0859C19.1797 19.5 19.5 19.1797 19.5 15.0859V8.91406C19.5 4.82031 19.1797 4.5 15.0859 4.5H8.91406ZM7.9375 6H16.0625C17.8594 6 18 6.14063 18 7.9375V16.0625C18 17.8594 17.8594 18 16.0625 18H7.9375C6.14063 18 6 17.8594 6 16.0625V7.9375C6 6.14063 6.14063 6 7.9375 6ZM14.2266 8.55208C13.1615 8.55208 12.2969 9.41667 12.2969 10.4818C12.2969 10.6328 12.3464 10.9193 12.3464 10.9193C12.3464 10.9193 10.0208 10.9349 8.3724 8.90625C8.3724 8.90625 8.11979 9.24479 8.11198 9.875C8.09896 10.9453 8.96875 11.4792 8.96875 11.4792C8.96875 11.4792 8.53125 11.4922 8.09635 11.2396C8.13542 12.8958 9.64323 13.1536 9.64323 13.1536C9.64323 13.1536 9.15625 13.2474 8.77344 13.1875C9.01823 13.9531 9.72917 14.5104 10.5729 14.526C9.91406 15.0443 8.94271 15.4635 7.71875 15.3255C8.16667 15.8099 9.58594 16.1901 10.6745 16.1901C14.2214 16.1901 16.1615 13.2526 16.1615 10.7057C16.1615 10.6224 16.1589 10.5391 16.1536 10.4557C16.5312 10.1823 16.8594 9.84375 17.1172 9.45573C16.5911 9.69531 16.0104 9.76042 16.0104 9.76042C16.0104 9.76042 16.6901 9.36719 16.8568 8.69271C16.4844 8.91406 16.0729 9.07552 15.6328 9.16146C15.2812 8.78646 14.7812 8.55208 14.2266 8.55208Z" fill="#141414"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -93,6 +93,7 @@ export const AuthorCard = (props: AuthorCardProps) => {
|
|||
<div
|
||||
class={clsx(styles.author, props.class)}
|
||||
classList={{
|
||||
['row']: props.isAuthorPage,
|
||||
[styles.authorPage]: props.isAuthorPage,
|
||||
[styles.authorComments]: props.isComments,
|
||||
[styles.authorsListItem]: props.isAuthorsList,
|
||||
|
|
@ -100,6 +101,9 @@ export const AuthorCard = (props: AuthorCardProps) => {
|
|||
[styles.nowrapView]: props.isNowrap
|
||||
}}
|
||||
>
|
||||
<Show
|
||||
when={props.isAuthorPage}
|
||||
fallback={
|
||||
<Userpic
|
||||
name={props.author.name}
|
||||
userpic={props.author.userpic}
|
||||
|
|
@ -109,8 +113,28 @@ export const AuthorCard = (props: AuthorCardProps) => {
|
|||
isFeedMode={props.isFeedMode}
|
||||
class={styles.circlewrap}
|
||||
/>
|
||||
}
|
||||
>
|
||||
<div class="col-md-5">
|
||||
<Userpic
|
||||
name={props.author.name}
|
||||
userpic={props.author.userpic}
|
||||
hasLink={props.hasLink}
|
||||
isBig={props.isAuthorPage}
|
||||
isAuthorsList={props.isAuthorsList}
|
||||
isFeedMode={props.isFeedMode}
|
||||
class={styles.circlewrap}
|
||||
/>
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
<div class={styles.authorDetails}>
|
||||
<div
|
||||
class={styles.authorDetails}
|
||||
classList={{
|
||||
'col-md-15 col-xl-13': props.isAuthorPage,
|
||||
[styles.authorDetailsShrinked]: props.isAuthorPage
|
||||
}}
|
||||
>
|
||||
<div class={styles.authorDetailsWrapper}>
|
||||
<Show when={props.hasLink}>
|
||||
<div class={styles.authorNameContainer}>
|
||||
|
|
@ -140,6 +164,12 @@ export const AuthorCard = (props: AuthorCardProps) => {
|
|||
<Show when={isSessionLoaded()}>
|
||||
<Show when={canFollow()}>
|
||||
<div class={styles.authorSubscribe}>
|
||||
<Show when={!props.noSocialButtons && !props.hideWriteButton}>
|
||||
<div class={styles.authorSubscribeSocial}>
|
||||
<For each={props.author.links}>{(link) => <a href={link} />}</For>
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
<Show
|
||||
when={subscribed()}
|
||||
fallback={
|
||||
|
|
@ -155,10 +185,10 @@ export const AuthorCard = (props: AuthorCardProps) => {
|
|||
}}
|
||||
disabled={isSubscribing()}
|
||||
>
|
||||
<Show when={!props.isAuthorsList && !props.isTextButton}>
|
||||
<Show when={!props.isAuthorsList && !props.isTextButton && !props.isAuthorPage}>
|
||||
<Icon name="author-subscribe" class={styles.icon} />
|
||||
</Show>
|
||||
<Show when={props.isTextButton}>
|
||||
<Show when={props.isTextButton || props.isAuthorPage}>
|
||||
<span class={clsx(styles.buttonLabel, styles.buttonLabelVisible)}>
|
||||
{t('Follow')}
|
||||
</span>
|
||||
|
|
@ -178,10 +208,10 @@ export const AuthorCard = (props: AuthorCardProps) => {
|
|||
}}
|
||||
disabled={isSubscribing()}
|
||||
>
|
||||
<Show when={!props.isAuthorsList && !props.isTextButton}>
|
||||
<Show when={!props.isAuthorsList && !props.isTextButton && !props.isAuthorPage}>
|
||||
<Icon name="author-unsubscribe" class={styles.icon} />
|
||||
</Show>
|
||||
<Show when={props.isTextButton}>
|
||||
<Show when={props.isTextButton || props.isAuthorPage}>
|
||||
<span
|
||||
class={clsx(
|
||||
styles.buttonLabel,
|
||||
|
|
@ -215,17 +245,11 @@ export const AuthorCard = (props: AuthorCardProps) => {
|
|||
}}
|
||||
onClick={initChat}
|
||||
>
|
||||
<Show when={!props.isTextButton}>
|
||||
<Show when={!props.isTextButton && !props.isAuthorPage}>
|
||||
<Icon name="comment" class={styles.icon} />
|
||||
</Show>
|
||||
<Show when={!props.liteButtons || props.isTextButton}>{t('Write')}</Show>
|
||||
</button>
|
||||
|
||||
<Show when={!props.noSocialButtons}>
|
||||
<div class={styles.authorSubscribeSocial}>
|
||||
<For each={props.author.links}>{(link) => <a href={link} />}</For>
|
||||
</div>
|
||||
</Show>
|
||||
</Show>
|
||||
</div>
|
||||
</Show>
|
||||
|
|
|
|||
9
src/components/Author/Full.module.scss
Normal file
9
src/components/Author/Full.module.scss
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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 (
|
||||
<div class="row">
|
||||
<div class="col-md-18 col-lg-16 user-details">
|
||||
<div class={clsx(styles.userDetails)}>
|
||||
<AuthorCard author={props.author} isAuthorPage={true} />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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%;
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<div class="author-page">
|
||||
<div class={styles.authorPage}>
|
||||
<div class="wide-container">
|
||||
<Show when={author()}>
|
||||
<AuthorFull author={author()} />
|
||||
</Show>
|
||||
<div class="row group__controls">
|
||||
<div class={clsx(styles.groupControls, 'row')}>
|
||||
<div class="col-md-16">
|
||||
<ul class="view-switcher">
|
||||
<li classList={{ 'view-switcher__item--selected': searchParams().by === 'rating' }}>
|
||||
|
|
@ -285,6 +286,19 @@ export const AuthorView = (props: AuthorProps) => {
|
|||
</div>
|
||||
</Match>
|
||||
<Match when={searchParams().by === 'rating'}>
|
||||
<Show when={sortedArticles().length === 1}>
|
||||
<Row1 article={sortedArticles()[0]} noAuthorLink={true} />
|
||||
</Show>
|
||||
|
||||
<Show when={sortedArticles().length === 2}>
|
||||
<Row2 articles={sortedArticles()} isEqual={true} noAuthorLink={true} />
|
||||
</Show>
|
||||
|
||||
<Show when={sortedArticles().length === 3}>
|
||||
<Row3 articles={sortedArticles()} isEqual={true} noAuthorLink={true} />
|
||||
</Show>
|
||||
|
||||
<Show when={sortedArticles().length > 3}>
|
||||
<Row1 article={sortedArticles()[0]} noAuthorLink={true} />
|
||||
<Row2 articles={sortedArticles().slice(1, 3)} isEqual={true} noAuthorLink={true} />
|
||||
<Row1 article={sortedArticles()[3]} noAuthorLink={true} />
|
||||
|
|
@ -304,6 +318,7 @@ export const AuthorView = (props: AuthorProps) => {
|
|||
</>
|
||||
)}
|
||||
</For>
|
||||
</Show>
|
||||
|
||||
<Show when={isLoadMoreButtonVisible()}>
|
||||
<p class="load-more-container">
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user