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

From: Samuel Guimarães <sguimaraes943(a)gmail.com&gt; Minor alignment issues with kimchi.css and Add Template modal html Signed-off-by: Samuel Guimarães <sguimaraes943(a)gmail.com&gt; --- 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">