Toolbar hide/show buttons + Custom glyph font
* I added toolbar hide/show functionality for users that want that UI out of the way. * I built a custom glyph font using [fontello.com](http://fontello.com/). These fonts are replacing images I was using in the toolbar. See http://localhost:1337/fonts/demo.html for the list of available fonts. * I combined drawer.js and settings.js. * Various other cleanup.
@@ -34,6 +34,10 @@ body {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#drawer i {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
form {
|
||||
margin: 0;
|
||||
padding: 0 10px;
|
||||
@@ -61,28 +65,45 @@ h1, h2, h3, h4 {
|
||||
}
|
||||
|
||||
#toolbar h1 {
|
||||
color: #ccc;
|
||||
font-size: 16px;
|
||||
margin-top: 0;
|
||||
margin-left: 42px;
|
||||
padding: 10px;
|
||||
color: #ccc;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
}
|
||||
#buttonbar {
|
||||
padding: 0;
|
||||
float: right;
|
||||
height: 44px;
|
||||
width: 88px;
|
||||
opacity: 0.5;
|
||||
width: 136px;
|
||||
opacity: 0.75;
|
||||
vertical-align: middle;
|
||||
}
|
||||
#buttonbar a {
|
||||
color: #ccc;
|
||||
line-height: 44px;
|
||||
font-size: 16px;
|
||||
float: left;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
width: 44px;
|
||||
}
|
||||
#drawerToggle {
|
||||
background: url(/images/open.png) center center no-repeat;
|
||||
#buttonbar i {
|
||||
padding-left: 12px;
|
||||
}
|
||||
#testAlarms {
|
||||
background: url(/images/speaker.png) center center no-repeat;
|
||||
#showToolbar {
|
||||
display: none;
|
||||
position: absolute;
|
||||
margin: 0 auto;
|
||||
opacity: 0.5;
|
||||
text-align: center;
|
||||
top: 5px;
|
||||
width: 100%;
|
||||
z-index: 99;
|
||||
}
|
||||
#showToolbar a {
|
||||
border: solid #fff 1px;
|
||||
border-radius: 5px;
|
||||
color: #fff;
|
||||
margin: 0 auto;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
@import url("//fonts.googleapis.com/css?family=Ubuntu:300,400,500,700,300italic,400italic,500italic,700italic");
|
||||
@import url("//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,300,400,600,700,800");
|
||||
@import url("//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");
|
||||
@import url("/fonts/css/fontello.css");
|
||||
|
||||
/* Large desktop */
|
||||
@media (min-width: 980px) {
|
||||
|
||||
@@ -0,0 +1,57 @@
|
||||
Font license info
|
||||
|
||||
|
||||
## Iconic
|
||||
|
||||
Copyright (C) 2012 by P.J. Onori
|
||||
|
||||
Author: P.J. Onori
|
||||
License: SIL (http://scripts.sil.org/OFL)
|
||||
Homepage: http://somerandomdude.com/work/iconic/
|
||||
|
||||
|
||||
## Font Awesome
|
||||
|
||||
Copyright (C) 2012 by Dave Gandy
|
||||
|
||||
Author: Dave Gandy
|
||||
License: SIL ()
|
||||
Homepage: http://fortawesome.github.com/Font-Awesome/
|
||||
|
||||
|
||||
## Web Symbols
|
||||
|
||||
Copyright (c) 2011 by Just Be Nice studio. All rights reserved.
|
||||
|
||||
Author: Just Be Nice studio
|
||||
License: SIL (http://scripts.sil.org/OFL)
|
||||
Homepage: http://www.justbenicestudio.com/
|
||||
|
||||
|
||||
## MFG Labs
|
||||
|
||||
Copyright (C) 2012 by Daniel Bruce
|
||||
|
||||
Author: MFG Labs
|
||||
License: SIL (http://scripts.sil.org/OFL)
|
||||
Homepage: http://www.mfglabs.com/
|
||||
|
||||
|
||||
## Typicons
|
||||
|
||||
(c) Stephen Hutchings 2012
|
||||
|
||||
Author: Stephen Hutchings
|
||||
License: SIL (http://scripts.sil.org/OFL)
|
||||
Homepage: http://typicons.com/
|
||||
|
||||
|
||||
## Elusive
|
||||
|
||||
Copyright (C) 2013 by Aristeides Stathopoulos
|
||||
|
||||
Author: Aristeides Stathopoulos
|
||||
License: SIL (http://scripts.sil.org/OFL)
|
||||
Homepage: http://aristeides.com/
|
||||
|
||||
|
||||
@@ -0,0 +1,75 @@
|
||||
This webfont is generated by http://fontello.com open source project.
|
||||
|
||||
|
||||
================================================================================
|
||||
Please, note, that you should obey original font licences, used to make this
|
||||
webfont pack. Details available in LICENSE.txt file.
|
||||
|
||||
- Usually, it's enough to publish content of LICENSE.txt file somewhere on your
|
||||
site in "About" section.
|
||||
|
||||
- If your project is open-source, usually, it will be ok to make LICENSE.txt
|
||||
file publically available in your repository.
|
||||
|
||||
- Fonts, used in Fontello, don't require to make clickable links on your site.
|
||||
But any kind of additional authors crediting is welcome.
|
||||
================================================================================
|
||||
|
||||
|
||||
Comments on archive content
|
||||
---------------------------
|
||||
|
||||
- /font/* - fonts in different formats
|
||||
|
||||
- /css/* - different kinds of css, for all situations. Should be ok with
|
||||
twitter bootstrap. Also, you can skip <i> style and assign icon classes
|
||||
directly to text elements, if you don't mind about IE7.
|
||||
|
||||
- demo.html - demo file, to show your webfont content
|
||||
|
||||
- LICENSE.txt - license info about source fonts, used to build your one.
|
||||
|
||||
- config.json - keeps your settings. You can import it back to fontello anytime,
|
||||
to continue your work
|
||||
|
||||
|
||||
Why so many CSS files ?
|
||||
-----------------------
|
||||
|
||||
Because we like to fit all your needs :)
|
||||
|
||||
- basic file, <your_font_name>.css - is usually enougth, in contains @font-face
|
||||
and character codes definition
|
||||
|
||||
- *-ie7.css - if you need IE7 support, but still don't wish to put char codes
|
||||
directly into html
|
||||
|
||||
- *-codes.css and *-ie7-codes.css - if you like to use your own @font-face
|
||||
rules, but still wish to benefit of css generation. That can be very
|
||||
convenient for automated assets build systems. When you need to update font -
|
||||
no needs to manually edit files, just override old version with archive
|
||||
content. See fontello source codes for example.
|
||||
|
||||
- *-embedded.css - basic css file, but with embedded WOFF font, to avoid
|
||||
CORS issues in Firefox and IE9+, when fonts are hosted on the separate domain.
|
||||
We strongly recommend to resolve this issue by `Access-Control-Allow-Origin`
|
||||
server headers. But if you ok with dirty hack - this file is for you. Note,
|
||||
that data url moved to separate @font-face to avoid problems with <IE9, when
|
||||
string is too long.
|
||||
|
||||
- animate.css - use it to get ideas about spinner rotation animation.
|
||||
|
||||
|
||||
Attention for server setup
|
||||
--------------------------
|
||||
|
||||
You MUST setup server to reply with proper `mime-types` for font files. In other
|
||||
case, some browsers will fail to show fonts.
|
||||
|
||||
Usually, `apache` already has necessary settings, but `nginx` and other
|
||||
webservers should be tuned. Here is list of mime types for our file extentions:
|
||||
|
||||
- `application/vnd.ms-fontobject` - eot
|
||||
- `application/x-font-woff` - woff
|
||||
- `application/x-font-ttf` - ttf
|
||||
- `image/svg+xml` - svg
|
||||
@@ -0,0 +1,100 @@
|
||||
{
|
||||
"name": "",
|
||||
"css_prefix_text": "icon-",
|
||||
"css_use_suffix": false,
|
||||
"hinting": true,
|
||||
"units_per_em": 1000,
|
||||
"ascent": 850,
|
||||
"glyphs": [
|
||||
{
|
||||
"uid": "e82cedfa1d5f15b00c5a81c9bd731ea2",
|
||||
"css": "info-circled",
|
||||
"code": 59401,
|
||||
"src": "fontawesome"
|
||||
},
|
||||
{
|
||||
"uid": "98687378abd1faf8f6af97c254eb6cd6",
|
||||
"css": "cog-alt",
|
||||
"code": 59393,
|
||||
"src": "fontawesome"
|
||||
},
|
||||
{
|
||||
"uid": "5bb103cd29de77e0e06a52638527b575",
|
||||
"css": "wrench",
|
||||
"code": 59394,
|
||||
"src": "fontawesome"
|
||||
},
|
||||
{
|
||||
"uid": "21b42d3c3e6be44c3cc3d73042faa216",
|
||||
"css": "sliders",
|
||||
"code": 59395,
|
||||
"src": "fontawesome"
|
||||
},
|
||||
{
|
||||
"uid": "76857a03fbaa6857fe063b6c25aa98ed",
|
||||
"css": "volume-up",
|
||||
"code": 59403,
|
||||
"src": "fontawesome"
|
||||
},
|
||||
{
|
||||
"uid": "6364d85e960f23b9a843a506387e7970",
|
||||
"css": "info-outline",
|
||||
"code": 59399,
|
||||
"src": "typicons"
|
||||
},
|
||||
{
|
||||
"uid": "85fda3129wk4amvn25wrq843sbj3yzl0",
|
||||
"css": "info",
|
||||
"code": 59400,
|
||||
"src": "typicons"
|
||||
},
|
||||
{
|
||||
"uid": "4815ddddea76d90e367a9694a93b7e24",
|
||||
"css": "resize-full",
|
||||
"code": 59392,
|
||||
"src": "iconic"
|
||||
},
|
||||
{
|
||||
"uid": "b05c5a209b56e7ea6632a31e4bd0b41d",
|
||||
"css": "resize-small",
|
||||
"code": 59397,
|
||||
"src": "iconic"
|
||||
},
|
||||
{
|
||||
"uid": "15ba51cbb4d05e6fb88f03a31a7c711c",
|
||||
"css": "info-circled-alt",
|
||||
"code": 59398,
|
||||
"src": "mfglabs"
|
||||
},
|
||||
{
|
||||
"uid": "8489d61496923b1159b01d8a0a7b2df0",
|
||||
"css": "volume-off",
|
||||
"code": 59405,
|
||||
"src": "elusive"
|
||||
},
|
||||
{
|
||||
"uid": "5d9730dc93976d27eb07914eab50a507",
|
||||
"css": "volume-down",
|
||||
"code": 59406,
|
||||
"src": "elusive"
|
||||
},
|
||||
{
|
||||
"uid": "b59b3b618699b467541f631edd5a02ed",
|
||||
"css": "volume",
|
||||
"code": 59402,
|
||||
"src": "elusive"
|
||||
},
|
||||
{
|
||||
"uid": "012ff5762ccb18c16bdfdd6baf187406",
|
||||
"css": "volume-up-1",
|
||||
"code": 59404,
|
||||
"src": "elusive"
|
||||
},
|
||||
{
|
||||
"uid": "26aba7edd46944209b4961670675a813",
|
||||
"css": "cog",
|
||||
"code": 59396,
|
||||
"src": "websymbols"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,85 @@
|
||||
/*
|
||||
Animation example, for spinners
|
||||
*/
|
||||
.animate-spin {
|
||||
-moz-animation: spin 2s infinite linear;
|
||||
-o-animation: spin 2s infinite linear;
|
||||
-webkit-animation: spin 2s infinite linear;
|
||||
animation: spin 2s infinite linear;
|
||||
display: inline-block;
|
||||
}
|
||||
@-moz-keyframes spin {
|
||||
0% {
|
||||
-moz-transform: rotate(0deg);
|
||||
-o-transform: rotate(0deg);
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
-moz-transform: rotate(359deg);
|
||||
-o-transform: rotate(359deg);
|
||||
-webkit-transform: rotate(359deg);
|
||||
transform: rotate(359deg);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes spin {
|
||||
0% {
|
||||
-moz-transform: rotate(0deg);
|
||||
-o-transform: rotate(0deg);
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
-moz-transform: rotate(359deg);
|
||||
-o-transform: rotate(359deg);
|
||||
-webkit-transform: rotate(359deg);
|
||||
transform: rotate(359deg);
|
||||
}
|
||||
}
|
||||
@-o-keyframes spin {
|
||||
0% {
|
||||
-moz-transform: rotate(0deg);
|
||||
-o-transform: rotate(0deg);
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
-moz-transform: rotate(359deg);
|
||||
-o-transform: rotate(359deg);
|
||||
-webkit-transform: rotate(359deg);
|
||||
transform: rotate(359deg);
|
||||
}
|
||||
}
|
||||
@-ms-keyframes spin {
|
||||
0% {
|
||||
-moz-transform: rotate(0deg);
|
||||
-o-transform: rotate(0deg);
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
-moz-transform: rotate(359deg);
|
||||
-o-transform: rotate(359deg);
|
||||
-webkit-transform: rotate(359deg);
|
||||
transform: rotate(359deg);
|
||||
}
|
||||
}
|
||||
@keyframes spin {
|
||||
0% {
|
||||
-moz-transform: rotate(0deg);
|
||||
-o-transform: rotate(0deg);
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
-moz-transform: rotate(359deg);
|
||||
-o-transform: rotate(359deg);
|
||||
-webkit-transform: rotate(359deg);
|
||||
transform: rotate(359deg);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
|
||||
.icon-resize-full:before { content: '\e800'; } /* '' */
|
||||
.icon-cog-alt:before { content: '\e801'; } /* '' */
|
||||
.icon-wrench:before { content: '\e802'; } /* '' */
|
||||
.icon-sliders:before { content: '\e803'; } /* '' */
|
||||
.icon-cog:before { content: '\e804'; } /* '' */
|
||||
.icon-resize-small:before { content: '\e805'; } /* '' */
|
||||
.icon-info-circled-alt:before { content: '\e806'; } /* '' */
|
||||
.icon-info-outline:before { content: '\e807'; } /* '' */
|
||||
.icon-info:before { content: '\e808'; } /* '' */
|
||||
.icon-info-circled:before { content: '\e809'; } /* '' */
|
||||
.icon-volume:before { content: '\e80a'; } /* '' */
|
||||
.icon-volume-up:before { content: '\e80b'; } /* '' */
|
||||
.icon-volume-up-1:before { content: '\e80c'; } /* '' */
|
||||
.icon-volume-off:before { content: '\e80d'; } /* '' */
|
||||
.icon-volume-down:before { content: '\e80e'; } /* '' */
|
||||
@@ -0,0 +1,16 @@
|
||||
|
||||
.icon-resize-full { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
|
||||
.icon-cog-alt { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
|
||||
.icon-wrench { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
|
||||
.icon-sliders { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
|
||||
.icon-cog { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
|
||||
.icon-resize-small { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
|
||||
.icon-info-circled-alt { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
|
||||
.icon-info-outline { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
|
||||
.icon-info { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
|
||||
.icon-info-circled { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
|
||||
.icon-volume { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
|
||||
.icon-volume-up { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
|
||||
.icon-volume-up-1 { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
|
||||
.icon-volume-off { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
|
||||
.icon-volume-down { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
|
||||
@@ -0,0 +1,27 @@
|
||||
[class^="icon-"], [class*=" icon-"] {
|
||||
font-family: 'fontello';
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
|
||||
/* fix buttons height */
|
||||
line-height: 1em;
|
||||
|
||||
/* you can be more comfortable with increased icons size */
|
||||
/* font-size: 120%; */
|
||||
}
|
||||
|
||||
.icon-resize-full { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
|
||||
.icon-cog-alt { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
|
||||
.icon-wrench { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
|
||||
.icon-sliders { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
|
||||
.icon-cog { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
|
||||
.icon-resize-small { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
|
||||
.icon-info-circled-alt { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
|
||||
.icon-info-outline { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
|
||||
.icon-info { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
|
||||
.icon-info-circled { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
|
||||
.icon-volume { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
|
||||
.icon-volume-up { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
|
||||
.icon-volume-up-1 { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
|
||||
.icon-volume-off { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
|
||||
.icon-volume-down { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
|
||||
@@ -0,0 +1,67 @@
|
||||
@font-face {
|
||||
font-family: 'fontello';
|
||||
src: url('../font/fontello.eot?90032421');
|
||||
src: url('../font/fontello.eot?90032421#iefix') format('embedded-opentype'),
|
||||
url('../font/fontello.woff?90032421') format('woff'),
|
||||
url('../font/fontello.ttf?90032421') format('truetype'),
|
||||
url('../font/fontello.svg?90032421#fontello') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
|
||||
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
|
||||
/*
|
||||
@media screen and (-webkit-min-device-pixel-ratio:0) {
|
||||
@font-face {
|
||||
font-family: 'fontello';
|
||||
src: url('../font/fontello.svg?90032421#fontello') format('svg');
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
||||
[class^="icon-"]:before, [class*=" icon-"]:before {
|
||||
font-family: "fontello";
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
speak: none;
|
||||
|
||||
display: inline-block;
|
||||
text-decoration: inherit;
|
||||
width: 1em;
|
||||
margin-right: .2em;
|
||||
text-align: center;
|
||||
/* opacity: .8; */
|
||||
|
||||
/* For safety - reset parent styles, that can break glyph codes*/
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
|
||||
/* fix buttons height, for twitter bootstrap */
|
||||
line-height: 1em;
|
||||
|
||||
/* Animation center compensation - margins should be symmetric */
|
||||
/* remove if not needed */
|
||||
margin-left: .2em;
|
||||
|
||||
/* you can be more comfortable with increased icons size */
|
||||
/* font-size: 120%; */
|
||||
|
||||
/* Uncomment for 3D effect */
|
||||
/* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
|
||||
}
|
||||
|
||||
.icon-resize-full:before { content: '\e800'; } /* '' */
|
||||
.icon-cog-alt:before { content: '\e801'; } /* '' */
|
||||
.icon-wrench:before { content: '\e802'; } /* '' */
|
||||
.icon-sliders:before { content: '\e803'; } /* '' */
|
||||
.icon-cog:before { content: '\e804'; } /* '' */
|
||||
.icon-resize-small:before { content: '\e805'; } /* '' */
|
||||
.icon-info-circled-alt:before { content: '\e806'; } /* '' */
|
||||
.icon-info-outline:before { content: '\e807'; } /* '' */
|
||||
.icon-info:before { content: '\e808'; } /* '' */
|
||||
.icon-info-circled:before { content: '\e809'; } /* '' */
|
||||
.icon-volume:before { content: '\e80a'; } /* '' */
|
||||
.icon-volume-up:before { content: '\e80b'; } /* '' */
|
||||
.icon-volume-up-1:before { content: '\e80c'; } /* '' */
|
||||
.icon-volume-off:before { content: '\e80d'; } /* '' */
|
||||
.icon-volume-down:before { content: '\e80e'; } /* '' */
|
||||
@@ -0,0 +1,283 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head><!--[if lt IE 9]><script language="javascript" type="text/javascript" src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
|
||||
<meta charset="UTF-8"><style>/*
|
||||
* Bootstrap v2.2.1
|
||||
*
|
||||
* Copyright 2012 Twitter, Inc
|
||||
* Licensed under the Apache License v2.0
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Designed and built with all the love in the world @twitter by @mdo and @fat.
|
||||
*/
|
||||
.clearfix {
|
||||
*zoom: 1;
|
||||
}
|
||||
.clearfix:before,
|
||||
.clearfix:after {
|
||||
display: table;
|
||||
content: "";
|
||||
line-height: 0;
|
||||
}
|
||||
.clearfix:after {
|
||||
clear: both;
|
||||
}
|
||||
html {
|
||||
font-size: 100%;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-ms-text-size-adjust: 100%;
|
||||
}
|
||||
a:focus {
|
||||
outline: thin dotted #333;
|
||||
outline: 5px auto -webkit-focus-ring-color;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
a:hover,
|
||||
a:active {
|
||||
outline: 0;
|
||||
}
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
margin: 0;
|
||||
font-size: 100%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
button,
|
||||
input {
|
||||
*overflow: visible;
|
||||
line-height: normal;
|
||||
}
|
||||
button::-moz-focus-inner,
|
||||
input::-moz-focus-inner {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
color: #333;
|
||||
background-color: #fff;
|
||||
}
|
||||
a {
|
||||
color: #08c;
|
||||
text-decoration: none;
|
||||
}
|
||||
a:hover {
|
||||
color: #005580;
|
||||
text-decoration: underline;
|
||||
}
|
||||
.row {
|
||||
margin-left: -20px;
|
||||
*zoom: 1;
|
||||
}
|
||||
.row:before,
|
||||
.row:after {
|
||||
display: table;
|
||||
content: "";
|
||||
line-height: 0;
|
||||
}
|
||||
.row:after {
|
||||
clear: both;
|
||||
}
|
||||
[class*="span"] {
|
||||
float: left;
|
||||
min-height: 1px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
.container,
|
||||
.navbar-static-top .container,
|
||||
.navbar-fixed-top .container,
|
||||
.navbar-fixed-bottom .container {
|
||||
width: 940px;
|
||||
}
|
||||
.span12 {
|
||||
width: 940px;
|
||||
}
|
||||
.span11 {
|
||||
width: 860px;
|
||||
}
|
||||
.span10 {
|
||||
width: 780px;
|
||||
}
|
||||
.span9 {
|
||||
width: 700px;
|
||||
}
|
||||
.span8 {
|
||||
width: 620px;
|
||||
}
|
||||
.span7 {
|
||||
width: 540px;
|
||||
}
|
||||
.span6 {
|
||||
width: 460px;
|
||||
}
|
||||
.span5 {
|
||||
width: 380px;
|
||||
}
|
||||
.span4 {
|
||||
width: 300px;
|
||||
}
|
||||
.span3 {
|
||||
width: 220px;
|
||||
}
|
||||
.span2 {
|
||||
width: 140px;
|
||||
}
|
||||
.span1 {
|
||||
width: 60px;
|
||||
}
|
||||
[class*="span"].pull-right,
|
||||
.row-fluid [class*="span"].pull-right {
|
||||
float: right;
|
||||
}
|
||||
.container {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
*zoom: 1;
|
||||
}
|
||||
.container:before,
|
||||
.container:after {
|
||||
display: table;
|
||||
content: "";
|
||||
line-height: 0;
|
||||
}
|
||||
.container:after {
|
||||
clear: both;
|
||||
}
|
||||
p {
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
.lead {
|
||||
margin-bottom: 20px;
|
||||
font-size: 21px;
|
||||
font-weight: 200;
|
||||
line-height: 30px;
|
||||
}
|
||||
small {
|
||||
font-size: 85%;
|
||||
}
|
||||
h1 {
|
||||
margin: 10px 0;
|
||||
font-family: inherit;
|
||||
font-weight: bold;
|
||||
line-height: 20px;
|
||||
color: inherit;
|
||||
text-rendering: optimizelegibility;
|
||||
}
|
||||
h1 small {
|
||||
font-weight: normal;
|
||||
line-height: 1;
|
||||
color: #999;
|
||||
}
|
||||
h1 {
|
||||
line-height: 40px;
|
||||
}
|
||||
h1 {
|
||||
font-size: 38.5px;
|
||||
}
|
||||
h1 small {
|
||||
font-size: 24.5px;
|
||||
}
|
||||
body {
|
||||
margin-top: 90px;
|
||||
}
|
||||
.header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
margin-left: -480px;
|
||||
background-color: #fff;
|
||||
border-bottom: 1px solid #ddd;
|
||||
padding-top: 10px;
|
||||
z-index: 10;
|
||||
}
|
||||
.footer {
|
||||
color: #ddd;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.footer a {
|
||||
color: #ccc;
|
||||
text-decoration: underline;
|
||||
}
|
||||
.the-icons {
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
}
|
||||
.switch {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 10px;
|
||||
color: #666;
|
||||
}
|
||||
.switch input {
|
||||
margin-right: 0.3em;
|
||||
}
|
||||
.codesOn .i-name {
|
||||
display: none;
|
||||
}
|
||||
.codesOn .i-code {
|
||||
display: inline;
|
||||
}
|
||||
.i-code {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="css/fontello.css">
|
||||
<link rel="stylesheet" href="css/animation.css"><!--[if IE 7]><link rel="stylesheet" href="css/fontello-ie7.css"><![endif]-->
|
||||
<script>
|
||||
function toggleCodes(on) {
|
||||
var obj = document.getElementById('icons');
|
||||
|
||||
if (on) {
|
||||
obj.className += ' codesOn';
|
||||
} else {
|
||||
obj.className = obj.className.replace(' codesOn', '');
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container header">
|
||||
<h1>
|
||||
fontello
|
||||
<small>font demo</small>
|
||||
</h1>
|
||||
<label class="switch">
|
||||
<input type="checkbox" onclick="toggleCodes(this.checked)">show codes
|
||||
</label>
|
||||
</div>
|
||||
<div id="icons" class="container">
|
||||
<div class="row">
|
||||
<div title="Code: 0xe800" class="the-icons span3"><i class="icon-resize-full"></i> <span class="i-name">icon-resize-full</span><span class="i-code">0xe800</span></div>
|
||||
<div title="Code: 0xe801" class="the-icons span3"><i class="icon-cog-alt"></i> <span class="i-name">icon-cog-alt</span><span class="i-code">0xe801</span></div>
|
||||
<div title="Code: 0xe802" class="the-icons span3"><i class="icon-wrench"></i> <span class="i-name">icon-wrench</span><span class="i-code">0xe802</span></div>
|
||||
<div title="Code: 0xe803" class="the-icons span3"><i class="icon-sliders"></i> <span class="i-name">icon-sliders</span><span class="i-code">0xe803</span></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div title="Code: 0xe804" class="the-icons span3"><i class="icon-cog"></i> <span class="i-name">icon-cog</span><span class="i-code">0xe804</span></div>
|
||||
<div title="Code: 0xe805" class="the-icons span3"><i class="icon-resize-small"></i> <span class="i-name">icon-resize-small</span><span class="i-code">0xe805</span></div>
|
||||
<div title="Code: 0xe806" class="the-icons span3"><i class="icon-info-circled-alt"></i> <span class="i-name">icon-info-circled-alt</span><span class="i-code">0xe806</span></div>
|
||||
<div title="Code: 0xe807" class="the-icons span3"><i class="icon-info-outline"></i> <span class="i-name">icon-info-outline</span><span class="i-code">0xe807</span></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div title="Code: 0xe808" class="the-icons span3"><i class="icon-info"></i> <span class="i-name">icon-info</span><span class="i-code">0xe808</span></div>
|
||||
<div title="Code: 0xe809" class="the-icons span3"><i class="icon-info-circled"></i> <span class="i-name">icon-info-circled</span><span class="i-code">0xe809</span></div>
|
||||
<div title="Code: 0xe80a" class="the-icons span3"><i class="icon-volume"></i> <span class="i-name">icon-volume</span><span class="i-code">0xe80a</span></div>
|
||||
<div title="Code: 0xe80b" class="the-icons span3"><i class="icon-volume-up"></i> <span class="i-name">icon-volume-up</span><span class="i-code">0xe80b</span></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div title="Code: 0xe80c" class="the-icons span3"><i class="icon-volume-up-1"></i> <span class="i-name">icon-volume-up-1</span><span class="i-code">0xe80c</span></div>
|
||||
<div title="Code: 0xe80d" class="the-icons span3"><i class="icon-volume-off"></i> <span class="i-name">icon-volume-off</span><span class="i-code">0xe80d</span></div>
|
||||
<div title="Code: 0xe80e" class="the-icons span3"><i class="icon-volume-down"></i> <span class="i-name">icon-volume-down</span><span class="i-code">0xe80e</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container footer">Generated by <a href="http://fontello.com">fontello.com</a></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,26 @@
|
||||
<?xml version="1.0" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<metadata>Copyright (C) 2014 by original authors @ fontello.com</metadata>
|
||||
<defs>
|
||||
<font id="fontello" horiz-adv-x="1000" >
|
||||
<font-face font-family="fontello" font-weight="400" font-stretch="normal" units-per-em="1000" ascent="850" descent="-150" />
|
||||
<missing-glyph horiz-adv-x="1000" />
|
||||
<glyph glyph-name="resize-full" unicode="" d="m784 111l127 128 0-336-335 0 128 130-128 127 79 79z m-431 686l-129-127 128-127-80-80-126 128-128-129 0 335 335 0z m0-637l-129-127 129-130-335 0 0 336 128-128 128 128z m558 637l0-335-127 129-128-128-79 80 127 127-128 127 335 0z" horiz-adv-x="928" />
|
||||
<glyph glyph-name="cog-alt" unicode="" d="m0 299v103q0 6 4 11t9 6l86 14q7 19 18 42-19 27-50 64-4 6-4 11 0 7 4 12 12 16 46 49t44 33q6 0 12-4l64-50q19 10 43 18 6 60 13 86 3 13 16 13h104q6 0 11-4t6-10l13-85q19-6 41-17l66 49q5 4 11 4 7 0 12-4 81-75 81-90 0-5-4-10-7-9-24-30t-25-34q13-27 19-46l85-12q5-2 9-6t4-11v-103q0-6-4-11t-9-6l-86-14q-6-19-18-42 19-27 50-64 4-6 4-11 0-7-4-11-13-17-46-50t-44-33q-6 0-11 4l-64 50q-21-11-43-17-6-60-13-87-4-13-17-13h-104q-6 0-11 4t-5 10l-13 85q-19 6-42 18l-66-50q-4-4-11-4-6 0-12 4-80 75-80 90 0 5 4 10 5 8 23 30t26 34q-13 24-20 46l-85 13q-5 1-9 5t-4 11z m214 51q0-59 42-101t101-42 101 42 42 101-42 101-101 42-101-42-42-101z m429-325v78q0 9 83 18 7 16 17 29-29 63-29 77 0 2 3 4 2 1 19 11t33 19 17 9q4 0 25-26t29-38q12 1 17 1t17-1q28 40 51 63l4 1q2 0 69-39 2-2 2-4 0-14-28-77 9-13 16-29 83-9 83-18v-78q0-9-83-17-6-15-16-29 28-63 28-77 0-2-2-4-68-40-69-40-5 0-26 27t-29 37q-11-1-17-1t-17 1q-7-11-29-37t-25-27q-1 0-69 40-3 2-3 4 0 14 29 77-10 14-17 29-83 8-83 17z m0 572v78q0 9 83 17 7 16 17 29-29 63-29 77 0 2 3 4 2 1 19 11t33 19 17 9q4 0 25-26t29-38q12 2 17 2t17-2q28 40 51 63l4 1q2 0 69-39 2-2 2-4 0-14-28-77 9-13 16-29 83-8 83-17v-78q0-9-83-18-6-15-16-29 28-63 28-77 0-2-2-4-68-39-69-39-5 0-26 26t-29 38q-11-1-17-1t-17 1q-7-12-29-38t-25-26q-1 0-69 39-3 2-3 4 0 14 29 77-10 14-17 29-83 9-83 18z m143-533q0-29 21-50t50-21 51 21 21 50q0 29-22 51t-50 21-50-21-21-51z m0 572q0-30 21-51t50-21 51 21 21 51q0 29-22 50t-50 21-50-21-21-50z" horiz-adv-x="1071.4" />
|
||||
<glyph glyph-name="wrench" unicode="" d="m12-7q0 29 21 51l380 380q22-55 64-97t97-64l-381-381q-21-20-50-20-29 0-51 20l-59 61q-21 20-21 50z m131 36q0-15 10-26t26-10 25 10 10 26-10 25-25 10-26-10-10-25z m286 500q0 103 73 176t177 74q32 0 67-10t60-26q9-6 9-15t-9-16l-163-94v-125l108-60q2 2 44 27t75 45 40 20q8 0 13-5t4-14q0-22-12-60-27-74-92-121t-144-47q-104 0-177 74t-73 176z" horiz-adv-x="928.6" />
|
||||
<glyph glyph-name="sliders" unicode="" d="m0 404v35q0 23 16 38t38 16h178q22 0 38-16t16-38v-35q0-23-16-38t-38-16h-178q-23 0-38 16t-16 38z m71-465v375h143v-375q0-8-5-13t-13-5h-107q-7 0-13 5t-5 13z m0 590v232q0 8 5 13t13 5h107q8 0 13-5t5-13v-232h-143z m215-411v36q0 22 15 38t38 15h179q22 0 38-15t15-38v-36q0-22-15-38t-38-16h-179q-22 0-38 16t-15 38z m71-89h143v-90q0-8-5-13t-13-5h-107q-8 0-13 5t-5 13v90z m0 214v518q0 8 5 13t13 5h107q8 0 13-5t5-13v-518h-143z m214 303v36q0 22 16 38t38 16h179q22 0 38-16t15-38v-36q0-22-15-38t-38-15h-179q-22 0-38 15t-16 38z m72-607v518h143v-518q0-8-5-13t-13-5h-107q-8 0-13 5t-5 13z m0 732v90q0 8 5 13t13 5h107q8 0 13-5t5-13v-90h-143z" horiz-adv-x="857.1" />
|
||||
<glyph glyph-name="cog" unicode="" d="m1000 421v-142l-185-26q-10-27-21-50l120-157-102-100-159 118q-20-10-51-21l-30-194h-143l-27 197q-21 7-43 18l-161-119-101 100 121 160q-11 21-19 46l-199 28v142l199 28q7 21 19 45l-120 159 101 100 160-119q15 8 47 20l28 195h143l28-195q22-7 48-19l158 117 102-100-119-156q13-27 20-48z m-348-72q0 60-43 102t-103 42-102-42-43-102 43-102 102-42 103 42 43 102z" horiz-adv-x="1000" />
|
||||
<glyph glyph-name="resize-small" unicode="" d="m704 33l-128-130 0 336 335 0-127-128 127-129-79-79z m-686 429l128 129-127 126 79 79 126-126 129 127 0-335-335 0z m0-480l128 129-128 128 335 0 0-336-129 130-127-130z m558 480l0 335 128-127 128 126 78-79-126-126 127-129-335 0z" horiz-adv-x="928" />
|
||||
<glyph glyph-name="info-circled-alt" unicode="" d="m0 350q0 95 37 182t100 149 149 100 183 37q95 0 182-37t149-100 100-149 37-182q0-95-37-182t-100-150-149-100-182-37q-96 0-183 37t-149 100-100 150-37 182z m117 0q0-71 28-137t75-112 112-75 137-28 136 28 112 75 75 112 28 137-28 136-75 112-112 75-136 28-137-28-112-75-75-112-28-136z m281 170q0 28 20 45t51 17q32 0 51-17t19-45-19-46-51-17q-32 0-51 17t-20 46z m5-402v299h132v-299h-132z" horiz-adv-x="937.5" />
|
||||
<glyph glyph-name="info-outline" unicode="" d="m429 115q50-6 78-51 18-31 12-69t-34-61q-92-79-215-79-160 0-220 122-52 109 13 238l30 58q-51 6-79 51-19 31-12 69t33 61q64 54 154 71-32 53-32 111 0 87 61 148t147 61 147-61 61-148q0-62-35-114t-90-77q40-52 44-123t-34-149z m-64 625q-43 0-74-31t-31-73 31-73 74-31q43 0 73 31t31 73-31 73-73 31z m-95-781q39 0 76 13t54 27l17 12q-33-11-63-11-46 0-56 33t15 82l52 104q44 91 10 150t-123 59q-39 0-76-14t-54-25l-18-13q34 12 64 12 46 0 56-34t-15-81l-52-104q-44-91-10-151t123-59z" horiz-adv-x="573" />
|
||||
<glyph glyph-name="info" unicode="" d="m331 37q18 6 30-12t-4-34q-5-5-22-16t-59-26-84-15q-109 0-149 79-35 74 13 167l52 104q28 55 3 73-5 5-22 5-11 0-24-3t-22-5l-7-2q-19-7-31 11t4 32q7 7 22 17t58 26 84 16q111 0 150-79 35-73-12-167l-53-104q-27-56-2-74 3-3 21-3 11 0 24 2t22 5z m-174 600q0 130 130 130t130-130-130-130-130 130z" horiz-adv-x="417" />
|
||||
<glyph glyph-name="info-circled" unicode="" d="m0 350q0 117 58 215t155 156 216 58 215-58 156-156 57-215-57-215-156-156-215-58-216 58-155 156-58 215z m286-268q0-8 5-13t13-5h250q7 0 12 5t5 13v89q0 8-5 13t-12 5h-54v286q0 8-5 13t-13 5h-178q-8 0-13-5t-5-13v-89q0-8 5-13t13-5h53v-179h-53q-8 0-13-5t-5-13v-89z m71 500q0-8 5-13t13-5h107q8 0 13 5t5 13v89q0 8-5 13t-13 5h-107q-8 0-13-5t-5-13v-89z" horiz-adv-x="857.1" />
|
||||
<glyph glyph-name="volume" unicode="" d="m0 142l0 416 236 0 354 289 0-994-354 289-236 0z m652 35q73 74 73 176t-73 178l71 74q105-106 107-254 0-145-107-246z m118-119q123 119 123 295t-123 299l76 74q154-154 154-372t-154-372z" horiz-adv-x="1000" />
|
||||
<glyph glyph-name="volume-up" unicode="" d="m0 243v214q0 15 11 25t25 11h146l186 186q10 10 25 10t25-10 11-25v-608q0-14-11-25t-25-10-25 10l-186 186h-146q-15 0-25 11t-11 25z m507 9q0 12 6 20t17 14 19 12 16 20 6 32-6 32-16 20-19 12-17 14-6 20q0 15 10 26t25 10q9 0 14-3 39-15 63-52t24-79-24-79-63-52q-5-3-14-3-14 0-25 10t-10 26z m56-132q0 22 21 33 32 16 43 25 41 30 64 75t23 97-23 97-64 75q-11 9-43 25-21 11-21 33 0 14 10 25t25 11q7 0 15-3 78-33 125-105t48-158-48-158-125-105q-8-3-14-3-15 0-26 11t-10 25z m56-131q0 20 22 33 4 2 12 6t13 6q25 14 45 28 69 51 108 127t38 161-38 161-108 127q-20 14-45 28-4 3-13 6t-12 6q-22 13-22 33 0 14 10 25t26 11q7 0 14-3 118-51 189-158t71-236-71-236-189-158q-7-3-14-3-15 0-26 11t-10 25z" horiz-adv-x="928.6" />
|
||||
<glyph glyph-name="volume-up-1" unicode="" d="m0 169l0 360 203 0 307 250 0-858-307 248-203 0z m563 33q62 63 62 151t-62 152l60 65q90-90 92-219 0-125-92-213z m101-105q106 105 106 256t-106 258l66 62q131-133 131-319t-131-321z m100-98q146 147 146 354t-146 353l62 65q82-82 128-190t46-227-46-229-128-190z" horiz-adv-x="1000" />
|
||||
<glyph glyph-name="volume-off" unicode="" d="m0 551l305 0 345 282 0-965-345 279-229 0z m713-283q0 4 2 6l76 76-76 76q-2 2-2 6t2 6l53 53q2 2 5 2t6-2l76-76 77 76q4 2 6 2t5-2l55-53q2-2 2-6t-2-6l-76-76 76-76q2-4 2-7t-2-5l-55-55q-2-1-5-1t-6 1l-77 79-76-79q-2-1-5-1t-6 1l-53 55q-2 2-2 6z" horiz-adv-x="1000" />
|
||||
<glyph glyph-name="volume-down" unicode="" d="m0 141l0 418 236 0 358 291 0-1000-358 291-236 0z m656 37q74 74 74 174 0 104-74 180l73 74q103-106 107-256 0-144-107-246z" horiz-adv-x="836" />
|
||||
</font>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 7.5 KiB |
|
Before Width: | Height: | Size: 2.8 KiB |
|
Before Width: | Height: | Size: 578 B |
|
Before Width: | Height: | Size: 545 B |
|
Before Width: | Height: | Size: 548 B |
|
Before Width: | Height: | Size: 436 B |
|
Before Width: | Height: | Size: 563 B |
|
Before Width: | Height: | Size: 6.7 KiB |
|
Before Width: | Height: | Size: 6.3 KiB |
|
Before Width: | Height: | Size: 5.9 KiB |
|
Before Width: | Height: | Size: 442 B |
|
After Width: | Height: | Size: 139 B |
|
After Width: | Height: | Size: 359 B |
|
After Width: | Height: | Size: 325 B |
|
After Width: | Height: | Size: 303 B |
|
After Width: | Height: | Size: 390 B |
|
Before Width: | Height: | Size: 1.0 KiB After Width: | Height: | Size: 899 B |
|
Before Width: | Height: | Size: 944 B |
|
After Width: | Height: | Size: 2.5 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 309 B |
|
Before Width: | Height: | Size: 3.4 KiB |
@@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>NightScout</title>
|
||||
<link href="/icons/round1.png" rel="icon" id="favicon" type="image/png" />
|
||||
<link href="/images/round1.png" rel="icon" id="favicon" type="image/png" />
|
||||
<link rel="stylesheet" href="/css/main.css" />
|
||||
<link rel="stylesheet" href="/css/dropdown.css" />
|
||||
<link rel="stylesheet" href="/css/drawer.css" />
|
||||
@@ -12,11 +12,13 @@
|
||||
<body>
|
||||
<div id="toolbar">
|
||||
<div id="buttonbar">
|
||||
<a id="testAlarms" class="tip" original-title="Alarm Test / Smartphone Enable" href="#"> </a>
|
||||
<a id="drawerToggle" class="tip" original-title="Settings" href="#"> </a>
|
||||
<a id="testAlarms" class="tip" original-title="Alarm Test / Smartphone Enable" href="#"><i class="icon-volume"></i></a>
|
||||
<a id="hideToolbar" class="tip" original-title="Hides the toolbar" href="#"><i class="icon-resize-full"></i></a>
|
||||
<a id="drawerToggle" class="tip" original-title="Settings" href="#"><i class="icon-sliders"></i></a>
|
||||
</div>
|
||||
<h1>Nightscout <span class="version"></span> </h1>
|
||||
</div>
|
||||
<div id="showToolbar"><a class="tip" original-title="Shows the toolbar" href="#"><i class="icon-resize-small"></i></a></div>
|
||||
|
||||
<div class="container" id="container">
|
||||
<div class="row-fluid heading">
|
||||
@@ -66,7 +68,7 @@
|
||||
<input type="radio" name="units-browser" id="mmol-browser" value="mmol"><label for="mmol-browser">mmol/L</label>
|
||||
</fieldset>
|
||||
<fieldset class="toggle">
|
||||
<legend>Night Mode <a class="tip fa fa-info-circle" original-title="When enabled the page will be dimmed from 9pm - 7am."> </a></legend>
|
||||
<legend>Night Mode <a class="tip" original-title="When enabled the page will be dimmed from 9pm - 7am."><i class="icon-info-circled"></i></a></legend>
|
||||
<input type="checkbox" name="nightmode-browser" id="nightmode-browser"><label for="nightmode-browser">Enable</label>
|
||||
</fieldset>
|
||||
|
||||
@@ -78,19 +80,19 @@
|
||||
<h4>Experiments</h4>
|
||||
<fieldset style="text-align:center; vertical-align:middle;">
|
||||
<legend>Try a Favicon</legend>
|
||||
<a class="iconToggle tip" href="#" original-title="round1.png"><img src="/icons/round1.png" style="width:32px; height:32px"></a>
|
||||
<a class="iconToggle tip" href="#" original-title="round2.png"><img src="/icons/round2.png" style="width:32px; height:32px"></a>
|
||||
<a class="iconToggle tip" href="#" original-title="round3.png"><img src="/icons/round3.png" style="width:32px; height:32px"></a>
|
||||
<a class="iconToggle tip" href="#" original-title="round1.png"><img src="/images/round1.png" style="width:32px; height:32px"></a>
|
||||
<a class="iconToggle tip" href="#" original-title="round2.png"><img src="/images/round2.png" style="width:32px; height:32px"></a>
|
||||
<a class="iconToggle tip" href="#" original-title="round3.png"><img src="/images/round3.png" style="width:32px; height:32px"></a>
|
||||
<br />
|
||||
<a class="iconToggle tip" href="#" original-title="logo1.png"><img src="/images/logo1.png" style="width:32px; height:32px"></a>
|
||||
<a class="iconToggle tip" href="#" original-title="logo2.png"><img src="/images/logo2.png" style="width:32px; height:32px"></a>
|
||||
<a class="iconToggle tip" href="#" original-title="silhouette.png"><img src="/icons/silhouette.png" style="width:32px; height:32px"></a>
|
||||
<a class="iconToggle tip" href="#" original-title="eyes.png"><img src="/icons/eyes.png" style="width:32px; height:32px"></a>
|
||||
<br />
|
||||
<a class="iconToggle tip" href="#" original-title="drop1.png"><img src="/icons/drop1.png" style="width:32px; height:32px"></a>
|
||||
<a class="iconToggle tip" href="#" original-title="drop2.png"><img src="/icons/drop2.png" style="width:32px; height:32px"></a>
|
||||
<a class="iconToggle tip" href="#" original-title="drop2a.png"><img src="/icons/drop2a.png" style="width:32px; height:32px"></a>
|
||||
<a class="iconToggle tip" href="#" original-title="drop3.png"><img src="/icons/drop3.png" style="width:32px; height:32px"></a>
|
||||
<a class="iconToggle tip" href="#" original-title="silhouette.png"><img src="/images/silhouette.png" style="width:32px; height:32px"></a>
|
||||
<a class="iconToggle tip" href="#" original-title="eyes.png"><img src="/images/eyes.png" style="width:32px; height:32px"></a>
|
||||
<br />
|
||||
<a class="iconToggle tip" href="#" original-title="drop1.png"><img src="/images/drop1.png" style="width:32px; height:32px"></a>
|
||||
<a class="iconToggle tip" href="#" original-title="drop2.png"><img src="/images/drop2.png" style="width:32px; height:32px"></a>
|
||||
<a class="iconToggle tip" href="#" original-title="drop3.png"><img src="/images/drop3.png" style="width:32px; height:32px"></a>
|
||||
</fieldset>
|
||||
|
||||
<fieldset style="text-align:center; vertical-align:middle;">
|
||||
@@ -113,8 +115,7 @@
|
||||
<script src="/bower_components/tipsy-jmalonzo/src/javascripts/jquery.tipsy.js"></script>
|
||||
<script src="/js/dropdown.js"></script>
|
||||
<script src="/js/client.js"></script>
|
||||
<script src="/js/drawer.js"></script>
|
||||
<script src="/js/settings.js"></script>
|
||||
<script src="/js/ui-utils.js"></script>
|
||||
<script src="/js/experiments.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,30 +0,0 @@
|
||||
function openDrawer() {
|
||||
$("#container").animate({marginLeft: "-200px"}, 300);
|
||||
$("#drawer").css("display", "block");
|
||||
$("#drawer").animate({right: "0"}, 300);
|
||||
}
|
||||
function closeDrawer() {
|
||||
$("#container").animate({marginLeft: "0px"}, 300);
|
||||
$("#drawer").animate({right: "-200px"}, 300, function() {
|
||||
$("#drawer").css("display", "none");
|
||||
});
|
||||
}
|
||||
var drawerIsOpen = false;
|
||||
|
||||
$("#drawerToggle").click(function(event) {
|
||||
if(drawerIsOpen) {
|
||||
closeDrawer();
|
||||
drawerIsOpen = false;
|
||||
} else {
|
||||
openDrawer();
|
||||
drawerIsOpen = true;
|
||||
}
|
||||
event.preventDefault();
|
||||
});
|
||||
|
||||
$('.tip').tipsy();
|
||||
$.fn.tipsy.defaults = {
|
||||
fade: true,
|
||||
gravity: "n",
|
||||
opacity: 0.75
|
||||
}
|
||||
@@ -1,3 +1,64 @@
|
||||
var drawerIsOpen = false;
|
||||
|
||||
function openDrawer() {
|
||||
$("#container").animate({marginLeft: "-200px"}, 300);
|
||||
$("#drawer").css("display", "block");
|
||||
$("#drawer").animate({right: "0"}, 300);
|
||||
drawerIsOpen = true;
|
||||
}
|
||||
function closeDrawer(callback) {
|
||||
$("#container").animate({marginLeft: "0px"}, 300, callback);
|
||||
$("#drawer").animate({right: "-200px"}, 300, function() {
|
||||
$("#drawer").css("display", "none");
|
||||
});
|
||||
drawerIsOpen = false;
|
||||
}
|
||||
|
||||
function openToolbar() {
|
||||
$("#showToolbar").fadeOut(200, function() {
|
||||
$("#toolbar").animate({marginTop: "-0px"}, 200);
|
||||
});
|
||||
}
|
||||
function closeToolbar() {
|
||||
$("#toolbar").animate({marginTop: "-44px"}, 200, function() {
|
||||
$("#showToolbar").fadeIn().css("display", "block");
|
||||
});
|
||||
}
|
||||
|
||||
$("#drawerToggle").click(function(event) {
|
||||
if(drawerIsOpen) {
|
||||
closeDrawer();
|
||||
drawerIsOpen = false;
|
||||
} else {
|
||||
openDrawer();
|
||||
drawerIsOpen = true;
|
||||
}
|
||||
event.preventDefault();
|
||||
});
|
||||
|
||||
$("#hideToolbar").click(function(event) {
|
||||
if (drawerIsOpen) {
|
||||
closeDrawer(function() {
|
||||
closeToolbar();
|
||||
});
|
||||
} else {
|
||||
closeToolbar();
|
||||
}
|
||||
event.preventDefault();
|
||||
});
|
||||
|
||||
$("#showToolbar").find("a").click(function(event) {
|
||||
openToolbar();
|
||||
event.preventDefault();
|
||||
});
|
||||
|
||||
$('.tip').tipsy();
|
||||
$.fn.tipsy.defaults = {
|
||||
fade: true,
|
||||
gravity: "n",
|
||||
opacity: 0.75
|
||||
}
|
||||
|
||||
$(function() {
|
||||
var storage = $.localStorage;
|
||||
var browserSettings = {
|
||||
@@ -47,7 +108,7 @@ $(function() {
|
||||
alert("TO DO: add storeOnServer() logic.\n" + json.alertHigh + "\n" + json.alertLow);
|
||||
// reference: http://code.tutsplus.com/tutorials/submit-a-form-without-page-refresh-using-jquery--net-59
|
||||
}
|
||||
$.ajax('/api/v1/status.json', { success: function (xhr) {
|
||||
$('.version').text(xhr.version);
|
||||
}});
|
||||
$.ajax('/api/v1/status.json', { success: function (xhr) {
|
||||
$('.version').text(xhr.version);
|
||||
}});
|
||||
});
|
||||