basic responsivity for most of the dashboard

src/app/app.component.scss

@@ -1,3 +1,5 @@
+@import "../responsive";
+
 .dimension {
   position: absolute;
   z-index: 100;

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

@@ -1,6 +1,7 @@
 .journal-container {
   position: relative;
   overflow: auto;
-  padding: 1.5rem 1.5rem 0 1.5rem;
+  height: 100vh;
+  width: 100vw;
   background-color: var(--background-color);
 }

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

@@ -1,6 +1,5 @@
 <div class="attribute-box" (click)="openDetails()">
   <div>
-    <!-- <label for="attribute-vale" class="attribute-name">{{ attributeNames[attributeName] }}</label> -->
     <label for="attribute-vale" class="attribute-name">
       {{ "attributes." + attribute.name | translate }}</label
     >

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

@@ -1,5 +1,6 @@
 .attribute-box {
-  border: solid 1px var(--border-color);
+  width: 8rem;
+  border: var(--border);
   background-color: var(--field-background-color);
   box-shadow: var(--shadow);
   border-radius: 10px;

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

@@ -0,0 +1,5 @@
+<div class="attribute-panel">
+  @for (attribute of attributes; track attribute) {
+    <attribute-field [attributeName]="attribute"></attribute-field>
+  }
+</div>

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

@@ -0,0 +1,5 @@
+.attribute-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+}

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

@@ -1,6 +0,0 @@
-<div class="attribute-panel">
-  <attribute-field
-    *ngFor="let attribute of attributes"
-    [attributeName]="attribute"
-  ></attribute-field>
-</div>

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

@@ -1,11 +0,0 @@
-.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.html

@@ -1,10 +0,0 @@
-<div class="attribute-skill-container">
-  <div class="skill-column-left">
-    <attribute-panel></attribute-panel>
-  </div>
-
-  <div class="skill-column-right">
-    <save-throw-panel></save-throw-panel>
-    <skill-panel></skill-panel>
-  </div>
-</div>

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

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

src/app/journal/journal-stats/attribute-skill-container/attribute-skill-container.component.spec.ts

@@ -1,21 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { AttributeSkillContainerComponent } from './attribute-skill-container.component';
-
-describe('AttributeSkillContainerComponent', () => {
-  let component: AttributeSkillContainerComponent;
-  let fixture: ComponentFixture<AttributeSkillContainerComponent>;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      declarations: [AttributeSkillContainerComponent],
-    });
-    fixture = TestBed.createComponent(AttributeSkillContainerComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

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

@@ -1,10 +0,0 @@
-import { Component, Input } from '@angular/core';
-
-@Component({
-  selector: 'attribute-skill-container',
-  templateUrl: './attribute-skill-container.component.html',
-  styleUrls: ['./attribute-skill-container.component.scss'],
-})
-export class AttributeSkillContainerComponent {
-  @Input() attributeObject: any = {};
-}

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

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

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

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

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

@@ -1,4 +1,14 @@
+@import "../../../../responsive";
+
 .row-container {
   display: flex;
   justify-content: space-between;
+  width: 1011px;
+
+  @include width-medium {
+    width: 1225px;
+  }
+  @include width-large {
+    width: 1436px;
+  }
 }

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

@@ -1,30 +1,23 @@
-<div class="flex-center">
-  <div class="stats-container">
-    <!-- Attribute and skill container -->
-    <attribute-skill-container></attribute-skill-container>
+<div class="dashboard-container">
+  <div class="attribute-skill-container">
+    <attribute-panel></attribute-panel>
 
-    <!-- <div class="attribute-skill-container">
-      <div class="skill-column-left">
-        <attribute-panel></attribute-panel>
-      </div>
-
-      <div class="skill-column-right">
-        <save-throw-panel></save-throw-panel>
-        <skill-panel></skill-panel>
-      </div>
-    </div> -->
-
-    <div class="container2">
-      <info-row></info-row>
+    <div class="save-skills-container">
+      <save-throw-panel></save-throw-panel>
+      <skill-panel></skill-panel>
+    </div>
+  </div>
 
-      <div class="rest">
-        <div class="life-weapon-container">
-          <life></life>
-          <app-weapons-container></app-weapons-container>
-        </div>
+  <div class="info-tabels-container">
+    <info-row></info-row>
 
-        <ability-panel></ability-panel>
+    <div class="tables">
+      <div class="life-weapon-container">
+        <life></life>
+        <app-weapons-container></app-weapons-container>
       </div>
+
+      <ability-panel></ability-panel>
     </div>
   </div>
 </div>

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

@@ -1,69 +1,65 @@
 @import "../../../responsive";
 
-.flex-center {
+.dashboard-container {
   display: flex;
-  margin: auto;
+  gap: 1rem;
+  // margin: auto;
+  padding: 1.5rem 1.5rem 0 1.5rem;
   border: 3px solid red;
+
   @include width-xsmall {
-    width: 1232px;
+    width: 1280px;
   }
   @include width-small {
-    width: 1446px;
+    width: 1494px;
   }
   @include width-medium {
-    width: 1659px;
+    width: 1707px;
   }
   @include width-large {
-    width: 1872px;
+    width: 1920px;
   }
   @include height-xsmall {
-    height: 816px;
+    height: 840px;
   }
   @include height-small {
-    height: 886px;
+    height: 910px;
   }
   @include height-medium {
-    height: 953px;
+    height: 977px;
   }
   @include height-large {
-    height: 1032px;
+    height: 1056px;
   }
 }
 
-.stats-container {
+.attribute-skill-container {
   display: flex;
-  justify-content: space-between;
-  gap: 1.5rem;
-  // width: 100%;
-}
+  gap: 1rem;
 
-attribute-skill-container {
-  // width: 450px;
-  border: 3px solid blue;
+  .save-skills-container {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
 }
 
-.container2 {
+.info-tabels-container {
   display: flex;
   flex-direction: column;
-  gap: 1.5rem;
-  width: 75%;
-
-  @media (width < 1700px) {
-    width: 72%;
-  }
+  gap: 1rem;
 }
 
-.rest {
+.tables {
   display: flex;
-  justify-content: space-between;
-  width: 100%;
+  gap: 1rem;
 }
 
 .life-weapon-container {
   display: flex;
   flex-direction: column;
-  gap: 2rem;
-  width: 49%;
+  gap: 1rem;
+  width: 500px;
 
   @media (height < 934px) {
     gap: 1.5rem;
@@ -71,12 +67,7 @@ attribute-skill-container {
 }
 
 ability-panel {
-  width: 49%;
-}
-
-.life {
-  width: 100%;
-  height: 20%;
+  width: 495px;
 }
 
 .weapon {

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

@@ -11,12 +11,12 @@
   </div>
 
   <div [class]="attribute.advantage" class="save-throw-field__value">
+    <!-- TODO: Potential Advantage style -->
+    <!-- @if (attribute.advantage !== "none") {
+      <span>
+        <icon [size]="'xs'" [type]="'UI'" [icon]="attribute.advantage!"></icon>
+      </span>
+    } -->
     {{ saveModifier }}
   </div>
-  <!-- TODO: Potential Advantage style -->
-  <!-- @if (skill.advantage !== "none") {
-    <span>
-      <icon [size]="'xs'" [type]="'UI'" [icon]="skill.advantage!"></icon>
-    </span>
-  } -->
 </div>

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

@@ -2,28 +2,28 @@
   display: flex;
   flex-direction: row;
   align-items: center;
-  justify-content: space-between;
-  text-align: center;
-  height: 2.25rem;
-  @media (height < 934px) {
-    height: 2.0675rem;
-  }
+
   .save-throw-field__input {
-    width: 15%;
+    width: 2rem;
   }
 
   .save-throw-field__name {
-    width: 50%;
+    width: 11rem;
     font-size: 1.125rem;
     font-weight: 600;
     text-align: start;
+    padding-left: 0.75rem;
   }
 
   .save-throw-field__value {
-    width: 20%;
-    font-size: 1.5rem;
+    width: 4rem;
+    font-size: 1.25rem;
     font-weight: 600;
+    text-align: end;
+    padding-right: 0.75rem;
+    line-height: 1.25rem;
   }
+
   .advantage {
     color: var(--accept);
   }

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

@@ -0,0 +1,27 @@
+@import "../../../../responsive";
+
+.save-throw-panel {
+  border: var(--border);
+  background-color: var(--field-background-color);
+  box-shadow: var(--shadow);
+  border-radius: 10px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-evenly;
+  gap: 0rem;
+  padding: 0rem;
+  height: 12rem;
+
+  @include height-small {
+    height: 14rem;
+  }
+
+  @include height-medium {
+    height: 15.25rem;
+  }
+
+  // Too large, doesn't look good
+  @include height-large {
+    height: 16.5rem;
+  }
+}

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

@@ -1,35 +1,32 @@
 .skill-box {
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  text-align: center;
-  height: 2.25rem;
-
-  @media (height < 934px) {
-    height: 2.0675rem;
-  }
 
   .skill-proficiency-input {
-    width: 15%;
+    width: 2rem;
   }
 
   .skill-attribute-name {
-    width: 15%;
+    width: 3rem;
     font-weight: 600;
     color: #494949;
+    padding-left: 0.25rem;
   }
 
   .skill-name {
-    width: 52%;
+    width: 9rem;
     font-size: 1.125em;
     font-weight: 600;
     text-align: start;
   }
 
   .skill-modifier {
-    width: 18%;
-    font-size: 1.5em;
+    width: 3rem;
+    font-size: 1.25em;
     font-weight: 600;
+    line-height: 1.25rem;
+    text-align: end;
+    padding-right: 0.75rem;
   }
 
   .advantage {

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

@@ -1,5 +1,5 @@
 <div class="skill-panel">
-  <ng-container *ngFor="let skill of skills">
+  @for (skill of skills; track skill) {
     <app-skill-field [skillName]="skill"></app-skill-field>
-  </ng-container>
+  }
 </div>

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

@@ -0,0 +1,24 @@
+@import "../../../../responsive";
+.skill-panel {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-evenly;
+  border: solid 1px var(--border-color);
+  background-color: var(--field-background-color);
+  box-shadow: var(--shadow);
+  border-radius: 10px;
+  height: 37.875rem;
+
+  @include height-small {
+    height: 40.125rem;
+  }
+
+  @include height-medium {
+    height: 43.15rem;
+  }
+
+  // Too large, doesn't look good
+  @include height-large {
+    height: 46.8rem;
+  }
+}

src/app/journal/journal.module.ts

@@ -26,9 +26,8 @@ import { JournalInventoryComponent } from './journal-inventory/journal-inventory
 import { JournalSpellbookComponent } from './journal-spellbook/journal-spellbook.component';
 import { JournalSpellcardsComponent } from './journal-spellcards/journal-spellcards.component';
 import { JournalCharacterComponent } from './journal-character/journal-character.component';
-import { AttributeFieldComponent } from './journal-stats/attribute-skill-container/attribute-panel/attribute-field/attribute-field.component';
-import { SkillFieldComponent } from './journal-stats/attribute-skill-container/skill-panel/skill-field/skill-field.component';
-import { AttributeSkillContainerComponent } from './journal-stats/attribute-skill-container/attribute-skill-container.component';
+import { AttributeFieldComponent } from './journal-stats/attribute-panel/attribute-field/attribute-field.component';
+import { SkillFieldComponent } from './journal-stats/skill-panel/skill-field/skill-field.component';
 import { LifeContainerComponent } from './journal-stats/life-container/life-container.component';
 import { WeaponsContainerComponent } from './journal-stats/weapons-container/weapons-container.component';
 import { ArmorClassComponent } from './journal-stats/info-row/armor-class/armor-class.component';
@@ -52,7 +51,7 @@ import { SpellslotsComponent } from './journal-stats/ability-panel/spellslots/sp
 import { SpellslotsModalComponent } from './journal-stats/ability-panel/spellslots/spellslots-modal/spellslots-modal.component';
 import { InfoRowComponent } from './journal-stats/info-row/info-row.component';
 import { ConditionsComponent } from './journal-stats/info-row/conditions/conditions.component';
-import { AttributeDetailsComponent } from './journal-stats/attribute-skill-container/attribute-panel/attribute-field/attribute-details/attribute-details.component';
+import { AttributeDetailsComponent } from './journal-stats/attribute-panel/attribute-field/attribute-details/attribute-details.component';
 import { SimpleItemDetailsComponent } from './journal-inventory/simple-item-details/simple-item-details.component';
 import { ModalComponent } from './journal-home/modal/modal.component';
 
@@ -64,13 +63,13 @@ import { DetailsPanelComponent } from './journal-home/details-panel/details-pane
 import { AbilityDetailsComponent } from './journal-stats/ability-panel/ability-table/ability-details/ability-details.component';
 import { LifeDetailsComponent } from './journal-stats/life-container/life/life-details/life-details.component';
 import { WeaponDetailsComponent } from './journal-stats/weapons-container/weapon-table/weapon-details/weapon-details.component';
-import { AttributePanelComponent } from './journal-stats/attribute-skill-container/attribute-panel/attribute-panel.component';
-import { SkillPanelComponent } from './journal-stats/attribute-skill-container/skill-panel/skill-panel.component';
-import { SaveThrowPanelComponent } from './journal-stats/attribute-skill-container/save-throw-panel/save-throw-panel.component';
-import { SaveThrowFieldComponent } from './journal-stats/attribute-skill-container/save-throw-panel/save-throw-field/save-throw-field.component';
+import { AttributePanelComponent } from './journal-stats/attribute-panel/attribute-panel.component';
+import { SkillPanelComponent } from './journal-stats/skill-panel/skill-panel.component';
+import { SaveThrowPanelComponent } from './journal-stats/save-throw-panel/save-throw-panel.component';
+import { SaveThrowFieldComponent } from './journal-stats/save-throw-panel/save-throw-field/save-throw-field.component';
 import { ProficiencyFieldComponent } from './journal-stats/info-row/proficiency/proficiency-field.component';
-import { SaveThrowDetailsComponent } from './journal-stats/attribute-skill-container/save-throw-panel/save-throw-details/save-throw-details.component';
-import { SkillDetailsComponent } from './journal-stats/attribute-skill-container/skill-panel/skill-details/skill-details.component';
+import { SaveThrowDetailsComponent } from './journal-stats/save-throw-panel/save-throw-details/save-throw-details.component';
+import { SkillDetailsComponent } from './journal-stats/skill-panel/skill-details/skill-details.component';
 import { ArmorClassDetailsComponent } from './journal-stats/info-row/armor-class/armor-class-details/armor-class-details.component';
 import { InitiativeDetailsComponent } from './journal-stats/info-row/initiative/initiative-details/initiative-details.component';
 import { MovementDetailsComponent } from './journal-stats/info-row/movement/movement-details/movement-details.component';
@@ -110,7 +109,6 @@ import { CombinedComponent } from './journal-character/combined/combined.compone
     JournalCharacterComponent,
     AttributeFieldComponent,
     SkillFieldComponent,
-    AttributeSkillContainerComponent,
     LifeContainerComponent,
     WeaponsContainerComponent,
     ArmorClassComponent,

src/styles.scss

@@ -6,193 +6,17 @@
 @import url("./helpers.scss");
 @import url("./button-styles.scss");
 @import url("./colors.scss");
-// @import url("./responsive.scss");
 
-:root {
-  @mixin width-large {
-    @media (width >= 1920px) {
-      @content;
-    }
-  }
-
-  @mixin width-medium {
-    @media (width >= 1707px) {
-      @content;
-    }
-  }
-
-  @mixin width-small {
-    @media (width >= 1494px) {
-      @content;
-    }
-  }
-
-  @mixin width-xsmall {
-    @media (width < 1445px) {
-      @content;
-    }
-  }
-
-  @mixin height-large {
-    @media (height >= 1080px) {
-      @content;
-    }
-  }
-
-  @mixin height-medium {
-    @media (height >= 1001px) {
-      @content;
-    }
-  }
-
-  @mixin height-small {
-    @media (height >= 934px) {
-      @content;
-    }
-  }
-
-  @mixin height-xsmall {
-    @media (height < 934px) {
-      @content;
-    }
-  }
-
-  .h840 {
-    position: absolute;
-    border-top: 2px solid green;
-    top: 840px;
-    width: 100%;
-    z-index: 9999999;
-  }
-  .h864 {
-    position: absolute;
-    border-top: 2px solid black;
-    top: 864px;
-    width: 100%;
-    z-index: 9999999;
-    &:before {
-      content: "864";
-    }
-  }
-
-  .h910 {
-    position: absolute;
-    border-top: 2px solid green;
-    z-index: 9999999;
-    top: 910px;
-    width: 100%;
-  }
-  .h934 {
-    position: absolute;
-    border-top: 2px solid black;
-    top: 934px;
-    width: 100%;
-    z-index: 9999999;
-    &:before {
-      content: "934";
-    }
-  }
-
-  .h977 {
-    position: absolute;
-    border-top: 2px solid green;
-    top: 977px;
-    width: 100%;
-    z-index: 9999999;
-  }
-  .h1001 {
-    position: absolute;
-    border-top: 2px solid black;
-    top: 1001px;
-    z-index: 9999999;
-    width: 100%;
-    &:before {
-      content: "1001";
-    }
-  }
-
-  .h1056 {
-    position: absolute;
-    border-top: 2px solid green;
-    top: 1056px;
-    z-index: 9999999;
-    width: 100%;
-  }
-  .h1080 {
-    position: absolute;
-    border-top: 2px solid black;
-    top: 1080px;
-    width: 100%;
-    z-index: 9999999;
-    &:before {
-      content: "1080";
-    }
-  }
-
-  .w1470 {
-    position: absolute;
-    border-left: 2px solid green;
-    left: 1470px;
-    height: 100%;
-    top: 0;
-    z-index: 9999999;
-  }
-
-  .w1494 {
-    position: absolute;
-    border-left: 2px solid black;
-    left: 1494px;
-    top: 0;
-    z-index: 9999999;
-    height: 100%;
-    &:before {
-      content: "1494";
-    }
-  }
-
-  .w1683 {
-    position: absolute;
-    border-left: 2px solid green;
-    left: 1683px;
-    height: 100%;
-    z-index: 9999999;
-    top: 0;
-  }
-
-  .w1707 {
-    position: absolute;
-    border-left: 2px solid black;
-    left: 1707px;
-    height: 100%;
-    top: 0;
-    z-index: 9999999;
-    &:before {
-      content: "1705";
-    }
-  }
-
-  .w1896 {
-    position: absolute;
-    border-left: 2px solid green;
-    left: 1896px;
-    height: 100%;
-    z-index: 9999999;
-    top: 0;
-  }
-
-  .w1920 {
-    position: absolute;
-    border-left: 2px solid black;
-    left: 1920px;
-    height: 100%;
-    z-index: 9999999;
-    top: 0;
-    &:before {
-      content: "1920";
-    }
-  }
+// Hide scrollbar for Chrome, Safari and Opera
+*::-webkit-scrollbar {
+  display: none;
 }
 
+// Hide scrollbar for Firefox
+* {
+  scrollbar-width: none;
+  -ms-overflow-style: none; // IE and Edge
+}
 // Responsive styles
 .responsive-small {
   display: none;