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.
This commit is contained in:
Brian Hanifin
2014-07-23 17:06:54 -07:00
parent 34ddd828b8
commit 6c99055ed1
41 changed files with 933 additions and 59 deletions
+31 -10
View File
@@ -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 -1
View File
@@ -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) {
+57
View File
@@ -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/
+75
View File
@@ -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
+100
View File
@@ -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"
}
]
}
+85
View File
@@ -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);
}
}
+16
View File
@@ -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'; } /* '' */
File diff suppressed because one or more lines are too long
+16
View File
@@ -0,0 +1,16 @@
.icon-resize-full { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe800;&nbsp;'); }
.icon-cog-alt { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe801;&nbsp;'); }
.icon-wrench { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe802;&nbsp;'); }
.icon-sliders { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe803;&nbsp;'); }
.icon-cog { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe804;&nbsp;'); }
.icon-resize-small { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe805;&nbsp;'); }
.icon-info-circled-alt { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe806;&nbsp;'); }
.icon-info-outline { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe807;&nbsp;'); }
.icon-info { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe808;&nbsp;'); }
.icon-info-circled { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe809;&nbsp;'); }
.icon-volume { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe80a;&nbsp;'); }
.icon-volume-up { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe80b;&nbsp;'); }
.icon-volume-up-1 { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe80c;&nbsp;'); }
.icon-volume-off { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe80d;&nbsp;'); }
.icon-volume-down { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe80e;&nbsp;'); }
+27
View File
@@ -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 = '&#xe800;&nbsp;'); }
.icon-cog-alt { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe801;&nbsp;'); }
.icon-wrench { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe802;&nbsp;'); }
.icon-sliders { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe803;&nbsp;'); }
.icon-cog { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe804;&nbsp;'); }
.icon-resize-small { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe805;&nbsp;'); }
.icon-info-circled-alt { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe806;&nbsp;'); }
.icon-info-outline { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe807;&nbsp;'); }
.icon-info { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe808;&nbsp;'); }
.icon-info-circled { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe809;&nbsp;'); }
.icon-volume { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe80a;&nbsp;'); }
.icon-volume-up { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe80b;&nbsp;'); }
.icon-volume-up-1 { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe80c;&nbsp;'); }
.icon-volume-off { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe80d;&nbsp;'); }
.icon-volume-down { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe80e;&nbsp;'); }
+67
View File
@@ -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'; } /* '' */
+283
View File
@@ -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>
Binary file not shown.
+26
View File
@@ -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="&#xe800;" 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="&#xe801;" 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="&#xe802;" 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="&#xe803;" 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="&#xe804;" 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="&#xe805;" 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="&#xe806;" 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="&#xe807;" 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="&#xe808;" 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="&#xe809;" 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="&#xe80a;" 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="&#xe80b;" 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="&#xe80c;" 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="&#xe80d;" 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="&#xe80e;" 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

Binary file not shown.
Binary file not shown.
Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 578 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 545 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 548 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 436 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 563 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.9 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 442 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 139 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 359 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 325 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 303 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 390 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.0 KiB

After

Width:  |  Height:  |  Size: 899 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 944 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 309 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.4 KiB

+16 -15
View File
@@ -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="#">&nbsp;</a>
<a id="drawerToggle" class="tip" original-title="Settings" href="#">&nbsp;</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.">&nbsp;</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>
-30
View File
@@ -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);
}});
});