💄 unify discs style

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

@@ -1,8 +1,7 @@
 <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>
-<ng-container *ngFor="let region of sdmDihService.regions">
-  <h3>Rural attractiveness index of region {{region}} in {{yearGraphService.selectedYear}}</h3>
+<ng-container *ngFor="let region of sdmDihService.regions; last as isLast">
   <div *ngIf="sdmDihService.yearsLoaded; else loading">
     <!--select
     class="form-select form-select-lg mb-3"
@@ -13,11 +12,18 @@
     <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">
         <disc [region]="region" [factor]="factor" [show]="'factor'"></disc>
       </div>
     </div>
-    <disc-legend [region]="region"></disc-legend>
+    <hr *ngIf="!isLast">
   </div>
   <ng-template #loading> Loading data... </ng-template>
 </ng-container>

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

@@ -26,13 +26,13 @@
       <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">
       <disc [region]="selectedRegion" [scenario]="scenario" show="scenario" inSitu="true"></disc>
     </div>
   </div>
-  <disc-legend [region]="selectedRegion" scenario="all-2"></disc-legend>
 
   <h3>Rural attractiveness factors</h3>
   <div class="d-flex">
@@ -41,27 +41,27 @@
       <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">
       <disc [region]="selectedRegion" [factor]="factor" show="factor" inSitu="true"></disc>
     </div>
   </div>
-  <disc-legend [region]="selectedRegion" scenario="baseline-2"></disc-legend>
   <hr>
-  <div *ngFor="let scenario of filteredScenarios">
+  <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">
         <disc [region]="selectedRegion" [factor]="factor" [scenario]="scenario" show="factor" inSitu="true"></disc>
       </div>
     </div>
-    <disc-legend [region]="selectedRegion" [scenario]="scenario"></disc-legend>
-    <hr>
+    <hr *ngIf="!isLast">
   </div>
 </div>
 <ng-template #loading> Loading data... </ng-template>

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

@@ -1,25 +1 @@
-@import "bootstrap/scss/functions";
-@import "bootstrap/scss/variables";
-@import "bootstrap/scss/mixins";
-@import "bootstrap/scss/forms";
-
-.year-range {
-  text-align: center;
-}
-
-.year-range span {
-  font-size: 1.5rem;
-  margin: 0 0 .5em;
-}
-
-.form-range {
-  max-width: 20rem;
-}
-
-.d-flex {
-  display: flex;
-}
-
-.discs-caption {
-  width: 100%;
-}
+@use "../year-graph/year-graph.component.scss";

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

@@ -19,3 +19,7 @@
 .d-flex {
   display: flex;
 }
+
+.discs-caption {
+  width: 100%;
+}