[PATCH 0/2] Media Queries and Repositories modals
From: samhenri <samuel.guimaraes@eldorado.org.br> This patch adds support for media queries in Gingerbase. The second patch adds wok-radio and wok-checkboxes to the modal windows. It also fixes the "Cancel" button that wasn't working. Regards, Samuel samhenri (2): Adding Media Queries support to Gingerbase Fixed Repository Add and Edit modals ui/css/src/modules/_host.scss | 113 +++++++++++++++++++++++++++++++------ ui/pages/host-dashboard.html.tmpl | 50 ++++++++-------- ui/pages/repository-add.html.tmpl | 8 +-- ui/pages/repository-edit.html.tmpl | 17 +++--- 4 files changed, 133 insertions(+), 55 deletions(-) -- 1.9.3
From: samhenri <samuel.guimaraes@eldorado.org.br> Signed-off-by: samhenri <samuel.guimaraes@eldorado.org.br> --- ui/css/src/modules/_host.scss | 113 ++++++++++++++++++++++++++++++++------ ui/pages/host-dashboard.html.tmpl | 50 +++++++++-------- 2 files changed, 121 insertions(+), 42 deletions(-) diff --git a/ui/css/src/modules/_host.scss b/ui/css/src/modules/_host.scss index dc27df5..56b847f 100644 --- a/ui/css/src/modules/_host.scss +++ b/ui/css/src/modules/_host.scss @@ -22,27 +22,82 @@ .host-dashboard { padding-top: 40px; - padding-bottom: 50px; background: #eee; .container { - padding-left: 83px !important; // Overriding container padding to align according to mockups - padding-right: 73px !important; + padding-left: 0; + padding-right: 0; } h3 { - font-family: $font-family-light; + font-family: $font-family-base; font-size: 21pt; + font-weight: 400; margin: 0 0 13px 0; } + @media (min-width: $screen-md-min) { + padding-left: 0; + padding-right: 0; + } +} + +#dashboard-container { + padding-bottom: 50px; } + .host-dashboard .col-md-3 { - padding: 0 14px; + display: inline-block; + width: 357px; + margin-bottom: 14px; + margin-left: 14px; + padding: 0; > div { background: #fff; padding: 13px 20px 20px; } } +@media (min-width: $screen-sm-max) and (max-width: $screen-md-min) { + + .host-dashboard .container { + padding-right: 10px; + padding-left: 10px; + } + +} + +@media (min-width: $screen-md-max) and (max-width: $screen-lg) { + + .host-dashboard .container { + padding-left: 83px !important; + padding-right: 73px !important; + } + +} + +@media (min-width: $screen-sm-min) and (max-width: $screen-lg - 1) { + + #content-sys-statistics { + width: 752px; + margin: 0 auto; + } + +} + +@media (min-width: $screen-lg) { + + #dashboard-container { + overflow-x: auto; + } + + #content-sys-statistics { + margin: 0 auto; + width: 1504px; + height: 269px; + overflow: visible; + } + +} + /* End of Host Dashboard */ @@ -67,8 +122,15 @@ /* Host Panels Container and Panels */ #host-info-container { - padding-top: 53px; - margin: 0 -8px; + margin: 0 10px; +} + +@media (min-width: $screen-md-max) and (max-width: $screen-lg) { + + .host-dashboard .container { + margin: 0; + } + } #host-info-container .col-md-4 { @@ -78,16 +140,25 @@ } #software-update-section { - margin-top: 24px; - border-top: 1px solid #b0b0b0; - padding-top: 24px; + margin: 0 10px 14px 10px; + padding-top: 14px; +} + + +@media (min-width: $screen-md-max) and (max-width: $screen-lg) { + + #software-update-section { + margin: 0 0 14px 0; + } +} + +#repositories-section { + border-bottom: 1px solid $gray; } -// TEMPORARY FIX TO LAYOUT UNTIL WOK.LIST WIDGET IS DONE #repositories-grid, #available-reports-grid { .wok-list-content { - height: 517px; overflow-x: hidden; overflow-y: auto; } @@ -97,7 +168,13 @@ } } -// END OF TEMPORARY FIX +#repositories-grid .wok-list-content { + height: 517px; +} + +#available-reports-grid .wok-list-content { + height: 358px; +} /* Basic Information */ @@ -114,12 +191,12 @@ .panel-body dt { font-weight: 600; font-size: 14.5pt; - line-height: 12px; + line-height: 14.5pt; } .panel-body dd { font-size: 12.5pt; font-weight: 400; - margin-bottom: 12px; + margin-bottom: 12.5pt; } } @@ -169,11 +246,11 @@ .host-panel #software-updates-progress-container { padding: 15px; - background: #eee; + background: $table-border-color; } #software-updates-progress-container .software-updates-main { - background: #fff; + background: $table-bg; } #software-updates-progress-container h3 { @@ -218,7 +295,7 @@ } #software-updates-progress-container > div > h3 > a[aria-expanded="true"] { - border-color: #eee; + border-color: $table-border-color; } diff --git a/ui/pages/host-dashboard.html.tmpl b/ui/pages/host-dashboard.html.tmpl index eec40c3..8a68378 100644 --- a/ui/pages/host-dashboard.html.tmpl +++ b/ui/pages/host-dashboard.html.tmpl @@ -61,36 +61,38 @@ <div class="host-dashboard"> <div class="container"> <div id="alert-container"></div> - <div id="content-sys-statistics" class="row"> - <div class="col-md-3"> - <div id="cpu-dashboard"> - <h3 class="section-label">$_("CPU")</h3> - <div class="section-value"> - <div id="container-chart-cpu" class="inline-block"></div> + <div id="dashboard-container"> + <div id="content-sys-statistics"> + <div class="col-md-3"> + <div id="cpu-dashboard"> + <h3 class="section-label">$_("CPU")</h3> + <div class="section-value"> + <div id="container-chart-cpu" class="inline-block"></div> + </div> </div> </div> - </div> - <div class="col-md-3"> - <div id="memory-dashboard"> - <h3 class="section-label">$_("Memory")</h3> - <div class="section-value"> - <div id="container-chart-memory" class="inline-block"></div> + <div class="col-md-3"> + <div id="memory-dashboard"> + <h3 class="section-label">$_("Memory")</h3> + <div class="section-value"> + <div id="container-chart-memory" class="inline-block"></div> + </div> </div> </div> - </div> - <div class="col-md-3"> - <div id="disk-dashboard"> - <h3 class="section-label">$_("Disk I/O")</h3> - <div class="section-value"> - <div id="container-chart-disk-io" class="inline-block"></div> + <div class="col-md-3"> + <div id="disk-dashboard"> + <h3 class="section-label">$_("Disk I/O")</h3> + <div class="section-value"> + <div id="container-chart-disk-io" class="inline-block"></div> + </div> </div> </div> - </div> - <div class="col-md-3"> - <div id="network-dashboard"> - <h3 class="section-label">$_("Network I/O")</h3> - <div class="section-value"> - <div id="container-chart-network-io" class="inline-block"></div> + <div class="col-md-3"> + <div id="network-dashboard"> + <h3 class="section-label">$_("Network I/O")</h3> + <div class="section-value"> + <div id="container-chart-network-io" class="inline-block"></div> + </div> </div> </div> </div> -- 1.9.3
From: samhenri <samuel.guimaraes@eldorado.org.br> Signed-off-by: samhenri <samuel.guimaraes@eldorado.org.br> --- ui/pages/repository-add.html.tmpl | 8 ++++---- ui/pages/repository-edit.html.tmpl | 17 ++++++++--------- 2 files changed, 12 insertions(+), 13 deletions(-) diff --git a/ui/pages/repository-add.html.tmpl b/ui/pages/repository-add.html.tmpl index 7a48617..48b4620 100644 --- a/ui/pages/repository-add.html.tmpl +++ b/ui/pages/repository-add.html.tmpl @@ -41,14 +41,14 @@ <p class="help-block"><i class="fa fa-info-circle"></i> $_("Textual name for the repository.") </p> </div> - <div class="form-group"> + <div class="form-group"> <label for="baseurl">$_("URL")<span class="required" role="presentation" title='$_("Required Field")'>*</span></label> <input type="text" class="form-control required" id="baseurl" name="baseurl" /> <p class="help-block"><i class="fa fa-info-circle"></i> $_("URL to the repository. Supported protocols are http, ftp, and file.")</p> </div> - <div class="checkbox yum"> - <label id="isMirrorLabel" for="isMirror"> - <input type="checkbox" name="isMirror" value="true" id="isMirror" /> $_("Repository is a mirror")</label> + <div class="yum"> + <input type="checkbox" name="isMirror" class="wok-checkbox" value="true" id="isMirror" /> + <label id="isMirrorLabel" for="isMirror">$_("Repository is a mirror")</label> </div> <div class="form-group repository-dist deb"> <label>$_("Distribution")</label> diff --git a/ui/pages/repository-edit.html.tmpl b/ui/pages/repository-edit.html.tmpl index c468e4b..1aa216e 100644 --- a/ui/pages/repository-edit.html.tmpl +++ b/ui/pages/repository-edit.html.tmpl @@ -59,21 +59,20 @@ </div> <div class="form-group repository-gpgcheck yum"> <label>$_("GPG Check")</label> - <label for="repository-edit-gpgcheck-radio-true" class="radio inline control-label"> - <input id="repository-edit-gpgcheck-radio-true" class="yum" name="config[gpgcheck]" type="radio" value="true" /> $_("Yes") - </label> - <label for="repository-edit-gpgcheck-radio-false" class="radio inline control-label"> - <input id="repository-edit-gpgcheck-radio-false" class="yum" name="config[gpgcheck]" type="radio" value="false" /> $_("No") - </label> + + <input id="repository-edit-gpgcheck-radio-true" class="yum wok-radio" name="config[gpgcheck]" type="radio" value="true" /> + <label for="repository-edit-gpgcheck-radio-true" class="radio inline control-label">$_("Yes")</label> + + <input id="repository-edit-gpgcheck-radio-false" class="yum wok-radio" name="config[gpgcheck]" type="radio" value="false" /> + <label for="repository-edit-gpgcheck-radio-false">$_("No")</label> </div> </form> </div> <div class="modal-footer"> <button type="submit" id="repository-edit-button-save" class="btn btn-default">$_("Save")</button> - <button type="button" id="repository-edit-button-cancel" class="btn btn-default">$_("Cancel")</button> + <button type="button" id="repository-edit-button-cancel" class="btn btn-default" data-dismiss="modal">$_("Cancel")</button> </div> </div> <script type="text/javascript"> gingerbase.repository_edit_main(); -</script> - \ No newline at end of file +</script> \ No newline at end of file -- 1.9.3
Please forward this patch and any other gingerbase patches to ginger-dev-list@googlegroups.com Thanks! On 04/12/2015 19:36, sguimaraes943@gmail.com wrote:
From: samhenri <samuel.guimaraes@eldorado.org.br>
This patch adds support for media queries in Gingerbase. The second patch adds wok-radio and wok-checkboxes to the modal windows. It also fixes the "Cancel" button that wasn't working.
Regards, Samuel
samhenri (2): Adding Media Queries support to Gingerbase Fixed Repository Add and Edit modals
ui/css/src/modules/_host.scss | 113 +++++++++++++++++++++++++++++++------ ui/pages/host-dashboard.html.tmpl | 50 ++++++++-------- ui/pages/repository-add.html.tmpl | 8 +-- ui/pages/repository-edit.html.tmpl | 17 +++--- 4 files changed, 133 insertions(+), 55 deletions(-)
patch set forward to ginger-dev-list@googlegroups.com On 12/04/2015 07:36 PM, sguimaraes943@gmail.com wrote:
From: samhenri <samuel.guimaraes@eldorado.org.br>
This patch adds support for media queries in Gingerbase. The second patch adds wok-radio and wok-checkboxes to the modal windows. It also fixes the "Cancel" button that wasn't working.
Regards, Samuel
samhenri (2): Adding Media Queries support to Gingerbase Fixed Repository Add and Edit modals
ui/css/src/modules/_host.scss | 113 +++++++++++++++++++++++++++++++------ ui/pages/host-dashboard.html.tmpl | 50 ++++++++-------- ui/pages/repository-add.html.tmpl | 8 +-- ui/pages/repository-edit.html.tmpl | 17 +++--- 4 files changed, 133 insertions(+), 55 deletions(-)
participants (3)
-
Aline Manera -
Daniel Henrique Barboza -
sguimaraes943＠gmail.com