Merge pull request #128 from Apes2getherStrong/wtg-45-enhance-map-loc…

…ations-details-layout-in-modal Wtg 45 enhance map locations details layout in modal
Apes2getherStrong · Sep 27, 2024 · c2fcd50 · c2fcd50
2 parents 4037870 + 23a17e2
commit c2fcd50
Show file tree

Hide file tree

Showing 12 changed files with 72 additions and 144 deletions.
diff --git a/src/app/map-location/map-location-edit/map-location-edit.component.html b/src/app/map-location/map-location-edit/map-location-edit.component.html
@@ -73,7 +73,8 @@ <h2 class="card-title">Audio Files</h2>
 
                   <label class="mt-3 card-text" for="audioFile">Upload Audio</label>
                   <div>
-                    <input #audioFileInput (change)="onAudioFileSelected($event)" class="form-control mr-2" id="audioFile"
+                    <input #audioFileInput (change)="onAudioFileSelected($event)" class="form-control mr-2"
+                           id="audioFile"
                            type="file">
                   </div>
                 </div>

diff --git a/src/app/map-location/map-location-info-window/map-location-info-window.component.css b/src/app/map-location/map-location-info-window/map-location-info-window.component.css
@@ -4,11 +4,10 @@
   flex-direction: column;
   align-items: center;
   grid-area: photo-wrap;
-  width: 15vw;
-  min-height: 10vw;
-}
-
+  width: 200px;
+  height: 200px;
 
+}
 
 .details-button {
   display: flex;
@@ -38,16 +37,18 @@
 }
 
 .photo {
-  height: 100%;
-  width: 15vw;
-  overflow: hidden;
-}
 
-.photo img {
-  height: 100%;
+  height: 85%;
   width: 100%;
+  object-fit: cover;
+
 }
 
+
 .info {
   text-align: center;
+  width: 150px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
diff --git a/src/app/map-location/map-location-info-window/map-location-info-window.component.html b/src/app/map-location/map-location-info-window/map-location-info-window.component.html
@@ -6,15 +6,12 @@
   </div>
 
 
-  <div class="photo">
-    <img *ngIf="imageUrl" [src]="imageUrl">
-    <img *ngIf="!imageUrl" src="https://www.elegantthemes.com/blog/wp-content/uploads/2020/02/000-404.png">
-    <!--<img *ngIf="!imageUrl" src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/dcc3094e-c043-4078-bad1-e65737f5b8e8/dc5b8mp-015b238d-43c6-4f1c-8562-38c98a20017c.jpg/v1/fill/w_1024,h_768,q_75,strp/stock_pohoto_20_for_some_photo_manipulation_by_babine326_dc5b8mp-fullview.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9NzY4IiwicGF0aCI6IlwvZlwvZGNjMzA5NGUtYzA0My00MDc4LWJhZDEtZTY1NzM3ZjViOGU4XC9kYzViOG1wLTAxNWIyMzhkLTQzYzYtNGYxYy04NTYyLTM4Yzk4YTIwMDE3Yy5qcGciLCJ3aWR0aCI6Ijw9MTAyNCJ9XV0sImF1ZCI6WyJ1cm46c2VydmljZTppbWFnZS5vcGVyYXRpb25zIl19.l2WC0hFzadetmSbDFvEfb2gyn7SjBGfSdq9kWD4g2kQ" alt="map-location-photo">-->
-  </div>
+
+  <img class="photo" *ngIf="imageUrl" [src]="imageUrl">
+  <img  class="photo" *ngIf="!imageUrl" src="https://loyaltystarter.io/wp-content/themes/unbound/images/No-Image-Found-400x264.png">
 
   <div class="info">
     <strong>{{mapLocation.name}}</strong>
   </div>
 
-
 </div>
diff --git a/src/app/map-location/map-location-modal/map-location-modal.component.css b/src/app/map-location/map-location-modal/map-location-modal.component.css
@@ -1,83 +1,7 @@
-.map-location-grid-container {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 10px;
-  grid-template-areas:
-    "photo-wrap audio-list"
-    "info-wrap audio-list";
-}
-
-.photo-wrap {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  grid-area: photo-wrap;
-}
-
-.photo {
-  width: 200px;
-  height: 200px;
-  background-color: cadetblue;
-  overflow: hidden;
-}
-
-.photo img {
-  height: 100%;
-  width: 100%;
-}
-
-.info-wrap {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  grid-area: info-wrap;
-  background-color: white;
-  border: #10898d 1px solid;
-  padding: 10px;
-}
-
-.animation {
-  animation: background-change 1s;
-  animation-duration: 1s;
-}
-
-.audio-list {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-  grid-area: audio-list;
-  padding: 10px;
-}
-
-.audio-file {
-  width: 325px;
-}
-
-@media (max-width: 1200px) {
-  .map-location-grid-container {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 10px;
-    grid-template-areas:
-    "photo-wrap info-wrap"
-    "audio-list audio-list";
-  }
-}
-
-
-@media (max-width: 600px) {
-  .map-location-grid-container {
-    grid-template-columns: 1fr;
-    grid-template-areas:
-      "photo-wrap"
-      "info-wrap"
-      "audio-list";
-  }
-
-  .audio-file {
-    width: 225px;
-  }
-
+.map-location-modal-image {
+  margin-top: 10px;
+  margin-bottom: 10px;
+  max-width: 40vw;
+  max-height: 40vh;
+  object-fit: contain;
 }
diff --git a/src/app/map-location/map-location-modal/map-location-modal.component.html b/src/app/map-location/map-location-modal/map-location-modal.component.html
@@ -1,27 +1,31 @@
-<div class="map-location-grid-container">
-  <div class="photo-wrap">
-    <div class="photo">
-      <img *ngIf="mapLocationImageUrl" [src]="mapLocationImageUrl">
+<div>
+  <div class="card">
+    <div class="card-header">
+      <h2>Map location details</h2>
     </div>
-  </div>
-  <div class="info-wrap">
-    <p style="text-align: center"><strong>Map Location info: </strong></p>
-    <p>Name: {{mapLocation.name}}</p>
-    <p>Description: {{mapLocation.description}}</p>
-  </div>
-  <div class="audio-list">
-    <div *ngFor="let audioItem of audioData">
-      <!--<audio controls *ngIf="audioItem.url">-->
-      <audio class="audio-file" controls>
-        <source [src]="audioItem.url" type="audio/mpeg"/>
-        Your browser does not support the audio element.
-      </audio>
-      <p>{{audioItem.audio.name}}
-      </p>
+    <div class="card-body d-flex flex-column align-items-center">
+      <img *ngIf="mapLocationImageUrl" [src]="mapLocationImageUrl" class="card-img-top map-location-modal-image" alt="map location image">
+      <img *ngIf="!mapLocationImageUrl" src="https://loyaltystarter.io/wp-content/themes/unbound/images/No-Image-Found-400x264.png" class="card-img-top map-location-modal-image" alt="map location image">
+      <h5 class="card-title">{{mapLocation.name}}</h5>
+      <p class="card-text">{{mapLocation.description}}</p>
+      <a (click)="onCalculateRoute()" class="btn btn-primary" style="background-color: #10898d"><i class="fa fa-location-arrow"></i> Navigate</a>
     </div>
+    <ul class="list-group list-group-flush">
+      <li class="list-group-item" *ngFor="let audioItem of audioData">
+        <div class="card">
+          <div class="card-header d-flex align-items-center">
+            {{ audioItem.audio.name }}
+          </div>
+          <div class="card-body d-flex justify-content-center">
+            <div class="col-12 col-md-6">
+              <audio class="w-100" controls>
+                <source [src]="audioItem.url" type="audio/mpeg"/>
+                Your browser does not support the audio element.
+              </audio>
+            </div>
+          </div>
+        </div>
+      </li>
+    </ul>
   </div>
-  <div  class="route-button-container">
-    <button (click)="onCalculateRoute()">Trace</button>
-  </div>
-  <button (click)="tmpOnClick()">snackbar</button>
 </div>
diff --git a/src/app/map-location/map-location-modal/map-location-modal.component.ts b/src/app/map-location/map-location-modal/map-location-modal.component.ts
@@ -16,7 +16,7 @@ import {MapService} from "../../shared/map/map.service";
   standalone: true,
   imports: [
     NgForOf,
-    NgIf
+    NgIf,
   ],
   animations: [],
   templateUrl: './map-location-modal.component.html',
@@ -99,9 +99,6 @@ export class MapLocationModalComponent implements OnInit {
     });
   }
 
-  tmpOnClick() {
-    this.snackbarService.displaySnackbar("This is my message to the world", SnackbarType.DARK);
-  }
 
   onCalculateRoute() {
 

diff --git a/src/app/shared/map/map.component.html b/src/app/shared/map/map.component.html
@@ -16,9 +16,12 @@
   </map-marker>
 
   <map-info-window>
-    <app-map-location-info-window [mapLocation]="infoWindowMapLocation" >
+    <div style="overflow: hidden">
+      <app-map-location-info-window [mapLocation]="infoWindowMapLocation" >
+
+      </app-map-location-info-window>
+    </div>
 
-    </app-map-location-info-window>
   </map-info-window>
 
   <map-directions-renderer></map-directions-renderer>

diff --git a/src/app/shared/modal/modal.component.css b/src/app/shared/modal/modal.component.css
@@ -15,22 +15,15 @@
   background: white;
   width: 80%;
   height: 80%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
   position: relative;
   border-radius: 10px;
-  overflow: auto;
-  padding: 10px;
 }
 
 .close-btn {
-  position: absolute;
-  top: 10px;
-  right: 10px;
   cursor: pointer;
   background: none;
   border: none;
-  font-size: 20px;
+  font-size: 30px;
+  color: white;
+  margin-right: 20px;
 }
diff --git a/src/app/shared/modal/modal.component.html b/src/app/shared/modal/modal.component.html
@@ -1,5 +1,13 @@
 <div class="modal-container">
   <div class="modal-content">
-    <button class="close-btn" (click)="closeModal()">X</button>
+    <div class="d-flex justify-content-end align-items-center" style="background-color: #046169; width: 100%; ">
+      <button class="close-btn" (click)="closeModal()">
+        <i class="fa fa-close"></i>
+      </button>
+    </div>
+
+    <div class="modal-filling" style="overflow: auto; padding: 20px">
+
+    </div>
   </div>
 </div>
diff --git a/src/app/shared/modal/modal.service.ts b/src/app/shared/modal/modal.service.ts
@@ -30,7 +30,7 @@ export class ModalService {
     const modalElement = (modalComponentRef.hostView as any).rootNodes[0] as HTMLElement;
     const contentElement = (contentComponentRef.hostView as any).rootNodes[0] as HTMLElement;
 
-    modalElement.querySelector('.modal-content')?.appendChild(contentElement);
+    modalElement.querySelector('.modal-filling')?.appendChild(contentElement);
 
     //attach modal to the DOM
     this.appRef.attachView(modalComponentRef.hostView);

diff --git a/src/app/shared/snackbar/snackbar.component.ts b/src/app/shared/snackbar/snackbar.component.ts
@@ -10,7 +10,7 @@ import {animate, state, style, transition, trigger} from "@angular/animations";
     animations: [
         trigger('moveDiv', [
             state('initial', style({ top: '-200px' })),
-            state('final', style({ top: '20px' })),
+            state('final', style({ top: '10%' })),
             transition('initial => final', [
                 animate('0.7s ease')
             ]),

diff --git a/src/styles.css b/src/styles.css
@@ -6,21 +6,21 @@ html, body {
 
 @media (max-width: 1000px) {
   * {
-    font-size: 0.9rem;
+    font-size: 0.8rem;
   }
 }
 
 
 @media (min-width: 1001px) and (max-width: 2000px) {
   * {
-    font-size: 0.9rem;
+    font-size: 1rem;
   }
 }
 
 
 @media (min-width: 2001px) {
   * {
-    font-size: 1.5rem;
+    font-size: 1.2rem;
   }
 }