Feature/#171 responsive web design

Apps/frontend/cypress/e2e/3-control-panel-top/on-off-button.cy.js

@@ -12,6 +12,6 @@ describe("onOffButton", () => {
 
   it("is clickable", () => {
     cy.get('[data-cy="on-off-button"]').click();
-    cy.get('[data-cy="on-off-button"]').should("have.class", "mui-icon--off");
+    cy.get('[data-cy="on-off-button"]').should("have.class", "icon--off");
   });
 });

Apps/frontend/src/app.scss

@@ -1,7 +1,7 @@
 :root {
   font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
-  font-size: min(1em, 2vw);
-  line-height: min(1.6em, 2vw);
+  font-size: 16px;
+  line-height: 22px;
   font-weight: 400;
 
   color-scheme: light dark;
@@ -19,11 +19,10 @@ body {
   margin: 0;
   min-width: 320px;
   min-height: 100vh;
-  overflow: hidden;
+  overflow: auto;
 }
 
 #app {
-  width: 100%;
   margin: 0 auto;
   text-align: center;
 }
@@ -44,12 +43,23 @@ input[type="range"] {
   -webkit-appearance: none;
   height: 0.2em;
 
+  &::-moz-range-track {
+    background: rgb(127, 127, 127);
+  }
+
+  &::-moz-range-thumb {
+    background: #242424;
+    border: 0.5px solid white;
+  }
+
   &::-webkit-slider-thumb {
+    appearance: none;
     -webkit-appearance: none;
-    height: calc(0.5vmax + 0.5em);
-    width: calc(0.5vmax + 0.5em);
+    height: calc(0.6vmax + 0.4em);
+    width: calc(0.6vmax + 0.4em);
     border-radius: 100%;
-    background: #efefef;
+    background: #242424;
+    border: 0.5px solid white;
     cursor: pointer;
   }
 }
@@ -59,20 +69,34 @@ nav {
   bottom: 0;
   right: 0;
   width: 100%;
-  height: calc(14vmax + 8em);
+  min-height: fit-content;
+  max-height: 80vh;
   box-shadow: 0 0 2em rgba(80, 80, 80, 1);
   background-color: #242424;
   z-index: 3;
+  overflow: auto;
 }
 
 @media (prefers-color-scheme: light) {
   :root {
-    color: #213547;
-    background-color: #efefef;
+    color: #242424;
+    background-color: white;
   }
 
   nav {
-    background-color: #efefef;
+    background-color: white;
+  }
+
+  input[type="range"] {
+    &::-moz-range-thumb {
+      background: white;
+      border: 1px solid black;
+    }
+
+    &::-webkit-slider-thumb {
+      background: white;
+      border: 1px solid black;
+    }
   }
 
   .icon-button {
@@ -94,7 +118,6 @@ nav {
     calc(100vh - 1 / 2 * (8vmax + 100vw - 2 * (8vmax + 16vw - 2em)));
   width: 100%;
   height: 100%;
-  overflow: auto;
 }
 
 .logo {
@@ -118,14 +141,15 @@ nav {
     inset: 0;
 
     & > canvas {
-      border: 0.1vw solid #efefef;
+      border: 0.1vw solid white;
       background-color: black;
     }
   }
 
   &--waves {
     position: absolute;
     margin-top: 0.1vw;
+    margin-left: 0.1vw;
     inset: 0;
   }
 }
@@ -159,7 +183,6 @@ nav {
 
     &_expand-accordion {
       width: 100%;
-      padding: 1vh 0;
       display: flex;
       justify-content: center;
       align-content: center;
@@ -179,7 +202,8 @@ nav {
     }
 
     & > table {
-      width: 100%;
+      width: 96%;
+      margin: 0 2%;
       text-align: center;
       border-collapse: collapse;
       table-layout: fixed;
@@ -221,7 +245,7 @@ nav {
   background-size: 64%;
 
   &--small {
-    padding: 2vmax !important;
+    padding: calc(1.2vmax + 8px) !important;
   }
 
   &:hover {
@@ -237,36 +261,37 @@ nav {
 }
 
 /* Icon definitions */
-.mui-icon {
+/* https://fonts.google.com/icons */
+.icon {
   &--on {
-    background-image: url("./assets/mui_play.svg");
+    background-image: url("./assets/icon_play.svg");
   }
 
   &--off {
-    background-image: url("./assets/mui_stop.svg");
+    background-image: url("./assets/icon_stop.svg");
   }
 
   &--reset {
-    background-image: url("./assets/mui_reset.svg");
+    background-image: url("./assets/icon_reset.svg");
   }
 
   &--expand-more {
-    background-image: url("./assets/mui_expand_more.svg");
+    background-image: url("./assets/icon_expand_more.svg");
   }
 
   &--expand-less {
-    background-image: url("./assets/mui_expand_less.svg");
+    background-image: url("./assets/icon_expand_less.svg");
   }
 
   &--close {
-    background-image: url("./assets/mui_close.svg");
+    background-image: url("./assets/icon_close.svg");
   }
 
-  &--drop-down {
-    background-image: url("./assets/mui_drop-down.svg");
+  &--ground {
+    background-image: url("./assets/icon_ground.svg");
   }
 
   &--distribute {
-    background-image: url("./assets/mui_distribute.svg");
+    background-image: url("./assets/icon_distribute.svg");
   }
 }

Apps/frontend/src/components/DistributeOffsetButton.svelte

@@ -9,7 +9,7 @@
 </script>
 
 <button
-  class="icon-button mui-icon--distribute"
+  class="icon-button icon--distribute"
   on:click={() => {
     let baseOffset = calculateOffset();
     let offsetY = 1 - baseOffset;

Apps/frontend/src/components/GNDButton.svelte

@@ -7,7 +7,7 @@
 </script>
 
 <button
-  class="icon-button mui-icon--drop-down"
+  class="icon-button icon--ground"
   on:mousedown={async () => {
     handleClick(true);
   }}

Apps/frontend/src/components/OnOffButton.svelte

@@ -19,8 +19,8 @@
   data-cy="on-off-button"
   class={clsx(
     { "icon-button": true },
-    { "mui-icon--off": $osciEnabled },
-    { "mui-icon--on": !$osciEnabled }
+    { "icon--off": $osciEnabled },
+    { "icon--on": !$osciEnabled }
   )}
   on:click={handleClick}
 />

Apps/frontend/src/components/ResetButton.svelte

@@ -2,15 +2,15 @@
   import { createEventDispatcher } from "svelte";
 
   const dispatch = createEventDispatcher();
-  $: url = "../assets/mui_reset.svg";
+  $: url = "../assets/icon_reset.svg";
 
   const handleClick = async () => {
     dispatch("reset", {});
   };
 </script>
 
 <button
-  class="icon-button mui-icon--reset"
+  class="icon-button icon--reset"
   on:click={handleClick}
   data-cy="reset-button"
 />

Apps/frontend/src/rest/ChannelConfigController.js

@@ -5,7 +5,7 @@ import {
   ERR_MSG_COULD_NOT_STORE_CHANNEL_CONFIG,
 } from "../labels";
 
-export function getAllChannelConfig(presetName) {
+export function getAllChannelConfig() {
   var response = axios
     .get(REST_ENDPOINT_CONFIG, {
       headers: {
@@ -14,7 +14,7 @@ export function getAllChannelConfig(presetName) {
       },
     })
     .then((response) => response.data)
-    .catch(function (error) {
+    .catch(function () {
       console.error(ERR_MSG_COULD_NOT_RETRIEVE_CHANNEL_CONFIG);
     });
   return response;

Apps/frontend/src/views/ChannelConfigControlPanel.svelte

@@ -33,7 +33,10 @@
 {/if}
 
 <div>
-  <button id="managePresets" on:click={showPopup} data-cy="preset-config-open-popup"
+  <button
+    id="managePresets"
+    on:click={showPopup}
+    data-cy="preset-config-open-popup"
     >{LABEL_BUTTON_MANAGE_CHANNEL_CONFIG}</button
   >
 </div>

Apps/frontend/src/views/ChannelConfigPopup.svelte

@@ -1,6 +1,5 @@
 <script>
   import { createEventDispatcher } from "svelte";
-  import { NUM_CHANNELS } from "../const";
   import {
     getChannelConfig,
     postChannelConfig,

Apps/frontend/src/views/ControlPanelBottom.svelte

@@ -24,7 +24,7 @@
   <th>
     {#if $expandedPanelOpen && controlPanelBottomHeight <= MIN_CONTROL_PANEL_BOTTOM_HEIGHT}
       <button
-        class="icon-button icon-button--small mui-icon--close"
+        class="icon-button icon-button--small icon--close"
         on:click={() => ($expandedPanelOpen = false)}
         data-cy="expanded-control-panel-close-button"
       />

Apps/frontend/src/views/ExpandableControlPanel.svelte

@@ -38,8 +38,8 @@
   <button
     class={clsx(
       { "icon-button": true },
-      { "mui-icon--expand-less": $expandedPanelOpen },
-      { "mui-icon--expand-more": !$expandedPanelOpen }
+      { "icon--expand-less": $expandedPanelOpen },
+      { "icon--expand-more": !$expandedPanelOpen }
     )}
   />
 </button>