[Kimchi-devel] [PATCH] [Wok 01/10] Adding Media Queries for different screen sizes
sguimaraes943 at gmail.com
sguimaraes943 at gmail.com
Mon Dec 14 18:58:50 UTC 2015
From: samhenri <samuel.guimaraes at eldorado.org.br>
Signed-off-by: samhenri <samuel.guimaraes at eldorado.org.br>
---
ui/css/src/bootstrap.custom.scss | 1 -
ui/css/src/modules/_datagrid.scss | 9 +-
ui/css/src/modules/_guests.scss | 67 ++++++++---
ui/css/src/modules/_menu-flat.scss | 3 +-
ui/css/src/modules/_navbar-flat.scss | 132 ++++++++++-----------
ui/css/src/modules/_network.scss | 6 +-
ui/css/src/modules/_toolbar.scss | 25 +++-
ui/css/src/modules/_wok-variables.scss | 17 +--
.../vendor/bootstrap-sass/bootstrap/_alerts.scss | 17 ++-
.../src/vendor/bootstrap-sass/bootstrap/_grid.scss | 2 +
ui/css/src/wok.scss | 83 +++++++------
11 files changed, 213 insertions(+), 149 deletions(-)
diff --git a/ui/css/src/bootstrap.custom.scss b/ui/css/src/bootstrap.custom.scss
index f04f3b8..f17f11c 100644
--- a/ui/css/src/bootstrap.custom.scss
+++ b/ui/css/src/bootstrap.custom.scss
@@ -73,7 +73,6 @@
@import "modules/modal-flat";
@import "vendor/bootstrap-sass/bootstrap/tooltip";
@import "vendor/bootstrap-sass/bootstrap/popovers";
- at import "vendor/bootstrap-sass/bootstrap/carousel";
// Utility classes
@import "vendor/bootstrap-sass/bootstrap/utilities";
diff --git a/ui/css/src/modules/_datagrid.scss b/ui/css/src/modules/_datagrid.scss
index fe2f7dc..389b8b6 100644
--- a/ui/css/src/modules/_datagrid.scss
+++ b/ui/css/src/modules/_datagrid.scss
@@ -18,11 +18,11 @@
.grid-control {
padding: 5px;
}
-
+
.grid-control input[type="text"] {
width: 514px;
}
-
+
.wok-datagrid {
background: $table-bg;
.wok-datagrid-header,
@@ -37,7 +37,7 @@
}
> .wok-datagrid-header > span {
font-family: $font-family-light;
- font-weight: 400;
+ font-weight: 300;
font-size: 12.5pt;
vertical-align: bottom;
border-bottom: none;
@@ -48,12 +48,13 @@
> .wok-datagrid-body > .wok-datagrid-row{
border-top: 1px solid $table-border-color;
-
+
> span {
font-family: $font-family-sans-serif;
line-height: (1 + $line-height-base);
vertical-align: top;
font-size: 12.5pt;
+ font-weight: 400;
}
}
diff --git a/ui/css/src/modules/_guests.scss b/ui/css/src/modules/_guests.scss
index 24b36c6..f6b7a60 100644
--- a/ui/css/src/modules/_guests.scss
+++ b/ui/css/src/modules/_guests.scss
@@ -95,6 +95,7 @@
.wok-guest-list {
display: block;
width: 100%;
+ padding: 0;
list-style-type: none;
> li:nth-child(even) {
background-color: $table-bg-accent;
@@ -114,15 +115,19 @@
display: inline-block;
vertical-align: middle;
font-family: $font-family-sans-serif;
- font-weight: 400;
+ font-weight: 300;
font-size: 12.5pt;
line-height: 1.42857;
border-bottom: none;
border-top: 0;
- }
- > span.column-state {
- width: 2.9272%;
- text-align: center;
+ overflow: hidden;
+ > span {
+ width: 100%;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ display: block;
+ }
}
}
.wok-guest-list-body {
@@ -134,7 +139,7 @@
font-family: $font-family-sans-serif;
font-size: 12.5pt;
line-height: 2.42857;
- font-weight: bold;
+ font-weight: 400;
}
.progress {
display: inline-block;
@@ -177,7 +182,7 @@
.wok-guest-list .wok-guest-list-header,
.wok-guest-list .wok-guest-list-body {
> span.column-state {
- width: 2.9272%;
+ width: 40px;
text-align: center;
> span.guest-state {
font-size: 22px;
@@ -236,16 +241,29 @@
}
}
> span.column-name {
- width: 13.6867%;
+ width: 13.7%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
+ @media (min-width: $screen-lg + 130) {
+ width: 9.7%;
+ }
+ @media (min-width: $screen-xlg) {
+ width: 14.15%;
+ }
}
> span.column-type {
- width: 9.9683%;
+ width: 11.74%;
+ background-position: 0 50%;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+ @media (min-width: $screen-lg + 130) {
+ width: 10.74%;
+ }
}
> span.column-vnc {
- width: 11.8670%;
+ display: none;
> a {
font-weight: normal;
color: $vnc-blue !important;
@@ -259,33 +277,39 @@
font-size: 22px;
color: $vnc-blue !important;
}
+ @media (min-width: $screen-lg + 130) {
+ width: 10.84%;
+ display: inline-block;
+ }
+ }
+ > span.column-processors,
+ > span.column-memory,
+ > span.column-storage,
+ > span.column-network {
+ width: 12.5%;
}
> span.column-processors {
- width: 12.1838%;
> div > div.progress-bar.cpu-progress-bar {
background-color: map-get($colors, administration);
}
}
> span.column-memory {
- width: 12.1838%;
> div > div.progress-bar.memory-progress-bar {
background-color: map-get($colors, host);
}
}
> span.column-storage {
- width: 12.9746%;
> div > div.progress-bar.storage-progress-bar {
background-color: $state-warning-border;
}
}
> span.column-network {
- width: 12.9746%;
> div > div.progress-bar.network-progress-bar {
background-color: map-get($colors, network);
}
}
> span.column-action {
- width: 10.9968%;
+ width: 165px;
}
> span.item-hidden {
display: none !important;
@@ -300,7 +324,7 @@
.wok-guest-list .distro-icon.inactive {
-webkit-filter: grayscale(100%) contrast(0.8) brightness(110%);
-moz-filter: grayscale(100%) contrast(0.8) brightness(110%);
- filter: grayscale(100%) contrast(0.8) brightness(110%);
+ filter: grayscale(100%) contrast(0.8) brightness(110%);
}
.wok-guest-list .distro-icon.icon-centos {
background-image: url('#{$wok-icon-path}/icon-centos.png');
@@ -327,3 +351,14 @@
color: $disabled-color !important;
}
}
+
+// #guests-root-container .container {
+// @media (min-width: $screen-lg-min) {
+// padding-left: 0;
+// padding-right: 0;
+// }
+// @media (min-width: 1600px) {
+// padding-left: 80px;
+// padding-right: 60px;
+// }
+// }
\ No newline at end of file
diff --git a/ui/css/src/modules/_menu-flat.scss b/ui/css/src/modules/_menu-flat.scss
index 0802c75..179010c 100644
--- a/ui/css/src/modules/_menu-flat.scss
+++ b/ui/css/src/modules/_menu-flat.scss
@@ -14,7 +14,8 @@
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
-//
+//
+
@import '../vendor/bootstrap-sass/bootstrap/mixins';
//
// Menu-Flat Drop-Down
diff --git a/ui/css/src/modules/_navbar-flat.scss b/ui/css/src/modules/_navbar-flat.scss
index 384e755..0e11269 100644
--- a/ui/css/src/modules/_navbar-flat.scss
+++ b/ui/css/src/modules/_navbar-flat.scss
@@ -71,8 +71,8 @@
overflow-x: visible;
padding-right: $navbar-padding-horizontal;
padding-left: $navbar-padding-horizontal;
- border-top: 1px solid transparent;
- box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
+ border-top: 0;
+ box-shadow: none;
@include clearfix;
-webkit-overflow-scrolling: touch;
@@ -182,12 +182,11 @@
.navbar-brand {
display: block;
- margin: 0 0 0 -80px;
- padding: 0 0 0 80px;
+ padding: 0 0 0 60px;
height: 55px;
- background: transparent url($kimchi-logo) no-repeat 24px 3px;
+ background: transparent url($kimchi-logo) no-repeat 5px 3px;
color: $highlights-color;
- font-family: $font-family-bold;
+ font-family: $font-family-bold;
font-weight: 700;
font-size: 1.571em;
line-height: 55px;
@@ -203,12 +202,6 @@
display: block;
}
- @media (min-width: $grid-float-breakpoint) {
- .navbar > .container &,
- .navbar > .container-fluid & {
- margin-left: -80px;
- }
- }
}
@@ -259,17 +252,8 @@
.navbar-nav {
margin: ($navbar-padding-vertical / 2) (-$navbar-padding-horizontal);
- > li > a {
- padding-left: 40px;
- padding-right: 40px;
- line-height: $line-height-computed;
- font-family: $font-family-alternate;
- font-size: 13pt;
-
- > .fa {
+ > li > a > .fa {
font-size: 26px;
- }
-
}
> li > a.dropdown-toggle {
@@ -422,7 +406,7 @@
background-clip: padding-box;
height: auto;
max-height: 400px;
- overflow-x: hidden;
+ overflow-x: hidden;
margin-right: 22px;
> li {
@@ -438,7 +422,7 @@
font-family: $font-family-sans-serif;
font-size: 13pt;
font-weight: normal;
- line-height: 24px;
+ line-height: 24px;
padding: 7px 30px;
height: 40px;
border-top: 1px solid $menu-flat-dropdown-border;
@@ -471,11 +455,11 @@
.navbar-nav > li > .dropdown-menu::-webkit-scrollbar {
width: 12px;
}
-
+
.navbar-nav > li > .dropdown-menu::-webkit-scrollbar-track {
@include box-shadow(inset 0 0 6px rgba(0,0,0,0.3));
}
-
+
.navbar-nav > li > .dropdown-menu::-webkit-scrollbar-thumb {
border-radius: 4px;
background: #797979;
@@ -541,7 +525,7 @@
}
.navbar-right {
float: right !important;
- margin-right: -$navbar-padding-horizontal;
+ margin-right: $navbar-right-padding-horizontal;
~ .navbar-right {
margin-right: 0;
@@ -567,44 +551,57 @@
}
}
+ .container {
+ @include container-fixed;
+
+ @media (min-width: $screen-sm-min) {
+ width: $container-sm;
+ }
+ @media (min-width: $screen-md-min) {
+ width: $container-md;
+ }
+ @media (min-width: $screen-lg-min) {
+ width: $container-lg;
+ padding-left: 80px;
+ padding-right: 60px;
+
+ #tabPanel {
+ margin-left: -80px;
+ margin-right: -60px;
+ padding-left: 80px;
+ padding-right: 60px;
+ }
+
+ }
+ }
+
.navbar-text {
color: $navbar-default-color;
}
.navbar-nav {
> li > a {
- margin: 0 !important;
- font-size: 13pt;
- font-family: $font-family-bold;
+ padding-left: 10px;
+ padding-right: 10px;
+ margin: 0;
+ font-size: 12pt;
+ font-family: $font-family-base;
font-weight: 700;
color: $navbar-default-link-color;
text-decoration: none;
outline: none;
- min-width: 210px;
+ min-width: 156px;
text-align: center;
height: $navbar-height;
-
+ @media (min-width: $screen-lg-min) {
+ min-width: 190px;
+ font-size: 13pt;
+ }
&:hover,
&:focus {
color: $navbar-default-link-hover-color;
background-color: $navbar-default-link-hover-bg;
}
-
- .digit-container {
- display: inline-block;
- margin-left: 10px;
- margin-top: -2px;
- border-radius: 16px;
- height: 20px;
- line-height: 16px;
- background: #555;
- border: 2px solid #555;
- color: #fff;
- font-family: $font-family-base;
- font-size: 14px;
- padding: 0 8px;
- }
-
}
> .active > a {
&,
@@ -613,12 +610,6 @@
color: $navbar-default-link-active-color;
background-color: $navbar-default-link-active-bg;
}
-
- .digit-container {
- border-color: #fff;
- background: transparent;
- }
-
}
> .disabled > a {
&,
@@ -629,10 +620,6 @@
background-color: $navbar-default-link-disabled-bg;
}
- .digit-container {
- display: none;
- }
-
}
@each $page, $bgcolor in $colors {
@@ -652,23 +639,32 @@
> .hostname {
margin: 0;
- padding: 8px 0;
+ padding: 8px 10px;
vertical-align: top;
- width:210px;
- padding-right: 24px;
- @include box-sizing(border-box);
+ width:156px;
+ padding-left: 60px;
+ height: 40px;
+ @media (min-width: $screen-lg-min) {
+ width: 190px;
+ }
.host-location {
- display: block;
- font-family: $font-family-alternate;
+ display: inline-block;
+ font-family: $font-family-base;
color: $highlights-color;
- font-size: 13pt;
- font-weight: 400;
+ font-size: 8.5pt;
+ font-weight: 300;
width: 100%;
overflow: hidden;
white-space: nowrap;
- text-overflow: ellipsis;
- margin-left:80px;
+ text-align: left;
+ @media (min-width: $screen-sm-min) {
+ margin-top: 8px;
+ }
+ @media (min-width: $screen-md-min) {
+ margin-top: 4px;
+ font-size: 11pt;
+ }
}
}
diff --git a/ui/css/src/modules/_network.scss b/ui/css/src/modules/_network.scss
index 0a30b09..0f7a617 100644
--- a/ui/css/src/modules/_network.scss
+++ b/ui/css/src/modules/_network.scss
@@ -54,7 +54,7 @@
left: 50%;
margin-left: -8px;
}
-
+
.up .wok-nw-loading-icon,
.down .wok-nw-loading-icon {
display: none;
@@ -91,7 +91,7 @@
}
> span.column-type {
- width: 10.3896%;
+ width: 11.3896%;
}
> span.column-interface {
@@ -99,7 +99,7 @@
}
> span.column-space {
- width: 31.169%;
+ width: 30%;
}
> span.column-action {
diff --git a/ui/css/src/modules/_toolbar.scss b/ui/css/src/modules/_toolbar.scss
index 6e74f4e..9301a9a 100644
--- a/ui/css/src/modules/_toolbar.scss
+++ b/ui/css/src/modules/_toolbar.scss
@@ -34,14 +34,14 @@
margin-left: 0;
}
.navbar-right.tools > li > a {
- font-family: $font-family-alternate;
+ font-family: $font-family-base;
display: inline-block;
color: $highlights-color;
text-decoration: none;
font-size: 13pt;
vertical-align: middle;
- padding: 6px 0 !important;
- margin-left: 50px !important;
+ padding: 6px 0;
+ margin-left: 20px;
font-weight: 600;
width: auto;
min-width: auto;
@@ -75,3 +75,22 @@ $bgcolor in $colors {
background-color: map-get($colors, $tab) !important;
}
}
+
+
+
+ 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) {
+
+ .navbar-default.toolbar .navbar-right.tools > li > a {
+ margin-left: 50px;
+ }
+
+}
diff --git a/ui/css/src/modules/_wok-variables.scss b/ui/css/src/modules/_wok-variables.scss
index 0f15d2d..52f4b3f 100644
--- a/ui/css/src/modules/_wok-variables.scss
+++ b/ui/css/src/modules/_wok-variables.scss
@@ -384,25 +384,27 @@ $screen-phone: $screen-xs-min !default;
// Small screen / tablet
//** Deprecated `$screen-sm` as of v3.0.1
-$screen-sm: 992px !default;
+$screen-sm: 768px !default;
$screen-sm-min: $screen-sm !default;
//** Deprecated `$screen-tablet` as of v3.0.1
$screen-tablet: $screen-sm-min !default;
// Medium screen / desktop
//** Deprecated `$screen-md` as of v3.0.1
-$screen-md: 1200px !default;
+$screen-md: 992px !default;
$screen-md-min: $screen-md !default;
//** Deprecated `$screen-desktop` as of v3.0.1
$screen-desktop: $screen-md-min !default;
// Large screen / wide desktop
//** Deprecated `$screen-lg` as of v3.0.1
-$screen-lg: 1680 !default;
+$screen-lg: 1200px !default;
$screen-lg-min: $screen-lg !default;
//** Deprecated `$screen-lg-desktop` as of v3.0.1
$screen-lg-desktop: $screen-lg-min !default;
+$screen-xlg: 1540px !default;
+
// So media queries don't overlap when required, provide a maximum
$screen-xs-max: ($screen-sm-min - 1) !default;
$screen-sm-max: ($screen-md-min - 1) !default;
@@ -429,17 +431,17 @@ $grid-float-breakpoint-max: ($grid-float-breakpoint - 1) !default;
//## Define the maximum width of `.container` for different screen sizes.
// Small screen / tablet
-$container-tablet: (940px + $grid-gutter-width) !default;
+$container-tablet: 100% !default;
//** For `$screen-sm-min` and up.
$container-sm: $container-tablet !default;
// Medium screen / desktop
-$container-desktop: (1140px + $grid-gutter-width) !default;
+$container-desktop: 100% !default;
//** For `$screen-md-min` and up.
$container-md: $container-desktop !default;
// Large screen / wide desktop
-$container-large-desktop: (1540px + $grid-gutter-width) !default;
+$container-large-desktop: 100% !default;
//** For `$screen-lg-min` and up.
$container-lg: $container-large-desktop !default;
@@ -452,7 +454,8 @@ $container-lg: $container-large-desktop !default;
$navbar-height: 40px !default;
$navbar-margin-bottom: 0 !default;
$navbar-border-radius: 0 !default;
-$navbar-padding-horizontal: floor(($grid-gutter-width / 2)) !default;
+$navbar-padding-horizontal: 0 !default;
+$navbar-right-padding-horizontal: 10px !default;
$navbar-padding-vertical: (($navbar-height - $line-height-computed) / 2) !default;
$navbar-collapse-max-height: 340px !default;
diff --git a/ui/css/src/vendor/bootstrap-sass/bootstrap/_alerts.scss b/ui/css/src/vendor/bootstrap-sass/bootstrap/_alerts.scss
index 7d1e1fd..79c6c12 100644
--- a/ui/css/src/vendor/bootstrap-sass/bootstrap/_alerts.scss
+++ b/ui/css/src/vendor/bootstrap-sass/bootstrap/_alerts.scss
@@ -6,11 +6,19 @@
// Base styles
// -------------------------
+#alert-fields {
+ @media (min-width: $screen-lg-min) {
+ padding-top: 10px;
+ }
+}
+
.alert {
padding: $alert-padding;
- margin-bottom: $line-height-computed;
+ margin-bottom: ($line-height-computed / 2);
border: 1px solid transparent;
border-radius: $alert-border-radius;
+ border-width: $alert-border-width;
+ position: relative;
// Headings for larger alerts
h4 {
@@ -45,9 +53,10 @@
// Adjust close link position
.close {
- position: relative;
- top: -2px;
- right: -21px;
+ opacity: 1;
+ position: absolute;
+ top: 6px;
+ right: 15px;
color: inherit;
}
}
diff --git a/ui/css/src/vendor/bootstrap-sass/bootstrap/_grid.scss b/ui/css/src/vendor/bootstrap-sass/bootstrap/_grid.scss
index b15ca27..575abd6 100644
--- a/ui/css/src/vendor/bootstrap-sass/bootstrap/_grid.scss
+++ b/ui/css/src/vendor/bootstrap-sass/bootstrap/_grid.scss
@@ -18,6 +18,8 @@
}
@media (min-width: $screen-lg-min) {
width: $container-lg;
+ padding-left: 80px;
+ padding-right: 60px;
}
}
diff --git a/ui/css/src/wok.scss b/ui/css/src/wok.scss
index 3d182be..5d4f515 100755
--- a/ui/css/src/wok.scss
+++ b/ui/css/src/wok.scss
@@ -26,35 +26,6 @@
.container {
margin-right: auto;
margin-left: auto;
- padding-left: 80px !important;
- padding-right: 60px !important;
-}
-
-#navigation-bar {
- padding-left: 0 !important;
- padding-right:0 !important;
- width:100%;
-}
-
-// Override alert
-.alert {
- border-width: $alert-border-width;
- margin-bottom: 10px;
-}
-
-.alert-fields {
- margin-top: -20px;
- padding-bottom: 10px;
-}
-
-.alert-dismissable .close,
-.alert-dismissible .close {
- right: 15px !important;
- top: 0 !important;
-}
-
-.close {
- opacity: 1 !important;
}
.hide-content {
@@ -76,8 +47,6 @@
}
// Override forms
-
-
.form-control.invalid-field {
border-color: $brand-danger;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(217, 83, 79, 0.6);
@@ -176,15 +145,45 @@ pre {
margin-top: 20px;
}
-// Media queries
- at media screen and (min-width: 768px) {
- .container {
- width: 1540px;
- }
-}
+// @media screen and (max-width: 63.75em) {
+// .container {
+// width: 100%;
+// }
+// }
+
+// @media screen and (max-width: 76.25em) {
+// .container {
+// width: 100%;
+// }
+// }
+
+// @media screen and (max-width: 84.375em) {
+// .container {
+// width: 100%;
+// }
+// }
+
+// @media screen and (max-width: 89em) {
+// .container {
+// width: 100%;
+// }
+// }
+
+// @media screen and (max-width: 99em) {
+// .container {
+// width: 100%;
+// }
+// }
+
+// @media screen and (max-width: 104em) {
+// .container {
+// width: 100%;
+// }
+// }
+
+// @media screen (min-width: 104em) and (max-width: 120em) {
+// .container {
+// width: 100%;
+// }
+// }
- at media screen and (min-width: 1680px) {
- .container {
- width: 1680px;
- }
-}
--
1.9.3
More information about the Kimchi-devel
mailing list