[Kimchi-devel] [PATCH] [Wok 01/10] Adding Media Queries for different screen sizes

From: samhenri <samuel.guimaraes(a)eldorado.org.br&gt; Signed-off-by: samhenri <samuel.guimaraes(a)eldorado.org.br&gt; --- 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"; -@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 @@ } 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 @@ border-top: 1px solid $table-border-color; - + 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; 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; - } - - width: 2.9272%; - text-align: center; + overflow: hidden; + + 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 { - width: 2.9272%; + width: 40px; text-align: center; font-size: 22px; @@ -236,16 +241,29 @@ } } - 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%; + } } - 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%; + } } - width: 11.8670%; + display: none; 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%; } - width: 12.1838%; background-color: map-get($colors, administration); } } - width: 12.1838%; background-color: map-get($colors, host); } } - width: 12.9746%; background-color: $state-warning-border; } } - width: 12.9746%; background-color: map-get($colors, network); } } - width: 10.9968%; + width: 165px; } 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); - - 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; - } - } @@ -422,7 +406,7 @@ background-clip: padding-box; height: auto; max-height: 400px; - overflow-x: hidden; + overflow-x: hidden; margin-right: 22px; @@ -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 { - 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; - } - } &, @@ -613,12 +610,6 @@ color: $navbar-default-link-active-color; background-color: $navbar-default-link-active-bg; } - - .digit-container { - border-color: #fff; - background: transparent; - } - } &, @@ -629,10 +620,6 @@ background-color: $navbar-default-link-disabled-bg; } - .digit-container { - display: none; - } - } @each $page, $bgcolor in $colors { @@ -652,23 +639,32 @@ 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 @@ } - width: 10.3896%; + width: 11.3896%; } @@ -99,7 +99,7 @@ } - width: 31.169%; + width: 30%; } 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; } } + + + +@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) { + + .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 -@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%; +// } +// } -@media screen and (min-width: 1680px) { - .container { - width: 1680px; - } -} -- 1.9.3