💄 style components as cards

src/app/discs-chart/factor-year-graph/factor-year-graph.component.html

@@ -1,22 +1,24 @@
-<h2>Detailed overview of individual regions</h2>
-<p>An aggregated attractiveness index is composed of six factors: anthropic, cultural, economic, institutional, natural
-  and social. Due to the incompleteness of data provided by different regions, we only present four of them below.</p>
-<div *ngIf="sdmDihService.yearsLoaded; else loading">
-  <div class="year-range">
-    <span><button (click)="prevYear()">&#9665;</button></span>
-    <span><button (click)="animateGraphs()">&#9654;</button></span>
-    &emsp;
-    <span>{{sdmDihService.firstYear}}</span>
-    <input type="range" class="form-range" [(ngModel)]="yearGraphService.selectedYear"
-      (ngModelChange)="yearGraphService.redrawGraphs()" [min]="sdmDihService.firstYear" [max]="sdmDihService.lastYear"
-      step="0.25" />
-    <span>{{sdmDihService.lastYear}}</span>
-    &emsp;
-    <span><button (click)="nextYear()">&#9655;</button></span>
-  </div>
+<div class="card">
+  <h2>Detailed overview of individual regions</h2>
+  <p>An aggregated attractiveness index is composed of six factors: anthropic, cultural, economic, institutional,
+    natural
+    and social. Due to the incompleteness of data provided by different regions, we only present four of them below.</p>
+  <div *ngIf="sdmDihService.yearsLoaded; else loading" class="card-body">
+    <div class="year-range">
+      <span><button (click)="prevYear()">&#9665;</button></span>
+      <span><button (click)="animateGraphs()">&#9654;</button></span>
+      &emsp;
+      <span>{{sdmDihService.firstYear}}</span>
+      <input type="range" class="form-range" [(ngModel)]="yearGraphService.selectedYear"
+        (ngModelChange)="yearGraphService.redrawGraphs()" [min]="sdmDihService.firstYear" [max]="sdmDihService.lastYear"
+        step="0.25" />
+      <span>{{sdmDihService.lastYear}}</span>
+      &emsp;
+      <span><button (click)="nextYear()">&#9655;</button></span>
+    </div>
 
-  <ng-container *ngFor="let region of sdmDihService.regions; last as isLast">
-    <!--select
+    <ng-container *ngFor="let region of sdmDihService.regions; last as isLast">
+      <!--select
     class="form-select form-select-lg mb-3"
     aria-label=".form-select-lg example"
     [(ngModel)]="selectedYear"
@@ -24,19 +26,20 @@
   >
     <option [ngValue]="year" *ngFor="let year of years">{{ year }}</option>
   </select-->
-    <div class="d-flex">
-      <div class="discs-caption">
-        <h4>Rural attractiveness index</h4>
-        <p>
-          of region <strong>{{region}}</strong> in {{yearGraphService.selectedYear}}
-        </p>
-        <disc-legend [region]="region"></disc-legend>
-      </div>
-      <div *ngFor="let factor of sdmDihService.factors">
-        <factor-year-disc [region]="region" [factor]="factor" [show]="'factor'"></factor-year-disc>
+      <div class="d-flex">
+        <div class="discs-caption">
+          <h4>Rural attractiveness index</h4>
+          <p>
+            of region <strong>{{region}}</strong> in {{yearGraphService.selectedYear}}
+          </p>
+          <disc-legend [region]="region"></disc-legend>
+        </div>
+        <div *ngFor="let factor of sdmDihService.factors">
+          <factor-year-disc [region]="region" [factor]="factor" [show]="'factor'"></factor-year-disc>
+        </div>
       </div>
-    </div>
-    <hr *ngIf="!isLast">
-  </ng-container>
+      <hr *ngIf="!isLast">
+    </ng-container>
+  </div>
+  <ng-template #loading> Loading data... </ng-template>
 </div>
-<ng-template #loading> Loading data... </ng-template>

src/app/discs-chart/scenario-factor-year-graph/scenario-factor-year-graph.component.html

@@ -1,28 +1,29 @@
-<h2>Comparison of different scenarios</h2>
-<div *ngIf="sdmDihService.yearsLoaded; else loading">
-  <select [(ngModel)]="selectedRegion" (ngModelChange)="yearGraphService.redrawGraphs({region: selectedRegion})">
-    <ng-container *ngFor="let region of sdmDihService.regions">
-      <option [ngValue]="region">{{region}}</option>
-    </ng-container>
-  </select>
-  <select [(ngModel)]="selectedDomain" (ngModelChange)="yearGraphService.redrawGraphs({domain: selectedDomain})">
-    <ng-container *ngFor="let domain of sdmDihService.domains | filter:baselineFilter">
-      <option [ngValue]="domain">{{domain}}</option>
-    </ng-container>
-  </select>
-  <div class="year-range">
-    <span><button (click)="prevYear()">&#9665;</button></span>
-    <span><button (click)="animateGraphs()">&#9654;</button></span>
-    &emsp;
-    <span>{{sdmDihService.firstYear}}</span>
-    <input type="range" class="form-range" [(ngModel)]="yearGraphService.selectedYear"
-      (ngModelChange)="yearGraphService.redrawGraphs()" [min]="sdmDihService.firstYear" [max]="sdmDihService.lastYear"
-      step="0.25" />
-    <span>{{sdmDihService.lastYear}}</span>
-    &emsp;
-    <span><button (click)="nextYear()">&#9655;</button></span>
-  </div>
-  <!--select
+<div class="card">
+  <h2>Comparison of different scenarios</h2>
+  <div *ngIf="sdmDihService.yearsLoaded; else loading" class="card-body">
+    <select [(ngModel)]="selectedRegion" (ngModelChange)="yearGraphService.redrawGraphs({region: selectedRegion})">
+      <ng-container *ngFor="let region of sdmDihService.regions">
+        <option [ngValue]="region">{{region}}</option>
+      </ng-container>
+    </select>
+    <select [(ngModel)]="selectedDomain" (ngModelChange)="yearGraphService.redrawGraphs({domain: selectedDomain})">
+      <ng-container *ngFor="let domain of sdmDihService.domains | filter:baselineFilter">
+        <option [ngValue]="domain">{{domain}}</option>
+      </ng-container>
+    </select>
+    <div class="year-range">
+      <span><button (click)="prevYear()">&#9665;</button></span>
+      <span><button (click)="animateGraphs()">&#9654;</button></span>
+      &emsp;
+      <span>{{sdmDihService.firstYear}}</span>
+      <input type="range" class="form-range" [(ngModel)]="yearGraphService.selectedYear"
+        (ngModelChange)="yearGraphService.redrawGraphs()" [min]="sdmDihService.firstYear" [max]="sdmDihService.lastYear"
+        step="0.25" />
+      <span>{{sdmDihService.lastYear}}</span>
+      &emsp;
+      <span><button (click)="nextYear()">&#9655;</button></span>
+    </div>
+    <!--select
     class="form-select form-select-lg mb-3"
     aria-label=".form-select-lg example"
     [(ngModel)]="selectedYear"
@@ -31,51 +32,52 @@
     <option [ngValue]="year" *ngFor="let year of years">{{ year }}</option>
   </select-->
 
-  <div class="d-flex">
-    <div class="discs-caption">
-      <h4>Aggregated RAI</h4>
-      <p>
-        of region {{selectedRegion}} in {{yearGraphService.selectedYear}}
-      </p>
-      <disc-legend [region]="selectedRegion" scenario="all-2"></disc-legend>
-    </div>
-    <disc [region]="selectedRegion" show="scenario" inSitu="true"></disc>
-    <div *ngFor="let scenario of filteredScenarios">
-      <scenario-factor-year-disc [region]="selectedRegion" [scenario]="scenario" show="scenario" inSitu="true">
-      </scenario-factor-year-disc>
+    <div class="d-flex">
+      <div class="discs-caption">
+        <h4>Aggregated RAI</h4>
+        <p>
+          of region {{selectedRegion}} in {{yearGraphService.selectedYear}}
+        </p>
+        <disc-legend [region]="selectedRegion" scenario="all-2"></disc-legend>
+      </div>
+      <disc [region]="selectedRegion" show="scenario" inSitu="true"></disc>
+      <div *ngFor="let scenario of filteredScenarios">
+        <scenario-factor-year-disc [region]="selectedRegion" [scenario]="scenario" show="scenario" inSitu="true">
+        </scenario-factor-year-disc>
+      </div>
     </div>
-  </div>
 
-  <h3>Rural attractiveness factors</h3>
-  <div class="d-flex">
-    <div class="discs-caption">
-      <h4>Baseline scenario</h4>
-      <p>
-        of region {{selectedRegion}} in {{yearGraphService.selectedYear}}
-      </p>
-      <disc-legend [region]="selectedRegion" scenario="baseline-2"></disc-legend>
-    </div>
-    <div *ngFor="let factor of sdmDihService.factors">
-      <scenario-factor-year-disc [region]="selectedRegion" [factor]="factor" show="factor" inSitu="true">
-      </scenario-factor-year-disc>
-    </div>
-  </div>
-  <hr>
-  <div *ngFor="let scenario of filteredScenarios; last as isLast">
+    <h3>Rural attractiveness factors</h3>
     <div class="d-flex">
       <div class="discs-caption">
-        <h4>{{scenario}} scenario</h4>
+        <h4>Baseline scenario</h4>
         <p>
           of region {{selectedRegion}} in {{yearGraphService.selectedYear}}
         </p>
-        <disc-legend [region]="selectedRegion" [scenario]="scenario"></disc-legend>
+        <disc-legend [region]="selectedRegion" scenario="baseline-2"></disc-legend>
       </div>
       <div *ngFor="let factor of sdmDihService.factors">
-        <scenario-factor-year-disc [region]="selectedRegion" [factor]="factor" [scenario]="scenario" show="factor"
-          inSitu="true"></scenario-factor-year-disc>
+        <scenario-factor-year-disc [region]="selectedRegion" [factor]="factor" show="factor" inSitu="true">
+        </scenario-factor-year-disc>
+      </div>
+    </div>
+    <hr>
+    <div *ngFor="let scenario of filteredScenarios; last as isLast">
+      <div class="d-flex">
+        <div class="discs-caption">
+          <h4>{{scenario}} scenario</h4>
+          <p>
+            of region {{selectedRegion}} in {{yearGraphService.selectedYear}}
+          </p>
+          <disc-legend [region]="selectedRegion" [scenario]="scenario"></disc-legend>
+        </div>
+        <div *ngFor="let factor of sdmDihService.factors">
+          <scenario-factor-year-disc [region]="selectedRegion" [factor]="factor" [scenario]="scenario" show="factor"
+            inSitu="true"></scenario-factor-year-disc>
+        </div>
       </div>
+      <hr *ngIf="!isLast">
     </div>
-    <hr *ngIf="!isLast">
   </div>
+  <ng-template #loading> Loading data... </ng-template>
 </div>
-<ng-template #loading> Loading data... </ng-template>

src/app/discs-chart/year-graph/year-graph.component.html

@@ -1,24 +1,19 @@
-<h2>Rural attractiveness index of regions in {{yearGraphService.selectedYear}}</h2>
-<div *ngIf="sdmDihService.yearsLoaded; else loading">
-  <div class="year-range">
-    <span><button (click)="prevYear()">&#9665;</button></span>
-    <span><button (click)="animateGraphs()">&#9654;</button></span>
-    &emsp;
-    <span>{{sdmDihService.firstYear}}</span>
-    <input
-      type="range"
-      class="form-range"
-      [(ngModel)]="yearGraphService.selectedYear"
-      (ngModelChange)="yearGraphService.redrawGraphs()"
-      [min]="sdmDihService.firstYear"
-      [max]="sdmDihService.lastYear"
-      step="0.25"
-    />
-    <span>{{sdmDihService.lastYear}}</span>
-    &emsp;
-    <span><button (click)="nextYear()">&#9655;</button></span>
-  </div>
-  <!--select
+<div class="card">
+  <h2>Rural attractiveness index of regions in {{yearGraphService.selectedYear}}</h2>
+  <div *ngIf="sdmDihService.yearsLoaded; else loading" class="card-body">
+    <div class="year-range">
+      <span><button (click)="prevYear()">&#9665;</button></span>
+      <span><button (click)="animateGraphs()">&#9654;</button></span>
+      &emsp;
+      <span>{{sdmDihService.firstYear}}</span>
+      <input type="range" class="form-range" [(ngModel)]="yearGraphService.selectedYear"
+        (ngModelChange)="yearGraphService.redrawGraphs()" [min]="sdmDihService.firstYear" [max]="sdmDihService.lastYear"
+        step="0.25" />
+      <span>{{sdmDihService.lastYear}}</span>
+      &emsp;
+      <span><button (click)="nextYear()">&#9655;</button></span>
+    </div>
+    <!--select
     class="form-select form-select-lg mb-3"
     aria-label=".form-select-lg example"
     [(ngModel)]="selectedYear"
@@ -26,11 +21,12 @@
   >
     <option [ngValue]="year" *ngFor="let year of years">{{ year }}</option>
   </select-->
-  <div class="d-flex">
-    <div *ngFor="let region of sdmDihService.regions">
-      <year-disc [region]="region"></year-disc>
+    <div class="d-flex">
+      <div *ngFor="let region of sdmDihService.regions">
+        <year-disc [region]="region"></year-disc>
+      </div>
     </div>
+    <disc-legend></disc-legend>
   </div>
-  <disc-legend></disc-legend>
+  <ng-template #loading> Loading data... </ng-template>
 </div>
-<ng-template #loading> Loading data... </ng-template>

src/app/discs-chart/year-graph/year-graph.component.scss

@@ -2,6 +2,7 @@
 @import "bootstrap/scss/variables";
 @import "bootstrap/scss/mixins";
 @import "bootstrap/scss/forms";
+@import "bootstrap/scss/card";
 
 .year-range {
   text-align: center;