Long bio expanding on the author page

public/locales/en/translation.json

@@ -267,6 +267,7 @@
   "Share": "Share",
   "Show": "Show",
   "Show lyrics": "Show lyrics",
+  "Show more": "Show more",
   "Show table of contents": "Show table of contents",
   "Slug": "Slug",
   "Social networks": "Social networks",

public/locales/ru/translation.json

@@ -282,6 +282,7 @@
   "Share": "Поделиться",
   "Short opening": "Расскажите вашу историю...",
   "Show": "Показать",
+  "Show more": "Читать дальше",
   "Show lyrics": "Текст песни",
   "Show table of contents": "Показать главление",
   "Slug": "Постоянная ссылка",

src/components/Views/Author/Author.module.scss

@@ -53,3 +53,44 @@
 .comment {
   background: #efefef;
 }
+
+.longBio {
+  margin-bottom: 0;
+  max-height: 25em;
+  overflow: hidden;
+  padding-bottom: 4em;
+  position: relative;
+  transition: max-height 0.5s, margin-bottom 0s 0.3s;
+
+  &:after {
+    background-image: linear-gradient(to top, #fff, rgb(255 255 255 / 0.8), rgb(255 255 255 / 0));
+    bottom: 0;
+    content: '';
+    display: block;
+    height: 4em;
+    left: 0;
+    position: absolute;
+    width: 100%;
+  }
+}
+
+.longBioExpanded {
+  max-height: 200em;
+  margin-bottom: -2em;
+
+  &:after {
+    display: none;
+  }
+}
+
+.longBioExpandedControl {
+  border-radius: 1.2rem;
+  display: block;
+  height: auto;
+  @include font-size(1.6rem);
+  padding-bottom: 1.2rem;
+  padding-top: 1.2rem;
+  position: relative;
+  width: 100%;
+  z-index: 1;
+}

src/components/Views/Author/Author.tsx

@@ -40,8 +40,12 @@ export const AuthorView = (props: AuthorProps) => {
   const author = createMemo(() => authorEntities()[props.authorSlug])
 
   const [isLoadMoreButtonVisible, setIsLoadMoreButtonVisible] = createSignal(false)
+  const [isBioExpanded, setIsBioExpanded] = createSignal(false)
   const [followers, setFollowers] = createSignal<Author[]>([])
   const [subscriptions, setSubscriptions] = createSignal<Array<Author | Topic>>([])
+  const [bioWrapper, setBioWrapper] = createSignal<HTMLElement>()
+  const [bioContainer, setBioContainer] = createSignal<HTMLElement>()
+  const [showExpandBioControl, setShowExpandBioControl] = createSignal(false)
 
   const fetchSubscriptions = async (): Promise<{ authors: Author[]; topics: Topic[] }> => {
     try {
@@ -58,6 +62,12 @@ export const AuthorView = (props: AuthorProps) => {
     }
   }
 
+  const checkBioHeight = () => {
+    if (bioContainer()) {
+      setShowExpandBioControl(bioContainer().offsetHeight > bioWrapper().offsetHeight)
+    }
+  }
+
   onMount(async () => {
     hideModal()
     try {
@@ -66,6 +76,9 @@ export const AuthorView = (props: AuthorProps) => {
     } catch (error) {
       console.error('[getAuthorFollowers]', error)
     }
+
+    checkBioHeight()
+
     if (!searchParams().by) {
       changeSearchParam('by', 'rating')
     }
@@ -139,7 +152,13 @@ export const AuthorView = (props: AuthorProps) => {
                 </button>
               </li>
               <li classList={{ 'view-switcher__item--selected': searchParams().by === 'about' }}>
-                <button type="button" onClick={() => changeSearchParam('by', 'about')}>
+                <button
+                  type="button"
+                  onClick={() => {
+                    changeSearchParam('by', 'about')
+                    checkBioHeight()
+                  }}
+                >
                   {t('About myself')}
                 </button>
               </li>
@@ -157,7 +176,26 @@ export const AuthorView = (props: AuthorProps) => {
       <Switch>
         <Match when={searchParams().by === 'about'}>
           <div class="wide-container">
-            <p>{author().about}</p>
+            <div class="row">
+              <div class="col-md-20 col-lg-18">
+                <div
+                  ref={setBioWrapper}
+                  class={styles.longBio}
+                  classList={{ [styles.longBioExpanded]: isBioExpanded() }}
+                >
+                  <div ref={setBioContainer}>{author().about}</div>
+                </div>
+
+                <Show when={showExpandBioControl()}>
+                  <button
+                    class={clsx('button button--subscribe-topic', styles.longBioExpandedControl)}
+                    onClick={() => setIsBioExpanded(!isBioExpanded())}
+                  >
+                    {t('Show more')}
+                  </button>
+                </Show>
+              </div>
+            </div>
           </div>
         </Match>
         <Match when={searchParams().by === 'commented'}>