feat: apply new layout overhaul

src/app/modules/map/item/map-item.component.html

@@ -8,6 +8,7 @@
       trigger="show-more"
       [presentingElement]="routerOutlet.nativeEl"
       swipeToClose="true"
+      class="modal-large"
     >
       <ng-template>
         <app-map-single-modal [item]="item" style="height: 100%">
@@ -15,36 +16,35 @@
       </ng-template>
     </ion-modal>
     <stapps-skeleton-list-item *ngIf="!item"></stapps-skeleton-list-item>
+    <ion-button
+      size="small"
+      fill="clear"
+      class="close"
+      (click)="onCloseClick()"
+    >
+      <ion-icon name="circle-x"></ion-icon>
+    </ion-button>
   </ion-card-header>
   <ion-card-content>
-    <ion-grid>
-      <ion-row>
-        <ion-col size="7">
-          <ion-note>
-            <span *ngIf="item.address as address">
-              <span *ngIf="$any(item).inPlace"
-                >{{ $any(item).inPlace.name }},</span
-              >
-              {{ address.streetAddress }}, {{ address.addressLocality }}
-            </span>
-          </ion-note>
-        </ion-col>
-        <ion-col size="5">
-          <ion-button size="small" id="show-more-button"
-            >More&nbsp;<ion-icon name="information-circle"></ion-icon
-          ></ion-button>
-          <ion-modal
-            trigger="show-more-button"
-            swipeToClose="true"
-            [presentingElement]="routerOutlet.nativeEl"
-          >
-            <ng-template>
-              <app-map-single-modal [item]="item" style="height: 100%">
-              </app-map-single-modal>
-            </ng-template>
-          </ion-modal>
-        </ion-col>
-      </ion-row>
-    </ion-grid>
+    <ion-note>
+      <span *ngIf="item.address as address">
+        <span *ngIf="$any(item).inPlace">{{ $any(item).inPlace.name }},</span>
+        {{ address.streetAddress }}, {{ address.addressLocality }}
+      </span>
+    </ion-note>
+    <ion-button size="small" id="show-more-button" fill="clear">{{
+      'map.page.buttons.MORE' | translate
+    }}</ion-button>
+    <ion-modal
+      trigger="show-more-button"
+      swipeToClose="true"
+      [presentingElement]="routerOutlet.nativeEl"
+      class="modal-large"
+    >
+      <ng-template>
+        <app-map-single-modal [item]="item" style="height: 100%">
+        </app-map-single-modal>
+      </ng-template>
+    </ion-modal>
   </ion-card-content>
 </ion-card>