updated classes for dahboard components

.nx/cache/d/daemon.log

@@ -466567,3 +466567,75 @@ To fix this, set a unique name for each project in a project.json inside the pro
     at async processFilesAndCreateAndSerializeProjectGraph (c:\Softwareprojekte\DnD\node_modules\nx\src\daemon\server\project-graph-incremental-recomputation.js:138:17)
 [NX Daemon Server] - 2024-02-09T10:23:34.889Z - Time taken for 'hash changed files from watcher' 25.116800002753735ms
 [NX Daemon Server] - 2024-02-09T10:23:34.890Z - Done responding to the client null
+[NX Daemon Server] - 2024-02-10T14:46:32.707Z - Started listening on: \\.\pipe\nx\C:\Users\chris\AppData\Local\Temp\83d14e7134fc08a15480\d.sock
+[NX Daemon Server] - 2024-02-10T14:46:32.710Z - [WATCHER]: Subscribed to changes within: c:\Softwareprojekte\DnD (native)
+[NX Daemon Server] - 2024-02-10T14:46:32.714Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2024-02-10T14:46:32.715Z - Closed a connection. Number of open connections: 0
+[NX Daemon Server] - 2024-02-10T14:46:32.715Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2024-02-10T14:46:32.718Z - [REQUEST]: Client Request for Project Graph Received
+[NX Daemon Server] - 2024-02-10T14:46:34.025Z - 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-02-10T14:46:34.025Z - [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-02-10T14:46:34.026Z - Time taken for 'hash changed files from watcher' 402.97260001301765ms
+[NX Daemon Server] - 2024-02-10T14:46:34.026Z - Done responding to the client null
+[NX Daemon Server] - 2024-02-10T15:48:51.059Z - Started listening on: \\.\pipe\nx\C:\Users\chris\AppData\Local\Temp\83d14e7134fc08a15480\d.sock
+[NX Daemon Server] - 2024-02-10T15:48:51.064Z - [WATCHER]: Subscribed to changes within: c:\Softwareprojekte\DnD (native)
+[NX Daemon Server] - 2024-02-10T15:48:51.070Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2024-02-10T15:48:51.070Z - Closed a connection. Number of open connections: 0
+[NX Daemon Server] - 2024-02-10T15:48:51.071Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2024-02-10T15:48:51.073Z - [REQUEST]: Client Request for Project Graph Received
+[NX Daemon Server] - 2024-02-10T15:48:51.175Z - 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-02-10T15:48:51.175Z - [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-02-10T15:48:51.176Z - Time taken for 'hash changed files from watcher' 45.212000012397766ms
+[NX Daemon Server] - 2024-02-10T15:48:51.176Z - Done responding to the client null

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

@@ -1 +1 @@
-{"processId":8144}
+{"processId":16240}

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

@@ -15,18 +15,12 @@
   Issue auf Github. } }
 </div>
 <div class="attribute-container">
-  <div>
-    <div class="attribute-value">{{ attribute.value }}</div>
-    <div class="attribute-label">Attributwert</div>
-  </div>
-  <div>
-    <div class="attribute-value">{{ modifier }}</div>
-    <div class="attribute-label">Modifikator</div>
-  </div>
+  <value-box [(ngModel)]="attribute.value" [label]="'Attributwert'"></value-box>
+  <value-box [(ngModel)]="modifier" [label]="'Modifikator'"></value-box>
 </div>
 
 @if(attribute.name !== 'constitution'){
-<div class="details-subheading">Beeinflusste Fähigkeiten:</div>
+<div class="subheading">Beeinflusste Fähigkeiten:</div>
 <div class="skills">
   @for(skill of skillsTable[attribute.name]; track skill){
   <div class="skill-item">{{ skill }}</div>
@@ -95,8 +89,8 @@
 </mat-expansion-panel>
 
 <ng-template #strengthTemplate>
-  <div class="details-title">Stärke</div>
-  <div class="details-content">
+  <div class="title">Stärke</div>
+  <div class="content">
     Stärke misst die physische Kraft und Muskulatur deines Charakters. Ein hoher
     Stärkewert deutet auf körperliche Robustheit, Muskelkraft und
     Durchsetzungsvermögen hin. Charaktere mit hoher Stärke sind oft besser in
@@ -106,8 +100,8 @@
 </ng-template>
 
 <ng-template #dexterityTemplate>
-  <div class="details-title">Geschicklichkeit</div>
-  <div class="details-content">
+  <div class="title">Geschicklichkeit</div>
+  <div class="content">
     Geschicklichkeit repräsentiert die Beweglichkeit, Reflexe und allgemeine
     Körperbeherrschung deines Charakters. Ein hoher Geschicklichkeitswert deutet
     auf schnelle Reaktionen, geschickte Bewegungen und eine gute
@@ -117,8 +111,8 @@
 </ng-template>
 
 <ng-template #constitutionTemplate>
-  <div class="details-title">Konstitution</div>
-  <div class="details-content">
+  <div class="title">Konstitution</div>
+  <div class="content">
     Konstitution steht für die Widerstandsfähigkeit, Gesundheit und Ausdauer
     deines Charakters. Ein hoher Konstitutionswert bedeutet, dass dein Charakter
     robust ist und gut mit physischem Stress umgehen kann. Charaktere mit hoher
@@ -128,8 +122,8 @@
 </ng-template>
 
 <ng-template #intelligenceTemplate>
-  <div class="details-title">Intelligenz</div>
-  <div class="details-content">
+  <div class="title">Intelligenz</div>
+  <div class="content">
     Intelligenz misst die geistige Schärfe, das logische Denkvermögen und die
     Lernfähigkeit deines Charakters. Ein hoher Intelligenzwert deutet auf eine
     gute Allgemeinbildung, Wissensdurst und analytische Fähigkeiten hin.
@@ -138,8 +132,8 @@
 </ng-template>
 
 <ng-template #wisdomTemplate>
-  <div class="details-title">Weisheit</div>
-  <div class="details-content">
+  <div class="title">Weisheit</div>
+  <div class="content">
     Beschreibung: Weisheit repräsentiert die Wahrnehmung, Intuition und
     emotionale Intelligenz deines Charakters. Ein hoher Weisheitswert deutet auf
     eine gute Urteilsfähigkeit, Einsicht und innere Stärke hin. Charaktere mit
@@ -148,8 +142,8 @@
 </ng-template>
 
 <ng-template #charismaTemplate>
-  <div class="details-title">Charisma</div>
-  <div class="details-content">
+  <div class="title">Charisma</div>
+  <div class="content">
     Charisma spiegelt die Ausstrahlung, Überzeugungskraft und soziale
     Fähigkeiten deines Charakters wider. Ein hoher Charismawert bedeutet, dass
     dein Charakter charmant, einnehmend und überzeugend ist. Charaktere mit

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

@@ -4,24 +4,6 @@
     margin-top: 2rem;
 }
 
-.attribute-value {
-    width: 4rem;
-    height: 3rem;
-    font-size: 1.5rem;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin: auto;
-    border-radius: 10px;
-    background-color: white;
-    box-shadow: var(--shadow);
-}
-
-.attribute-label {
-    margin-top: 0.5rem;
-    font-weight: 500;
-}
-
 .skills {
     display: flex;
     flex-wrap: wrap;

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

@@ -1,16 +1,11 @@
-<div class="details-title">{{ attributeName }}</div>
-<div class="save-subheading">Rettungswurf</div>
+<div class="title">{{ attributeName }}</div>
+<div class="subheading" style="margin-top: 0.5rem">Rettungswurf</div>
 
-<div class="details-content">
+<div class="content">
   Ein Rettungswurf wird immer dann verlangt, wenn überprüft werden soll, ob ein
   Spieler einem Angriff oder äußeren Einfluss widerstehen kann. Durch das
   bestehen eines Rettungswurfes kann der Effekt verhindert, oder zumindest
   abgeschwächt werden.
 </div>
 
-<div class="details-value-container">
-  <div class="details-value">
-    {{ saveModifier }}
-  </div>
-  <div class="details-label">Modifikator</div>
-</div>
+<value-box [(ngModel)]="saveModifier" [label]="'Modifikator'"></value-box>

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

@@ -1,11 +0,0 @@
-.save-subheading{
-    font-size: 1.25rem;
-    text-align: center;
-    font-weight: bold;
-}
-
-.save-calculation-heading{
-    font-size: 1.25rem;
-    font-weight: 500;
-}
-

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

@@ -1,10 +1,3 @@
-<div class="details-title">{{ skillNames[skillName] }}</div>
-
-<div class="details-content">{{ descriptions[skillName] }}</div>
-
-<div class="details-value-container">
-  <div class="details-value" style="margin-top: 1.5rem">
-    {{ skillModifier }}
-  </div>
-  <div class="details-label">Modifikator</div>
-</div>
+<div class="title">{{ skillNames[skillName] }}</div>
+<div class="content">{{ descriptions[skillName] }}</div>
+<value-box [(ngModel)]="skillModifier" [label]="'Modifikator'"></value-box>

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

@@ -1,6 +1,6 @@
-<div class="details-title">Rüstungsklasse</div>
+<div class="title">Rüstungsklasse</div>
 
-<div class="details-content">
+<div class="content">
   Die Rüstungsklasse wird verwendet, um zu bestimmen, ob ein Angriff erfolgreich
   ist oder nicht. Ein Angreifer muss einen Würfelwurf (normalerweise einen W20)
   ablegen und dabei mindestens die Rüstungsklasse des Ziels erreichen. Wenn der
@@ -8,9 +8,4 @@
   Angriff abgewehrt.
 </div>
 
-<div class="details-value-container">
-  <div class="details-value" style="margin-top: 1.5rem">
-    {{ armorClass }}
-  </div>
-  <div class="details-label">Wert</div>
-</div>
+<value-box [(ngModel)]="armorClass" [label]="'Wert'"></value-box>

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

@@ -1,5 +0,0 @@
-.calculation{
-    font-size: 1.25rem;
-    font-weight: 500;
-    margin-top: 1.5rem;
-}

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

@@ -1,7 +1,7 @@
 <!-- DESCRIPTION -->
-<div class="details-title">Zustände</div>
+<div class="title">Zustände</div>
 
-<div class="details-content">
+<div class="content">
   Zustände ändern die Fähigkeiten einer Kreatur auf verschiedene Arten und
   können die Folgen von Zaubern, Klassenmerkmalen, Monsterangriffen oder anderen
   Fähigkeiten sein. Der Zustand hält solange an, bis er aufgehoben wird, oder
@@ -10,8 +10,8 @@
 
 <div class="condition-handling">
   <!-- CURRENTLY ACTIVE CONDITIONS -->
-  <div class="current-status-container">
-    <h4>Momentane Zustände</h4>
+  <div>
+    <div class="heading left t-0 b-075">Momentane Zustäne</div>
     <mat-accordion>
       @for (condition of conditions; let index = $index; track condition ) {
       <mat-expansion-panel>
@@ -24,9 +24,11 @@
           <li>{{ description }}</li>
           }
         </ul>
-        <button class="remove-condition" (click)="removeCondition(index)">
-          <img src="assets/icons/UIIcons/delete.svg" alt="remove" />
-        </button>
+        <icon-button
+          [icon]="'delete'"
+          style="margin: auto"
+          (click)="removeCondition(index)"
+        ></icon-button>
       </mat-expansion-panel>
       } @empty {
       <div class="empty-list">keine Zustände</div>
@@ -35,10 +37,10 @@
   </div>
 
   <!-- ADD CONDITIONS -->
-  <div class="add-condition-heading">Zustand hinzufügen</div>
+  <div class="heading left">Zustand hinzufügen</div>
 
   <div>
-    <mat-form-field appearance="outline" style="margin-top: 0.75rem">
+    <mat-form-field appearance="outline" class="t-075">
       <mat-label>Zustand</mat-label>
       <mat-select [(ngModel)]="currentCondition">
         @for (condition of notUsedConditions(); track condition) {
@@ -47,15 +49,13 @@
       </mat-select>
     </mat-form-field>
     @if(currentCondition !== '') {
-    <button
-      *ngIf="currentCondition !== ''"
+    <icon-button
+      style="display: inline; margin-left: 0.25rem"
+      [icon]="'add'"
       (click)="addCondition()"
-      class="add-condition"
-    >
-      <img src="assets/icons/UIIcons/add.svg" />
-    </button>
+    ></icon-button>
 
-    <div class="description-container">
+    <div>
       <ul>
         @for(description of conditionDescriptions[currentCondition]; track
         description){

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

@@ -1,9 +1,5 @@
-.current-status-container {
-  margin-top: 2rem;
-}
-
 .condition-handling {
-  height: calc(100% - 22rem);
+  height: calc(100% - 22.5rem);
   overflow: auto;
 }
 
@@ -18,11 +14,6 @@
   text-align: center;
 }
 
-.add-condition-heading {
-  margin-top: 2rem;
-  font-size: 1.25rem;
-  font-weight: bold;
-}
 .condition-row {
   display: flex;
 }
@@ -47,25 +38,10 @@
   margin: 0.5rem 0 0 0.5rem;
 }
 
-.remove-condition {
-  display: block;
+icon-button {
   margin: auto;
-  border: none;
-  background-color: transparent;
-  transition: all 0.25s ease;
-  border-radius: 10px;
-  &:hover {
-    background-color: rgba(211, 211, 211, 0.5);
-  }
-}
-mat-expansion-panel {
-  border: var(--border) !important;
-  box-shadow: none !important;
-  mat-expansion-panel-header {
-    font-size: 1.25rem;
-    font-weight: 600;
-  }
 }
+
 ::ng-deep mat-accordion {
   :first-child {
     border-radius: 10px 10px 0 0 !important;
@@ -75,6 +51,14 @@ mat-expansion-panel {
     border-radius: 0 0 10px 10px !important;
   }
 }
+mat-expansion-panel {
+  border: var(--border) !important;
+  box-shadow: none !important;
+  mat-expansion-panel-header {
+    font-size: 1.25rem;
+    font-weight: 600;
+  }
+}
 
 ::ng-deep .mat-mdc-text-field-wrapper {
   background-color: white;
@@ -94,6 +78,7 @@ mat-expansion-panel {
   }
 }
 
+// Auslagern
 .button-container {
   height: 9rem;
   width: 27rem;

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

@@ -3,20 +3,20 @@
 <div class="life-container">
   <value-box
     [isInput]="true"
-    [label]="'Maximale Trefferpunkte'"
     [(ngModel)]="maxHitPoints"
+    [label]="'Maximale Trefferpunkte'"
     (change)="checkValidity()"
   ></value-box>
   <value-box
     [isInput]="true"
-    [label]="'Momentane Trefferpunkte'"
     [(ngModel)]="currentHitPoints"
+    [label]="'Momentane Trefferpunkte'"
     (change)="checkValidity()"
   ></value-box>
   <value-box
     [isInput]="false"
-    [label]="'Temporäre Trefferpunkte'"
     [(ngModel)]="temporaryHitPoints"
+    [label]="'Temporäre Trefferpunkte'"
   ></value-box>
 </div>
 <hit-dice style="margin-top: 5rem" (setHitDice)="setHitDice($event)"></hit-dice>

src/app/shared-components/icon-button/icon-button.component.scss

@@ -1,8 +1,14 @@
+:host {
+    display: block; /* Make sure the host element is a block-level element */
+    width: 2.25rem;
+    height: 1.5rem;
+}
+
 button {
     border: none;
     background-color: transparent;
     transition: all 0.25s ease;
-    border-radius: 10px;
+    border-radius: 10px !important;
     &:hover {
         background-color: rgba(211, 211, 211, 0.5);
     }

src/app/shared-components/value-box/value-box.component.scss

@@ -3,19 +3,22 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    gap: 0.25rem;
+    gap: 0.375rem;
 }
 
 input,
 .value {
-    width: 3.25rem;
-    height: 2.375rem;
+    width: 3.5rem;
+    height: 2.75rem;
     font-size: 1.5rem;
     text-align: center;
     border-radius: 10px;
     border: none;
     box-shadow: var(--shadow);
     background-color: white;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 
     &::-webkit-inner-spin-button,
     &::-webkit-outer-spin-button {
@@ -26,4 +29,5 @@ input,
 
 label {
     text-align: center;
+    font-weight: 500;
 }