outsourced a lot of styles, unified the add buttons for all lists. Started reworking the dashboard

.nx/cache/d/daemon.log

@@ -463221,3 +463221,112 @@ To fix this, set a unique name for each project in a project.json inside the pro
 [NX Daemon Server] - 2024-01-23T20:35:11.445Z - Time taken for 'hash changed files from watcher' 24.491800002753735ms
 [NX Daemon Server] - 2024-01-23T20:35:11.445Z - [WATCHER]: Processing file changes in outputs
 [NX Daemon Server] - 2024-01-23T20:35:11.446Z - Done responding to the client null
+[NX Daemon Server] - 2024-01-23T21:49:21.314Z - Started listening on: \\.\pipe\nx\C:\Users\chris\AppData\Local\Temp\83d14e7134fc08a15480\d.sock
+[NX Daemon Server] - 2024-01-23T21:49:21.316Z - [WATCHER]: Subscribed to changes within: c:\Softwareprojekte\DnD (native)
+[NX Daemon Server] - 2024-01-23T21:49:21.325Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2024-01-23T21:49:21.327Z - Closed a connection. Number of open connections: 0
+[NX Daemon Server] - 2024-01-23T21:49:21.327Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2024-01-23T21:49:21.329Z - [REQUEST]: Client Request for Project Graph Received
+[NX Daemon Server] - 2024-01-23T21:49:22.654Z - Error detected when recomputing project file map: The following projects are defined in multiple locations:
+- DnDTools: 
+  - 
+  - .
+
+To fix this, set a unique name for each project in a project.json inside the project's root. If the project does not currently have a project.json, you can create one that contains only a name.
+[NX Daemon Server] - 2024-01-23T21:49:22.654Z - [REQUEST]: Responding to the client with an error. Error when preparing serialized project graph. The following projects are defined in multiple locations:
+- DnDTools: 
+  - 
+  - .
+
+To fix this, set a unique name for each project in a project.json inside the project's root. If the project does not currently have a project.json, you can create one that contains only a name.
+Error: The following projects are defined in multiple locations:
+- DnDTools: 
+  - 
+  - .
+
+To fix this, set a unique name for each project in a project.json inside the project's root. If the project does not currently have a project.json, you can create one that contains only a name.
+    at readProjectConfigurationsFromRootMap (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\project-configuration-utils.js:97:15)
+    at buildProjectsConfigurationsFromProjectPathsAndPlugins (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\project-configuration-utils.js:70:19)
+    at createProjectConfigurations (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:131:129)
+    at WorkspaceContext.<anonymous> (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:82:39)
+    at getProjectConfigurationsFromContext (c:\Softwareprojekte\DnD\node_modules\nx\src\utils\workspace-context.js:26:29)
+    at _retrieveProjectConfigurations (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:81:72)
+    at retrieveProjectConfigurations (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:58:12)
+    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
+    at async processCollectedUpdatedAndDeletedFiles (c:\Softwareprojekte\DnD\node_modules\nx\src\daemon\server\project-graph-incremental-recomputation.js:102:34)
+    at async processFilesAndCreateAndSerializeProjectGraph (c:\Softwareprojekte\DnD\node_modules\nx\src\daemon\server\project-graph-incremental-recomputation.js:138:17)
+[NX Daemon Server] - 2024-01-23T21:49:22.656Z - Time taken for 'hash changed files from watcher' 389.87060000002384ms
+[NX Daemon Server] - 2024-01-23T21:49:22.656Z - Done responding to the client null
+[NX Daemon Server] - 2024-01-24T06:34:35.494Z - Started listening on: \\.\pipe\nx\C:\Users\chris\AppData\Local\Temp\83d14e7134fc08a15480\d.sock
+[NX Daemon Server] - 2024-01-24T06:34:35.500Z - [WATCHER]: Subscribed to changes within: c:\Softwareprojekte\DnD (native)
+[NX Daemon Server] - 2024-01-24T06:34:35.503Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2024-01-24T06:34:35.505Z - Closed a connection. Number of open connections: 0
+[NX Daemon Server] - 2024-01-24T06:34:35.505Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2024-01-24T06:34:35.507Z - [REQUEST]: Client Request for Project Graph Received
+[NX Daemon Server] - 2024-01-24T06:34:35.601Z - Error detected when recomputing project file map: The following projects are defined in multiple locations:
+- DnDTools: 
+  - 
+  - .
+
+To fix this, set a unique name for each project in a project.json inside the project's root. If the project does not currently have a project.json, you can create one that contains only a name.
+[NX Daemon Server] - 2024-01-24T06:34:35.601Z - [REQUEST]: Responding to the client with an error. Error when preparing serialized project graph. The following projects are defined in multiple locations:
+- DnDTools: 
+  - 
+  - .
+
+To fix this, set a unique name for each project in a project.json inside the project's root. If the project does not currently have a project.json, you can create one that contains only a name.
+Error: The following projects are defined in multiple locations:
+- DnDTools: 
+  - 
+  - .
+
+To fix this, set a unique name for each project in a project.json inside the project's root. If the project does not currently have a project.json, you can create one that contains only a name.
+    at readProjectConfigurationsFromRootMap (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\project-configuration-utils.js:97:15)
+    at buildProjectsConfigurationsFromProjectPathsAndPlugins (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\project-configuration-utils.js:70:19)
+    at createProjectConfigurations (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:131:129)
+    at WorkspaceContext.<anonymous> (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:82:39)
+    at getProjectConfigurationsFromContext (c:\Softwareprojekte\DnD\node_modules\nx\src\utils\workspace-context.js:26:29)
+    at _retrieveProjectConfigurations (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:81:72)
+    at retrieveProjectConfigurations (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:58:12)
+    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
+    at async processCollectedUpdatedAndDeletedFiles (c:\Softwareprojekte\DnD\node_modules\nx\src\daemon\server\project-graph-incremental-recomputation.js:102:34)
+    at async processFilesAndCreateAndSerializeProjectGraph (c:\Softwareprojekte\DnD\node_modules\nx\src\daemon\server\project-graph-incremental-recomputation.js:138:17)
+[NX Daemon Server] - 2024-01-24T06:34:35.602Z - Time taken for 'hash changed files from watcher' 27.82369999587536ms
+[NX Daemon Server] - 2024-01-24T06:34:35.604Z - Done responding to the client null
+[NX Daemon Server] - 2024-01-24T17:26:20.206Z - Started listening on: \\.\pipe\nx\C:\Users\chris\AppData\Local\Temp\83d14e7134fc08a15480\d.sock
+[NX Daemon Server] - 2024-01-24T17:26:20.210Z - [WATCHER]: Subscribed to changes within: c:\Softwareprojekte\DnD (native)
+[NX Daemon Server] - 2024-01-24T17:26:20.217Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2024-01-24T17:26:20.219Z - Closed a connection. Number of open connections: 0
+[NX Daemon Server] - 2024-01-24T17:26:20.219Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2024-01-24T17:26:20.221Z - [REQUEST]: Client Request for Project Graph Received
+[NX Daemon Server] - 2024-01-24T17:26:21.010Z - Error detected when recomputing project file map: The following projects are defined in multiple locations:
+- DnDTools: 
+  - 
+  - .
+
+To fix this, set a unique name for each project in a project.json inside the project's root. If the project does not currently have a project.json, you can create one that contains only a name.
+[NX Daemon Server] - 2024-01-24T17:26:21.010Z - [REQUEST]: Responding to the client with an error. Error when preparing serialized project graph. The following projects are defined in multiple locations:
+- DnDTools: 
+  - 
+  - .
+
+To fix this, set a unique name for each project in a project.json inside the project's root. If the project does not currently have a project.json, you can create one that contains only a name.
+Error: The following projects are defined in multiple locations:
+- DnDTools: 
+  - 
+  - .
+
+To fix this, set a unique name for each project in a project.json inside the project's root. If the project does not currently have a project.json, you can create one that contains only a name.
+    at readProjectConfigurationsFromRootMap (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\project-configuration-utils.js:97:15)
+    at buildProjectsConfigurationsFromProjectPathsAndPlugins (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\project-configuration-utils.js:70:19)
+    at createProjectConfigurations (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:131:129)
+    at WorkspaceContext.<anonymous> (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:82:39)
+    at getProjectConfigurationsFromContext (c:\Softwareprojekte\DnD\node_modules\nx\src\utils\workspace-context.js:26:29)
+    at _retrieveProjectConfigurations (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:81:72)
+    at retrieveProjectConfigurations (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:58:12)
+    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
+    at async processCollectedUpdatedAndDeletedFiles (c:\Softwareprojekte\DnD\node_modules\nx\src\daemon\server\project-graph-incremental-recomputation.js:102:34)
+    at async processFilesAndCreateAndSerializeProjectGraph (c:\Softwareprojekte\DnD\node_modules\nx\src\daemon\server\project-graph-incremental-recomputation.js:138:17)
+[NX Daemon Server] - 2024-01-24T17:26:21.011Z - Time taken for 'hash changed files from watcher' 261.5383999943733ms
+[NX Daemon Server] - 2024-01-24T17:26:21.012Z - [WATCHER]: Processing file changes in outputs
+[NX Daemon Server] - 2024-01-24T17:26:21.012Z - Done responding to the client null

.nx/cache/d/server-process.json

@@ -1 +1 @@
-{"processId":10464}
+{"processId":9388}

src/app/journal/journal-character/general/general.component.scss

@@ -133,13 +133,17 @@
 
     .personality-box {
         width: 25%;
-        height: 15rem;
+        height: 20rem;
         display: flex;
         flex-direction: column;
         align-items: center;
         gap: 0.75rem;
         margin-top: 1rem;
 
+        @media (height < 930px) {
+            height: 15rem;
+        }
+
         .personality-area {
             width: 100%;
             height: 100%;

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

@@ -51,22 +51,16 @@
 }
 
 .character-body {
-    height: calc(100% - 11.5rem);
+    height: calc(100vh - 6.5rem);
 
     .navigation-bar {
         padding-top: 1.5rem;
         gap: 2rem;
         box-shadow: var(--shadow);
-        height: calc(100% + 20rem);
+        height: 100%;
         align-items: center;
 
         .nav-link {
-            // width: 80%;
-            // background-color: var(--button-color);
-            // border-radius: 10px;
-            // border: 1px solid var(--border-color);
-            // box-shadow: var(--shadow);
-
             width: 90%;
             border-radius: 10px;
             transition: all 0.25s ease-in-out;
@@ -83,7 +77,7 @@
     }
 
     .outlet {
-        margin: 2.5rem 1.5rem 0 1.5rem;
+        margin: 2.5rem 2.5rem 0 2.5rem;
         width: 100%;
     }
 

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

@@ -19,7 +19,7 @@
       (click)="active = 3"
       [class]="active === 3 ? 'active' : ''"
     >
-      Zaubern
+      {{ isMonk ? "Ki" : "Zaubern" }}
     </button>
     <button
       class="tab-button"
@@ -34,25 +34,8 @@
   } @case(2){
   <trait-table #traitTable></trait-table>
   } @case(3){
-  <spellslots #spellslots></spellslots>
+  <spellslots-table #spellslots></spellslots-table>
   } @case(4){
   <proficiencies-table #proficienciesTable></proficiencies-table>
-  } } @if(active === 1 || active === 2){
-  <ui-button
-    [type]="'add'"
-    [size]="'xlarge'"
-    [color]="'primary'"
-    class="button-margin"
-    (click)="openModal()"
-  ></ui-button>
-  } @else{
-  <ui-button
-    [type]="'edit'"
-    [size]="'xlarge'"
-    [color]="'primary'"
-    class="button-margin"
-    (click)="openModal()"
-  >
-  </ui-button>
-  }
+  } }
 </div>

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

@@ -1,7 +1,7 @@
 .ability-panel-container {
     border: solid 1px var(--border-color);
-    background-color: var(--background-color);
-    box-shadow: var(--shadow-small);
+    background-color: var(--field-background-color);
+    box-shadow: var(--shadow);
     border-radius: 10px;
     height: 48rem;
     display: flex;
@@ -11,6 +11,7 @@
 .tab-row {
     display: flex;
     flex: 0 0 3rem;
+    box-shadow: var(--shadow-bottom);
     > * {
         flex: 1 1 0;
     }
@@ -33,7 +34,7 @@
 }
 
 .tab-button {
-    height: 2.25rem;
+    height: 3rem;
     font-size: 1.375rem;
     font-weight: 600;
     color: black;
@@ -42,59 +43,41 @@
     border-left: 0;
     border-top: 0;
     transition: all 0.25s ease-in-out;
-    background-color: var(--primary-color-light);
+    background-color: var(--tab);
+    // box-shadow: var(--shadow-bottom);
 
     &.active {
-        height: 2.75rem;
-        background-color: var(--primary-color);
+        background-color: var(--tab-active);
         border-bottom: 3px solid var(--border-color);
     }
 }
 
-.button-margin {
-    margin: 1rem 0rem;
-}
-
-ability-table {
-    flex: 0 0 calc(100% - 8rem);
-    overflow: auto;
-}
+.footer {
+    height: 5rem;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 0 0 10px 10px;
+    box-shadow: var(--shadow-top);
 
-trait-table {
-    flex: 0 0 calc(100% - 8rem);
-    overflow: auto;
-}
+    button {
+        height: 3rem;
+        width: 80%;
+        border-radius: 10px;
+        background: var(--accept);
+        transition: background-color 0.2s ease-in-out;
+        box-shadow: var(--shadow);
 
-spellslots {
-    flex: 0 0 calc(100% - 8rem);
-    overflow: auto;
+        &:hover {
+            background-color: var(--accept-hover);
+        }
+    }
 }
 
+ability-table,
+trait-table,
+spellslots-table,
 proficiencies-table {
-    flex: 0 0 calc(100% - 8rem);
-    overflow: auto;
+    flex: 0 0 calc(100% - 3rem);
 }
-
-// .ability-table-container{
-//     display: flex;
-//     flex-direction: column;
-//     flex: 0 0 calc(100% - 3rem);
-//     overflow: auto;
-// }
-
-// button:hover{
-
-//     color: black;
-//     background-color: var(--primary-color);
-// }
-
-// button.active{
-//     // height: 4.5rem;
-//     // font-size: 1.625rem;
-//     background-color: var(--primary-color) !important;
-// }
-
-// li{
-//     display: flex;
-//     align-items: flex-start;
-// }

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

@@ -1,4 +1,5 @@
 import { Component, ViewChild } from '@angular/core';
+import { DataService } from 'src/services/data/data.service';
 
 @Component({
   selector: 'ability-panel',
@@ -6,27 +7,10 @@ import { Component, ViewChild } from '@angular/core';
   styleUrls: ['./ability-panel.component.scss'],
 })
 export class AbilityPanelComponent {
-  @ViewChild('abilityTable') abilityTable: any;
-  @ViewChild('traitTable') traitTable: any;
-  @ViewChild('spellslots') spellslots: any;
-  @ViewChild('proficienciesTable') proficienciesTable: any;
-
   active = 1;
+  isMonk = false;
 
-  public openModal() {
-    switch (this.active) {
-      case 1:
-        this.abilityTable.openModal();
-        break;
-      case 2:
-        this.traitTable.openModal();
-        break;
-      case 3:
-        this.spellslots.openModal();
-        break;
-      case 4:
-        this.proficienciesTable.openModal();
-        break;
-    }
+  public constructor(private dataAccessor: DataService) {
+    this.isMonk = this.dataAccessor.characterData.class === 'Monk';
   }
 }

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

@@ -1,28 +1,28 @@
-<div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
-  @for(ability of abilities; let index = $index; track ability){
-  <div
-    class="example-box"
-    [class]="
-      ability.currentlyUsedCharges === ability.charges && ability.charges !== 0
-        ? 'used'
-        : ''
-    "
-    (click)="openDetailsPanel(index)"
-    cdkDrag
-  >
-    <div *ngIf="ability.cost != 'none'" class="cost-box">
-      {{ costTranslator[ability.cost] }}
-    </div>
-    <div class="ability-name">{{ ability.name }}</div>
-    <br />
+<div class="ability-box">
+  <div cdkDropList class="item-list" (cdkDropListDropped)="drop($event)">
+    <!-- ITEMS -->
+    @for(ability of abilities; let index = $index; track ability){
+    <div
+      class="item"
+      [class]="
+        ability.currentlyUsedCharges === ability.charges &&
+        ability.charges !== 0
+          ? 'used'
+          : ''
+      "
+      (click)="openDetailsPanel(index)"
+      cdkDrag
+    >
+      <div class="header">
+        <div class="name">{{ ability.name }}</div>
+        <div class="cost">{{ costTranslator[ability.cost] }}</div>
+      </div>
 
-    <p>{{ ability.shortDescription }}</p>
+      <p>{{ ability.shortDescription }}</p>
 
-    <div class="charges-box" *ngIf="ability.charges != 0">
-      <span>Aufladungen: </span>
-      <span
-        *ngFor="let _ of getArray(ability.charges); let chargeIndex = index"
-      >
+      <div class="charges-box" *ngIf="ability.charges != 0">
+        Nutzungen: @for(_ of getArray(ability.charges); let chargeIndex =
+        $index; track _){
         <input
           [id]="'checkbox' + index + '-' + chargeIndex"
           type="checkbox"
@@ -31,19 +31,15 @@
             $event.stopPropagation(); handleChangedCharges(index, $event.target)
           "
         />
-      </span>
+        }
+      </div>
     </div>
+    }@empty{
+    <div class="empty-list">Noch keine Fähigkeit hinzugefügt</div>
+    }
   </div>
-  }@empty{
-  <div
-    style="
-      text-align: center;
-      margin-top: 2rem;
-      font-size: 1.25rem;
-      font-weight: 500;
-    "
-  >
-    Noch keine Fähigkeit hinzugefügt
+  <!-- MODAL BUTTON -->
+  <div class="footer">
+    <button (click)="openModal(false)">Hinzufügen</button>
   </div>
-  }
 </div>

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

@@ -1,64 +1,37 @@
-.ability-name {
-  font-size: 1.25rem;
-  font-weight: 600;
+.ability-box {
+  height: 100%;
 }
 
-.cost-info {
-  position: absolute;
-  left: 0;
-  top: 0;
+.item-list {
+  height: calc(100% - 5rem);
 }
 
-// Table
-.used {
-  opacity: 0.5;
-}
-
-.example-list {
-  width: 100%;
-  border: solid 1px #ccc;
-  min-height: 60px;
-  display: block;
-  background: white;
-  border-radius: 4px;
-  overflow: hidden;
-}
-
-.example-box {
-  padding: 20px 10px;
-  border-bottom: solid 1px #ccc;
-  color: rgba(0, 0, 0, 0.87);
-  display: flex;
-  position: relative;
-  flex-direction: column;
-  justify-content: space-between;
-  box-sizing: border-box;
-  cursor: move;
-  background: white;
-  font-size: 14px;
-}
+.item {
+  margin: 15px 10px;
+  padding: 10px 10px;
 
-.cdk-drag-preview {
-  box-sizing: border-box;
-  border-radius: 4px;
-  box-shadow:
-    0 5px 5px -3px rgba(0, 0, 0, 0.2),
-    0 8px 10px 1px rgba(0, 0, 0, 0.14),
-    0 3px 14px 2px rgba(0, 0, 0, 0.12);
-}
+  .header {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 0.5rem;
 
-.cdk-drag-placeholder {
-  opacity: 0;
-}
+    .name {
+      font-size: 1.25rem;
+      font-weight: 600;
+    }
 
-.cdk-drag-animating {
-  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
-}
+    .cost {
+      font-weight: 600;
+    }
+  }
 
-.example-box:last-child {
-  border: none;
+  .charges-box {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+  }
 }
 
-.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder) {
-  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+.used {
+  opacity: 0.5;
 }

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

@@ -1,83 +1,97 @@
-<button class="accordion" (click)="toggleAcordion($event)">
-  Waffen und Rüstungen
-</button>
-<div class="panel">
-  <div>
-    Einfache Waffen:
-    <input
-      type="checkbox"
-      [(ngModel)]="proficiencies.weapons.simple"
-      (change)="updateDatabase()"
-    />
-  </div>
-  <div>
-    Schwere Waffen:
-    <input
-      type="checkbox"
-      [(ngModel)]="proficiencies.weapons.martial"
-      (change)="updateDatabase()"
-    />
-  </div>
-  <div>
-    Weitere Waffen:
-    <input
-      [(ngModel)]="proficiencies.weapons.other"
-      (change)="updateDatabase()"
-    />
-  </div>
-  <br />
-  <div>
-    Leichte Rüstungen:
-    <input
-      type="checkbox"
-      [(ngModel)]="proficiencies.armor.light"
-      (change)="updateDatabase()"
-    />
-  </div>
-  <div>
-    Mittlere Rüstungen:
-    <input
-      type="checkbox"
-      [(ngModel)]="proficiencies.armor.medium"
-      (change)="updateDatabase()"
-    />
-  </div>
-  <div>
-    Schwere Rüstungen:
-    <input
-      type="checkbox"
-      [(ngModel)]="proficiencies.armor.heavy"
-      (change)="updateDatabase()"
-    />
-  </div>
-</div>
+<div class="proficiency-container">
+  <div class="proficiencies">
+    <!-- <div class="proficiency-name">Fähigkeiten</div> -->
+    <!-- <div class="proficiency-value">{{ proficiencies.skills }}</div> -->
+    <button class="accordion" (click)="toggleAcordion($event)">
+      Waffen und Rüstungen
+    </button>
+    <div class="panel">
+      <div>
+        Einfache Waffen:
+        <input
+          type="checkbox"
+          [(ngModel)]="proficiencies.weapons.simple"
+          (change)="updateDatabase()"
+        />
+      </div>
+      <div>
+        Schwere Waffen:
+        <input
+          type="checkbox"
+          [(ngModel)]="proficiencies.weapons.martial"
+          (change)="updateDatabase()"
+        />
+      </div>
+      <div>
+        Weitere Waffen:
+        <input
+          [(ngModel)]="proficiencies.weapons.other"
+          (change)="updateDatabase()"
+        />
+      </div>
+      <br />
+      <div>
+        Leichte Rüstungen:
+        <input
+          type="checkbox"
+          [(ngModel)]="proficiencies.armor.light"
+          (change)="updateDatabase()"
+        />
+      </div>
+      <div>
+        Mittlere Rüstungen:
+        <input
+          type="checkbox"
+          [(ngModel)]="proficiencies.armor.medium"
+          (change)="updateDatabase()"
+        />
+      </div>
+      <div>
+        Schwere Rüstungen:
+        <input
+          type="checkbox"
+          [(ngModel)]="proficiencies.armor.heavy"
+          (change)="updateDatabase()"
+        />
+      </div>
+    </div>
 
-<button class="accordion" (click)="toggleAcordion($event)">
-  Werkzeuge und Sprachen
-</button>
-<div class="panel">
-  <h5>Werkzeuge</h5>
-  <div
-    cdkDropList
-    class="example-list"
-    (cdkDropListDropped)="dropTools($event)"
-  >
-    <div class="example-box" *ngFor="let tool of proficiencies.tools" cdkDrag>
-      {{ tool }}
+    <button class="accordion" (click)="toggleAcordion($event)">
+      Werkzeuge und Sprachen
+    </button>
+    <div class="panel">
+      <h5>Werkzeuge</h5>
+      <div
+        cdkDropList
+        class="example-list"
+        (cdkDropListDropped)="dropTools($event)"
+      >
+        <div
+          class="example-box"
+          *ngFor="let tool of proficiencies.tools"
+          cdkDrag
+        >
+          {{ tool }}
+        </div>
+      </div>
+      <h5>Sprachen</h5>
+      <div
+        cdkDropList
+        class="example-list"
+        (cdkDropListDropped)="dropLanguages($event)"
+      >
+        <div
+          class="example-box"
+          *ngFor="let language of proficiencies.languages"
+          cdkDrag
+        >
+          {{ language }}
+        </div>
+      </div>
     </div>
   </div>
-  <h5>Sprachen</h5>
-  <div
-    cdkDropList
-    class="example-list"
-    (cdkDropListDropped)="dropLanguages($event)"
-  >
-    <div
-      class="example-box"
-      *ngFor="let language of proficiencies.languages"
-      cdkDrag
-    >
-      {{ language }}
-    </div>
+  <!-- MODAL BUTTON -->
+  <div class="footer">
+    <button (click)="openModal()">Hinzufügen</button>
   </div>
 </div>

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

@@ -1,3 +1,12 @@
+.proficiency-container {
+  height: 100%;
+}
+
+.proficiencies {
+  height: calc(100% - 5rem);
+  overflow: auto;
+  padding-top: 1rem;
+}
 /* Style the buttons that are used to open and close the accordion panel */
 .accordion {
   background-color: #eee;
@@ -12,7 +21,8 @@
 }
 
 /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
-.active, .accordion:hover {
+.active,
+.accordion:hover {
   background-color: #ccc;
 }
 
@@ -26,7 +36,7 @@
 }
 
 .accordion:after {
-  content: '\02795'; /* Unicode character for "plus" sign (+) */
+  content: "\02795"; /* Unicode character for "plus" sign (+) */
   font-size: 13px;
   color: #777;
   float: right;
@@ -37,7 +47,7 @@
   content: "\2796"; /* Unicode character for "minus" sign (-) */
 }
 
-// 
+//
 .example-list {
   width: 100%;
   border: solid 1px #ccc;
@@ -66,9 +76,10 @@
 .cdk-drag-preview {
   box-sizing: border-box;
   border-radius: 4px;
-  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
-              0 8px 10px 1px rgba(0, 0, 0, 0.14),
-              0 3px 14px 2px rgba(0, 0, 0, 0.12);
+  box-shadow:
+    0 5px 5px -3px rgba(0, 0, 0, 0.2),
+    0 8px 10px 1px rgba(0, 0, 0, 0.14),
+    0 3px 14px 2px rgba(0, 0, 0, 0.12);
 }
 
 .cdk-drag-placeholder {
@@ -85,4 +96,4 @@
 
 .example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder) {
   transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
-}
+}

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

@@ -1,5 +1,6 @@
 <div class="modal-dimensions">
   <div class="add-form-group">
+    @if(!isMonk){
     <h3>Spellslots</h3>
     <mat-slide-toggle
       [checked]="showSpellslots"
@@ -35,6 +36,7 @@
         (click)="addSpellLevel()"
       ></icon>
     </div>
+    } @else{
 
     <h3>KI-Punkte</h3>
     <mat-slide-toggle
@@ -52,7 +54,9 @@
         </select>
       </div>
     </div>
+    }
   </div>
+
   <div class="button-wrapper-2-block">
     <ui-button
       [type]="'update'"

src/app/journal/journal-stats/ability-panel/spellslots/spellslots-modal/spellslots-modal.component.ts

@@ -11,6 +11,7 @@ export class SpellslotsModalComponent {
   @Input() public spellslots: any[] = [];
   @Input() public kiPoints: any;
   @Input() public showSpellslots: boolean = true;
+  @Input() public isMonk: boolean = false;
 
   public spellNumbersArray: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
   public kiNumbersArray: number[] = [

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

@@ -1,35 +1,38 @@
-<div class="slots-container" style="position: relative">
-  <div *ngIf="kiPoints.showKiPoints" class="ki-container">
-    KI-Punkte
-    <ng-container
-      *ngFor="let _ of getArray(kiPoints.totalPoints); let kiIndex = index"
-    >
-      <input
-        [id]="'checkbox' + kiIndex"
-        type="checkbox"
-        (change)="handleUsedKiPoints(kiIndex, $event.target)"
-      />
-    </ng-container>
-    <div class="ki-add-buttons"></div>
-  </div>
-
-  <div *ngIf="showSpellslots" class="spellslot-sontainer">
-    <div class="level-row" *ngFor="let _ of spellslots; let levelIndex = index">
-      Level {{ levelIndex + 1 }}
+<div class="slots-box">
+  <div class="slots-container">
+    <div *ngIf="kiPoints.showKiPoints" class="ki-container">
+      KI-Punkte
       <ng-container
-        *ngFor="
-          let _ of getArray(spellslots[levelIndex].totalSlots);
-          let slotIndex = index
-        "
+        *ngFor="let _ of getArray(kiPoints.totalPoints); let kiIndex = index"
       >
+        <input
+          [id]="'checkbox' + kiIndex"
+          type="checkbox"
+          (change)="handleUsedKiPoints(kiIndex, $event.target)"
+        />
+      </ng-container>
+      <div class="ki-add-buttons"></div>
+    </div>
+
+    @if(showSpellslots){
+    <!-- <div *ngIf="showSpellslots" class="spellslot-list"> -->
+    @for(level of spellslots; let levelIndex = $index; track level){
+    <div class="level-row">
+      Level {{ levelIndex + 1 }}:
+      <div class="checkboxes">
+        @for ( checkbox of getArray(spellslots[levelIndex].totalSlots); let
+        slotIndex = $index; track checkbox){
         <input
           [id]="'checkbox' + levelIndex + '-' + slotIndex"
           type="checkbox"
           (change)="handleUsedSlots(levelIndex, slotIndex, $event.target)"
         />
-      </ng-container>
+        }
+      </div>
     </div>
-    <div style="display: flex; justify-content: space-around; margin-top: 2rem">
+    }
+
+    <div class="modifier-container">
       <div>
         <div class="value-box">{{ spellSaveDC }}</div>
         <div class="value-label">Rettungswurf-SG</div>
@@ -39,17 +42,15 @@
         <div class="value-label">Zauber-Angriffsbonus</div>
       </div>
     </div>
+    <!-- </div> -->
+    } @if(!kiPoints.showKiPoints && !showSpellslots){
+    <div class="empty-list">
+      Noch keine {{ isMonk ? "Ki-Punkte" : "Zauberplätze" }} hinzugefügt
+    </div>
+    }
   </div>
-  @if(!kiPoints.showKiPoints && !showSpellslots){
-  <div
-    style="
-      text-align: center;
-      margin-top: 2rem;
-      font-size: 1.25rem;
-      font-weight: 500;
-    "
-  >
-    Weder KI-Punkte noch Zauberplätze hinzugefügt
+  <!-- MODAL BUTTON -->
+  <div class="footer">
+    <button (click)="openModal()">Anpassen</button>
   </div>
-  }
 </div>

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

@@ -0,0 +1,32 @@
+.slots-box {
+    height: 100%;
+}
+
+.slots-container {
+    height: calc(100% - 5rem);
+    overflow: auto;
+    padding-top: 0.5rem;
+    position: relative;
+}
+
+.level-row {
+    padding: 1rem 1.5rem 0 1.5rem;
+    display: flex;
+    font-size: 1.25rem;
+    font-weight: 600;
+
+    .checkboxes {
+        margin-left: 1rem;
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+    }
+}
+
+.modifier-container {
+    position: absolute;
+    width: 100%;
+    bottom: 1.5rem;
+    display: flex;
+    justify-content: space-evenly;
+}

src/app/journal/journal-stats/ability-panel/spellslots/spellslots.component.ts

@@ -4,7 +4,7 @@ import { ModalService } from 'src/services/modal/modal.service';
 import { SpellslotsModalComponent } from './spellslots-modal/spellslots-modal.component';
 
 @Component({
-  selector: 'spellslots',
+  selector: 'spellslots-table',
   templateUrl: './spellslots.component.html',
   styleUrls: ['./spellslots.component.scss'],
 })
@@ -15,12 +15,20 @@ export class SpellslotsComponent {
   public spellcastingAttribute: string | undefined = undefined;
   public proficiencyBonus: number = 2;
   public attributeValue: number = 0;
+  public isMonk: boolean = true;
 
   public spellAttackModifier: number = 0;
   public spellSaveDC: number = 0;
 
   public slotNumber: number = 1;
 
+  public constructor(
+    public dataAccessor: DataService,
+    public modalAccessor: ModalService
+  ) {
+    this.isMonk = this.dataAccessor.characterData.class === 'Monk';
+  }
+
   public ngOnInit(): void {
     const spells = this.dataAccessor.spellslots;
     const kiPoints = this.dataAccessor.kiPoints;
@@ -42,11 +50,6 @@ export class SpellslotsComponent {
     }, 10);
   }
 
-  public constructor(
-    public dataAccessor: DataService,
-    public modalAccessor: ModalService
-  ) {}
-
   // FUNCTIONS
 
   public openModal(): void {
@@ -54,6 +57,7 @@ export class SpellslotsComponent {
       kiPoints: JSON.parse(JSON.stringify(this.kiPoints)),
       spellslots: JSON.parse(JSON.stringify(this.spellslots)),
       showSpellslots: this.showSpellslots,
+      isMonk: this.isMonk,
     });
     const resultSubscription = this.modalAccessor.result$.subscribe(
       (result) => {

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

@@ -1,22 +1,17 @@
-<div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
-  @for(trait of traits; let index = $index; track trait){
-  <div class="example-box" (click)="openDetailsPanel(index)" cdkDrag>
-    <!-- Eventuell Symbol für den Ursprung des Traits -->
-    <div class="trait-name">{{ trait.name }}</div>
-    <br />
-
-    <p>{{ trait.shortDescription }}</p>
+<div class="trait-box">
+  <div cdkDropList class="item-list" (cdkDropListDropped)="drop($event)">
+    <!--  ITEMS -->
+    @for(trait of traits; let index = $index; track trait){
+    <div class="item" (click)="openDetailsPanel(index)" cdkDrag>
+      <div class="name">{{ trait.name }}</div>
+      <p>{{ trait.shortDescription }}</p>
+    </div>
+    }@empty{
+    <div class="empty-list">Noch keine Eigenschaft hinzugefügt</div>
+    }
   </div>
-  }@empty{
-  <div
-    style="
-      text-align: center;
-      margin-top: 2rem;
-      font-size: 1.25rem;
-      font-weight: 500;
-    "
-  >
-    Noch keine Eigenschaft hinzugefügt
+  <!-- MODAL BUTTON -->
+  <div class="footer">
+    <button (click)="openModal(false)">Hinzufügen</button>
   </div>
-  }
 </div>

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

@@ -1,58 +1,18 @@
-.trait-name{
-  font-size: 1.25rem;
-  font-weight: 600;
-}
-
-// Table
-.used{
-  opacity: 0.5;
-}
-
-.example-list {
-  width: 100%;
-  border: solid 1px #ccc;
-  min-height: 60px;
-  display: block;
-  background: white;
-  border-radius: 4px;
-  overflow: hidden;
-}
-
-.example-box {
-  padding: 20px 10px;
-  border-bottom: solid 1px #ccc;
-  color: rgba(0, 0, 0, 0.87);
-  display: flex;
-  position: relative;
-  flex-direction: column;
-  // align-items: center;
-  justify-content: space-between;
-  box-sizing: border-box;
-  cursor: move;
-  background: white;
-  font-size: 14px;
-}
-
-.cdk-drag-preview {
-  box-sizing: border-box;
-  border-radius: 4px;
-  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
-              0 8px 10px 1px rgba(0, 0, 0, 0.14),
-              0 3px 14px 2px rgba(0, 0, 0, 0.12);
+.trait-box {
+  height: 100%;
 }
 
-.cdk-drag-placeholder {
-  opacity: 0;
-}
-
-.cdk-drag-animating {
-  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+.name {
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin-bottom: 0.5rem;
 }
 
-.example-box:last-child {
-  border: none;
+.item-list {
+  height: calc(100% - 5rem);
 }
 
-.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder) {
-  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+.item {
+  margin: 15px 10px;
+  padding: 10px 10px;
 }

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

@@ -3,21 +3,18 @@
     <div>Typ</div>
     <div>Name</div>
     <div>Stufe</div>
-    <div>
-      <div>Bonus/</div>
-      <div>Save</div>
-    </div>
-    <div>Schaden/ Heilung</div>
+    <div>Bonus</div>
+    <div>Effekt</div>
     <div>Reichweite</div>
   </div>
   <div
     id="spells-table"
     cdkDropList
-    class="example-list table-content"
+    class="item-list table-content"
     (cdkDropListDropped)="dropSpells($event)"
   >
     @for(spell of spells; let index = $index; track spell){
-    <div class="example-box" cdkDrag (click)="showFullSpellcard(index)">
+    <div class="item" cdkDrag (click)="showFullSpellcard(index)">
       <!--  Range Icon -->
       <ng-container
         [ngTemplateOutlet]="distanceIconTemplate"
@@ -82,6 +79,7 @@
     placement="top-start"
     placeholder="Name des vorbereiteten Zaubers"
   />
+  <div class="footer"></div>
   <button
     [class]="showInput ? 'slide-button cancel-button' : 'slide-button'"
     (click)="toggleInput()"

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

@@ -1,4 +1,16 @@
-.example-list {
+.heading-list {
+  flex: 0 0 3rem;
+  // padding: 0.5rem 0.625rem;
+  padding: 10px 0.625rem;
+  display: grid;
+  grid-template-columns: 6fr 20fr 10fr 8fr 20fr 16fr;
+  text-align: center;
+  font-weight: 700;
+  box-shadow: var(--shadow-bottom);
+  border-bottom: 1px solid var(--border-color);
+}
+
+.item-list {
   max-width: 100%;
   min-height: 60px;
   display: block;
@@ -7,7 +19,7 @@
   overflow: hidden;
 }
 
-.example-box {
+.item {
   margin: 15px 10px;
   color: rgba(0, 0, 0, 0.87);
   display: grid;
@@ -16,7 +28,7 @@
   justify-content: space-between;
   box-sizing: border-box;
   cursor: move;
-  background: var(--primary-color-light);
+  background: var(--items);
   border-radius: 10px;
   font-size: 1rem;
   font-weight: 600;
@@ -25,6 +37,10 @@
     0 5px 5px -3px rgba(0, 0, 0, 0.2),
     0 8px 8px 1px rgba(0, 0, 0, 0.14),
     0 3px 10px 2px rgba(0, 0, 0, 0.12);
+  transition: background-color 0.2s ease-in-out;
+  &:hover {
+    background: var(--items-hover);
+  }
 }
 
 .spell-box {
@@ -35,17 +51,8 @@
   position: relative;
 }
 
-.heading-list {
-  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% - 9rem);
+  flex: 0 0 calc(100% - 8rem);
   overflow-y: auto;
 }
 
@@ -101,6 +108,13 @@
   }
 }
 
+.footer {
+  height: 100%;
+  width: 100%;
+  border-radius: 0 0 10px 10px;
+  box-shadow: var(--shadow-top);
+}
+
 .spellInput {
   position: absolute;
   height: 3rem;
@@ -130,10 +144,6 @@
   transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
 }
 
-.example-box:last-child {
-  border: none;
-}
-
-.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder) {
+.item-list.cdk-drop-list-dragging .item:not(.cdk-drag-placeholder) {
   transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
 }

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

@@ -9,11 +9,11 @@
   <div
     id="weapons-table"
     cdkDropList
-    class="example-list table-content"
+    class="item-list table-content"
     (cdkDropListDropped)="dropWeapons($event)"
   >
     @for(weapon of weapons; let index = $index; track weapon){
-    <div class="example-box" cdkDrag (click)="openDetailsPanel(index)">
+    <div class="item" cdkDrag (click)="openDetailsPanel(index)">
       <!--  Range Icon -->
       <ng-container
         [ngTemplateOutlet]="distanceIconTemplate"
@@ -53,6 +53,9 @@
     </div>
     }
   </div>
+  <div class="footer">
+    <button (click)="openModal(false)">Hinzufügen</button>
+  </div>
 </div>
 
 <!-- Templates -->

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

@@ -1,61 +1,68 @@
-.example-list { 
+.heading-list {
+  flex: 0 0 3rem;
+  display: grid;
+  padding: 10px 20px;
+  grid-template-columns: 6fr 20fr 8fr 16fr 10fr;
+  text-align: center;
+  font-weight: 700;
+  box-shadow: var(--shadow);
+  border-bottom: 1px solid var(--border-color);
+}
+
+.item-list {
   max-width: 100%;
   min-height: 60px;
   display: block;
   background: transparent;
 }
 
-.example-box {
+.item {
   margin: 15px 10px;
   display: grid;
-  grid-template-columns: 6fr .1fr 20fr .1fr 8fr .1fr 16fr .1fr 10fr;
+  grid-template-columns: 6fr 0.1fr 20fr 0.1fr 8fr 0.1fr 16fr 0.1fr 10fr;
   align-items: center;
   justify-content: space-between;
   box-sizing: border-box;
   cursor: move;
-  background: var(--primary-color-light);
-  border-radius: 10px;;
+  background: var(--items);
+  border-radius: 10px;
   font-size: 1rem;
   font-weight: 600;
   text-align: center;
-  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
-              0 8px 8px 1px rgba(0, 0, 0, 0.14),
-              0 3px 10px 2px rgba(0, 0, 0, 0.12);
+  box-shadow:
+    0 5px 5px -3px rgba(0, 0, 0, 0.2),
+    0 8px 8px 1px rgba(0, 0, 0, 0.14),
+    0 3px 10px 2px rgba(0, 0, 0, 0.12);
+  transition: background-color 0.2s ease-in-out;
+  &:hover {
+    background: var(--items-hover);
+  }
 }
 
-.weapons-box{
+.weapons-box {
   height: 100%;
-  display:flex;
+  display: flex;
   flex-direction: column;
 }
 
-.heading-list{
-  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);
+.table-content {
+  flex: 0 0 calc(100% - 8rem);
   overflow-y: auto;
-    }
+}
 
-.bold{
+.bold {
   font-weight: bold;
 }
 
-.small{
-  font-size: .625rem;
+.small {
+  font-size: 0.625rem;
 }
 
-.large{
+.large {
   font-size: 1.125rem;
 }
 
-.vertical-line{
+.vertical-line {
   position: relative;
   width: 1px;
   height: 3.5rem;
@@ -64,20 +71,44 @@
 .vertical-line::before {
   content: "";
   position: absolute;
-  top: 15%; 
-  bottom: 15%; 
+  top: 15%;
+  bottom: 15%;
   left: 0;
   border-left: 1px solid black;
 }
 
+.footer {
+  height: 100%;
+  width: 100%;
+  border-radius: 0 0 10px 10px;
+  box-shadow: var(--shadow-top);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  button {
+    height: 3rem;
+    width: 80%;
+    border-radius: 10px;
+    background: var(--accept);
+    transition: background-color 0.2s ease-in-out;
+    box-shadow: var(--shadow);
+
+    &:hover {
+      background-color: var(--accept-hover);
+    }
+  }
+}
+
 //// Drag and Drop
 
 .cdk-drag-preview {
   box-sizing: border-box;
   border-radius: 10px;
-  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
-              0 8px 10px 1px rgba(0, 0, 0, 0.14),
-              0 3px 14px 2px rgba(0, 0, 0, 0.12);
+  box-shadow:
+    0 5px 5px -3px rgba(0, 0, 0, 0.2),
+    0 8px 10px 1px rgba(0, 0, 0, 0.14),
+    0 3px 14px 2px rgba(0, 0, 0, 0.12);
 }
 
 .cdk-drag-placeholder {
@@ -88,10 +119,6 @@
   transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
 }
 
-.example-box:last-child {
-  border: none;
-}
-
-.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder) {
+.item-list.cdk-drop-list-dragging .item:not(.cdk-drag-placeholder) {
   transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
-}
+}

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

@@ -14,12 +14,6 @@ import { WeaponModalComponent } from './weapon-modal/weapon-modal.component';
   styleUrls: ['./weapon-table.component.scss'],
 })
 export class WeaponTableComponent {
-  public constructor(
-    public dataAccessor: DataService,
-    public detailsAccessor: DetailsService,
-    private modalAccessor: ModalService
-  ) {}
-
   @Output() public createNewWeapon: EventEmitter<void> =
     new EventEmitter<void>();
 
@@ -43,6 +37,12 @@ export class WeaponTableComponent {
   public strengthValue: number = 0;
   public dexterityValue: number = 0;
 
+  public constructor(
+    public dataAccessor: DataService,
+    public detailsAccessor: DetailsService,
+    private modalAccessor: ModalService
+  ) {}
+
   public ngOnInit(): void {
     this.dataAccessor.strength$.subscribe((newValue: Attribute) => {
       this.strengthValue = newValue.value;
@@ -61,7 +61,7 @@ export class WeaponTableComponent {
   }
 
   /**
-   * Claculates the whole damage modifier array.
+   * Calculates the whole damage modifier array.
    * Calls the single damage modifier calculation for each weapon.
    */
   private calculateDamageModifierArray(): void {

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

@@ -17,13 +17,13 @@
   </div>
   @switch(active){ @case(1){
   <weapon-table #weaponTable></weapon-table>
-  <ui-button
+  <!-- <ui-button
     [type]="'add'"
     [size]="'xlarge'"
     [color]="'primary'"
     class="button-margin"
     (click)="openModal()"
-  ></ui-button>
+  ></ui-button> -->
   } @case(2){
   <spell-table #spellTable></spell-table>
   } }

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

@@ -1,6 +1,6 @@
 .weapon-spell-container {
   border: solid 1px var(--border-color);
-  // background-color: var(--field-background-color);
+  background-color: var(--field-background-color);
   box-shadow: var(--shadow-small);
   border-radius: 10px;
   height: 35.5rem;
@@ -9,20 +9,19 @@
 }
 
 .tab-button {
-  height: 2.25rem;
+  height: 3rem;
   font-size: 1.375rem;
   font-weight: 600;
   color: black;
   transition: all 0.25s ease-in-out;
-  background-color: var(--primary-color-light);
+  background-color: var(--tab);
   border-top: 0;
   border-left: 0;
   border-bottom: 1px solid var(--border-color);
   border-right: 0;
 
   &.active {
-    height: 2.75rem;
-    background-color: var(--primary-color);
+    background-color: var(--tab-active);
     border-bottom: 3px solid var(--border-color);
   }
 }
@@ -48,131 +47,12 @@
   }
 }
 
-weapon-table {
-  // 100% - tabbar height - add button height
-  height: calc(100% - 8rem);
-}
-
+weapon-table,
 spell-table {
-  // 100% - tabbar height - add button height
+  // 100% - tabbar height
   height: calc(100% - 3rem);
-  // height: 100%;
-}
-
-.button-margin {
-  margin: 1rem 0rem;
-}
-
-.example-list {
-  max-width: 100%;
-  border: solid 1px #323232;
-  min-height: 60px;
-  display: block;
-  background: transparent;
-  border-radius: 4px;
-  overflow: hidden;
-}
-
-.damage-list {
-  display: flex;
-  flex-direction: column;
-}
-
-.damage-row {
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  gap: 0.1rem;
-}
-
-.example-box {
-  padding: 20px 10px;
-  border-bottom: solid 1px #ccc;
-  color: rgba(0, 0, 0, 0.87);
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  box-sizing: border-box;
-  cursor: move;
-  background: white;
-  font-size: 14px;
-  input {
-    border: none;
-    background: transparent;
-    text-align: center;
-  }
 }
 
-//////////////// list item elemens ////////////////
-
-//////////////////////////////////////////////////
-
-.vertical-line {
-  width: 1px;
-  height: 3rem;
-  border-left: solid 1px rgb(121, 121, 121);
-}
-
-.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;
-}
-
-.weapon-range {
-  width: 4rem;
-  text-align: center;
-}
-
-.weapon-edit {
-  width: 3rem;
-  text-align: center;
-}
-
-// Drag and Drop
-
-.cdk-drag-preview {
-  box-sizing: border-box;
-  border-radius: 4px;
-  box-shadow:
-    0 5px 5px -3px rgba(0, 0, 0, 0.2),
-    0 8px 10px 1px rgba(0, 0, 0, 0.14),
-    0 3px 14px 2px rgba(0, 0, 0, 0.12);
-}
-
-.cdk-drag-placeholder {
-  opacity: 0;
-}
-
-.cdk-drag-animating {
-  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
-}
-
-.example-box:last-child {
-  border: none;
-}
-
-.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder) {
-  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
-}
+// .button-margin {
+//   margin: 1rem 0rem;
+// }

src/styles.scss

@@ -58,6 +58,10 @@
     --primary-color: #d8ac96;
 
     --shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5);
+    --shadow-inverted: 0px -5px 10px 0px rgba(0, 0, 0, 0.5);
+
+    --shadow-bottom: 0px 5px 10px 0px rgba(0, 0, 0, 0.5);
+    --shadow-top: 0px -5px 10px 0px rgba(0, 0, 0, 0.5);
     --background-color: #fff2e9;
     --field-background-color: #efc8af;
     --border-color: #8d8c8c;
@@ -67,6 +71,8 @@
     --items: #fff2e9;
     --items-hover: #f7e3d7;
 
+    --border: 1px solid var(--border-color);
+
     .responsive-small {
         display: none;
     }
@@ -84,6 +90,81 @@
         }
     }
 
+    // LISTS
+
+    .item-list {
+        width: 100%;
+        overflow: auto;
+    }
+
+    .item {
+        background-color: var(--items);
+        box-sizing: border-box;
+        border: var(--border);
+        border-radius: 10px;
+        box-shadow: var(--shadow);
+        cursor: move;
+        transition: background-color 0.2s ease-in-out;
+        &:hover {
+            background-color: var(--items-hover);
+        }
+    }
+
+    .empty-list {
+        text-align: center;
+        margin-top: 2rem;
+        font-size: 1.25rem;
+        font-weight: 500;
+    }
+
+    .footer {
+        height: 5rem;
+        width: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        border-radius: 0 0 10px 10px;
+        box-shadow: var(--shadow-top);
+
+        button {
+            height: 3rem;
+            width: 80%;
+            border-radius: 10px;
+            background: var(--accept);
+            transition: background-color 0.2s ease-in-out;
+            box-shadow: var(--shadow);
+
+            &:hover {
+                background-color: var(--accept-hover);
+            }
+        }
+    }
+
+    // DRAG AND DROP
+
+    .cdk-drag-preview {
+        box-sizing: border-box;
+        border-radius: 10px;
+        box-shadow:
+            0 5px 5px -3px rgba(0, 0, 0, 0.2),
+            0 8px 10px 1px rgba(0, 0, 0, 0.14),
+            0 3px 14px 2px rgba(0, 0, 0, 0.12);
+    }
+
+    .cdk-drag-placeholder {
+        opacity: 0;
+    }
+
+    .cdk-drag-animating {
+        transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+    }
+
+    .item-list.cdk-drop-list-dragging .item:not(.cdk-drag-placeholder) {
+        transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+    }
+
+    // TODO: Check which of the below are still used
+
     // Scrollbar
     ::-webkit-scrollbar {
         width: 0.5rem;