fixed an issue where the modal could not load new data

implemented scrolling to the different inventories

src/app/journal/journal-home/modal/modal.component.html

@@ -1,8 +1,10 @@
 <div id="myModal" class="modal-backdrop" (click)="cancel()">
   <!-- Modal content -->
-  <div class="modal-content" (click)="$event.stopPropagation()">
+  <span class="modal-content-own" (click)="$event.stopPropagation()">
+    @if(show){
     <ng-template
       *ngComponentOutlet="modalComponent; inputs: inputData"
     ></ng-template>
-  </div>
+    }
+  </span>
 </div>

src/app/journal/journal-home/modal/modal.component.scss

@@ -8,32 +8,17 @@
   width: 100%; 
   height: 100%; 
   overflow: auto; 
-  background-color: rgb(0,0,0); 
   background-color: rgba(0,0,0,0.4); 
   cursor: pointer;
 }
 
-/* Modal Content/Box */
-.modal-content {
-  background-color: #fefefe;
-  margin: 15% auto; /* 15% from the top and centered */
-  padding: 20px;
-  border: 1px solid #888;
-  width: 80%; /* Could be more or less, depending on screen size */
+.modal-content-own{
+  display: inline-block;
+  position: relative;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
   cursor: auto;
-}
-
-/* The Close Button */
-.close {
-  color: #aaa;
-  float: right;
-  font-size: 28px;
-  font-weight: bold;
-}
-
-.close:hover,
-.close:focus {
-  color: black;
-  text-decoration: none;
-  cursor: pointer;
+  // max-width: 80vw;
+  // z-index: 992;
 }

src/app/journal/journal-home/modal/modal.component.ts

@@ -12,6 +12,8 @@ export class ModalComponent {
   public inputData: any;
   public modalRef: any;
 
+  public show: boolean = false;
+
   ngOnInit() {
     this.modalRef = document.getElementById('myModal');
     this.modalAccessor.modal$.subscribe((data) => {
@@ -26,11 +28,12 @@ export class ModalComponent {
   }
 
   public open(): void {
-    console.log(this.modalRef);
+    this.show = true;
     this.modalRef!.style.display = 'block';
   }
 
   public close(): void {
+    this.show = false;
     this.modalRef!.style.display = 'none';
   }
 

src/app/journal/journal-inventory/food-details/food-details.component.html

@@ -1,4 +1,23 @@
-<p>food-details works!</p>
+<div class="details-title">{{ item.name }}</div>
+
+<div class="details-flex-row top-2">
+  <div>
+    <div class="details-value">{{ item.isReady }}</div>
+    <div class="details-label">Verzehrfertig</div>
+  </div>
+
+  <div>
+    <div class="details-value">{{ item.weight }}</div>
+    <div class="details-label">Gewicht</div>
+  </div>
+
+  <div>
+    <div class="details-value">{{ item.quantity }}</div>
+    <div class="details-label">Anzahl</div>
+  </div>
+</div>
+
+<div class="details-content">{{ item.description }}</div>
 
 <div class="vertical-button-wrapper-3">
   <ui-button

src/app/journal/journal-inventory/food-details/food-details.component.ts

@@ -14,7 +14,7 @@ export class FoodDetailsComponent {
     name: '',
     weight: 0,
     quantity: 0,
-    ready: false,
+    isReady: false,
   };
 
   public close(result: string): void {

src/app/journal/journal-inventory/journal-inventory.component.html

@@ -1,6 +1,6 @@
 <div class="inventory-container">
   <div class="item-container">
-    <ul ngbNav #nav="ngbNav" [(activeId)]="active" class="nav-tabs">
+    <ul ngbNav #nav="ngbNav" [(activeId)]="active" class="nav-tabs tab-tabs">
       <li [ngbNavItem]="1">
         <button ngbNavLink>Waffen und Rüstungen</button>
         <ng-template ngbNavContent>
@@ -21,7 +21,7 @@
       </li>
     </ul>
 
-    <div [ngbNavOutlet]="nav" class="mt-2"></div>
+    <div [ngbNavOutlet]="nav"></div>
   </div>
 
   <div class="money-container">
@@ -54,109 +54,144 @@
   </div>
 
   <div class="food-container">
+    <div class="heading-row">
+      <div class="heading">Name</div>
+      <div class="heading">Fertig</div>
+      <div class="heading">Gewicht</div>
+      <div class="heading">Anzahl</div>
+    </div>
     <div
       cdkDropList
-      class="example-list"
+      class="example-list table-content"
       (cdkDropListDropped)="drop($event, food, 'food')"
     >
-      <div class="heading-row">
-        <div class="heading">Name</div>
-        <div class="heading">Fertig</div>
-        <div class="heading">Gewicht</div>
-        <div class="heading">Anzahl</div>
-      </div>
       @for (item of food; let index = $index; track item) {
       <div class="example-box" cdkDrag (click)="openFoodDetails(index)">
         <div class="item">{{ item.name }}</div>
-        <div class="item">@if(item.ready){Ja} @else {Nein}</div>
+        <div class="item">@if(item.isReady){Ja} @else {Nein}</div>
         <div class="item">{{ item.weight }} Kg.</div>
         <div class="item">{{ item.quantity }}</div>
       </div>
       }
+      <ui-button
+        style="margin: 1rem"
+        [type]="'add'"
+        [size]="'xlarge'"
+        [color]="'primary'"
+        (click)="openFoodModal(false)"
+      ></ui-button>
     </div>
   </div>
 
   <!-- WEAPONS -->
   <ng-template #weaponTemplate>
-    <div
-      cdkDropList
-      class="example-list"
-      (cdkDropListDropped)="drop($event, weaponsAndArmor, 'weaponsAndArmor')"
-    >
+    <div class="table-container">
       <div class="heading-row">
         <div class="heading">Name</div>
         <div class="heading">Wert</div>
         <div class="heading">Gewicht</div>
         <div class="heading">Anzahl</div>
       </div>
-      @for (item of weaponsAndArmor; let index = $index; track item) {
       <div
-        class="example-box"
-        cdkDrag
-        (click)="openItemsDetails(weaponsAndArmor, index, 'weaponsAndArmor')"
+        cdkDropList
+        class="example-list table-content"
+        (cdkDropListDropped)="drop($event, weaponsAndArmor, 'weaponsAndArmor')"
       >
-        <div class="item">{{ item.name }}</div>
-        <div class="item">{{ item.value }} Gold</div>
-        <div class="item">{{ item.weight }} Kg.</div>
-        <div class="item">{{ item.quantity }}</div>
+        @for (item of weaponsAndArmor; let index = $index; track item) {
+        <div
+          class="example-box"
+          cdkDrag
+          (click)="openItemsDetails(weaponsAndArmor, index, 'weaponsAndArmor')"
+        >
+          <div class="item">{{ item.name }}</div>
+          <div class="item">{{ item.value }} Gold</div>
+          <div class="item">{{ item.weight }} Kg.</div>
+          <div class="item">{{ item.quantity }}</div>
+        </div>
+        }
+
+        <ui-button
+          style="margin: 1rem"
+          [type]="'add'"
+          [size]="'xlarge'"
+          [color]="'primary'"
+          (click)="openItemModal(false, 'weaponsAndArmor')"
+        ></ui-button>
       </div>
-      }
     </div>
   </ng-template>
 
   <!-- CONSUMABLES -->
   <ng-template #consumablesTemplate>
-    <div
-      cdkDropList
-      class="example-list"
-      (cdkDropListDropped)="drop($event, consumables, 'consumables')"
-    >
+    <div class="table-container">
       <div class="heading-row">
         <div class="heading">Name</div>
         <div class="heading">Wert</div>
         <div class="heading">Gewicht</div>
         <div class="heading">Anzahl</div>
       </div>
-      @for (item of consumables; let index = $index; track item) {
       <div
-        class="example-box"
-        cdkDrag
-        (click)="openItemsDetails(consumables, index, 'consumables')"
+        cdkDropList
+        class="example-list table-content"
+        (cdkDropListDropped)="drop($event, consumables, 'consumables')"
       >
-        <div class="item">{{ item.name }}</div>
-        <div class="item">{{ item.value }} Gold</div>
-        <div class="item">{{ item.weight }} Kg.</div>
-        <div class="item">{{ item.quantity }}</div>
+        @for (item of consumables; let index = $index; track item) {
+        <div
+          class="example-box"
+          cdkDrag
+          (click)="openItemsDetails(consumables, index, 'consumables')"
+        >
+          <div class="item">{{ item.name }}</div>
+          <div class="item">{{ item.value }} Gold</div>
+          <div class="item">{{ item.weight }} Kg.</div>
+          <div class="item">{{ item.quantity }}</div>
+        </div>
+        }
+        <ui-button
+          style="margin: 1rem"
+          [type]="'add'"
+          [size]="'xlarge'"
+          [color]="'primary'"
+          (click)="openItemModal(false, 'consumables')"
+        ></ui-button>
       </div>
-      }
     </div>
   </ng-template>
 
   <!-- MISCELLANEOUS -->
   <ng-template #miscTemplate>
-    <div
-      cdkDropList
-      class="example-list"
-      (cdkDropListDropped)="drop($event, miscellaneous, 'miscellaneous')"
-    >
+    <div class="table-container">
       <div class="heading-row">
         <div class="heading">Name</div>
         <div class="heading">Wert</div>
         <div class="heading">Gewicht</div>
         <div class="heading">Anzahl</div>
       </div>
-      @for (item of miscellaneous; let index = $index; track item) {
       <div
-        class="example-box"
-        cdkDrag
-        (click)="openItemsDetails(miscellaneous, index, 'miscellaneous')"
+        cdkDropList
+        class="example-list table-content"
+        (cdkDropListDropped)="drop($event, miscellaneous, 'miscellaneous')"
       >
-        <div class="item">{{ item.name }}</div>
-        <div class="item">{{ item.value }} Gold</div>
-        <div class="item">{{ item.weight }} Kg.</div>
-        <div class="item">{{ item.quantity }}</div>
+        @for (item of miscellaneous; let index = $index; track item) {
+        <div
+          class="example-box"
+          cdkDrag
+          (click)="openItemsDetails(miscellaneous, index, 'miscellaneous')"
+        >
+          <div class="item">{{ item.name }}</div>
+          <div class="item">{{ item.value }} Gold</div>
+          <div class="item">{{ item.weight }} Kg.</div>
+          <div class="item">{{ item.quantity }}</div>
+        </div>
+        }
+        <ui-button
+          style="margin: 1rem"
+          [type]="'add'"
+          [size]="'xlarge'"
+          [color]="'primary'"
+          (click)="openItemModal(false, 'miscellaneous')"
+        ></ui-button>
       </div>
-      }
     </div>
   </ng-template>
 </div>

src/app/journal/journal-inventory/journal-inventory.component.scss

@@ -7,22 +7,54 @@
     grid-template-columns: repeat(10, 1fr);
 }
 
+:host ::ng-deep .tab-pane{
+        height: 100%;
+        // border: 2px solid blue;
+      }
+
+// Item Container -> tab-pane -> table-container -> table-content 
+
 .item-container{
     grid-area: 1 / 1 / 11 / 7;
     border: 1px solid black;
+    display: flex;
+    flex-direction: column;
+
+    .tab-tabs{
+      height: 4rem
+    }
+
+    .tab-content{
+      // border: 3px solid red;
+      height: calc(100% - 4rem);
+    }
+
+    .table-container{
+      height: 100%;
+        display: flex;
+        flex-direction: column;
+    }
 
     .heading-row{
+      flex: 0 0 3rem;
       display: grid;
       grid-template-columns: 2fr 1fr 1fr 1fr;
       padding: 0 10px;;
     }
 
+    .table-content{
+      overflow: auto;
+      flex: 0 0 calc(99% - 3rem);
+      // border: 3px solid pink;
+    }
+
     .heading{
       font-size: 1.5rem;
       font-weight: 600;
       padding-left: 2rem;
     }
 
+
     .item{
       font-size: 1.25rem;
       font-weight: 600;
@@ -30,16 +62,16 @@
     }
 }
 
-.money-container{
-    grid-area: 1 / 8 / 6 / 11;
-     border: 1px solid black;
-}
+// Food Container
 
 .food-container{
     grid-area: 7 / 8 / 11 / 11;
     border: 1px solid black;
+    display: flex;
+    flex-direction: column;
 
     .heading-row{
+      flex: 0 0 3rem;
       display: grid;
       grid-template-columns: 2fr 1.5fr 1.5fr 1.5fr;
       padding: 0 10px;;
@@ -51,6 +83,11 @@
       padding-left: 1rem;
     }
 
+    .table-content{
+      overflow: auto;
+      flex: 0 0 calc(100% - 3rem);
+    }
+
     .example-box {
       grid-template-columns: 2fr 1.5fr 1.5fr 1.5fr;
     }
@@ -62,6 +99,11 @@
     }
 }
 
+.money-container{
+    grid-area: 1 / 8 / 6 / 11;
+     border: 1px solid black;
+}
+
 .example-list {
   max-width: 100%;
   border: solid 1px #ccc;

src/app/journal/journal-inventory/journal-inventory.component.ts

@@ -63,12 +63,12 @@ export class JournalInventoryComponent {
     });
     const resultSubscription = this.detailsAccessor.result$.subscribe(
       (result) => {
-        console.log(result);
+        // console.log('Result aus items-detail-panel:', result);
         if (result.state === 'delete') {
           list.splice(index, 1);
           this.updateDatabase(listName);
         } else if (result.state === 'update') {
-          this.openItemModal(list, index, listName);
+          this.openItemModal(true, listName, list, index);
         }
         resultSubscription.unsubscribe();
       }
@@ -81,47 +81,35 @@ export class JournalInventoryComponent {
     });
     const resultSubscription = this.detailsAccessor.result$.subscribe(
       (result) => {
-        console.log('result kam zurück:', result);
         if (result.state === 'delete') {
           this.food.splice(index, 1);
           this.dataAccessor.food = this.food;
         } else if (result.state === 'update') {
-          this.openFoodModal(index);
+          console.log('Details geschlossen mit aufruf zum update');
+          this.openFoodModal(true, index);
         }
         resultSubscription.unsubscribe();
       }
     );
   }
 
-  public updateDatabase(listname: string): void {
-    if (listname === 'weaponsAndArmor') {
-      this.dataAccessor.items = this.weaponsAndArmor;
-    } else if (listname === 'consumables') {
-      this.dataAccessor.consumables = this.consumables;
-    } else if (listname === 'miscellaneous') {
-      this.dataAccessor.miscellaneous = this.miscellaneous;
-    } else {
-      throw new Error('Unknown list name: ' + listname);
-    }
-  }
-
-  public updateMoney(): void {
-    this.dataAccessor.money = this.money;
-  }
-
-  public updateFood(): void {
-    this.dataAccessor.food = this.food;
-  }
-
-  public openFoodModal(index: number): void {
+  public openFoodModal(isUpdate: boolean, index?: number): void {
     this.modalAccessor.openModal(SimpleItemModalComponent, {
-      item: JSON.parse(JSON.stringify(this.food[index])),
+      item:
+        index !== undefined
+          ? JSON.parse(JSON.stringify(this.food[index]))
+          : undefined,
+      isUpdate: isUpdate,
+      isFood: true,
     });
     const resultSubscription = this.modalAccessor.result$.subscribe(
       (result) => {
         console.log('result kam zurück: ', result);
         if (result.state === 'update') {
-          this.food[index] = result.data;
+          this.food[index!] = result.data;
+          this.updateFood();
+        } else if (result.state === 'add') {
+          this.food.push(result.data);
           this.updateFood();
         }
         resultSubscription.unsubscribe();
@@ -130,18 +118,23 @@ export class JournalInventoryComponent {
   }
 
   public openItemModal(
-    list: SimpleItem[],
-    index: number,
-    listname: string
+    isUpdate: boolean,
+    listname: string,
+    list?: SimpleItem[],
+    index?: number
   ): void {
     this.modalAccessor.openModal(SimpleItemModalComponent, {
-      item: JSON.parse(JSON.stringify(list[index])),
+      item:
+        list && index !== undefined
+          ? JSON.parse(JSON.stringify(list[index]))
+          : undefined,
+      isUpdate: isUpdate,
     });
     const resultSubscription = this.modalAccessor.result$.subscribe(
       (result) => {
-        console.log(result);
+        console.log('Result vom Modal kam zurück:', result);
         if (result.state === 'update') {
-          list[index] = result.data;
+          list![index!] = result.data;
           if (listname === 'weaponsAndArmor') {
             this.updateDatabase('weaponsAndArmor');
           } else if (listname === 'consumables') {
@@ -151,9 +144,44 @@ export class JournalInventoryComponent {
           } else {
             throw new Error('Unknown list name: ' + listname);
           }
+        } else if (result.state === 'add') {
+          if (listname === 'weaponsAndArmor') {
+            this.weaponsAndArmor.push(result.data);
+            this.updateDatabase('weaponsAndArmor');
+          } else if (listname === 'consumables') {
+            this.consumables.push(result.data);
+            this.updateDatabase('consumables');
+          } else if (listname === 'miscellaneous') {
+            this.miscellaneous.push(result.data);
+            this.updateDatabase('miscellaneous');
+          } else {
+            throw new Error('Unknown list name: ' + listname);
+          }
         }
         resultSubscription.unsubscribe();
       }
     );
   }
+
+  // Updates
+
+  public updateDatabase(listname: string): void {
+    if (listname === 'weaponsAndArmor') {
+      this.dataAccessor.items = this.weaponsAndArmor;
+    } else if (listname === 'consumables') {
+      this.dataAccessor.consumables = this.consumables;
+    } else if (listname === 'miscellaneous') {
+      this.dataAccessor.miscellaneous = this.miscellaneous;
+    } else {
+      throw new Error('Unknown list name: ' + listname);
+    }
+  }
+
+  public updateMoney(): void {
+    this.dataAccessor.money = this.money;
+  }
+
+  public updateFood(): void {
+    this.dataAccessor.food = this.food;
+  }
 }

src/app/journal/journal-inventory/simple-item-modal/simple-item-modal.component.html

@@ -1,26 +1,45 @@
-<div style="padding-bottom: 10rem">
-  <input type="text" placeholder="Name" [(ngModel)]="item.name" />
+<div class="modal-dimensions">
+  <div class="details-title">
+    @if(!isUpdate){Gegenstand erstellen}@else{Gegenstand bearbeiten}
+  </div>
+
+  <input type="text" placeholder="Name" [(ngModel)]="name" />
   <label>Name</label><br />
-  <input type="number" placeholder="Wert" [(ngModel)]="item.value" />
+  @if(isFood){
+  <input type="checkbox" [(ngModel)]="isReady" />
+  <label>Verzehrfertig</label><br />
+  }@else {
+  <input type="number" placeholder="Wert" [(ngModel)]="value" />
   <label>Wert</label><br />
-  <input type="number" placeholder="Gewicht" [(ngModel)]="item.weight" />
+  }
+  <input type="number" placeholder="Gewicht" [(ngModel)]="weight" />
   <label>Gewicht</label><br />
-  <input type="number" placeholder="Anzahl" [(ngModel)]="item.quantity" />
+  <input type="number" placeholder="Anzahl" [(ngModel)]="quantity" />
   <label>Anzahl</label><br />
-  <textarea placeholder="Beschreibung" [(ngModel)]="item.description"></textarea
+  <textarea placeholder="Beschreibung" [(ngModel)]="description"></textarea
   ><label>Beschreibung</label>
-</div>
-<div class="vertical-button-wrapper-2">
-  <ui-button
-    [type]="'update'"
-    [size]="'xlarge'"
-    [color]="'primary'"
-    (click)="update()"
-  ></ui-button>
-  <ui-button
-    [type]="'dismiss'"
-    [size]="'xlarge'"
-    [color]="'primary'"
-    (click)="cancel()"
-  ></ui-button>
+  <div class="button-wrapper-2-block">
+    @if(isUpdate){
+    <ui-button
+      [type]="'update'"
+      [size]="'xlarge'"
+      [color]="'primary'"
+      (click)="update()"
+    ></ui-button>
+    }@else{
+    <ui-button
+      *ngIf="!isUpdate"
+      [type]="'add'"
+      [size]="'xlarge'"
+      [color]="'primary'"
+      (click)="add()"
+    ></ui-button>
+    }
+    <ui-button
+      [type]="'dismiss'"
+      [size]="'xlarge'"
+      [color]="'primary'"
+      (click)="cancel()"
+    ></ui-button>
+  </div>
 </div>

src/app/journal/journal-inventory/simple-item-modal/simple-item-modal.component.scss

@@ -0,0 +1,4 @@
+.modal-dimensions{
+    width: 40vw;
+    background-color: antiquewhite;
+}

src/app/journal/journal-inventory/simple-item-modal/simple-item-modal.component.ts

@@ -9,12 +9,81 @@ import { ModalService } from 'src/services/modal/modal.service';
 export class SimpleItemModalComponent {
   public constructor(private modalAccessor: ModalService) {}
   @Input() public item: any;
+  @Input() public isUpdate: boolean = false;
+  @Input() public isFood: boolean = false;
+
+  public name: string = '';
+  public description: string = '';
+  public quantity: number = 0;
+  public weight: number = 0;
+  public value: number = 0;
+  public isReady: boolean = false;
+
+  public ngOnInit(): void {
+    console.log('ngOnInit() in simple-item-modal.component.ts');
+    console.log('isUpdate: ', this.isUpdate);
+    console.log('isFood: ', this.isFood);
+    console.log('item: ', this.item);
+
+    if (this.isUpdate) {
+      this.loadItem();
+    }
+  }
 
   public cancel(): void {
     this.modalAccessor.handleModalClosing('cancel', undefined);
+    this.resetItem();
+  }
+
+  public add(): void {
+    this.modalAccessor.handleModalClosing('add', this.createItem());
+    this.resetItem();
   }
 
   public update(): void {
-    this.modalAccessor.handleModalClosing('update', this.item);
+    this.modalAccessor.handleModalClosing('update', this.createItem());
+    this.resetItem();
+  }
+
+  private loadItem(): void {
+    this.name = this.item.name;
+    this.description = this.item.description;
+    this.quantity = this.item.quantity;
+    this.weight = this.item.weight;
+    this.value = this.item.value;
+    this.isReady = this.item.isReady;
+  }
+
+  private createItem(): any {
+    if (this.isFood) {
+      return {
+        name: this.name,
+        isReady: this.isReady,
+        description: this.description,
+        quantity: this.quantity,
+        weight: this.weight,
+      };
+    } else {
+      return {
+        name: this.name,
+        description: this.description,
+        quantity: this.quantity,
+        weight: this.weight,
+        value: this.value,
+      };
+    }
+  }
+
+  private resetItem(): void {
+    this.name = '';
+    this.description = '';
+    this.quantity = 0;
+    this.weight = 0;
+    this.value = 0;
+    this.isReady = false;
+  }
+
+  public ngOnDestroy(): void {
+    console.log('ngOnDestroy() in simple-item-modal.component.ts');
   }
 }

src/interfaces/food.ts

@@ -1,6 +1,6 @@
 export interface Food {
   name: string;
-  ready: boolean;
+  isReady: boolean;
   quantity: number;
   weight: number;
   description?: string;

src/services/data/data.service.ts

@@ -763,13 +763,37 @@ export class DataService {
     {
       name: 'Brot',
       quantity: 7,
-      ready: true,
+      isReady: true,
       weight: 0.5,
     },
     {
       name: 'Suppe',
       quantity: 4,
-      ready: true,
+      isReady: true,
+      weight: 0.5,
+    },
+    {
+      name: 'Fleisch',
+      quantity: 2,
+      isReady: false,
+      weight: 0.5,
+    },
+    {
+      name: 'Käse',
+      quantity: 1,
+      isReady: false,
+      weight: 0.5,
+    },
+    {
+      name: 'Bier',
+      quantity: 1,
+      isReady: false,
+      weight: 0.5,
+    },
+    {
+      name: 'Wein',
+      quantity: 1,
+      isReady: false,
       weight: 0.5,
     },
   ];
@@ -779,7 +803,7 @@ export class DataService {
   }
 
   public set food(newValue: Food[]) {
-    console.log('food: ', newValue);
+    // console.log('food: ', newValue);
     this._food = newValue;
   }
 

src/styles.scss

@@ -174,6 +174,28 @@ input[type="checkbox"]:checked {
     justify-content: center;
 }
 
+.button-wrapper-3-block{
+    display: grid;
+    grid-template-rows: 1fr 1fr 1fr;
+    grid-template-columns: 1fr;
+    gap: 10px;
+    align-items: center;
+    justify-content: center;
+    margin-top: 2rem;
+    padding-bottom: 2rem;
+}
+
+.button-wrapper-2-block{
+    display: grid;
+    grid-template-rows: 1fr 1fr;
+    grid-template-columns: 1fr;
+    gap: 10px;
+    align-items: center;
+    justify-content: center;
+    margin-top: 2rem;
+    padding-bottom: 2rem;
+}
+
 //
 
 .details-title{