freifunk/hopglass
8
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

sidebar styling

Browse source
This commit is contained in:
Nils Schneider 2015-04-04 18:01:57 +02:00
parent d8615fa18d
commit ff19d0cf8e
9 changed files with 185 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
bower.json
View file

@ -20,7 +20,8 @@
"almond": "~0.3.1",
"r.js": "~2.1.16",
"d3": "~3.5.5",
"numeraljs": "~1.5.3"
"numeraljs": "~1.5.3",
"roboto-fontface": "~0.3.0"
},
"authors": [
"Nils Schneider <nils@nilsschneider.net>"

1
html/index.html
View file

@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, user-scalable=no">
<link rel="stylesheet" href="css/ionicons.min.css">
<link rel="stylesheet" href="roboto-slab-fontface.css">
<link rel="stylesheet" href="roboto-fontface.css">
<link rel="stylesheet" href="style.css">
<script src="vendor/es6-shim/es6-shim.min.js"></script>
<script src="app.js"></script>

1
index.html
View file

@ -4,6 +4,7 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no">
<link rel="stylesheet" href="bower_components/roboto-slab-fontface/roboto-slab-fontface.css">
<link rel="stylesheet" href="bower_components/roboto-fontface/roboto-fontface.css">
<link rel="stylesheet" href="bower_components/leaflet/dist/leaflet.css">
<link rel="stylesheet" href="bower_components/Leaflet.label/dist/leaflet.label.css">
<link rel="stylesheet" href="bower_components/ionicons/css/ionicons.min.css">

6
lib/sidebar.js
View file

@ -14,6 +14,10 @@ define([], function () {
sidebar.classList.toggle("hidden")
}
var container = document.createElement("div")
container.classList.add("container")
sidebar.appendChild(container)
self.getWidth = function () {
if (sidebar.classList.contains("hidden"))
return 0
@ -23,7 +27,7 @@ define([], function () {
}
self.add = function (d) {
d.render(sidebar)
d.render(container)
}
self.container = sidebar

30
scss/_base.scss Normal file
View file

@ -0,0 +1,30 @@
h1, h2, h3, h4, h5, h6 {
font-weight: bold;
}
h1 {
padding: 0.67em 0;
font-size: 2em;
}
h2 {
padding: 0.83em 0;
font-size: 1.5em;
}
h3 {
padding: 1em 0;
font-size: 1.17em;
}
h4 {
font-size: 1em;
}
h5 {
font-size: 0.83em;
}
h6 {
font-size: 0.67em;
}

47
scss/_reset.scss Normal file
View file

@ -0,0 +1,47 @@
/**
* Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
* http://cssreset.com
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

0
scss/_sidebar.scss Normal file
View file

122
scss/main.scss
View file

@ -1,3 +1,5 @@
@import '_reset';
@import '_base';
@import '_leaflet';
@import '_leaflet.label';
@ -6,6 +8,7 @@ $sidebarwidth: 420pt;
$sidebarwidthsmall: 360pt;
$buttondistance: 12pt;
@import '_sidebar';
@import '_map';
@import '_forcegraph';
@ -31,27 +34,31 @@ $buttondistance: 12pt;
}
.tabs {
padding-top: 1em !important;
padding: 1em 0 0 !important;
margin: 0;
list-style: none;
display: flex;
font-family: Roboto;
background: rgba(0, 0, 0, 0.02);
box-shadow: 0px 0.5px 3px rgba(0, 0, 0, 0.16), 0px 0.5px 2px rgba(0, 0, 0, 0.24);
}
.tabs li {
flex: 1;
text-transform: uppercase;
text-align: center;
padding: 0.5em;
padding: 0.5em 0.5em 1em;
cursor: pointer;
color: rgba(0, 0, 0, 0.5);
}
.tabs li:hover {
background: rgba(0, 0, 0, 0.03);
color: #dc0067;
}
.tabs .visible {
font-weight: bold;
border-bottom: 2pt solid black;
border-bottom: 2pt solid #dc0067;
color: #dc0067;
}
.tab {
@ -103,11 +110,20 @@ table.attributes th {
vertical-align: top;
padding-right: 1em;
white-space: nowrap;
line-height: 1.41em;
}
table.attributes td {
text-align: left !important;
width: 100%;
line-height: 1.41em;
}
.sidebar {
.infobox, .container {
box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.19), 0px 3px 6px rgba(0, 0, 0, 0.23);
background: rgba(255, 255, 255, 0.9);
}
}
.infobox .clients {
@ -118,9 +134,8 @@ table.attributes td {
.infobox {
position: relative;
box-shadow: 0px 0.5px 3px rgba(0, 0, 0, 0.16), 0px 0.5px 2px rgba(0, 0, 0, 0.24);
background: rgba(0, 0, 0, 0.02);
padding: 0.25em 0;
margin-bottom: $buttondistance;
}
button {
@ -153,21 +168,54 @@ button::-moz-focus-inner {
}
button.close {
position: absolute;
right: $buttondistance;
top: $buttondistance;
}
width: auto;
height: auto;
font-size: 14pt;
float: right;
padding: $buttondistance/2 $buttondistance;
margin-right: $buttondistance;
margin-top: $buttondistance;
box-shadow: none;
background: transparent;
border-radius: 0;
color: rgba(0, 0, 0, 0.5);
font-family: Roboto;
button.close:after {
content: "\f12a";
&:hover {
color: #dc0067;
}
&:active {
background: rgba(0, 0, 0, 0.04);
}
&:after {
content: "CLOSE";
}
}
.sidebar h2, .sidebar h3 {
padding: 0 10pt;
padding-left: $buttondistance;
padding-right: $buttondistance;
}
.sidebar p, .sidebar table, .sidebar pre, .sidebar ul {
padding: 0 10pt 1em;
padding: 0 $buttondistance 1em;
}
table {
border-spacing: 0 0.5em;
td, th {
line-height: 1.41em;
}
}
.sidebar table {
border-collapse: separate;
}
.sidebar table th {
font-weight: bold;
}
.sidebarhandle {
@ -204,8 +252,6 @@ button.close:after {
top: $buttondistance;
left: $buttondistance;
margin-bottom: $buttondistance;
background: white;
box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.19), 0px 3px 6px rgba(0, 0, 0, 0.23);
transition: left 0.5s;
}
@ -238,26 +284,28 @@ button.close:after {
height: 1.4em;
background: rgba(85, 128, 32, 0.5);
position: relative;
}
.bar span {
display: inline-block;
height: 1.4em;
background: rgba(85, 128, 32, 0.8);
}
span {
display: inline-block;
height: 1.4em;
background: rgba(85, 128, 32, 0.8);
}
.bar label {
font-weight: bold;
white-space: nowrap;
color: white;
position: absolute;
right: 0.5em;
label {
font-weight: bold;
white-space: nowrap;
color: white;
position: absolute;
right: 0.5em;
top: 0.1em;
}
}
.proportion th {
font-weight: normal;
font-weight: normal !important;
text-align: right !important;
font-size: 0.95em;
padding-right: 0.71em;
}
.proportion td {
@ -271,9 +319,8 @@ button.close:after {
.proportion span {
display: inline-block;
height: 1.4em;
background: black;
padding: 0 0.5em;
padding: 0.25em 0.5em;
font-weight: bold;
min-width: 1.5em;
box-sizing: border-box;
@ -287,10 +334,21 @@ button.close:after {
margin: 0pt;
width: $sidebarwidthsmall;
min-height: 100vh;
box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.19), 0px 3px 6px rgba(0, 0, 0, 0.23);
background: white;
.sidebarhandle {
left: $sidebarwidthsmall + $buttondistance;
}
.container, .infobox {
margin: 0;
box-shadow: none;
}
.infobox {
background: rgba(0, 0, 0, 0.02);
}
}
}

10
tasks/build.js
View file

@ -18,7 +18,7 @@ module.exports = function(grunt) {
cwd: "bower_components/",
dest: "build/vendor/"
},
roboto: {
robotoSlab: {
src: [ "fonts/*",
"roboto-slab-fontface.css"
],
@ -26,6 +26,14 @@ module.exports = function(grunt) {
dest: "build/",
cwd: "bower_components/roboto-slab-fontface"
},
roboto: {
src: [ "fonts/*",
"roboto-fontface.css"
],
expand: true,
dest: "build/",
cwd: "bower_components/roboto-fontface"
},
ionicons: {
src: [ "fonts/*",
"css/ionicons.min.css"