Tune UI for 11" Display

hackenbergstefan · Jan 20, 2025 · cd55d02 · cd55d02
1 parent 4995c68
commit cd55d02
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 16 deletions.
diff --git a/coffeebuddy/static/coffeebuddy.css b/coffeebuddy/static/coffeebuddy.css
@@ -133,17 +133,17 @@ label {
 }
 
 .table {
-   --bs-table-striped-bg: var(--color-accent-4);
-   --bs-table-accent-bg: var(--color-bg);
-   --bs-table-active-bg: var(--color-bg);
-   --bs-table-bg: var(--color-bg);
-   --bs-table-color: var(--color-fg);
+    --bs-table-striped-bg: var(--color-accent-4);
+    --bs-table-accent-bg: var(--color-bg);
+    --bs-table-active-bg: var(--color-bg);
+    --bs-table-bg: var(--color-bg);
+    --bs-table-color: var(--color-fg);
 }
 
 .table-active {
-   --bs-table-color-state: var(--color-bg);
-   --bs-table-bg-state: var(--color-accent-2);
-   font-weight: bold;
+    --bs-table-color-state: var(--color-bg);
+    --bs-table-bg-state: var(--color-accent-2);
+    font-weight: bold;
 }
 
 .table>:not(caption)>*>* {
@@ -275,7 +275,6 @@ button {
 
 #main-content {
     display: flex;
-    overflow-y: scroll;
     flex-grow: 1;
     margin-right: 100px;
 }

diff --git a/coffeebuddy/ui/base/templates/selectuser.html b/coffeebuddy/ui/base/templates/selectuser.html
@@ -7,6 +7,7 @@
             overflow-y: scroll;
             overflow-x: hidden;
             width: 100%;
+            scrollbar-width: none;
         }
 
         .item {

diff --git a/coffeebuddy/ui/coffee/templates/brew.html b/coffeebuddy/ui/coffee/templates/brew.html
@@ -40,7 +40,7 @@
         }
 
         .setting-name {
-            font-size: 12px;
+            font-size: 16px;
         }
 
         .setting-slider {
@@ -102,7 +102,7 @@ <h2>Brew {{ variant.name }}?</h2>
             </div>
             <div class="coffee-icon icon-{{ variant.icon }} flex-grow-2"></div>
         </div>
-        <form method="post" class="d-flex flex-row justify-content-around">
+        <form method="post" class="d-flex flex-row justify-content-around mt-auto mb-3">
             <button type="button"
                     name="yes"
                     class="btn-big fas fa-check"

diff --git a/coffeebuddy/ui/coffee/templates/coffee.html b/coffeebuddy/ui/coffee/templates/coffee.html
@@ -9,6 +9,7 @@
             flex-wrap: wrap;
             gap: 50px 50px;
             overflow-y: auto;
+            scrollbar-width: none;
         }
 
         .coffee-icon-container {
@@ -31,7 +32,7 @@
 
         .coffee-icon-text {
             margin-top: auto;
-            font-size: 15px;
+            font-size: 18px;
             text-transform: uppercase;
             text-align: center;
             line-height: 0.9;

diff --git a/coffeebuddy/ui/coffee/templates/editcoffee.html b/coffeebuddy/ui/coffee/templates/editcoffee.html
@@ -5,19 +5,21 @@
         .coffee-icon {
             position: absolute;
             top: calc(50% - 150px);
-            right: 50px;
+            right: 10px;
             width: 300px;
             height: 300px;
             background-repeat: no-repeat;
             background-size: contain;
             background-position: center;
+            filter: drop-shadow(10px 10px 10px black);
         }
 
         .settings-container {
             display: flex;
             width: calc(100% - 300px);
             flex-direction: column;
-            justify-content: space-evenly;
+            justify-content: space-between;
+            margin-bottom: 20px;
         }
 
         .settings-name {
@@ -40,12 +42,13 @@
         /* beautify ignore:end */
 
         function sliderDrag() {
+            let clientX = event.type == "click" ? event.clientX:event.touches[0].clientX;
             let slider = $(this);
             let min = parseFloat(slider.attr('aria-valuemin'));
             let max = parseFloat(slider.attr('aria-valuemax'));
             let step = parseFloat(slider.attr('aria-valuestep'));
             let width = slider.width();
-            let x = (event.touches[0].clientX - slider.offset().left) / width;
+            let x = (clientX - slider.offset().left) / width;
             let percent = Math.min(1.0, Math.max(0.0, x));
             let value = min + (Math.round((max - min) * percent / step) * step);
             let valuePercent = (value - min) / (max - min);
@@ -60,6 +63,7 @@
 
         $(() => {
             $('.settings-slider').on("touchmove", sliderDrag);
+            $('.settings-slider').on("click", sliderDrag);
         });
     </script>
     <script>
@@ -119,7 +123,7 @@ <h1>{{ title_text }}</h1>
 {% block main_content %}
     <div class="coffee-icon icon-{{ variant.icon }}"></div>
     <form id="variant-settings" class="settings-container">
-        <div class="form-group row">
+        <div class="form-group">
             <div class="col">
                 <label>Name</label>
                 <input class="form-control"