From d14da69d4859aeb6586b696d4ed0ee944dc27e0b Mon Sep 17 00:00:00 2001
From: Jeroen De Meerleer <me@jeroened.be>
Date: Sat, 15 Apr 2017 10:39:29 +0200
Subject: [PATCH] used bootstrap addon-button instead of cols

---
 js/site.js                 |  4 ++--
 templates/addjob.html.twig | 30 +++++++++++++++---------------
 2 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/js/site.js b/js/site.js
index be82f7d..1043b2f 100644
--- a/js/site.js
+++ b/js/site.js
@@ -24,7 +24,7 @@
 
 
 $(document).ready(function() {
-   $("body").on("change", "#patternDropdown", function() {
-       if(this.value != "custom") { $("input#delay").val($("option:selected", this).data("val")); }
+   $("body").on("click", "#patternDropdown li", function() {
+       if(this.value != "custom") { $("input#delay").val($(this).data("val")); }
    }); 
 });
diff --git a/templates/addjob.html.twig b/templates/addjob.html.twig
index e95e24b..da27995 100644
--- a/templates/addjob.html.twig
+++ b/templates/addjob.html.twig
@@ -16,29 +16,29 @@
         </div>
     {% endif %}
   
-    <div class="form-group col-sm-12">
+    <div class="form-group">
         <label for="name">Name</label>
         <input type="text" name="name" class="form-control" id="name" placeholder="blah">
     </div>
-    <div class="form-group col-sm-12">
+    <div class="form-group">
         <label for="url">url</label>
         <input type="url" name="url" class="form-control" id="url" placeholder="https://">
     </div>
 
     <div class="form-group">
-        <div class="col-sm-2">
-            <label for="name">Delay (in seconds)</label>
-            <select class="form-control" id="patternDropdown">
-                <option data-val="60"><a href="#">Every minute</a></option>
-                <option data-val="3600"><a href="#">Every hour</a></option>
-                <option data-val="86400"><a href="#">Every day</a></option>
-                <option data-val="604800"><a href="#">Every week</a></option>
-                <option data-val="2419200"><a href="#">Every 4 weeks</a></option>
-                <option data-val="custom"><a href="#">Custom</a></option>
-             </select>
-        </div>
-        <div class="col-sm-10">
-            <label for="name">&nbsp;</label>
+        <label for="name">Delay (in seconds)</label>
+        <div class="input-group">
+            <div class="input-group-btn">
+                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Pattern <span class="caret"></span></button>
+                <ul class="dropdown-menu" id="patternDropdown">
+                    <li data-val="60"><a href="#">Every minute</a></li>
+                    <li data-val="3600"><a href="#">Every hour</a></li>
+                    <li data-val="86400"><a href="#">Every day</a></li>
+                    <li data-val="604800"><a href="#">Every week</a></li>
+                    <li data-val="2419200"><a href="#">Every 4 weeks</a></li>
+                    <li data-val="custom"><a href="#">Custom</a></li>
+                 </ul>
+            </div><!-- /btn-group -->
             <input type="number" class="form-control" id="delay" name="delay">
         </div>
     </div>