big fucking refactor

main features: - replaced many div+class with bootstrap-vue components - refactored CSS, in particular the legend items - format some numbers with SI-prefixes, breaks a lot of cases - WIP: support for mobile devices, tested with iPhone and iPad - added a lot of new bugs 🥳 You ask, why not small commits? Why should the commit history look cleaner than the code?
metricq · Oct 20, 2024 · 997208e · 997208e
1 parent 5e90a7f
commit 997208e
Show file tree

Hide file tree

Showing 20 changed files with 535 additions and 508 deletions.
diff --git a/public/css/style.css b/public/css/style.css
@@ -1,120 +1,111 @@
-:root {
-    --legend_right_max_width: 30vw;
-}
-
 * {
     font-family: Open Sans, Sans, Verdana;
     font-size: 11pt;
 }
 
-html {
-    min-height: 100dvh;
-}
-
 body {
     background-color: #EDEDED;
-    min-height: 100dvh;
+    height: 100dvh;
+    overflow: hidden;
 }
 
-.row_head {
-    margin-bottom: 10px;
-    box-shadow: 0px 1px 2px 1px #D0D0D0;
+.main_app {
+    display: flex;
+    flex-direction: column;
+    height: 100dvh;
 }
 
-.wrapper_logo {
-    float: left;
-    width: 150px;
-    margin-left: calc(50% - 75px - 6em - 2px);
+@media (max-width: 575.98px) {
+    .navbar {
+        padding: 0px 5px;
+    }
+    .navbar-brand {
+        margin-right: 0;
+    }
 }
 
-.wrapper_headoptions {
-    float: left;
-    padding-top: 5px;
+.body_and_legend_bottom {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
 }
 
-.button_head {
-    margin: 14px 3px 3px 14px;
+.body_and_legend_right {
+    display: flex;
+    flex-direction: row;
+    height: 100%;
+    max-height: calc(100dvh - 84px);
 }
 
-.wrapper_body {
-    margin: 0px 10px 0px 10px;
-    padding: 0 5px 0 5px;
-    border-radius: 4px;
-    background-color: white;
+.header {
+    margin-bottom: 10px;
     box-shadow: 0px 1px 2px 1px #D0D0D0;
-    flex: 1;
 }
 
-.row_foot_right {
+.legend {
+    margin-bottom: -10px;
+    padding-bottom: 10px;
+}
+
+.legend_right {
     margin-left: -40px;
     padding-right: 10px;
+    max-height: calc(100dvh - 64px);
+    overflow-y: auto;
 }
 
-.row_foot_bottom {
+.legend_bottom {
+    max-height: 10dvh;
     overflow: auto;
-    height: 10dvh;
-    width: 100vw;
 }
 
-.legend_item {
-    padding: 0px 1px 0px 10px;
-    display: inline-flex;
-    background-color: #FFFFFF;
-    border-radius: 4px;
-    box-shadow: 1px 1px 2px 1px #D0D0D0;
+.legend_list {
+    list-style-type: none;
+    margin-bottom: 0;
+    height: 100%;
 }
 
-.legend_item_bottom {
+.legend_bottom .legend_list {
+    display: inline-flex;
     flex-wrap: wrap;
-    margin-left: 10px;
-    margin-top: 5px;
-}
-
-.legend_item_right {
-    min-width: 250px;
-    max-width: var(--legend_right_max_width);
-    margin-bottom: 10px;
+    justify-content: center;
+    white-space: nowrap;
 }
 
-.legend_item:hover {
-    box-shadow: 2px 2px 2px 1px #B0B0B0;
+.legend_right .legend_list {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
 }
 
-.legend_item div {
-    display: inline-block;
-    width: 16px;
-    height: 16px;
+.legend_item {
+    background-color: #FFFFFF;
     border-radius: 4px;
-    box-shadow: 0px 0px 0px 0px #000000;
-    position: relative;
-    top: 2px;
-    margin-top: 1px;
+    box-shadow: 1px 1px 2px 1px #D0D0D0;
+    padding-left: 4px;
+    padding-right: 4px;
 }
 
-.legend_item img {
-    width: 14px;
-    height: 14px;
-    position: relative;
-    bottom: 1px;
+.legend_item:hover {
+    box-shadow: 2px 2px 2px 1px #B0B0B0;
 }
 
-#legend_list {
-    list-style-type: none;
-    margin-bottom: 0;
+.legend_item_bottom {
+    flex-wrap: wrap;
+    margin-left: 10px;
+    margin-top: 5px;
+    height: min-content;
 }
 
-.legend_list_bottom {
-    display: inline-flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    white-space: nowrap;
+.legend_item_right {
+    max-width: 30vw;
+    margin-bottom: 8px;
 }
 
-.legend_list_right {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    width: max-content;
+@media (min-width: 768px) {
+    .legend_item_right {
+        min-width: 250px;
+    }
 }
 
 .legend_list_right_bottom {
@@ -126,7 +117,7 @@ body {
 }
 
 .legend_end {
-    justify-content: center;
+    text-align: center;
 }
 
 #popup_veil {
@@ -144,65 +135,6 @@ body {
     display: block;
 }
 
-.button_resolution,
-.button_zoom_speed {
-    border: none;
-    margin: 0px;
-    padding: 0px 2px 0px 2px;
-    transform: translate(0, -8px);
-    background-color: transparent;
-}
-
-@keyframes gear_rotate {
-    from {
-        transform: rotate(0deg);
-    }
-
-    to {
-        transform: rotate(360deg);
-    }
-}
-
-.navbar {
-    align-items: center;
-    justify-content: flex-start;
-}
-
-.navbar .btn {
-    margin-right: 1rem;
-}
-
-.navimg {
-    height: 20px;
-    width: 20px;
-}
-
-.navbar-brand {
-    align-self: flex-start;
-    margin-right: auto;
-}
-
-.fullwidth {
-    width: 100%;
-    box-sizing: initial;
-}
-
-.btn-navbar {
-    margin-top: 7px;
-}
-
-.body_and_legend_bottom {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-}
-
-.body_and_legend_right {
-    display: flex;
-    flex-direction: row;
-    height: 100%;
-}
-
 .clickable {
     cursor: pointer;
 }
@@ -214,10 +146,10 @@ body {
     }
 }
 
-.main_app {
-    display: flex;
-    flex-direction: column;
-    height: 99dvh;
+@media (max-width: 767px) {
+    .w-sm-100 {
+        width: 100%;
+    }
 }
 
 /* Fix positions of tooltips. Known issue, see: