From cd55d02cda728a68765df5dd9b07882acdc61d88 Mon Sep 17 00:00:00 2001
From: Stefan Hackenberg <mail@stefan-hackenberg.de>
Date: Mon, 20 Jan 2025 17:50:02 +0100
Subject: [PATCH] Tune UI for 11" Display

---
 coffeebuddy/static/coffeebuddy.css              | 17 ++++++++---------
 coffeebuddy/ui/base/templates/selectuser.html   |  1 +
 coffeebuddy/ui/coffee/templates/brew.html       |  4 ++--
 coffeebuddy/ui/coffee/templates/coffee.html     |  3 ++-
 coffeebuddy/ui/coffee/templates/editcoffee.html | 12 ++++++++----
 5 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/coffeebuddy/static/coffeebuddy.css b/coffeebuddy/static/coffeebuddy.css
index cfb07e3..fd4aa2e 100644
--- 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
index 5bf95b5..cdedba2 100644
--- 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
index c3bd155..84d6701 100644
--- 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
index 624dd22..5c829ff 100644
--- 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
index a352222..8470f63 100644
--- 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"