Dashboard made responsive for medium and small screens

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

@@ -4,15 +4,4 @@
   <details-panel></details-panel>
   <navigation-panel></navigation-panel>
   <modal></modal>
-
-  <div
-    style="
-      position: absolute;
-      left: 0;
-      top: 864px;
-      z-index: 10000;
-      border: 2px solid black;
-      width: 100%;
-    "
-  ></div>
 </div>

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

@@ -3,9 +3,12 @@
     background-color: var(--field-background-color);
     box-shadow: var(--shadow);
     border-radius: 10px;
-    height: 48rem;
+    height: 48.125rem;
     display: flex;
     flex-direction: column;
+    @media (height < 934px) {
+        height: 43.625rem;
+    }
 }
 
 .tab-row {

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

@@ -1,5 +1,11 @@
-.attribute-panel{
+.attribute-panel {
     display: flex;
     flex-direction: column;
+    height: calc(100vh - 2.75rem);
     gap: 2rem;
+
+    @media (height < 934px) {
+        justify-content: space-between;
+        gap: none;
+    }
 }

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

@@ -1,23 +1,22 @@
-.attribute-skill-container{
+.attribute-skill-container {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
 
-    .skill-column-left{
+    .skill-column-left {
         width: 35%;
-        @media (width < 1700px){
-            width: 32%
+        @media (width < 1700px) {
+            width: 32%;
         }
     }
 
-    .skill-column-right{
+    .skill-column-right {
         display: flex;
         flex-direction: column;
-        justify-content: space-between;
         width: 60%;
-        @media (width < 1700px){
-            width: 64%
+        @media (width < 1700px) {
+            width: 64%;
         }
-        gap: 2rem;
+        gap: 1.5rem;
     }
-}
+}

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

@@ -1,24 +1,27 @@
-.save-throw-field{
+.save-throw-field {
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: space-between;
     text-align: center;
-    
-    .save-throw-field__input{
+    height: 2.25rem;
+    @media (height < 934px) {
+        height: 2.0675rem;
+    }
+    .save-throw-field__input {
         width: 15%;
     }
 
-    .save-throw-field__name{
+    .save-throw-field__name {
         width: 50%;
         font-size: 1.125rem;
         font-weight: 600;
         text-align: start;
     }
-    
-    .save-throw-field__value{
+
+    .save-throw-field__value {
         width: 20%;
         font-size: 1.5rem;
         font-weight: 600;
     }
-}
+}

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

@@ -1,5 +1,5 @@
 <div class="save-throw-panel">
-  <ng-container *ngFor="let attribute of attributes">
-    <save-throw-field [attributeName]="attribute"></save-throw-field>
-  </ng-container>
+  @for(attribute of attributes; track attributes){
+  <save-throw-field [attributeName]="attribute"></save-throw-field>
+  }
 </div>

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

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

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

@@ -1,30 +1,34 @@
-.skill-box{
-    // border: solid 1px black;
+.skill-box {
     display: flex;
     align-items: center;
     justify-content: space-between;
     text-align: center;
+    height: 2.25rem;
 
-    .skill-proficiency-input{
+    @media (height < 934px) {
+        height: 2.0675rem;
+    }
+
+    .skill-proficiency-input {
         width: 15%;
     }
 
-    .skill-attribute-name{
+    .skill-attribute-name {
         width: 15%;
         font-weight: 600;
         color: #494949;
     }
 
-    .skill-name{
+    .skill-name {
         width: 50%;
         font-size: 1.125em;
         font-weight: 600;
         text-align: start;
     }
-    
-    .skill-modifier{
+
+    .skill-modifier {
         width: 20%;
         font-size: 1.5em;
         font-weight: 600;
     }
-}
+}

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

@@ -2,11 +2,9 @@
   <div class="condition" (click)="openConditionDetails()">
     <div class="condition-list">
       @for (condition of conditions; track condition ) {
-      <div class="condition-item">
-        <div style="padding-left: 0.5rem">{{ condition }}</div>
-      </div>
+      <div class="condition-item">{{ condition }}</div>
       } @empty {
-      <div class="empty-list">-</div>
+      <div class="empty">-</div>
       }
     </div>
     <div class="condition-label">Zustände</div>

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

@@ -1,75 +1,66 @@
-.condition-container{
+.condition-container {
     display: flex;
     border: solid 1px var(--border-color);
     background-color: var(--field-background-color);
     box-shadow: var(--shadow-small);
     border-radius: 10px;
-    height: 7rem;
+    height: 6rem;
     width: 17rem;
-
 }
 
-.condition{
+.condition {
     width: 100%;
-    display:flex;
+    display: flex;
     flex-direction: column;
+    height: 6rem;
     justify-content: space-between;
-    
 }
 
-.condition-list{
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    width: 100%;
-    height: 5rem;
-    margin-top: 0.5rem;
+.condition-list {
+    height: 4rem;
+    margin: 0.25rem 0.25rem 0 0.25rem;
     overflow-y: auto;
+    background-color: var(--background-color);
+    border-radius: 10px;
 }
 
-.condition-item{
+.condition-item {
     width: 98%;
+    padding-left: 0.5rem;
 }
 
-.empty-list{
-    height: 5rem;
-    display: flex;  
-    justify-content: center;
-    align-items: center;
+.empty {
+    text-align: center;
     font-size: 2rem;
     font-weight: 600;
 }
 
-
-.condition-label{
+.condition-label {
     font-size: 1.25rem;
     font-weight: 600;
     text-align: center;
-    height: 2.5rem;
-    padding: 0 0.5rem 0.5rem 0.5rem;
+    padding: 0 0.5rem 0.25rem 0.5rem;
 }
 
 // General
-.vertical-line{
-  position: relative;
-  width: 1px;
-//   height: 3.5rem;
+.vertical-line {
+    position: relative;
+    width: 1px;
 }
 
 .vertical-line::before {
-  content: "";
-  position: absolute;
-  top: 10%; 
-  bottom: 10%; 
-  left: 0;
-  border-left: 1px solid black;
+    content: "";
+    position: absolute;
+    top: 10%;
+    bottom: 10%;
+    left: 0;
+    border-left: 1px solid black;
 }
 
-.exhaustion{
+.exhaustion {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     width: 100%;
 }
-

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

@@ -1,5 +1,5 @@
 <div class="death-save-container" (click)="openDetails()">
-  <div style="margin: 0.875rem 0 0 0.4rem">
+  <div style="margin: 0.625rem 0 0 0.4rem">
     <div class="save-row">
       <div class="save-label">Erfolg</div>
       <div class="save-checkbox" (click)="$event.stopPropagation()">
@@ -22,7 +22,7 @@
     </div>
     <div class="save-row">
       <div class="save-label">Fehlschlag</div>
-      <div class="save-checkbox" (click)="$event.stopPropagation()">
+      <div class="save-checkbox fail" (click)="$event.stopPropagation()">
         <input
           type="checkbox"
           [(ngModel)]="deathSaveFail1"

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

@@ -1,39 +1,43 @@
-.death-save-container{
+.death-save-container {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     width: 12rem;
-    height: 7rem;
-    border: solid 1px var(--border-color);
+    height: 6rem;
+    border: var(--border);
     background-color: var(--field-background-color);
-    box-shadow: var(--shadow-small);
+    box-shadow: var(--shadow);
     border-radius: 10px;
 }
 
-.save-row{
+.save-row {
     display: flex;
     width: 100%;
     justify-content: space-between;
-    // align-items: center;
 }
 
-.save-label{
-    // font-size: 1.25rem;
+.save-label {
     font-weight: 600;
     text-align: center;
     padding: 0 0.5rem 0 0.5rem;
-
 }
 
-.save-checkbox{
+.save-checkbox {
     display: flex;
     gap: 0.5rem;
     margin-right: 1rem;
 }
 
-.death-save{
+.death-save {
     text-align: center;
     font-size: 1.25rem;
     font-weight: 600;
-    margin: 0.5rem 0 
-}
+    padding-bottom: 0.25rem;
+    text-align: center;
+}
+
+.fail {
+    input[type="checkbox"] {
+        accent-color: var(--delete) !important;
+    }
+}

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

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

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

@@ -21,6 +21,7 @@
     height: 4rem;
     margin: 0 0.5rem;
     border-radius: 10px;
+    box-shadow: var(--shadow);
     overflow: hidden;
     cursor: pointer;
     &:hover {

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

@@ -1,11 +1,14 @@
 .weapon-spell-container {
   border: solid 1px var(--border-color);
   background-color: var(--field-background-color);
-  box-shadow: var(--shadow-small);
+  box-shadow: var(--shadow);
   border-radius: 10px;
   height: 35.5rem;
   display: flex;
   flex-direction: column;
+  @media (height < 934px) {
+    height: 31.5rem;
+  }
 }
 
 .tab-button {

src/styles.scss

@@ -91,12 +91,6 @@
         }
     }
 
-    @media (height < 934px) {
-        .item-list {
-            background-color: red;
-        }
-    }
-
     // LISTS
 
     .item-list {
@@ -224,7 +218,7 @@
     background-color: var(--field-background-color);
     box-shadow: var(--shadow-small);
     border-radius: 10px;
-    height: 7rem;
+    height: 6rem;
     @media (width > 1699px) {
         width: 10rem;
     }
@@ -239,7 +233,7 @@
     text-align: center;
     background-color: transparent;
     width: 5rem;
-    margin-top: 1rem;
+    margin-top: 0.375rem;
     font-size: 2rem;
     font-weight: 600;
 }
@@ -254,7 +248,7 @@
     font-size: 1.25rem;
     font-weight: 600;
     text-align: center;
-    padding: 0.5rem;
+    padding: 0.25rem 0.5rem;
 }
 
 input[type="checkbox"] {