feat: add line wraps for text fields

farscrl · Nov 8, 2023 · f3e941c · f3e941c
1 parent c444e47
commit f3e941c
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 5 deletions.
diff --git a/src/app/components/events/event-details/event-details.component.html b/src/app/components/events/event-details/event-details.component.html
@@ -3,7 +3,7 @@ <h1>{{ event.title }}</h1>
 
     <div class="content">
         <div class="description">
-            <p>{{ event.description }}</p>
+            <p class="line-wrap">{{ event.description }}</p>
 
             <ngb-carousel *ngIf="event.images"
                           [showNavigationArrows]="event.images.length > 1"
@@ -102,14 +102,14 @@ <h1>{{ event.title }}</h1>
 
             <div class="address" *ngIf="event.address">
                 <div class="highlight">{{ 'EVENT_DETAILS.ADDRESS' | translate }}</div>
-                <div>
+                <div class="line-wrap">
                     {{event.address}}
                 </div>
             </div>
 
             <div class="pricing" *ngIf="event.pricing">
                 <div class="highlight">{{ 'EVENT_DETAILS.PRICE' | translate }}</div>
-                <div>
+                <div class="line-wrap">
                     {{event.pricing}}
                 </div>
             </div>
@@ -130,7 +130,7 @@ <h1>{{ event.title }}</h1>
 
             <div class="organiser" *ngIf="event.contact">
                 <div class="highlight">{{ 'EVENT_DETAILS.CONTACT' | translate }}</div>
-                <div>
+                <div class="line-wrap">
                     {{event.contact}}
                 </div>
             </div>

diff --git a/src/app/components/events/event-details/event-details.component.scss b/src/app/components/events/event-details/event-details.component.scss
@@ -46,7 +46,7 @@ hr {
 
     .description {
         width: 100%;
-        
+
         @include media-breakpoint-up(md) {
             margin-right: 20px;
         }
@@ -107,3 +107,7 @@ img {
         margin-bottom: 2px;
     }
 }
+
+.line-wrap {
+    white-space: pre-wrap;
+}