Read more button in topic form

citizenos · Nov 8, 2023 · 41def32 · 41def32
1 parent c222128
commit 41def32
Show file tree

Hide file tree

Showing 6 changed files with 79 additions and 39 deletions.
diff --git a/src/app/topic/components/topic-form/topic-form.component.html b/src/app/topic/components/topic-form/topic-form.component.html
@@ -453,26 +453,28 @@ <h3 translate="VIEWS.TOPIC_CREATE.SETTINGS_HEADING_ADD_TO_GROUP"></h3>
             <div class="topic_image">
               <img *ngIf="topic.imageUrl" [src]="topic.imageUrl">
             </div>
-            <div class="topic_title">
-              <div class="main_heading" [innerHTML]="topic.title"></div>
-            </div>
-            <div class="topic_intro" [innerHTML]="topic.intro">
-            </div>
-            <div class="topic_content">
-              <div [innerHTML]="topic.description"></div>
-              <div class="button_wrap"><button class="btn_medium_secondary" (click)="readMore=!readMore">
-                  <svg *ngIf="!readMore" width="24" height="24" viewBox="0 0 24 24" fill="none"
-                    xmlns="http://www.w3.org/2000/svg">
-                    <path d="M17 10L12 15L7 10" stroke="#1168A8" stroke-width="2" stroke-linecap="round" />
-                  </svg>
-                  <svg *ngIf="readMore" width="24" height="24" viewBox="0 0 24 24" fill="none"
-                    xmlns="http://www.w3.org/2000/svg">
-                    <path d="M17 15L12 10L7 15" stroke="#2C3B47" stroke-width="2" stroke-linecap="round" />
-                  </svg>
-                  <span *ngIf="!readMore" translate="VIEWS.TOPIC_CREATE.BTN_READ_MORE"></span>
-                  <span *ngIf="readMore" translate="VIEWS.TOPIC_CREATE.BTN_READ_LESS"></span>
-                </button>
+            <div id="topic_text_wrap" #topicText [@readMore]="readMore? 'open' : 'closed'">
+              <div class="topic_title">
+                <div class="main_heading" [innerHTML]="topic.title"></div>
+              </div>
+              <div class="topic_intro" [innerHTML]="topic.intro">
               </div>
+              <div class="topic_content" [innerHTML]="topic.description">
+              </div>
+            </div>
+            <div class="button_wrap" *ngIf="readMoreButton">
+              <button class="btn_medium_secondary" (click)="readMore=!readMore">
+                <svg *ngIf="!readMore" width="24" height="24" viewBox="0 0 24 24" fill="none"
+                  xmlns="http://www.w3.org/2000/svg">
+                  <path d="M17 10L12 15L7 10" stroke="#1168A8" stroke-width="2" stroke-linecap="round" />
+                </svg>
+                <svg *ngIf="readMore" width="24" height="24" viewBox="0 0 24 24" fill="none"
+                  xmlns="http://www.w3.org/2000/svg">
+                  <path d="M17 15L12 10L7 15" stroke="#2C3B47" stroke-width="2" stroke-linecap="round" />
+                </svg>
+                <span *ngIf="!readMore" translate="VIEWS.TOPIC_CREATE.BTN_READ_MORE"></span>
+                <span *ngIf="readMore" translate="VIEWS.TOPIC_CREATE.BTN_READ_LESS"></span>
+              </button>
             </div>
           </div>
         </ng-container>

diff --git a/src/app/topic/components/topic-form/topic-form.component.scss b/src/app/topic/components/topic-form/topic-form.component.scss
@@ -58,7 +58,6 @@
   height: max-content;
 }
 
-
 #help_wrap {
   flex-direction: column;
   gap: 16px;
@@ -174,10 +173,16 @@
     width: 100%;
   }
 
+  #topic_text_wrap {
+    display: flex;
+    flex-direction: column;
+  }
+
   .topic_image {
     border-top-left-radius: 16px;
     border-top-right-radius: 16px;
     display: flex;
+    min-height: 60px;
     max-height: 324px;
     width: 100%;
     overflow: hidden;
@@ -205,22 +210,32 @@
     display: flex;
     flex-direction: column;
     padding: 8px 16px;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
     position: relative;
+    font-weight: 400;
+    font-size: 15px;
+    line-height: 30px;
+    margin-bottom: 36px;
+  }
 
-    .button_wrap {
-      display: flex;
+  .button_wrap {
+    position: relative;
+    display: flex;
+    width: 100%;
+    justify-content: center;
+    z-index: 3;
+    button {
+      margin-top: -21px;
       position: absolute;
-      bottom: -21px;
-      align-self: center;
-      justify-self: center;
-      button {
+      path {
+        fill: none;
+      }
+      &:hover {
         path {
-          fill: none;
-        }
-        &:hover {
-          path {
-            stroke: var(--color-surfaces);
-          }
+          stroke: var(--color-surfaces);
         }
       }
     }

diff --git a/src/app/topic/components/topic-form/topic-form.component.ts b/src/app/topic/components/topic-form/topic-form.component.ts
@@ -23,6 +23,16 @@ import { InterruptDialogComponent } from 'src/app/shared/components/interrupt-di
   templateUrl: './topic-form.component.html',
   styleUrls: ['./topic-form.component.scss'],
   animations: [
+    trigger('readMore', [
+      state('open', style({
+        maxHeight: '100%',
+        transition: '0.1s max-height'
+      })),
+      state('closed', style({
+        maxHeight: '320px',
+        transition: '0.1s max-height'
+      }))
+    ]),
     trigger('openClose', [
       // ...
       state('open', style({
@@ -50,6 +60,16 @@ import { InterruptDialogComponent } from 'src/app/shared/components/interrupt-di
     ])]
 })
 export class TopicFormComponent {
+  topicText?: ElementRef
+  readMoreButton = false;
+  @ViewChild('topicText') set content(content: ElementRef) {
+    if (content) { // initially setter gets called with undefined
+      this.topicText = content;
+      if (content.nativeElement.offsetHeight > 200) {
+        this.readMoreButton = true;
+      }
+    }
+  }
   @ViewChild('imageUpload') fileInput?: ElementRef;
   @Input() topic!: Topic;
   topicUrl = <SafeResourceUrl>'';
@@ -123,6 +143,8 @@ export class TopicFormComponent {
       const tabIndex = this.tabs.indexOf(tab);
       if (tabIndex > -1 && tabIndex < 3) {
         this.selectTab(this.tabs[tabIndex + 1]);
+      } else {
+        this.TopicService.reloadTopic();
       }
     }
   }

diff --git a/src/app/topic/topic.component.html b/src/app/topic/topic.component.html
@@ -257,8 +257,7 @@ <h3 [innerHTML]="'VIEWS.TOPICS_TOPICID.HEADING_BACK_TO_MY_TOPICS'| translate"></
             <div class="main_heading" [innerHTML]="topic.title"></div>
           </div>
           <div class="topic_intro" [innerHTML]="topic.intro"></div>
-          <div class="topic_content" [innerHTML]="topic.description">
-          </div>
+          <div class="topic_content" [innerHTML]="topic.description"></div>
         </div>
         <div class="button_wrap" *ngIf="readMoreButton">
           <button class="btn_medium_secondary" (click)="readMore=!readMore">

diff --git a/src/app/topic/topic.component.scss b/src/app/topic/topic.component.scss
@@ -175,7 +175,7 @@
         position: relative;
 
         .moderated_topic {
-          background: rgba(255, 255, 255, 0.90);
+          background: rgba(255, 255, 255, 0.9);
           backdrop-filter: blur(16px);
         }
         .topic_image {
@@ -220,9 +220,11 @@
           overflow: hidden;
           position: relative;
           font-weight: 400;
-          font-size: 15px !important;
-          line-height: 30px !important;
+          font-size: 15px;
+          line-height: 30px;
+          margin-bottom: 36px;
         }
+
         .button_wrap {
           position: relative;
           display: flex;

diff --git a/src/app/topic/topic.component.ts b/src/app/topic/topic.component.ts
@@ -41,11 +41,11 @@ import { TourService } from 'src/app/services/tour.service';
     trigger('readMore', [
       state('open', style({
         maxHeight: '100%',
-        transition: '0.3s ease-in-out max-height'
+        transition: '0.1s max-height'
       })),
       state('closed', style({
         maxHeight: '320px',
-        transition: '0.3s ease-in-out max-height'
+        transition: '0.1s max-height'
       }))
     ]),
     trigger('openClose', [