From 4d055064fbeea82e566950281a194ef3bbb9fb73 Mon Sep 17 00:00:00 2001
From: kvakazyambra <kvakazyambra@gmail.com>
Date: Thu, 7 Sep 2023 01:58:54 +0300
Subject: [PATCH] Long bio expanding on the author page

---
 public/locales/en/translation.json            |  1 +
 public/locales/ru/translation.json            |  1 +
 .../Views/Author/Author.module.scss           | 41 ++++++++++++++++++
 src/components/Views/Author/Author.tsx        | 42 ++++++++++++++++++-
 4 files changed, 83 insertions(+), 2 deletions(-)

diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
index 83ff92f5..7ddd981d 100644
--- a/public/locales/en/translation.json
+++ b/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",
diff --git a/public/locales/ru/translation.json b/public/locales/ru/translation.json
index 96559f15..35ccc77d 100644
--- a/public/locales/ru/translation.json
+++ b/public/locales/ru/translation.json
@@ -282,6 +282,7 @@
   "Share": "Поделиться",
   "Short opening": "Расскажите вашу историю...",
   "Show": "Показать",
+  "Show more": "Читать дальше",
   "Show lyrics": "Текст песни",
   "Show table of contents": "Показать главление",
   "Slug": "Постоянная ссылка",
diff --git a/src/components/Views/Author/Author.module.scss b/src/components/Views/Author/Author.module.scss
index 6f176203..76207177 100644
--- a/src/components/Views/Author/Author.module.scss
+++ b/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;
+}
diff --git a/src/components/Views/Author/Author.tsx b/src/components/Views/Author/Author.tsx
index 6f6dff8b..0145784b 100644
--- a/src/components/Views/Author/Author.tsx
+++ b/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'}>