From 1d1db793b99b3fd414b1ab695eefb597d7c534ff Mon Sep 17 00:00:00 2001
From: Benoit Seignovert <benoit.seignovert@univ-nantes.fr>
Date: Wed, 31 Jan 2024 11:20:56 +0100
Subject: [PATCH] Update interactive form buttons style

---
 src/glicid_spawner/templates/interactive.html | 58 ++++++++++++-------
 1 file changed, 36 insertions(+), 22 deletions(-)

diff --git a/src/glicid_spawner/templates/interactive.html b/src/glicid_spawner/templates/interactive.html
index 315452d..05978c8 100644
--- a/src/glicid_spawner/templates/interactive.html
+++ b/src/glicid_spawner/templates/interactive.html
@@ -19,13 +19,13 @@
         <label for="cpu" class="col-sm-3 control-label">CPU:</label>
         <div class="col-sm-9">
             {%- for cpu in cpu_available -%}
-            <label class="radio-inline">
-                <input type="radio" name="cpu"
-                    value="{{loop.index0}}"
-                    data-max-duration="{{cpu.max_duration}}"
-                    {%- if loop.first -%}checked{%- endif -%}
-                > {{ cpu.description }}
-            </label>
+            <div class="col-sm-2">
+                <input type="radio" name="cpu" id="cpu_{{loop.index0}}" value="{{loop.index0}}"
+                    data-max-duration="{{cpu.max_duration}}" {%- if loop.first -%}checked{%- endif -%}>
+                <label for="cpu_{{loop.index0}}" class="btn btn-default btn-block">
+                    {{ cpu.description }}
+                </label>
+            </div>
             {% endfor -%}
         </div>
     </div>
@@ -33,13 +33,13 @@
         <label for="ram" class="col-sm-3 control-label">Memory:</label>
         <div class="col-sm-9">
             {%- for ram in ram_available -%}
-            <label class="radio-inline">
-                <input type="radio" name="ram"
-                    value="{{loop.index0}}"
-                    data-max-duration="{{ram.max_duration}}"
-                    {%- if loop.first -%}checked{%- endif -%}
-                > {{ ram.description }} GB
-            </label>
+            <div class="col-sm-2">
+                <input type="radio" name="ram" id="ram_{{loop.index0}}" value="{{loop.index0}}"
+                    data-max-duration="{{ram.max_duration}}" {%- if loop.first -%}checked{%- endif -%}>
+                <label for="ram_{{loop.index0}}" class="btn btn-default btn-block">
+                    {{ ram.description }} GB
+                </label>
+            </div>
             {% endfor -%}
         </div>
     </div>
@@ -47,13 +47,13 @@
         <label for="gpu" class="col-sm-3 control-label">GPU:</label>
         <div class="col-sm-9">
             {%- for gpu in gpu_available -%}
-            <label class="radio-inline">
-                <input type="radio" name="gpu"
-                    value="{{loop.index0}}"
-                    data-max-duration="{{gpu.max_duration}}"
-                    {%- if loop.first -%}checked{%- endif -%}
-                > {{ gpu.description }}
-            </label>
+            <div class="col-sm-2">
+                <input type="radio" name="gpu" id="gpu_{{loop.index0}}" value="{{loop.index0}}"
+                    data-max-duration="{{gpu.max_duration}}" {%- if loop.first -%}checked{%- endif -%}>
+                <label for="gpu_{{loop.index0}}" class="btn btn-default btn-block">
+                    {{ gpu.description | capitalize }}
+                </label>
+            </div>
             {% endfor -%}
         </div>
     </div>
@@ -66,9 +66,23 @@
 </div>
 
 <script>
+    // Append button style
+    var $style = $(`<style>
+    input[type=radio] {
+        display: none;
+    }
+    input[type=radio]:checked + label {
+        background-color: #f37524;
+        border-color: #e34f21;
+        color: #fff;
+    }
+</style>`)
+    $('html > head').append($style);
+
+    // Adjust time duration
     var $reservations_dropdown = $("#time-max-duration");
 
-    $('input[type=radio]').change(function() {
+    $('input[type=radio]').change(function () {
         var cpu = $('input[name=cpu]:checked').data('max-duration');
         var ram = $('input[name=ram]:checked').data('max-duration');
         var gpu = $('input[name=gpu]:checked').data('max-duration');