[PATCH 0/2] [Wok] Media Queries and wok.message
From: samhenri <samuel.guimaraes@eldorado.org.br> This patch corrects some screen width problems with small screens in desktos / laptops. Please note that these changes were made without any mockup for different sets of screen resolutions other than the design spec. This doesn't include mobile support yet. The second patch fixes the wok.message.js delay and fade-out. It was too fast for long messages. Delay was changed to 10s and fade-out to 4s. Regards, Samuel samhenri (2): [Wok] Adding Media Queries for different screen sizes [Wok] Fixed wok.message.js fade-out timing ui/css/src/bootstrap.custom.scss | 1 - ui/css/src/modules/_guests.scss | 52 ++++++++-- ui/css/src/modules/_menu-flat.scss | 3 +- ui/css/src/modules/_navbar-flat.scss | 106 ++++++++------------- ui/css/src/modules/_network.scss | 6 +- ui/css/src/modules/_toolbar.scss | 25 ++++- ui/css/src/modules/_wok-variables.scss | 15 +-- .../vendor/bootstrap-sass/bootstrap/_alerts.scss | 17 +++- .../src/vendor/bootstrap-sass/bootstrap/_grid.scss | 2 + ui/css/src/wok.scss | 83 ++++++++-------- ui/js/src/wok.message.js | 4 +- 11 files changed, 180 insertions(+), 134 deletions(-) -- 1.9.3
From: samhenri <samuel.guimaraes@eldorado.org.br>
Signed-off-by: samhenri <samuel.guimaraes@eldorado.org.br>
---
ui/css/src/bootstrap.custom.scss | 1 -
ui/css/src/modules/_guests.scss | 52 ++++++++--
ui/css/src/modules/_menu-flat.scss | 3 +-
ui/css/src/modules/_navbar-flat.scss | 106 ++++++++-------------
ui/css/src/modules/_network.scss | 6 +-
ui/css/src/modules/_toolbar.scss | 25 ++++-
ui/css/src/modules/_wok-variables.scss | 15 +--
.../vendor/bootstrap-sass/bootstrap/_alerts.scss | 17 +++-
.../src/vendor/bootstrap-sass/bootstrap/_grid.scss | 2 +
ui/css/src/wok.scss | 83 ++++++++--------
10 files changed, 178 insertions(+), 132 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/_guests.scss b/ui/css/src/modules/_guests.scss
index 24b36c6..0d16acc 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;
@@ -119,6 +120,14 @@
line-height: 1.42857;
border-bottom: none;
border-top: 0;
+ overflow: hidden;
+ > span {
+ width: 100%;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ display: block;
+ }
}
> span.column-state {
width: 2.9272%;
@@ -136,6 +145,13 @@
line-height: 2.42857;
font-weight: bold;
}
+ > span.column-type {
+ padding-left: 40px;
+ width: 100%;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ }
.progress {
display: inline-block;
width: 60%;
@@ -236,16 +252,21 @@
}
}
> span.column-name {
+ display: none;
width: 13.6867%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
> span.column-type {
- width: 9.9683%;
+ width: 21.82%;
+ @media (min-width: $screen-md-max) {
+ width: 9.9683%;
+ }
}
> span.column-vnc {
width: 11.8670%;
+ display: none;
> a {
font-weight: normal;
color: $vnc-blue !important;
@@ -259,27 +280,35 @@
font-size: 22px;
color: $vnc-blue !important;
}
+ @media (min-width: $screen-md-max) {
+ display: inline-block;
+ }
+ }
+ > span.column-processors,
+ > span.column-memory,
+ > span.column-storage,
+ > span.column-network {
+ width: 14.9746%;
+ @media (min-width: $screen-md-max) {
+ width: 12.9746%;
+ }
}
> 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);
}
@@ -300,7 +329,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 +356,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..3988683 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,40 @@
}
}
+ .container {
+ @media (min-width: $screen-lg-min) {
+ padding-left: 0;
+ padding-right: 0;
+ }
+ }
+
.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 +593,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 +603,6 @@
background-color: $navbar-default-link-disabled-bg;
}
- .digit-container {
- display: none;
- }
-
}
@each $page, $bgcolor in $colors {
@@ -652,23 +622,29 @@
> .hostname {
margin: 0;
- padding: 8px 0;
+ padding: 8px 10px;
vertical-align: top;
- width:210px;
- padding-right: 24px;
- @include box-sizing(border-box);
+ width:156px;
+ font-size: 12pt;
+ @media (min-width: $screen-lg-min) {
+ font-size: 13pt;
+ width: 190px;
+ padding-left: 80px;
+ }
.host-location {
display: block;
- font-family: $font-family-alternate;
+ font-family: $font-family-base;
color: $highlights-color;
font-size: 13pt;
- font-weight: 400;
+ font-weight: 300;
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
- margin-left:80px;
+ @media (min-width: $screen-lg-min) {
+ text-align: right;
+ }
}
}
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;
}
}
+
+
+
+@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..1e2c906 100644
--- a/ui/css/src/modules/_wok-variables.scss
+++ b/ui/css/src/modules/_wok-variables.scss
@@ -384,21 +384,21 @@ $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;
@@ -429,17 +429,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 +452,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
From: samhenri <samuel.guimaraes@eldorado.org.br> Signed-off-by: samhenri <samuel.guimaraes@eldorado.org.br> --- ui/js/src/wok.message.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/ui/js/src/wok.message.js b/ui/js/src/wok.message.js index a4d6596..86e8b01 100644 --- a/ui/js/src/wok.message.js +++ b/ui/js/src/wok.message.js @@ -37,14 +37,14 @@ wok.message = function(msg, level, node) { $message.fadeIn(100); var timeout = setTimeout(function() { - $message.delay(2000).fadeOut(100, function() { + $message.delay(4000).fadeOut(100, function() { $message.alert('close'); $(this).remove(); if ($(container).children().length < 1) { $(container).hide(); } }); - }, 4000); + }, 10000); }; wok.message.warn = function(msg, node) { -- 1.9.3
Hi Samuel, The second tab level is not aligned with the first level tab. It same behavior is identified for Kimchi and Ginger. As the tabs are built in Wok you need to update this patch to do this alignment. I hope to have all the content aligned with the Kimchi log + localhost. Also the content in the Guest tab does not have the margins properly set but I think you will go to send a separated patch for Kimchi. Regards, Aline Manera On 04/12/2015 19:31, sguimaraes943@gmail.com wrote:
From: samhenri <samuel.guimaraes@eldorado.org.br>
This patch corrects some screen width problems with small screens in desktos / laptops. Please note that these changes were made without any mockup for different sets of screen resolutions other than the design spec. This doesn't include mobile support yet.
The second patch fixes the wok.message.js delay and fade-out. It was too fast for long messages. Delay was changed to 10s and fade-out to 4s.
Regards, Samuel
samhenri (2): [Wok] Adding Media Queries for different screen sizes [Wok] Fixed wok.message.js fade-out timing
ui/css/src/bootstrap.custom.scss | 1 - ui/css/src/modules/_guests.scss | 52 ++++++++-- ui/css/src/modules/_menu-flat.scss | 3 +- ui/css/src/modules/_navbar-flat.scss | 106 ++++++++------------- ui/css/src/modules/_network.scss | 6 +- ui/css/src/modules/_toolbar.scss | 25 ++++- ui/css/src/modules/_wok-variables.scss | 15 +-- .../vendor/bootstrap-sass/bootstrap/_alerts.scss | 17 +++- .../src/vendor/bootstrap-sass/bootstrap/_grid.scss | 2 + ui/css/src/wok.scss | 83 ++++++++-------- ui/js/src/wok.message.js | 4 +- 11 files changed, 180 insertions(+), 134 deletions(-)
participants (2)
-
Aline Manera -
sguimaraes943＠gmail.com