[Kimchi-devel] [PATCH] [Kimchi] Fixed "Add Template" modal window alignment

[sguimaraes943 at gmail.com]

From: Samuel Guimarães <sguimaraes943 at gmail.com>

Minor alignment issues with kimchi.css and Add Template modal html

Signed-off-by: Samuel Guimarães <sguimaraes943 at gmail.com>
---
 ui/css/kimchi.css                     | 18 +++++++++++++++++-
 ui/css/src/modules/_templates.scss    | 16 +++++++++++++++-
 ui/js/src/kimchi.template_add_main.js |  2 +-
 ui/pages/template-add.html.tmpl       | 17 ++++++-----------
 4 files changed, 39 insertions(+), 14 deletions(-)

diff --git a/ui/css/kimchi.css b/ui/css/kimchi.css
index e7bed2e..49ea39a 100644
--- a/ui/css/kimchi.css
+++ b/ui/css/kimchi.css
@@ -1462,6 +1462,14 @@ body.wok-gallery {
   margin: 15px 0 0;
 }
 
+#template-edit-window label.check-all {
+  margin: 0 !important;
+  padding: 0 !important;
+  width: 100px;
+  display: inline-block;
+  vertical-align: middle;
+}
+
 #template-edit-window .hide {
   display: none;
 }
@@ -1655,7 +1663,6 @@ body.wok-gallery {
 
 #template-add-window.modal-content button#iso-more,
 #template-add-window.modal-content button#iso-more-loading {
-  margin-bottom: 17px;
   clear: both;
 }
 
@@ -1667,10 +1674,19 @@ body.wok-gallery {
   left: 0;
 }
 
+#template-add-window .check-all {
+  margin-right: 0 !important;
+  padding-left: 0 !important;
+}
+
 #template-add-window .filter {
+  width: 977px;
   height: 40px;
   overflow: visible;
   clear: both;
+  margin-bottom: 0;
+  display: inline-block;
+  vertical-align: middle;
 }
 
 #template-add-window .pull-right .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
diff --git a/ui/css/src/modules/_templates.scss b/ui/css/src/modules/_templates.scss
index ad76d0f..04bcadc 100644
--- a/ui/css/src/modules/_templates.scss
+++ b/ui/css/src/modules/_templates.scss
@@ -47,6 +47,13 @@
     form {
         margin: 15px 0 0;
     }
+    label.check-all {
+        margin: 0 !important;
+        padding: 0 !important;
+        width: 100px;
+        display: inline-block;
+        vertical-align: middle;
+    }
     .hide {
         display: none;
     }
@@ -208,7 +215,6 @@
     }
     &.modal-content button#iso-more,
     &.modal-content button#iso-more-loading {
-        margin-bottom: 17px;
         clear: both;
     }
     &.modal-content div#iso-remote-box {
@@ -217,10 +223,18 @@
     &.modal-content div#iso-local-box {
         left: 0;
     }
+    .check-all {
+        margin-right: 0 !important;
+        padding-left: 0 !important;
+    }
     .filter {
+         width: 977px;
         height: 40px;
         overflow: visible;
         clear: both;
+        margin-bottom: 0;
+        display: inline-block;
+        vertical-align: middle;
     }
     .pull-right .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
         width: 133px;
diff --git a/ui/js/src/kimchi.template_add_main.js b/ui/js/src/kimchi.template_add_main.js
index 88d26e2..38a8f5b 100644
--- a/ui/js/src/kimchi.template_add_main.js
+++ b/ui/js/src/kimchi.template_add_main.js
@@ -167,7 +167,7 @@ kimchi.template_add_main = function() {
     };
 
     var setupFilters = function() {
-        $('input#template-add-iso-filter', '#form-template-add').on('keyup', function() {
+        $('input#template-add-iso-filter', '#template-filter').on('keyup', function() {
             filterISOs("all", $(this).val());  // Default to 'all' for now
         });
     };
diff --git a/ui/pages/template-add.html.tmpl b/ui/pages/template-add.html.tmpl
index 2a8fdb7..cecead7 100644
--- a/ui/pages/template-add.html.tmpl
+++ b/ui/pages/template-add.html.tmpl
@@ -50,20 +50,15 @@
 
                                 <!-- 1-1-1 -->
                                 <div id="local-iso-field" class="iso-field" style="display: none;">
-                                    <form id="form-template-add">
-                                        <div class="filter">
-                                            <div class="form-group pull-right">
-                                                <input type="text" class="form-control" id="template-add-iso-filter" placeholder="$_("Filter")" />
-                                            </div>
-                                        </div>
-                                    </form>
                                     <div class="row">
                                         <p>$_("The following ISOs are available:")</p>
                                     </div>
-                                    <div class="checkbox">
-                                        <label class="check-all">
-                                            <input type="checkbox" id="select-all-local-iso">$_("All")
-                                        </label>
+                                    <div class="checkbox row">
+                                        <input type="checkbox" class="wok-checkbox" id="select-all-local-iso">
+                                        <label class="check-all" for="select-all-local-iso">$_("All")</label>
+                                        <div id="template-filter" class="form-group filter">
+                                                <input type="text" class="form-control" id="template-add-iso-filter" placeholder="$_("Filter")" />
+                                        </div>
                                     </div>
                                     <div class="row" id="isoRow">
                                         <form id="form-local-iso">
-- 
1.9.3