entrouvert
/
gadjo
15
0
Fork 0
Code Issues Pull Requests 3 Releases Activity

restyle backoffice

This commit is contained in:
Frédéric Péters 2018-03-04 13:30:48 +01:00
parent 6edb61b464
commit f0184da515
3 changed files with 76 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
gadjo/static/css/gadjo.scss
View File

@ -5,6 +5,17 @@ $mobile-limit: 760px;
$font-family: "Open Sans", sans-serif;
$sidepage-background: #23282d url(texture.png);
$sidepage-background: white;
$sidepage-width: 16rem;
$header-height: 60px;
$primary-color: #4E7EE2;
$secondary-color: #00D6EB;
:root {
--primary-color: $primary-color;
--secondary-color: $secondary-color;
}
/* generalities */
@ -15,8 +26,8 @@ html, body {
@media screen and (min-width: 1260px) {
font-size: 13px;
}
background: linear-gradient(to bottom, #4E7EE2 0%, #00D6EB 130vh);
color: #3c3c33;
background: #ecf0f3;
}
html {
@ -95,9 +106,10 @@ ul.user-info {
top: 0px;
right: 0px;
z-index: 10;
background: #00d6eb;
height: 40px;
line-height: 40px;
background: $secondary-color;
background: var(--secondary-color);
height: $header-height;
line-height: $header-height;
li {
display: inline;
padding-left: 3em;
@ -109,12 +121,11 @@ ul.user-info {
/* header */
$header-height: 40px;
div#header {
background: #C2D1CC url(header-03.jpeg);
background-size: 100% 500px;
background: #4e7ee2;
background: $primary-color;
background: var(--primary-color);
padding-left: 0px;
border-bottom: 1px solid #888;
position: relative;
@ -124,7 +135,7 @@ div#header {
div#header h1 {
height: $header-height;
line-height: $header-height;
padding: 0 ($header-height + 1px) 0 20px;
padding: 0 0 0 56px;
margin: 0;
font-weight: normal;
color: black;
@ -194,6 +205,19 @@ body[data-environment-label] span#applabel {
text-shadow: 0 0 1px black;
}
span#applabel {
text-indent: -1000px;
&::after {
content: "";
background: transparent url(../images/logo-publik.png) top left no-repeat;
position: absolute;
top: 4px;
left: 24px;
height: 50px;
width: 183px;
}
}
/* notifications */
ul.messages {
@ -724,7 +748,7 @@ body[data-has-sidepage] #main {
}
body.sidepage-expanded #main {
margin-left: 30ex;
margin-left: $sidepage-width;
}
body.enable-transitions {
@ -741,7 +765,7 @@ body.enable-transitions {
body.sidepage-expanded #sidepage {
height: 100%;
overflow: initial;
width: 30ex;
width: $sidepage-width;
}
#sidepage ul#sidepage-menu {
@ -770,13 +794,14 @@ body.sidepage-expanded #sidepage {
position: relative;
overflow: hidden;
@include vendor-prefix('transition', 'max-width 0ms ease-in');
height: 40px;
line-height: 40px;
height: $header-height + 1px;
line-height: $header-height;
font-weight: normal;
font-size: 20px;
border-bottom: 1px solid #888;
background: white;
width: 150px;
box-sizing: border-box;
width: calc(36px + #{$sidepage-width});
&:hover {
}
@ -795,7 +820,6 @@ body.sidepage-expanded #sidepage span#applabel::before {
body.sidepage-expanded #sidepage span#applabel {
overflow: hidden;
max-width: 100%;
}
#sidepage ul#sidepage-menu {
@ -807,9 +831,19 @@ body.sidepage-expanded #sidepage span#applabel {
padding-top: 1em;
margin: 0;
min-height: 100%;
min-height: calc(100% - 41px); /* #top 40px + border 1px */
min-height: calc(100% - $header-height - 1px); /* #top 40px + border 1px */
box-sizing: border-box;
@include vendor-prefix('transition', 'all 0ms ease');
&::before {
content: "";
position: absolute;
left: -36px;
width: 36px;
background: linear-gradient(to bottom, $primary-color 0%, $secondary-color 130vh);
background: linear-gradient(to bottom, var(--primary-color) 0%, var(--secondary-color) 130vh);
height: 100%;
top: 0px;
}
}
#sidepage ul#sidepage-menu a {
@ -879,7 +913,7 @@ ul#sidepage-menu li a {
}
#sidepage {
@include vendor-prefix('transition', 'height 400ms ease-in');
height: 41px;
height: $header-height;
width: 100%;
overflow: hidden;
span#applabel::before {

BIN
gadjo/static/images/logo-publik.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB

26
gadjo/static/js/gadjo.js
View File

@ -370,6 +370,32 @@ var gadjo_js = gadjo_js || {};
/* 440 is header image height (500px) - header height (60px) */
var timestamp = ((new Date().getTime() / 1000) % 86400 ) / (86400 / 440);
$('div#header').css('background-position', '0 -' + timestamp + 'px');
var primary_night = [78, 126, 226];
var secondary_night = [0, 214, 235];
var primary_noon = [255, 55, 94];
var secondary_noon = [255, 90, 71];
var root = document.documentElement;
var d = new Date();
var w = (((24 + d.getHours() - 20) % 24) * 60 + d.getMinutes()) / (60*24);
var w = 1;
var primary_now = pickHex(primary_night, primary_noon, w);
var secondary_now = pickHex(secondary_night, secondary_noon, w);
function pickHex(color1, color2, weight) {
var w1 = weight;
var w2 = 1 - w1;
var rgb = [Math.round(color1[0] * w1 + color2[0] * w2),
Math.round(color1[1] * w1 + color2[1] * w2),
Math.round(color1[2] * w1 + color2[2] * w2)];
return rgb;
}
root.style.setProperty('--primary-color', 'rgb(' + primary_now.join() + ')');
root.style.setProperty('--secondary-color', 'rgb(' + secondary_now.join() + ')');
}
/* add × to close notification messages */