sized the weapons container and made its content scrollable

src/app/journal/journal-stats/ability-panel/ability-panel.component.html

@@ -1,33 +1,3 @@
-<!-- <div class="ability-panel-container">
-  <ul ngbNav #nav="ngbNav" [(activeId)]="active" class="nav-tabs">
-    <li [ngbNavItem]="1">
-      <button ngbNavLink>Fähigkeiten</button>
-      <ng-template ngbNavContent>
-        <ability-table></ability-table>
-      </ng-template>
-    </li>
-    <li [ngbNavItem]="2">
-      <button ngbNavLink>Eigenschaften</button>
-      <ng-template ngbNavContent>
-        <trait-table></trait-table>
-      </ng-template>
-    </li>
-    <li [ngbNavItem]="3">
-      <button ngbNavLink>Zauberplätze</button>
-      <ng-template ngbNavContent>
-        <spellslots></spellslots>
-      </ng-template>
-    </li>
-    <li [ngbNavItem]="4">
-      <button ngbNavLink>Übungen</button>
-      <ng-template ngbNavContent>
-        <proficiencies-table></proficiencies-table>
-      </ng-template>
-    </li>
-  </ul>
-
-  <div [ngbNavOutlet]="nav"></div>
-</div> -->
 <div class="ability-panel-container">
   <div class="tab-row">
     <button
@@ -49,7 +19,7 @@
       (click)="active = 3"
       [class]="active === 3 ? 'active' : ''"
     >
-      Zauberplätze
+      Zaubern
     </button>
     <button
       class="tab-button"
@@ -59,7 +29,6 @@
       Übungen
     </button>
   </div>
-  <!-- <div class="tab-content"> -->
   @switch(active){ @case(1){
   <ability-table #abilityTable></ability-table>
   } @case(2){
@@ -68,9 +37,7 @@
   <spellslots #spellslots></spellslots>
   } @case(4){
   <proficiencies-table #proficienciesTable></proficiencies-table>
-  } }
-  <!-- <button (click)="openModal()">+</button> -->
-  @if(active === 1 || active === 2){
+  } } @if(active === 1 || active === 2){
   <ui-button
     [type]="'add'"
     [size]="'xlarge'"
@@ -88,5 +55,4 @@
   >
   </ui-button>
   }
-  <!-- </div> -->
 </div>

src/app/journal/journal-stats/ability-panel/ability-panel.component.scss

@@ -37,8 +37,8 @@ proficiencies-table{
 }
 
 .tab-button{
-    height: 2rem;
-    font-size: 1.25rem;
+    height: 2.25rem;
+    font-size: 1.375rem;
     font-weight: 600;
     color: black;
     border: 1px solid black !important;
@@ -46,7 +46,7 @@ proficiencies-table{
     background-color: var(--primary-color-light);
 
     &.active{
-        height: 2.5rem;
+        height: 2.75rem;
         background-color: var(--primary-color);
     }
 }

src/app/journal/journal-stats/life-container/life/life.component.html

@@ -19,9 +19,10 @@
     </div>
   </div>
   <div class="life-box-buttons">
-    <button (click)="addHitPoints()">Heilung +</button>
-    <button (click)="removeHitPoints()">Schaden -</button>
-    <button (click)="addTemporaryHitPoints()">Temporäre Trefferpunkte +</button>
+    <button class="life-button" (click)="addHitPoints()">Heilung +</button>
+    <button class="life-button" (click)="addTemporaryHitPoints()">
+      Temporäre Trefferpunkte +
+    </button>
+    <button class="life-button" (click)="removeHitPoints()">Schaden -</button>
   </div>
-  width: {{ getWidth() }} | height: {{ getHeight() }}
 </div>

src/app/journal/journal-stats/life-container/life/life.component.scss

@@ -1,8 +1,10 @@
 .life-box{
-    border: solid 1px black;
     width: 100%;
     height: 100%;
-    // position: relative;
+    border: solid 1px var(--border-color);
+    background-color: var(--field-background-color);
+    box-shadow: var(--shadow-small);
+    border-radius: 10px;
 }
 
 .life-box-name{
@@ -16,6 +18,9 @@
     display: flex;
     flex-direction: row;
     height: 4rem;
+    margin: 0 0.5rem;
+    border-radius: 10px;
+    overflow: hidden;
 }
 
 .life-box-bar-current{
@@ -39,5 +44,17 @@
 
 .life-box-buttons{
     display: flex;
-    flex-direction: column;
+    justify-content: space-between;
+    margin: 1rem;
+    // flex-direction: column;
+}
+
+.life-button{
+    min-height: 2rem;
+    font-size: 1.25rem;
+    font-weight: 500;
+    border: solid 1px var(--border-color);
+    background-color: var(--quaternary-color-light);
+    box-shadow: var(--shadow-small);
+    border-radius: 10px;
 }

src/app/journal/journal-stats/life-container/life/life.component.ts

@@ -100,12 +100,4 @@ export class LifeComponent {
       temporaryHitPoints: this.temporaryHitPoints,
     };
   }
-
-  public getWidth(): string {
-    return window.innerWidth + 'px';
-  }
-
-  public getHeight(): string {
-    return window.innerHeight + 'px';
-  }
 }

src/app/journal/journal-stats/weapons-container/spell-table/spell-table.component.html

@@ -1,9 +1,4 @@
-<div
-  id="spells-table"
-  cdkDropList
-  class="example-list"
-  (cdkDropListDropped)="dropSpells($event)"
->
+<div class="spell-box">
   <div class="heading-list">
     <div>Typ</div>
     <div>Name</div>
@@ -16,62 +11,59 @@
     <div>Reichweite</div>
   </div>
   <div
-    class="example-box"
-    *ngFor="let spell of spells; let index = index"
-    cdkDrag
-    (click)="openDetailsPanel(index)"
+    id="spells-table"
+    cdkDropList
+    class="example-list table-content"
+    (cdkDropListDropped)="dropSpells($event)"
   >
-    <!--  Range Icon -->
-    <ng-container
-      [ngTemplateOutlet]="distanceIconTemplate"
-      [ngTemplateOutletContext]="{ spell: spell }"
-    ></ng-container>
-    <div class="vertical-line"></div>
-
-    <!-- Name -->
-    <ng-container
-      [ngTemplateOutlet]="spellNameTemplate"
-      [ngTemplateOutletContext]="{ spell: spell }"
-    ></ng-container>
-    <div class="vertical-line"></div>
-
-    <!-- Level -->
-    <ng-container
-      [ngTemplateOutlet]="spellLevelTemplate"
-      [ngTemplateOutletContext]="{ spell: spell }"
-    ></ng-container>
-    <div class="vertical-line"></div>
-
-    <!-- Attack -->
-    <ng-container
-      [ngTemplateOutlet]="spellAttackTemplate"
-      [ngTemplateOutletContext]="{ spell: spell }"
-    ></ng-container>
-    <div class="vertical-line"></div>
-
-    <!-- Damage/Heal -->
-    <ng-container
-      [ngTemplateOutlet]="spellDamageTemplate"
-      [ngTemplateOutletContext]="{ spell: spell }"
-    ></ng-container>
-    <div class="vertical-line"></div>
-
-    <!-- Range -->
-    <ng-container
-      [ngTemplateOutlet]="spellRangeTemplate"
-      [ngTemplateOutletContext]="{ spell: spell }"
-    ></ng-container>
+    <div
+      class="example-box"
+      *ngFor="let spell of spells; let index = index"
+      cdkDrag
+      (click)="openDetailsPanel(index)"
+    >
+      <!--  Range Icon -->
+      <ng-container
+        [ngTemplateOutlet]="distanceIconTemplate"
+        [ngTemplateOutletContext]="{ spell: spell }"
+      ></ng-container>
+      <div class="vertical-line"></div>
+
+      <!-- Name -->
+      <ng-container
+        [ngTemplateOutlet]="spellNameTemplate"
+        [ngTemplateOutletContext]="{ spell: spell }"
+      ></ng-container>
+      <div class="vertical-line"></div>
+
+      <!-- Level -->
+      <ng-container
+        [ngTemplateOutlet]="spellLevelTemplate"
+        [ngTemplateOutletContext]="{ spell: spell }"
+      ></ng-container>
+      <div class="vertical-line"></div>
+
+      <!-- Attack -->
+      <ng-container
+        [ngTemplateOutlet]="spellAttackTemplate"
+        [ngTemplateOutletContext]="{ spell: spell }"
+      ></ng-container>
+      <div class="vertical-line"></div>
+
+      <!-- Damage/Heal -->
+      <ng-container
+        [ngTemplateOutlet]="spellDamageTemplate"
+        [ngTemplateOutletContext]="{ spell: spell }"
+      ></ng-container>
+      <div class="vertical-line"></div>
+
+      <!-- Range -->
+      <ng-container
+        [ngTemplateOutlet]="spellRangeTemplate"
+        [ngTemplateOutletContext]="{ spell: spell }"
+      ></ng-container>
+    </div>
   </div>
-
-  <!-- Add Button -->
-  <ui-button
-    style="margin: 1rem"
-    [type]="'add'"
-    [size]="'xlarge'"
-    [color]="'primary'"
-    (click)="openSpellModal()"
-  >
-  </ui-button>
 </div>
 
 <!-- Templates -->

src/app/journal/journal-stats/weapons-container/spell-table/spell-table.component.scss

@@ -28,14 +28,26 @@
               0 3px 10px 2px rgba(0, 0, 0, 0.12);
 }
 
+.spell-box{
+  height: 100%;
+  display:flex;
+  flex-direction: column;
+}
+
 .heading-list{
-  margin: 10px;
+  flex: 0 0 3rem;
+  margin: 0.5rem 0.625rem;
   display: grid;
   grid-template-columns: 6fr 20fr 10fr 8fr 20fr 16fr;
   text-align:center;
   font-weight: 700;
 }
 
+.table-content{
+  flex: 0 0 calc(100% - 4rem);
+  overflow-y: auto;
+    }
+
 .bold{
   font-weight: bold;
 }

src/app/journal/journal-stats/weapons-container/weapon-table/weapon-table.component.html

@@ -1,9 +1,4 @@
-<div
-  id="weapons-table"
-  cdkDropList
-  class="example-list"
-  (cdkDropListDropped)="dropWeapons($event)"
->
+<div class="weapons-box">
   <div class="heading-list">
     <div>Typ</div>
     <div>Name</div>
@@ -12,45 +7,44 @@
     <div>Reichweite</div>
   </div>
   <div
-    class="example-box"
-    *ngFor="let weapon of weapons; let index = index"
-    cdkDrag
-    (click)="openDetailsPanel(index)"
+    id="weapons-table"
+    cdkDropList
+    class="example-list table-content"
+    (cdkDropListDropped)="dropWeapons($event)"
   >
-    <!--  Range Icon -->
-    <ng-container
-      [ngTemplateOutlet]="distanceIconTemplate"
-      [ngTemplateOutletContext]="{ weapon: weapon }"
-    ></ng-container>
-    <div class="vertical-line"></div>
-    <ng-container
-      [ngTemplateOutlet]="weaponNameTemplate"
-      [ngTemplateOutletContext]="{ weapon: weapon }"
-    ></ng-container>
-    <div class="vertical-line"></div>
-    <ng-container
-      [ngTemplateOutlet]="weaponAttackTemplate"
-      [ngTemplateOutletContext]="{ weapon: weapon }"
-    ></ng-container>
-    <div class="vertical-line"></div>
-    <ng-container
-      [ngTemplateOutlet]="weaponDamageTemplate"
-      [ngTemplateOutletContext]="{ weapon: weapon, index: index }"
-    ></ng-container>
-    <div class="vertical-line"></div>
-    <ng-container
-      [ngTemplateOutlet]="weaponRangeTemplate"
-      [ngTemplateOutletContext]="{ weapon: weapon }"
-    ></ng-container>
+    <div
+      class="example-box"
+      *ngFor="let weapon of weapons; let index = index"
+      cdkDrag
+      (click)="openDetailsPanel(index)"
+    >
+      <!--  Range Icon -->
+      <ng-container
+        [ngTemplateOutlet]="distanceIconTemplate"
+        [ngTemplateOutletContext]="{ weapon: weapon }"
+      ></ng-container>
+      <div class="vertical-line"></div>
+      <ng-container
+        [ngTemplateOutlet]="weaponNameTemplate"
+        [ngTemplateOutletContext]="{ weapon: weapon }"
+      ></ng-container>
+      <div class="vertical-line"></div>
+      <ng-container
+        [ngTemplateOutlet]="weaponAttackTemplate"
+        [ngTemplateOutletContext]="{ weapon: weapon }"
+      ></ng-container>
+      <div class="vertical-line"></div>
+      <ng-container
+        [ngTemplateOutlet]="weaponDamageTemplate"
+        [ngTemplateOutletContext]="{ weapon: weapon, index: index }"
+      ></ng-container>
+      <div class="vertical-line"></div>
+      <ng-container
+        [ngTemplateOutlet]="weaponRangeTemplate"
+        [ngTemplateOutletContext]="{ weapon: weapon }"
+      ></ng-container>
+    </div>
   </div>
-
-  <ui-button
-    style="margin: 1rem"
-    [type]="'add'"
-    [size]="'xlarge'"
-    [color]="'primary'"
-    (click)="openWeaponModal()"
-  ></ui-button>
 </div>
 
 <!-- Templates -->

src/app/journal/journal-stats/weapons-container/weapon-table/weapon-table.component.scss

@@ -1,11 +1,8 @@
 .example-list { 
   max-width: 100%;
-  border: solid 1px #323232;
   min-height: 60px;
   display: block;
   background: transparent;
-  border-radius: 4px;
-  overflow: hidden;
 }
 
 .example-box {
@@ -26,14 +23,27 @@
               0 3px 10px 2px rgba(0, 0, 0, 0.12);
 }
 
+.weapons-box{
+  height: 100%;
+  display:flex;
+  flex-direction: column;
+}
+
 .heading-list{
-  margin: 10px;
+  flex: 0 0 2rem;
+  margin: 0.5rem 0.625rem;
   display: grid;
   grid-template-columns: 6fr  20fr  8fr  16fr  10fr;
   text-align:center;
   font-weight: 700;
 }
 
+.table-content{
+  flex: 0 0 calc(100% - 3rem);
+  overflow-y: auto;
+  border: 1px solid black;
+    }
+
 .bold{
   font-weight: bold;
 }
@@ -61,56 +71,6 @@
   border-left: 1px solid black;
 }
 
-// 
-
-// .weapon-type{
-//   width: 2rem;
-//   text-align: center;
-// }
-
-// .weapon-proficient{
-//   width: 2rem;
-//   text-align: center;
-// }
-
-// .weapon-name{
-//   width: 6rem;
-//   text-align: center;
-// }
-
-// .weapon-attack-bonus{
-//   width: 2rem;
-//   text-align: center;
-// }
-
-// .weapon-damage{
-//   width: 3rem;
-//   text-align: center;
-
-//   .damage-list{
-//   display: flex;
-//   flex-direction: column;
-//   }
-
-//   .damage-row{
-//     display: flex;
-//     flex-direction: row;
-//     justify-content: center;
-//     align-items: center;
-//     gap: 0.1rem;
-//   }
-// }
-
-// .weapon-range{
-//   width: 4rem;
-//   text-align: center;
-// }
-
-// .weapon-edit{
-//   width: 3rem;
-//   text-align: center;
-// }
-
 //// Drag and Drop
 
 .cdk-drag-preview {

src/app/journal/journal-stats/weapons-container/weapons-container.component.html

@@ -1,4 +1,4 @@
-<div class="weapon-spell-container">
+<!-- <div class="weapon-spell-container">
   <ul ngbNav #nav="ngbNav" [(activeId)]="active" class="nav-tabs">
     <li [ngbNavItem]="1">
       <button ngbNavLink>Waffen</button>
@@ -15,4 +15,35 @@
   </ul>
 
   <div [ngbNavOutlet]="nav" class="mt-2"></div>
+</div> -->
+
+<div class="weapon-spell-container">
+  <div class="tab-row">
+    <button
+      class="tab-button"
+      (click)="active = 1"
+      [class]="active === 1 ? 'active' : ''"
+    >
+      Waffen
+    </button>
+    <button
+      class="tab-button"
+      (click)="active = 2"
+      [class]="active === 2 ? 'active' : ''"
+    >
+      Zauber
+    </button>
+  </div>
+  @switch(active){ @case(1){
+  <weapon-table #weaponTable></weapon-table>
+  } @case(2){
+  <spell-table #spellTable></spell-table>
+  } }
+  <ui-button
+    [type]="'add'"
+    [size]="'xlarge'"
+    [color]="'primary'"
+    class="button-margin"
+    (click)="openModal()"
+  ></ui-button>
 </div>

src/app/journal/journal-stats/weapons-container/weapons-container.component.scss

@@ -1,3 +1,53 @@
+.weapon-spell-container{
+  border: solid 1px var(--border-color);
+    // background-color: var(--field-background-color);
+    box-shadow: var(--shadow-small);
+    border-radius: 10px;
+    height: 35.5rem;
+    display:flex;
+    flex-direction: column;
+}
+
+.tab-row{
+    display: flex;
+    // height: 3rem;
+    flex: 0 0 3rem;
+    > *{
+        flex: 1 1 0;
+    }
+}
+
+.tab-button{
+    height: 2.25rem;
+    font-size: 1.375rem;
+    font-weight: 600;
+    color: black;
+    border: 1px solid black !important;
+    transition: all 0.25s ease-in-out;
+    background-color: var(--primary-color-light);
+
+    &.active{
+        height: 2.75rem;
+        background-color: var(--primary-color);
+    }
+}
+
+
+weapon-table{
+    // 100% - tabbar height - add button height
+    height: calc(100% - 8rem);
+}
+
+spell-table{
+  // 100% - tabbar height - add button height
+    height: calc(100% - 8rem);
+}
+
+.button-margin{
+    margin: 1rem 0rem;
+
+}
+
 .example-list {
   max-width: 100%;
   border: solid 1px #323232;

src/app/journal/journal-stats/weapons-container/weapons-container.component.ts

@@ -7,6 +7,16 @@ import { NgxSmartModalService } from 'ngx-smart-modal';
 })
 export class WeaponsContainerComponent {
   public constructor(public ngxSmartModalService: NgxSmartModalService) {}
+  @ViewChild('weaponTable') weaponTable: any;
+  @ViewChild('spellTable') spellTable: any;
 
   public active: number = 1;
+
+  public openModal(): void {
+    if (this.active === 1) {
+      this.weaponTable.openWeaponModal();
+    } else if (this.active === 2) {
+      this.spellTable.openSpellModal();
+    }
+  }
 }