Skip to content

Commit

Permalink
Merge pull request #677 from chteuchteu/ui-misc
Browse files Browse the repository at this point in the history 
Misc. UI enhancements
  • Loading branch information
@quentin-st
quentin-st committed Feb 17, 2016
2 parents 1132efc + 6f51f82 commit e2e680f
Show file tree
Hide file tree
Showing 26 changed files with 671 additions and 329 deletions.
11 changes: 7 additions & 4 deletions lib/Munin/Master/HTML.pm
View file
Expand Up @@ -110,9 +110,10 @@ sub handle_request


# Reduced navigation panel
$template_params{NAV_PANEL_REDUCED} = exists $cookies{"nav_panel_reduced"}
? ($cookies{"nav_panel_reduced"}->value eq "true" ? 1 : 0)
$template_params{NAV_PANEL_FOLD} = exists $cookies{"nav_panel_fold"}
? ($cookies{"nav_panel_fold"}->value eq "true" ? 1 : 0)
: 0;
$template_params{NAV_PANEL_FOLD_FORCED} = 0;

# Common Navigation params
###################
Expand Down Expand Up @@ -294,7 +295,8 @@ sub handle_request
$template_params{SERVICES} = \@services;

# Force-reduce navigation panel
$template_params{NAV_PANEL_REDUCED} = 1;
$template_params{NAV_PANEL_FOLD} = 1;
$template_params{NAV_PANEL_FOLD_FORCED} = 1;
} elsif ($path =~ /^(.+)\/comparison-(day|month|week|year)\.html$/) {
# That's a comparison URL, handle it as special case of groups
$path = $1;
Expand Down Expand Up @@ -380,7 +382,8 @@ sub handle_request
}

# Force-reduce navigation panel
$template_params{NAV_PANEL_REDUCED} = 1;
$template_params{NAV_PANEL_FOLD} = 1;
$template_params{NAV_PANEL_FOLD_FORCED} = 1;
} else {
# Emit group template
$template_filename = 'munin-domainview.tmpl';
Expand Down
14 changes: 7 additions & 7 deletions web/static/css/_base.scss
View file
Expand Up @@ -10,7 +10,7 @@ body {
background: #FAFAFA;
font-size: 14px;
font-family: Roboto, sans-serif;
color: #666666;
color: #555555;
}

/* Titles */
Expand Down Expand Up @@ -200,8 +200,8 @@ a {
margin: 0 auto;
z-index: 15;
background-color: #fff;
border: 1px solid #666;
@include box-shadow(0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.2));
border: 1px solid rgba(0, 0, 0, 0.5);
@include box-shadow(0 8px 17px 0 rgba(0, 0, 0, 0.13), 0 6px 20px 0 rgba(0, 0, 0, 0.13));
@include border-radius(2px);

.title {
Expand All @@ -211,9 +211,10 @@ a {
padding: 5px 5px 5px 20px;
margin: -1px -1px 0 -1px;
@include border-radius(3px 3px 0 0);
border: 1px solid darken($secondary-color, 10);
border: 1px solid rgba(0, 0, 0, 0.2);
background-color: $secondary-color;
@include box-sizing(border-box);
@include box-shadow(0px 2px 5px -2px rgba(0, 0, 0, 0.4));

span {
display: inline-block;
Expand Down Expand Up @@ -250,8 +251,7 @@ a {
}

.modalContent {
padding: 20px 30px;
@include box-shadow(inset 0 1px 4px -1px rgba(0, 0, 0, 0.4));
padding: 15px 20px;

> *:first-child {
margin-top: 0;
Expand All @@ -276,6 +276,6 @@ a {
position: fixed;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.3);
background-color: rgba(0, 0, 0, 0.2);
z-index: 14;
}
92 changes: 64 additions & 28 deletions web/static/css/_forms.scss
View file
@@ -1,63 +1,99 @@
/* Form elements */
input,
button,
select {
border: 1px solid #d1d1d1;
@include border-radius(2px);
@include box-sizing(border-box);
@include transition-duration(150ms);
}

input[type="text"],
input[type="number"],
select {
input[type="number"] {
padding: 4px 12px;
height: 30px;
max-width: 100%;
line-height: 1.4;
border: 1px solid #aaa;
border: 1px solid #BFBFBF;
background-color: #fff;
@include border-radius(2px);
@include box-sizing(border-box);
@include transition-duration(150ms);
color: #555;
@include box-shadow(inset 0px 1px 2px -1px rgba(0, 0, 0, 0.2));

&:focus {
border-color: $secondary-color;
border-color: #a5a5a5;
outline: 0;
@include box-shadow(inset 0 1px 1px rgba(0, 0, 0, 0.1), 0 0 8px -3px rgba($secondary-color, 0.4));
}

&.input-compact {
padding: 0 5px;
height: 25px;
height: 28px;
}
}

input[type="submit"],
input[type="button"],
button {
color: #fff;
button,
select {
color: #666666;
display: inline-block;
text-transform: uppercase;
font-size: 12px;
font-weight: 500;
padding: 6px 12px;
@include transition-duration(200ms);
@include border-radius(2px);
border: 1px solid darken($secondary-color, 3);
background: $secondary-color;
padding: 7px 17px;
border: 1px solid #BFBFBF;
background-color: #F5F5F5;

&:hover {
text-decoration: none;
background: darken($secondary-color, 2);
@include box-shadow(0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 2px 3px 0 rgba(0, 0, 0, 0.1), inset 0 0 0 0 rgba(0,0,0,0.2));
background-color: lighten(#F5F5F5, 1.5);
@include box-shadow(0 1px 6px -2px rgba(0,0,0,0.3));
}
&:focus, &:active {
&:active {
outline: none;
background: darken($secondary-color, 5);
color: #fff;
@include box-shadow(inset 0 1px 0 0 rgba(0, 0, 0, 0.2));
background-color: darken(#F5F5F5, 2);
@include box-shadow(inset 0 1px 0 0 rgba(0,0,0,0.2));
}

i {
margin: 0 3px 0 -3px;
font-size: 20px;
i.mdi {
margin: 0 3px 0 -6px;
vertical-align: bottom;
font-size: 17px;
line-height: 14px;
}

&.button-primary, &[type="submit"] {
color: #fff;
border-color: darken($buttons-color, 10);
background-color: $buttons-color;

&:hover {
background-color: lighten($buttons-color, 4);
@include box-shadow(0 1px 6px -1px rgba(0,0,0,0.4));
}
&:active {
background-color: darken($buttons-color, 5);
@include box-shadow(inset 0 1px 0 0 rgba(0,0,0,0.2));
}
}

&+button {
margin-left: 5px;
}

&.button-small {
padding: 5px 11px;
}
}

select {
padding: 5px 6px;

&:active {
background-color: #F5F5F5;
@include box-shadow(none);
}
}

.buttons-wrap {
cursor: default;
margin-top: 25px;
margin-bottom: 10px;
text-align: right;
}
40 changes: 27 additions & 13 deletions web/static/css/_header.scss
View file
Expand Up @@ -3,6 +3,29 @@
* Imported in _layout.scss
*/

.logo {
display: inline-block;
width: 118px;
height: 34px;
background-repeat: no-repeat;
background-position: 4px 2px;
background-size: 115px 30px;

// Normal version (black)
& {
/* SVG logo: fallback to png */
background-image: url('../img/logo-h.png');
background-image: linear-gradient(transparent, transparent), url('../img/logo-h.svg');
}

// Negative version (white)
&.logo-neg {
/* SVG logo: fallback to png */
background-image: url('../img/logo-h-neg.png');
background-image: linear-gradient(transparent, transparent), url('../img/logo-h-neg.svg');
}
}

header {
color: #fff;
min-height: 45px;
Expand Down Expand Up @@ -39,18 +62,8 @@ header {
font-size: 0;

.logo {
display: inline-block;
width: 118px;
height: 34px;
margin-top: 5px;
@include transition-duration(200ms);
background-repeat: no-repeat;
background-position: 4px 2px;
/* SVG logo: fallback to png */
background-image: url('../img/logo-h-neg.png');
background-image: linear-gradient(transparent, transparent),
url('../img/logo-h-neg.svg');
background-size: 115px 30px;
@include opacity(0.9);

&:hover {
Expand All @@ -66,11 +79,11 @@ header {
font-size: 16px;
color: #eee;
text-align: center;
display: block;
width: 100%;
display: inline-block;
@include box-sizing(border-box);

h1 {
display: inline-block;
vertical-align: middle;
padding-top: 4px;
}
Expand Down Expand Up @@ -109,7 +122,8 @@ header {
height: 31px;
overflow: hidden;
cursor: pointer;
margin: 5px 0 0 7px;
margin: 5px 0 0 5px;
vertical-align: middle;
@include transition-duration(150ms);
@include border-radius(2px);
@include user-select(none);
Expand Down
20 changes: 14 additions & 6 deletions web/static/css/_layout.scss
View file
Expand Up @@ -5,6 +5,9 @@

@import 'header';

$navigation-width: 200px;
$navigation-width-mobile: 260px;

/* Main */
#main {
width: 100%;
Expand All @@ -22,7 +25,7 @@
nav {
display: table-cell;
vertical-align: top;
width: 200px;
width: $navigation-width;

// Toggling animation
@include transition-duration(150ms);
Expand All @@ -31,7 +34,7 @@ nav {
overflow-x: hidden;

.navigation {
width: 200px;
width: $navigation-width;

> hr {
background-color: #ddd;
Expand Down Expand Up @@ -107,12 +110,16 @@ nav {
background-color: #999;
@include border-radius(10px);
}

.logo {
margin: 10px 15px 5px 15px;
@include opacity(0.8);
}
}
}

&.force-fold {
width: 0;
}
&.fold { width: 0; }
&.shown { width: $navigation-width; }
}
.navigation-mask {
display: none;
Expand Down Expand Up @@ -184,6 +191,7 @@ footer {
color: #fff;
font-size: 17px;
padding: 0;
text-shadow: 1px 1px rgba(0, 0, 0, 0.3);
@include border-radius(2px 0 0 2px);
@include box-shadow(0 1px 1px 0 rgba(0, 0, 0, 0.3));
@include opacity(0);
Expand All @@ -192,7 +200,7 @@ footer {
&.visible {
@include opacity(0.75);
height: auto;
padding: 4px 5px;
padding: 4px 7px;
}
&.visible:hover {
text-decoration: none;
Expand Down

0 comments on commit e2e680f

Please sign in to comment.