From 3fa0bc376f8d93fd3f872a610ff1f412a5590a65 Mon Sep 17 00:00:00 2001
From: siinus <pearu@siinus.com>
Date: Fri, 19 Mar 2021 22:10:42 +0200
Subject: [PATCH] Replace program selector with radios, because chrome for
 android sucks

---
 pyleds/templates/custom.css | 31 ++++++++++++++++++++----------
 pyleds/templates/index.html | 38 ++++++++++++++++++++++---------------
 2 files changed, 44 insertions(+), 25 deletions(-)

diff --git a/pyleds/templates/custom.css b/pyleds/templates/custom.css
index 6f876f4..e30fae1 100644
--- a/pyleds/templates/custom.css
+++ b/pyleds/templates/custom.css
@@ -1,13 +1,3 @@
-.section-rgb {
-    height: 20rem;
-    text-align: center;
-}
-
-select {
-    width: 100%;
-    height: calc(100% - 1.5rem);
-}
-
 .colorpicker {
     display: inline-block;
     height: 38px;
@@ -36,3 +26,24 @@ button.region {
 button.region_off {
     background-color: gray !important
 }
+
+div.program_select {
+    height: 300px;
+    overflow: auto;
+    border: 1px solid gray;
+    text-align: left;
+}
+
+div.program_select ul {
+    list-style: none;
+    border-bottom: 1px solid silver;
+    margin-bottom: 0;
+}
+
+div.program_select ul li {
+    margin: auto;
+}
+
+div.program_select ul li label {
+    margin: 3px auto;
+}
diff --git a/pyleds/templates/index.html b/pyleds/templates/index.html
index e68d188..648294d 100644
--- a/pyleds/templates/index.html
+++ b/pyleds/templates/index.html
@@ -66,8 +66,14 @@
         }
 
         function getProgramSelection() {
-            let select = document.getElementById('program');
-            return select.value;
+           let radios = document.getElementsByName('program_select');
+
+            for (var i = 0, length = radios.length; i < length; i++) {
+                if (radios[i].checked) {
+                    return radios[i].value;
+                }
+            }
+            return null;
         }
 
         function isLoop() {
@@ -124,19 +130,21 @@
             {% endfor %}
         </div>
         <div class="row" id='loading' style="visibility: hidden"><b>LOADING!</b></div>
-        <div class="section-rgb">
-            <div class="row">
-                <div class="one-third column">
-                    <select id="program" size="10">
-                        {% for group in programs %}
-                            <optgroup label="{{ group.group }}">
-                                {% for program in group.programs %}
-                                    <option value="{{ program.prg }}">{{ program.name }}</option>
-                                {% endfor %}
-                            </optgroup>
-                        {% endfor %}
-                    </select>
-                </div>
+        <div class="row">
+            <div class="program_select one-half column">
+                {% for group in programs %}
+                    <ul>
+                        <li>{{ group.group }}</li>
+                        {% for program in group.programs %}
+                        <li>
+                            <label>
+                                <input type="radio" name="program_select" value="{{ program.prg }}">
+                                {{ program.name }}
+                            </label>
+                        </li>
+                    {% endfor %}
+                </ul>
+                {% endfor %}
             </div>
         </div>
         <div class="row">