responsive design

vaibhavphutane · Jun 16, 2020 · 6c8d09c · 6c8d09c
1 parent 1d4d2db
commit 6c8d09c
Show file tree

Hide file tree

Showing 3 changed files with 86 additions and 57 deletions.
diff --git a/src/app/crime/crime.component.css b/src/app/crime/crime.component.css
@@ -20,12 +20,6 @@
   text-align: center;
 }
 
-.result-container img {
-  display: block;
-  margin: auto;
-  margin-top: 20px;
-  width: 100%;
-}
 
 /* Loader */
 .wrap-loader {
@@ -166,6 +160,45 @@
   padding: 20px;
 }
 
-h3 {
-  padding-top: 15px;
+
+.img-container {
+  display: flex;
+  overflow-x: auto;
+}
+
+.img-container img {
+  width: 10%;
+  margin-left: 10px;
+  margin-right: 10px;
+}
+.result-container {
+  display: flex;
+  margin-top: 20px;
+  margin-left: 10px;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.result-container img {
+  width: 100%;
+  margin: auto;
+  margin-bottom: 20px;
+  padding-right: 20px;
+}
+::-webkit-scrollbar {
+  width: 1px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+
 }
diff --git a/src/app/crime/crime.component.html b/src/app/crime/crime.component.html
@@ -1,56 +1,51 @@
 <div class="wrapper">
   <div class="overlay">
-     <div class="wrap-track-status">
-           <div class="" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
-              <div class="div-tab col-md-12">
-                <div class="header">
-                  <img src="../../assets/images/logo.JPG" alt="">
-                  <h3>Image Analyser for case number: {{caseNumber}}</h3>
+    <div class="wrap-track-status">
+      <div class="" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
+        <div class="div-tab col-md-12">
+          <div class="header">
+            <img src="../../assets/images/logo.JPG" alt="">
+            <h3>Image Analyser for case number: {{caseNumber}}</h3>
+          </div>
+          <div class="main-content">
+            <h5>[Click on the images below]</h5>
+            <div class="img-container">
+              <img *ngFor="let img of images" (click)="processImage(img.image)"
+                [ngClass]="{'active': selectedId === img.id }" [src]="img.image" alt="">
+            </div>
+            <div *ngIf="isProccessing">
+              <div class="wrap-loader">
+                <div class="loader-wrapper">
+                  <div class="sandwatch-holder">
+                    <div class="sandwatch-top"></div>
+                    <div class="sandwatch-bottom"></div>
+                  </div>
                 </div>
-                 <div class="div-tab col-md-8 col-sm-12">
-                    <div class="main-content">
-                       <h5>[Click on the images below]</h5>
-                       <div class="img-container">
-                          <div class="row">
-                             <div  *ngFor="let img of images" class="column">
-                              <img (click)="processImage(img.image)" [ngClass]="{'active': selectedId === img.id }" [src]="img.image" alt="">
-                             </div>
-                          </div>
-                       </div>
-                       <div class="content-wrap">
-                        <div *ngIf="processedImageURL" class="div-first">
-                           <img  [src]="processedImageURL" alt="">
-                        </div>
-                     </div>
-                       <div *ngIf="isProccessing">
-                        <div class="wrap-loader">
-                          <div class="loader-wrapper">
-                            <div class="sandwatch-holder">
-                              <div class="sandwatch-top"></div>
-                              <div class="sandwatch-bottom"></div>
-                            </div>
-                          </div>
-                        </div>
-                        <h3 class="text-center">Processing your image...</h3>
-                      </div>
-                    </div>
-                 </div>
-                 <div *ngIf="objects" class="div-tab object col-md-4 col-sm-12">
-                    <div class="panel panel-default drug-image-wrap">
-                       <div class="panel-heading">
-                          <h4>List of objects identified:</h4>
-                       </div>
-                       <div class="panel-body">
-                          <div class="row list-detail">
-                             <div class="col-md-4">
-                                <h4><span class="find"> {{objects}}</span></h4>
-                             </div>
-                          </div>
-                       </div>
+              </div>
+              <h3 class="text-center">Processing your image...</h3>
+            </div>
+          </div>
+          <div class="result-container">
+            <div *ngIf="processedImageURL">
+              <img [src]="processedImageURL" alt="">
+            </div>
+            <div *ngIf="objects">
+              <div class="panel panel-default">
+                <div class="panel-heading">
+                  <h5>List of objects identified:</h5>
+                </div>
+                <div class="panel-body">
+                  <div class="row list-detail">
+                    <div class="col-md-4">
+                      <h4><span class="find"> {{objects}}</span></h4>
                     </div>
-                 </div>
+                  </div>
+                </div>
               </div>
-           </div>
-     </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </div>
diff --git a/src/app/dynamic-prediction/dynamic-prediction.component.html b/src/app/dynamic-prediction/dynamic-prediction.component.html
@@ -2,3 +2,4 @@
   <video #recordingVideoElement class="size" autoPlay playsInline muted ></video>
   <canvas #canvasRef class="size" width="800" height="500"></canvas>
 </div>
+<ng-content></ng-content>