From 332611accb3ec8918e9e7243ce7c9aac52e2f764 Mon Sep 17 00:00:00 2001
From: Andreas Huber <andreas.huber@lucares.de>
Date: Sun, 5 Mar 2023 17:28:32 +0100
Subject: [PATCH] make clear dashboards are still in beta

---
 pdb-js/src/app/app.component.html                 |  2 +-
 pdb-js/src/app/main-page/main-page.component.html |  5 ++++-
 pdb-js/src/styles.scss                            | 11 +++++++----
 3 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/pdb-js/src/app/app.component.html b/pdb-js/src/app/app.component.html
index 05cd086..2af6239 100644
--- a/pdb-js/src/app/app.component.html
+++ b/pdb-js/src/app/app.component.html
@@ -4,7 +4,7 @@
   <!--<button mat-button [routerLink]="['/']"><img src="assets/img/strip-chart-color.svg"  aria-hidden="false" aria-label="go to home page" /> Plotilio</button>-->
   <button mat-button [routerLink]="['/']"><img src="assets/img/plotilio_64.png"  aria-hidden="false" aria-label="go to home page" /></button>
   <button mat-button [routerLink]="['/vis']">Visualization</button>
-  <button mat-button [routerLink]="['/dashboard']">Dashboards</button>
+  <button mat-button [routerLink]="['/dashboard']">Dashboards<span class="super-badge">Beta</span></button>
 </div>
 
 <router-outlet></router-outlet>
diff --git a/pdb-js/src/app/main-page/main-page.component.html b/pdb-js/src/app/main-page/main-page.component.html
index fb087ae..74be27c 100644
--- a/pdb-js/src/app/main-page/main-page.component.html
+++ b/pdb-js/src/app/main-page/main-page.component.html
@@ -8,13 +8,15 @@
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
+    width: 600px; /* must be multiple of the minmax used in .link-section */
   }
   h1 {
     font-size: 5em;
     text-align: center;
   }
   .link-section {
-    display: flex;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 300px)); /* minmax must be fraction of the with used in #main-page-links */
   }
   .sub-section {
     display: inline;
@@ -42,6 +44,7 @@
     <div class="sub-section">
       <a [routerLink]="['/dashboard']" class="button-large" title="Dashboards"><img src="assets/img/dashboard-line.svg" class="icon-large" aria-hidden="false" aria-label="go to dashboard page" /></a>
       <p>Create the most sophisticated dashboards.</p>
+      <em>This feature is still in development. You may loose data without warning.</em>
     </div>
   </div>
 
diff --git a/pdb-js/src/styles.scss b/pdb-js/src/styles.scss
index 9ea1147..ddda4ea 100644
--- a/pdb-js/src/styles.scss
+++ b/pdb-js/src/styles.scss
@@ -141,7 +141,6 @@ mat-option.mat-option.mat-active {
   background-color: #ccc; 
 }
 
-
 a ,a:visited {
   color: blue;
   text-decoration: none;
@@ -199,12 +198,16 @@ mat-form-field.pdb-form-wide {
   width: 10em;
 }
 
-
-
-
 .errorPanel {
   padding: 1ex;
   background-color: map-get(mat.$red-palette, 100);
   border-radius: 5px;
 }
 
+.super-badge {
+  position: absolute;
+  font-size: 0.8em;
+  color: #0051c2;
+  top: 0.2em;
+  line-height: 1em;
+}