implemented rudimentary responsivity.

.nx/cache/d/daemon.log

@@ -459894,3 +459894,77 @@ To fix this, set a unique name for each project in a project.json inside the pro
 [NX Daemon Server] - 2023-11-21T06:28:50.941Z - Time taken for 'hash changed files from watcher' 27.9268000125885ms
 [NX Daemon Server] - 2023-11-21T06:28:50.942Z - [WATCHER]: Processing file changes in outputs
 [NX Daemon Server] - 2023-11-21T06:28:50.942Z - Done responding to the client null
+[NX Daemon Server] - 2023-11-23T15:17:19.233Z - Started listening on: \\.\pipe\nx\C:\Users\chris\AppData\Local\Temp\e6a479e02f1047051806\d.sock
+[NX Daemon Server] - 2023-11-23T15:17:19.244Z - [WATCHER]: Subscribed to changes within: c:\Users\chris\Softwareprojekte\Test\DnDTools (native)
+[NX Daemon Server] - 2023-11-23T15:17:19.245Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2023-11-23T15:17:19.247Z - Established a connection. Number of open connections: 2
+[NX Daemon Server] - 2023-11-23T15:17:19.248Z - Closed a connection. Number of open connections: 1
+[NX Daemon Server] - 2023-11-23T15:17:19.250Z - [REQUEST]: Client Request for Project Graph Received
+[NX Daemon Server] - 2023-11-23T15:17:19.864Z - 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] - 2023-11-23T15:17:19.864Z - [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:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\project-graph\utils\project-configuration-utils.js:97:15)
+    at buildProjectsConfigurationsFromProjectPathsAndPlugins (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\project-graph\utils\project-configuration-utils.js:70:19)
+    at createProjectConfigurations (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:131:129)
+    at WorkspaceContext.<anonymous> (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:82:39)
+    at getProjectConfigurationsFromContext (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\utils\workspace-context.js:26:29)
+    at _retrieveProjectConfigurations (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:81:72)
+    at retrieveProjectConfigurations (c:\Users\chris\Softwareprojekte\Test\DnDTools\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:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\daemon\server\project-graph-incremental-recomputation.js:102:34)
+    at async processFilesAndCreateAndSerializeProjectGraph (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\daemon\server\project-graph-incremental-recomputation.js:138:17)
+[NX Daemon Server] - 2023-11-23T15:17:19.865Z - Time taken for 'hash changed files from watcher' 85.01839995384216ms
+[NX Daemon Server] - 2023-11-23T15:17:19.866Z - [WATCHER]: Processing file changes in outputs
+[NX Daemon Server] - 2023-11-23T15:17:19.866Z - Done responding to the client null
+[NX Daemon Server] - 2023-11-23T16:11:14.682Z - Started listening on: \\.\pipe\nx\C:\Users\chris\AppData\Local\Temp\e6a479e02f1047051806\d.sock
+[NX Daemon Server] - 2023-11-23T16:11:14.689Z - [WATCHER]: Subscribed to changes within: c:\Users\chris\Softwareprojekte\Test\DnDTools (native)
+[NX Daemon Server] - 2023-11-23T16:11:14.695Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2023-11-23T16:11:14.697Z - Closed a connection. Number of open connections: 0
+[NX Daemon Server] - 2023-11-23T16:11:14.698Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2023-11-23T16:11:14.700Z - [REQUEST]: Client Request for Project Graph Received
+[NX Daemon Server] - 2023-11-23T16:11:15.172Z - 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] - 2023-11-23T16:11:15.172Z - [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:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\project-graph\utils\project-configuration-utils.js:97:15)
+    at buildProjectsConfigurationsFromProjectPathsAndPlugins (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\project-graph\utils\project-configuration-utils.js:70:19)
+    at createProjectConfigurations (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:131:129)
+    at WorkspaceContext.<anonymous> (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:82:39)
+    at getProjectConfigurationsFromContext (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\utils\workspace-context.js:26:29)
+    at _retrieveProjectConfigurations (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:81:72)
+    at retrieveProjectConfigurations (c:\Users\chris\Softwareprojekte\Test\DnDTools\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:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\daemon\server\project-graph-incremental-recomputation.js:102:34)
+    at async processFilesAndCreateAndSerializeProjectGraph (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\daemon\server\project-graph-incremental-recomputation.js:138:17)
+[NX Daemon Server] - 2023-11-23T16:11:15.174Z - Time taken for 'hash changed files from watcher' 55.83329999446869ms
+[NX Daemon Server] - 2023-11-23T16:11:15.174Z - [WATCHER]: Processing file changes in outputs
+[NX Daemon Server] - 2023-11-23T16:11:15.174Z - Done responding to the client null

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

@@ -1 +1 @@
-{"processId":19268}
+{"processId":18144}

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

@@ -2,7 +2,7 @@
   <!-- Here the different pages are rendered -->
   <router-outlet></router-outlet>
 
-  <app-tabbar></app-tabbar>
+  <app-tabbar id="tabbar" [class]="hide() ? 'hidden' : ''"></app-tabbar>
   <details-panel></details-panel>
 
   <app-offcanvas #offcanvas></app-offcanvas>

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

@@ -1,9 +1,13 @@
 .journal-container{
     overflow: hidden;
+    @media (height < 950px){
+        overflow: auto;
+    }
     height: 100vh;
     width: 100vw;
-    background-image: url("../../../assets/images/background-light.jpg");
-    background-size: cover;
+    // background-image: url("../../../assets/images/background-light.jpg");
+    // background-size: cover;
+    background-color: var(--background-color);    
 }
 
 
@@ -13,6 +17,13 @@ app-tabbar{
     display: flex;
     justify-content: center;
     width: 100%;
+    @media (height < 950px){
+        display: none;
+    }
+}
+
+.hidden{
+    display: none;
 }
 
 

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

@@ -14,8 +14,19 @@ export class JournalHomeComponent {
     this.offcanvasNavigation?.openNavigation();
   }
 
-  // public ngAfterViewInit(): void {
-  //   // Hier können funktionen aufgerufen werden, die in der child component definiert sind
-  //   this.offcanvasNavigation?.openNavigation();
-  // }
+  // If the weapon-container is too close to the bottom of the screen, the navbar is hidden.
+  public hide(): boolean {
+    const element = document.getElementsByClassName(
+      'weapon-spell-container'
+    )[0];
+
+    const rect = element!.getBoundingClientRect();
+    console.log(rect.bottom, window.innerHeight);
+    const distanceToBottom = window.innerHeight - rect.bottom;
+    if (distanceToBottom < (window.innerHeight / 100) * 10) {
+      return true;
+    } else {
+      return false;
+    }
+  }
 }

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

@@ -19,7 +19,7 @@
       </ng-template>
     </li>
     <li [ngbNavItem]="4">
-      <button ngbNavLink>Proficiencies and Languages</button>
+      <button ngbNavLink>Übungen</button>
       <ng-template ngbNavContent>
         <proficiencies-table></proficiencies-table>
       </ng-template>

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

@@ -1,5 +1,35 @@
 .ability-panel-container{
-    border: 1px solid #525252;
-    border-radius: 5px;
-    height: 85vh;
-}
+    border: solid 1px var(--border-color);
+    background-color: var(--field-background-color);
+    box-shadow: var(--shadow-small);
+    border-radius: 10px;
+
+    max-height: 85vh;
+}
+
+button{
+    font-size: 1.25rem;
+    font-weight: 600;
+    color: black;
+    border: 1px solid black !important;
+    transition: all 0.25s ease-in-out;
+    background-color: var(--primary-color-light);
+}
+
+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/attribute-skill-container/attribute-panel/attribute-field/attribute-field.component.scss

@@ -1,5 +1,8 @@
 .attribute-box{
-    border: solid 1px black;
+    border: solid 1px var(--border-color);
+    background-color: var(--field-background-color);
+    box-shadow: var(--shadow-small);
+    border-radius: 10px;
     text-align: center;
     cursor: pointer;
 

src/app/journal/journal-stats/attribute-skill-container/attribute-skill-container.component.scss

@@ -2,16 +2,12 @@
     display: flex;
     flex-direction: row;
     justify-content: space-between;
-    border: solid 1px black;;
 
     .skill-column-left{
         width: 35%;
-        border: solid 1px green;
-    }
-
-    skill-panel{
-        // width: 60%;
-        border: solid 1px cyan;
+        @media (width < 1700px){
+            width: 32%
+        }
     }
 
     .skill-column-right{
@@ -19,7 +15,9 @@
         flex-direction: column;
         justify-content: space-between;
         width: 60%;
-        border: solid 1px red;
+        @media (width < 1700px){
+            width: 64%
+        }
         gap: 2rem;
     }
 }

src/app/journal/journal-stats/attribute-skill-container/save-throw-panel/save-throw-field/save-throw-field.component.scss

@@ -1,11 +1,10 @@
 .save-throw-field{
-    border: solid 1px black;
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: space-between;
     text-align: center;
-
+    
     .save-throw-field__input{
         width: 15%;
     }

src/app/journal/journal-stats/attribute-skill-container/save-throw-panel/save-throw-panel.component.scss

@@ -1,5 +1,6 @@
-// .save-throw-panel{
-//     background-color: var(--background-color);
-//     border-radius: 10px;
-
-// }
+.save-throw-panel{
+        border: solid 1px var(--border-color);
+    background-color: var(--field-background-color);
+    box-shadow: var(--shadow-small);
+    border-radius: 10px;
+}

src/app/journal/journal-stats/attribute-skill-container/skill-panel/skill-field/skill-field.component.scss

@@ -1,32 +1,30 @@
 .skill-box{
-    border: solid 1px black;
+    // border: solid 1px black;
     display: flex;
-    flex-direction: row;
     align-items: center;
     justify-content: space-between;
     text-align: center;
 
     .skill-proficiency-input{
-        width: 8%;
+        width: 15%;
     }
 
     .skill-attribute-name{
         width: 15%;
-        font-size: 1rem;
         font-weight: 600;
         color: #494949;
     }
 
     .skill-name{
         width: 50%;
-        font-size: 1.125rem;
+        font-size: 1.125em;
         font-weight: 600;
         text-align: start;
     }
     
     .skill-modifier{
         width: 20%;
-        font-size: 1.5rem;
+        font-size: 1.5em;
         font-weight: 600;
     }
 }

src/app/journal/journal-stats/attribute-skill-container/skill-panel/skill-panel.component.scss

@@ -1,5 +1,11 @@
 .skill-panel{
     display: flex;
     flex-direction: column;
-    gap: 0.25rem;
+    border: solid 1px var(--border-color);
+    background-color: var(--field-background-color);
+    box-shadow: var(--shadow-small);
+    border-radius: 10px;
+    @media (height < 900px){
+            margin-bottom: 4rem;
+        }
 }

src/app/journal/journal-stats/info-row/armor-class/armor-class.component.html

@@ -6,5 +6,6 @@
     (change)="updateValue()"
     (click)="$event.stopPropagation()"
   />
-  <div class="info-label">Rüstungsklasse</div>
+  <div class="info-label responsive-small">Rüstung</div>
+  <div class="info-label responsive-large">Rüstungsklasse</div>
 </div>

src/app/journal/journal-stats/info-row/conditions/conditions-details/conditions-details.component.html

@@ -9,27 +9,46 @@
 
 <div class="current-status-container">
   @for (condition of conditions; let index = $index; track condition ) {
-  <div class="status-item">
-    {{ condition }}
+  <div class="condition-row">
+    <div class="condition">
+      <button class="accordion" (click)="toggleAcordion($event)">
+        {{ condition }}
+      </button>
+      <div class="panel">
+        @for(description of conditionDescriptions[condition]; track
+        description){
+        <div class="status-item-description">{{ description }}</div>
+        }
+      </div>
+    </div>
+
     <button class="status-item-remove" (click)="removeCondition(index)">
       X
     </button>
   </div>
-  @for(description of conditionDescriptions[condition]; track description){
-  <div class="status-item-description">
-    {{ description }}
-  </div>
-  } } @empty {
-  <div class="empty-list">-</div>
+  } @empty {
+  <div class="empty-list">keine Zustände</div>
   }
 </div>
 
-<select [(ngModel)]="currentCondition">
-  <option *ngFor="let status of notUsedConditions()" [value]="status">
-    {{ status }}
-  </option>
-</select>
-<button (click)="addCondition()">hinzufügen</button>
+<div class="details-subheading centered">Zustand hinzufügen</div>
+<div class="condition-selection">
+  <select [(ngModel)]="currentCondition">
+    <option *ngFor="let status of notUsedConditions()" [value]="status">
+      {{ status }}
+    </option>
+  </select>
+  <button (click)="addCondition()">hinzufügen</button>
+</div>
+
+@if (currentCondition !== ''){
+<div class="description-container">
+  @for(description of conditionDescriptions[currentCondition]; track
+  description){
+  <div class="status-item-description">{{ description }}</div>
+  }
+</div>
+}
 
 <div class="vertical-button-wrapper-2">
   <ui-button

src/app/journal/journal-stats/info-row/conditions/conditions-details/conditions-details.component.scss

@@ -6,4 +6,77 @@
 .status-item{
     font-size: 1.25rem;
     font-weight: 500;
+}
+
+.empty-list{
+    font-size: 1.25rem;
+    font-weight: 600;
+    text-align: center;
+}
+.condition-row{
+    display: flex;
+}
+
+.condition{
+    width: 100%;
+}
+
+.condition-selection{
+    margin-top: 0.5rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 1rem;
+}
+
+.condition-description{
+    margin-top: 1rem;
+}
+
+.status-item-description{
+    margin: 0.5rem 0 0 0.5rem;
+}
+
+
+
+// Accordion
+
+/* Style the buttons that are used to open and close the accordion panel */
+.accordion {
+  background-color: #eee;
+  color: #444;
+  cursor: pointer;
+  padding: 0.5rem;
+  width: 100%;
+  text-align: left;
+  border: none;
+  outline: none;
+  font-size: 1.25rem;
+    font-weight: 500;
+}
+
+/* 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 {
+  background-color: #ccc;
+}
+
+/* Style the accordion panel. Note: hidden by default */
+.panel {
+  padding: 0 18px;
+  background-color: white;
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.4s ease-in-out
+}
+
+.accordion:after {
+  content: '\02795'; /* Unicode character for "plus" sign (+) */
+  font-size: 13px;
+  color: #777;
+  float: right;
+  margin-left: 5px;
+}
+
+.active:after {
+  content: "\2796"; /* Unicode character for "minus" sign (-) */
 }

src/app/journal/journal-stats/info-row/conditions/conditions-details/conditions-details.component.ts

@@ -108,6 +108,7 @@ export class ConditionsDetailsComponent {
 
   public addCondition(): void {
     this.conditions.push(this.currentCondition);
+    this.currentCondition = '';
   }
 
   public removeCondition(index: number): void {
@@ -121,4 +122,16 @@ export class ConditionsDetailsComponent {
       this.detailsAccessor.closePanel({ state: result });
     }
   }
+
+  public toggleAcordion(event: any): void {
+    if (event.target.classList.contains('accordion')) {
+      event.target.classList.toggle('active');
+      var panel = event.target.nextElementSibling;
+      if (panel.style.maxHeight) {
+        panel.style.maxHeight = null;
+      } else {
+        panel.style.maxHeight = panel.scrollHeight + 'px'; //Hier ansetzen um es später scrollable zu machen
+      }
+    }
+  }
 }

src/app/journal/journal-stats/info-row/conditions/conditions.component.scss

@@ -1,8 +1,11 @@
 .condition-container{
     display: flex;
-    border: 1px solid #8d8c8c;
+    border: solid 1px var(--border-color);
+    background-color: var(--field-background-color);
+    box-shadow: var(--shadow-small);
+    border-radius: 10px;
     height: 7rem;
-    width: 16rem;
+    width: 17rem;
 
 }
 

src/app/journal/journal-stats/info-row/death-save/death-save.component.scss

@@ -4,7 +4,10 @@
     justify-content: space-between;
     width: 12rem;
     height: 7rem;
-    border: 1px solid #8d8c8c;
+    border: solid 1px var(--border-color);
+    background-color: var(--field-background-color);
+    box-shadow: var(--shadow-small);
+    border-radius: 10px;
 }
 
 .save-row{

src/app/journal/journal-stats/info-row/movement/movement.component.html

@@ -6,5 +6,6 @@
     (change)="updateValue()"
     (click)="$event.stopPropagation()"
   />
-  <div class="info-label">Bewegungsrate</div>
+  <div class="info-label responsive-large">Bewegungsrate</div>
+  <div class="info-label responsive-small">Bewegung</div>
 </div>

src/app/journal/journal-stats/info-row/proficiency/proficiency-field.component.html

@@ -6,5 +6,6 @@
     (change)="updateValue()"
     (click)="$event.stopPropagation()"
   />
-  <div class="info-label">Übungsbonus</div>
+  <div class="info-label responsive-large">Übungsbonus</div>
+  <div class="info-label responsive-small">Übung</div>
 </div>

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

@@ -15,14 +15,5 @@
         <ability-panel></ability-panel>
       </div>
     </div>
-
-    <!-- Life and Weapon Container -->
-    <!-- <div class="life-weapon-container">
-      <app-life-container></app-life-container>
-      <app-weapons-container></app-weapons-container>
-    </div>
-
-
-    <ability-panel></ability-panel> -->
   </div>
 </div>

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

@@ -7,29 +7,35 @@
 .stats-container{
     display: flex;
     justify-content: space-between;
-    margin: 2rem 2rem 2rem 2rem;
+    margin: 2rem ;
     gap: 2rem;
-    border: 1px solid #ff0000;
     width: 100%;
 }
 
 attribute-skill-container{
     width: 25%;
+
+    @media (width < 1700px){
+        width: 28%;
+    
+    }
 }
 
 .container2{
     display: flex;
     flex-direction: column;
     gap: 1.5rem;
-    justify-content: space-between;
-    border: 1px solid #00ff22;
     width: 75%;
+
+    @media (width < 1700px){
+        width: 72%;
+    }
 }
 
 .rest{
     display: flex;
     justify-content: space-between;
-    border: 1px solid #ff00ff;
+    // border: 1px solid #ff00ff;
     width: 100%;
 }
 
@@ -38,7 +44,7 @@ attribute-skill-container{
     flex-direction: column;
     // justify-content: space-between;
     gap: 2rem;
-    border: 3px solid #eeff00;
+    // border: 3px solid #eeff00;
     width: 49%;
 }
 
@@ -49,12 +55,12 @@ ability-panel{
 .life{
     width: 100%;
     height: 20%;
-    border: 3px solid #020202;
+    // border: 3px solid #020202;
 }
 
 .weapon{
     width: 100%;
     min-height: 50%;
     max-height: 70%;
-    border: 3px solid #5e0e0e;
+    // border: 3px solid #5e0e0e;
 }

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

@@ -1,69 +1,72 @@
 <div class="details-title">{{ spell.name }}</div>
 
-<div class="details-subheading">
-  Beschreibung
-  <div class="details-content">
-    {{ spell.description }}
-  </div>
+<div class="details-subheading">Beschreibung</div>
+<div class="details-content">
+  {{ spell.description }}
 </div>
-
-<div class="details-subheading">
-  Komponenten:
-  <div class="details-content">
-    <span *ngIf="spell.needsVerbal"> Verbal </span>
-    <span *ngIf="spell.needsSomatic"> Geste </span>
+<!-- <form>
+  <fieldset>
+    <legend class="details-subheading">Komponenten</legend>
+    <span *ngIf="spell.needsVerbal"> Verbal, </span>
+    <span *ngIf="spell.needsSomatic"> Geste, </span>
     <span *ngIf="spell.needsMaterial"> Material </span>
-  </div>
+  </fieldset>
+</form> -->
+
+<div class="details-subheading">Komponenten:</div>
+<div class="details-content-small">
+  <span *ngIf="spell.needsVerbal"> Verbal, </span>
+  <span *ngIf="spell.needsSomatic"> Geste, </span>
+  <span *ngIf="spell.needsMaterial"> Material </span>
 </div>
 
-<div class="details-subheading">
-  Eigenschaften
-  <div class="details-content">
-    <div *ngIf="spell.canRitual">Kann als Ritual gewirkt werden</div>
-    <div *ngIf="spell.needsConcentration">Benötigt Konzentration</div>
-    <div>Schule: {{ spell.school }}</div>
-  </div>
+<div class="details-subheading">Eigenschaften</div>
+<div class="details-content-small">
+  <div *ngIf="spell.canRitual">Kann als Ritual gewirkt werden</div>
+  <div *ngIf="spell.needsConcentration">Benötigt Konzentration</div>
+  <div>Schule: {{ spell.school }}</div>
 </div>
 
-<div class="details-subheading">
-  Reichweite
-  <div class="details-content">
-    <div>Reichweite: {{ spell.range }} ft.</div>
-    <div *ngIf="spell.hasAreaOfEffect">
-      Flächeneffekt: {{ spell.radius }} ft. {{ spell.areaOfEffectType }}
-    </div>
+<div class="details-subheading">Reichweite</div>
+<div class="details-content-small">
+  <div>Reichweite: {{ spell.range }} ft.</div>
+  <div *ngIf="spell.hasAreaOfEffect">
+    Flächeneffekt: {{ spell.radius }} ft. {{ spell.areaOfEffectType }}
   </div>
 </div>
 
 <!-- Angriff /Rettungswurf -->
 
-<div class="details-subheading">
-  Effekte
-  <div class="details-content">
-    <div *ngIf="spell.needsSavingThrow">
-      {{ spell.savingThrowAttribute }} Rettungswurf: DC: {{ modifiers.saveDC }}
+<div class="details-subheading">Effekte</div>
+<div class="details-content-small">
+  <div *ngIf="spell.needsSavingThrow">
+    <div class="details-value">{{ modifiers.saveDC }}</div>
+    <div class="details-label">
+      {{
+        spell.savingThrowAttribute
+          ? attributeTranslator[spell.savingThrowAttribute]
+          : ""
+      }}
     </div>
-    <div *ngIf="spell.needsAttackRoll">
-      Anfgriffsmodifikator: {{ modifiers.attackBonus }}
-    </div>
-    <ng-container *ngIf="spell.doesDamage">
-      Schaden:
-      <div *ngFor="let damage of spell.damage">
-        {{ damage.diceNumber }} {{ damage.diceType }}
-        {{ damage.additionalDamage }} {{ damage.damageType }}
-      </div>
-    </ng-container>
   </div>
-</div>
-
-<div class="details-subheading" *ngIf="spell.doesHeal">
-  Heilung
-  <div class="details-content">
-    {{ spell.healAmount!.diceNumber }} {{ spell.healAmount!.diceType }}
-    {{ spell.healAmount?.additionalHeal }}
+  <div *ngIf="spell.needsAttackRoll">
+    Anfgriffsmodifikator: {{ modifiers.attackBonus }}
   </div>
+  <ng-container *ngIf="spell.doesDamage">
+    Schaden:
+    <div *ngFor="let damage of spell.damage">
+      {{ damage.diceNumber }} {{ damage.diceType }}
+      {{ damage.additionalDamage }} {{ damage.damageType }}
+    </div>
+  </ng-container>
 </div>
 
+<!-- <div class="details-subheading" *ngIf="spell.doesHeal">Heilung</div>
+<div class="details-content">
+  {{ spell.healAmount!.diceNumber }} {{ spell.healAmount!.diceType }}
+  {{ spell.healAmount?.additionalHeal }}
+</div> -->
+
 <div class="vertical-button-wrapper-3">
   <ui-button
     [type]="'edit'"

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

@@ -13,6 +13,15 @@ export class SpellDetailsComponent {
   @Input() spell!: Spell;
   @Input() modifiers: any = {};
 
+  public attributeTranslator: any = {
+    strength: 'Stärke-Rettungswurf',
+    dexterity: 'Geschicklichkeits-Rettungswurf',
+    constitution: 'Konstitutions-Rettungswurf',
+    intelligence: 'Intelligenz-Rettungswurf',
+    wisdom: 'Weisheits-Rettungswurf',
+    charisma: 'Charisma-Rettungswurf',
+  };
+
   public close(result: string): void {
     this.detailsAccessor.closePanel(result);
   }

src/styles.scss

@@ -9,9 +9,10 @@ $dialog-position-right: 20%;
 
 @import 'node_modules/ngx-smart-modal/styles/ngx-smart-modal.scss';
 
-// general
+
 :root{
-    // colors
+
+    // COLORS
     --primary-color: #d8ac96;
     --primary-color-light: #e8c7b5;
     --primary-color-dark: #d89777;
@@ -27,15 +28,44 @@ $dialog-position-right: 20%;
 
     --background-color: #fff2e9;
 
+    --field-background-color: #efc8af;
+
+    --border-color: #8d8c8c;
+    --border-color2: #8d8c8c;
+
+
     // shadows
     --shadow-small: 4px 4px 10px 4px rgba(0,0,0,0.2);
     --shadow-medium: 4px 4px 10px 6px rgba(0,0,0,0.2);
-    --shadow-large: 4px 4px 10px 8px rgba(0,0,0,0.2);
-                   
+    --shadow-large: 4px 4px 10px 8px rgba(0,0,0,0.2);                   
     
+    @mixin field-styling{
+        border: solid 1px var(--border-color);
+        background-color: var(--field-background-color);
+        box-shadow: var(--shadow-small);
+        border-radius: 10px;
+    }
+
+    .responsive-small{
+        display: none;
+    }
+
+    .responsive-large{
+        display: block;
+    }
+
+    @media (width < 1640px) {
+        .responsive-large {
+            display: none;
+        }
+        .responsive-small {
+            display: block;
+        }
+    }
 }
 
 
+
 //  Info Row
 
 .info-container{
@@ -43,9 +73,17 @@ $dialog-position-right: 20%;
     flex-direction: column;
     justify-content: space-between;
     align-items: center;
-    border: 1px solid #8d8c8c;
-    width: 10rem;
+    border: solid 1px var(--border-color);
+    background-color: var(--field-background-color);
+    box-shadow: var(--shadow-small);
+    border-radius: 10px;
     height: 7rem;
+    @media (width > 1699px){
+       width: 10rem;     
+    }
+    @media (width < 1640px) {
+        width: 7rem
+    }
 }
 
 .info-input{
@@ -72,6 +110,17 @@ $dialog-position-right: 20%;
     padding: 0.5rem;
 }
 
+input[type="checkbox"] {
+    height: 1.25rem;
+    width: 1.25rem;
+}
+
+input[type="checkbox"]:checked {
+    color: red;
+}
+
+
+
 
 
 // details-panel
@@ -128,6 +177,10 @@ $dialog-position-right: 20%;
     margin-top: 1.5rem;
 }
 
+.details-content-small{
+    margin-top: 0.5rem;
+}
+
 .details-bold{
     font-weight: 500;
 }