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 @@
-
+
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 @@
Create the most sophisticated dashboards.
+
This feature is still in development. You may loose data without warning.
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;
+}