[Kimchi-devel] [PATCH 1/2] Adding Media Queries support to Gingerbase
sguimaraes943 at gmail.com
sguimaraes943 at gmail.com
Fri Dec 4 21:36:54 UTC 2015
From: samhenri <samuel.guimaraes at eldorado.org.br>
Signed-off-by: samhenri <samuel.guimaraes at 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;
}
}
+ at media (min-width: $screen-sm-max) and (max-width: $screen-md-min) {
+
+ .host-dashboard .container {
+ padding-right: 10px;
+ padding-left: 10px;
+ }
+
+}
+
+ at media (min-width: $screen-md-max) and (max-width: $screen-lg) {
+
+ .host-dashboard .container {
+ padding-left: 83px !important;
+ padding-right: 73px !important;
+ }
+
+}
+
+ at media (min-width: $screen-sm-min) and (max-width: $screen-lg - 1) {
+
+ #content-sys-statistics {
+ width: 752px;
+ margin: 0 auto;
+ }
+
+}
+
+ at 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;
+}
+
+ at 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;
+}
+
+
+ at 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
More information about the Kimchi-devel
mailing list