From b80ea6d285802bedc46446249751843d52803658 Mon Sep 17 00:00:00 2001
From: JAgrit20 <jagritacharya2020@gmail.com>
Date: Sat, 24 Apr 2021 18:32:32 +0530
Subject: [PATCH] Carousel UI improved

---
 .../data-carousel.component.html              |  4 ++--
 .../data-carousel.component.scss              | 21 +++++++++++++------
 2 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/src/app/components/data-view/data-carousel/data-carousel.component.html b/src/app/components/data-view/data-carousel/data-carousel.component.html
index 6e131c5d..d84d06e5 100644
--- a/src/app/components/data-view/data-carousel/data-carousel.component.html
+++ b/src/app/components/data-view/data-carousel/data-carousel.component.html
@@ -33,7 +33,7 @@ <h5 class="m-0">Insert data</h5>
             <ng-container *ngIf="showFirst(h.dataType)" [ngSwitch]="h.dataType">
               <ng-container *ngIf="d1 && d1[j] && currentSlide !== editing">
                 <img class="carousel-multimedia" *ngSwitchCase="'IMAGE'" [src]="getFileLink(d1[j])"/>
-                <app-media *ngSwitchCase="'VIDEO'" [src]="getFileLink(d1[j])" [type]="h.dataType" [style]="{'max-height': '80vh'}"></app-media>
+                <app-media *ngSwitchCase="'VIDEO'" [src]="getFileLink(d1[j])" [type]="h.dataType" id="video"></app-media>
                 <app-media *ngSwitchCase="'SOUND'" [src]="getFileLink(d1[j])" [type]="h.dataType"></app-media>
               </ng-container>
               <p *ngIf="currentSlide === editing">
@@ -87,4 +87,4 @@ <h5 class="m-0">Insert data</h5>
     </div>
 
   </carousel>
-</div>
+</div>
\ No newline at end of file
diff --git a/src/app/components/data-view/data-carousel/data-carousel.component.scss b/src/app/components/data-view/data-carousel/data-carousel.component.scss
index 5954236b..a7c16efc 100644
--- a/src/app/components/data-view/data-carousel/data-carousel.component.scss
+++ b/src/app/components/data-view/data-carousel/data-carousel.component.scss
@@ -1,7 +1,7 @@
 carousel {
   display: block;
   max-width: 1000px;
-  min-width: 1000px;
+  // min-width: 1000px;
 }
 .navigator-wrapper {
   display: flex;
@@ -12,16 +12,25 @@ carousel {
   }
 }
 #carousel-wrapper {
-  display: flex;
-  justify-content: center;
+  width: 96%;
+  max-width: 960px;
+  margin: 0 auto;
+}
+
+#video{
+  width: 100%;
+  max-width: 400px;
+  height: auto;
 }
+
 .carousel-multimedia {
   display: block;
   max-width: 100%;
-  max-height: 80vh;
-  margin: 0 auto;
   margin-bottom: 1rem;
+  padding-top: 60px;
+  margin: auto;
 }
+
 span.key {
   color: #656565;
 }
@@ -60,4 +69,4 @@ span.key {
 .space-between {
   display: flex;
   justify-content: space-between;
-}
+}
\ No newline at end of file