Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

responsive design, cleanup, use mustache for templates #1

Merged
merged 4 commits into from almost 2 years ago

2 participants

Shane Tomlinson Lloyd Hilaiel
Shane Tomlinson
Collaborator

Yo!

I started hacking on the front end. I added mustache to do the templating, started to do some cleanup, started on responsive design so you can check the status on mobile phones (where I am guessing we'll check it regularly) and still have things look alright.

Lloyd Hilaiel lloyd merged commit 1d76e16 into from
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
This page is out of date. Refresh to see the latest.
50 html/index.html
@@ -4,15 +4,16 @@
4 4 <title>Persona System Status</title>
5 5 <link rel="stylesheet" href="style.css" type="text/css">
6 6 <link rel="stylesheet" href="fonts/fonts_common.css" type="text/css">
7   - <script src="modernizr.min.js"></script>
8   - <script src="jquery-1.8.2.min.js"></script>
9   - <script src="moment.min.js"></script>
10   - <script src="status.js"></script>
  7 + <script src="js/modernizr.min.js"></script>
  8 + <script src="js/jquery-1.8.2.min.js"></script>
  9 + <script src="js/moment.min.js"></script>
  10 + <script src="js/status.js"></script>
  11 + <script src="js/mustache.js"></script>
11 12 </head>
12 13 <body>
13   - <header>
14   - <h1 class="subtitle">System Status</h1>
  14 + <header class="cf">
15 15 <div class="logo"></div>
  16 + <h1 class="subtitle">System Status</h1>
16 17 </header>
17 18 <div id="content">
18 19 <section id="right_now">
@@ -35,28 +36,27 @@ <h1 class="subtitle">System Status</h1>
35 36 </section>
36 37
37 38 <section id="history">
38   - <h2>Incident History</h2>
39   - <div class="events">
40   - </div>
  39 + <h2>Incident History</h2>
  40 + <ul class="events">
  41 + </ul>
41 42 </section>
42 43 </div>
43   - <div id="templates">
44   - <div class="event">
  44 +
  45 + <script type="text/html" id="templateEvent">
  46 + <li class="event">
45 47 <div class="summary">
46   - <div class="when">
47   - </div>
48   - <div class="duration">
49   - </div>
50   - </div>
51   - <div class="updates">
52   - </div>
53   - </div>
54   - <div class="update">
55   - <div class="when">
  48 + <div class="when">{{when}}</div>
  49 + <div class="duration {{duration_class}}">{{duration}}</div>
56 50 </div>
57   - <div class="comment">
58   - </div>
59   - </div>
60   - </div>
  51 + <ul class="updates">
  52 + {{#updates}}
  53 + <li class="update">
  54 + <div class="when">{{when}}</div>
  55 + <div class="comment">{{comment}}</div>
  56 + </li>
  57 + {{/updates}}
  58 + </ul>
  59 + </li>
  60 + </script>
61 61 </body>
62 62 </html>
0  html/jquery-1.8.2.min.js → html/js/jquery-1.8.2.min.js
File renamed without changes
0  html/modernizr.min.js → html/js/modernizr.min.js
File renamed without changes
0  html/moment.min.js → html/js/moment.min.js
File renamed without changes
622 html/js/mustache.js
... ... @@ -0,0 +1,622 @@
  1 +/*!
  2 + * mustache.js - Logic-less {{mustache}} templates with JavaScript
  3 + * http://github.com/janl/mustache.js
  4 + */
  5 +
  6 +/*global define: false*/
  7 +
  8 +var Mustache;
  9 +
  10 +(function (exports) {
  11 + if (typeof module !== "undefined" && module.exports) {
  12 + module.exports = exports; // CommonJS
  13 + } else if (typeof define === "function") {
  14 + define(exports); // AMD
  15 + } else {
  16 + Mustache = exports; // <script>
  17 + }
  18 +}((function () {
  19 +
  20 + var exports = {};
  21 +
  22 + exports.name = "mustache.js";
  23 + exports.version = "0.7.0";
  24 + exports.tags = ["{{", "}}"];
  25 +
  26 + exports.Scanner = Scanner;
  27 + exports.Context = Context;
  28 + exports.Writer = Writer;
  29 +
  30 + var whiteRe = /\s*/;
  31 + var spaceRe = /\s+/;
  32 + var nonSpaceRe = /\S/;
  33 + var eqRe = /\s*=/;
  34 + var curlyRe = /\s*\}/;
  35 + var tagRe = /#|\^|\/|>|\{|&|=|!/;
  36 +
  37 + // Workaround for https://issues.apache.org/jira/browse/COUCHDB-577
  38 + // See https://github.com/janl/mustache.js/issues/189
  39 + function testRe(re, string) {
  40 + return RegExp.prototype.test.call(re, string);
  41 + }
  42 +
  43 + function isWhitespace(string) {
  44 + return !testRe(nonSpaceRe, string);
  45 + }
  46 +
  47 + var isArray = Array.isArray || function (obj) {
  48 + return Object.prototype.toString.call(obj) === "[object Array]";
  49 + };
  50 +
  51 + function escapeRe(string) {
  52 + return string.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, "\\$&");
  53 + }
  54 +
  55 + var entityMap = {
  56 + "&": "&amp;",
  57 + "<": "&lt;",
  58 + ">": "&gt;",
  59 + '"': '&quot;',
  60 + "'": '&#39;',
  61 + "/": '&#x2F;'
  62 + };
  63 +
  64 + function escapeHtml(string) {
  65 + return String(string).replace(/[&<>"'\/]/g, function (s) {
  66 + return entityMap[s];
  67 + });
  68 + }
  69 +
  70 + // Export the escaping function so that the user may override it.
  71 + // See https://github.com/janl/mustache.js/issues/244
  72 + exports.escape = escapeHtml;
  73 +
  74 + function Scanner(string) {
  75 + this.string = string;
  76 + this.tail = string;
  77 + this.pos = 0;
  78 + }
  79 +
  80 + /**
  81 + * Returns `true` if the tail is empty (end of string).
  82 + */
  83 + Scanner.prototype.eos = function () {
  84 + return this.tail === "";
  85 + };
  86 +
  87 + /**
  88 + * Tries to match the given regular expression at the current position.
  89 + * Returns the matched text if it can match, the empty string otherwise.
  90 + */
  91 + Scanner.prototype.scan = function (re) {
  92 + var match = this.tail.match(re);
  93 +
  94 + if (match && match.index === 0) {
  95 + this.tail = this.tail.substring(match[0].length);
  96 + this.pos += match[0].length;
  97 + return match[0];
  98 + }
  99 +
  100 + return "";
  101 + };
  102 +
  103 + /**
  104 + * Skips all text until the given regular expression can be matched. Returns
  105 + * the skipped string, which is the entire tail if no match can be made.
  106 + */
  107 + Scanner.prototype.scanUntil = function (re) {
  108 + var match, pos = this.tail.search(re);
  109 +
  110 + switch (pos) {
  111 + case -1:
  112 + match = this.tail;
  113 + this.pos += this.tail.length;
  114 + this.tail = "";
  115 + break;
  116 + case 0:
  117 + match = "";
  118 + break;
  119 + default:
  120 + match = this.tail.substring(0, pos);
  121 + this.tail = this.tail.substring(pos);
  122 + this.pos += pos;
  123 + }
  124 +
  125 + return match;
  126 + };
  127 +
  128 + function Context(view, parent) {
  129 + this.view = view;
  130 + this.parent = parent;
  131 + this.clearCache();
  132 + }
  133 +
  134 + Context.make = function (view) {
  135 + return (view instanceof Context) ? view : new Context(view);
  136 + };
  137 +
  138 + Context.prototype.clearCache = function () {
  139 + this._cache = {};
  140 + };
  141 +
  142 + Context.prototype.push = function (view) {
  143 + return new Context(view, this);
  144 + };
  145 +
  146 + Context.prototype.lookup = function (name) {
  147 + var value = this._cache[name];
  148 +
  149 + if (!value) {
  150 + if (name === ".") {
  151 + value = this.view;
  152 + } else {
  153 + var context = this;
  154 +
  155 + while (context) {
  156 + if (name.indexOf(".") > 0) {
  157 + var names = name.split("."), i = 0;
  158 +
  159 + value = context.view;
  160 +
  161 + while (value && i < names.length) {
  162 + value = value[names[i++]];
  163 + }
  164 + } else {
  165 + value = context.view[name];
  166 + }
  167 +
  168 + if (value != null) {
  169 + break;
  170 + }
  171 +
  172 + context = context.parent;
  173 + }
  174 + }
  175 +
  176 + this._cache[name] = value;
  177 + }
  178 +
  179 + if (typeof value === "function") {
  180 + value = value.call(this.view);
  181 + }
  182 +
  183 + return value;
  184 + };
  185 +
  186 + function Writer() {
  187 + this.clearCache();
  188 + }
  189 +
  190 + Writer.prototype.clearCache = function () {
  191 + this._cache = {};
  192 + this._partialCache = {};
  193 + };
  194 +
  195 + Writer.prototype.compile = function (template, tags) {
  196 + var fn = this._cache[template];
  197 +
  198 + if (!fn) {
  199 + var tokens = exports.parse(template, tags);
  200 + fn = this._cache[template] = this.compileTokens(tokens, template);
  201 + }
  202 +
  203 + return fn;
  204 + };
  205 +
  206 + Writer.prototype.compilePartial = function (name, template, tags) {
  207 + var fn = this.compile(template, tags);
  208 + this._partialCache[name] = fn;
  209 + return fn;
  210 + };
  211 +
  212 + Writer.prototype.compileTokens = function (tokens, template) {
  213 + var fn = compileTokens(tokens);
  214 + var self = this;
  215 +
  216 + return function (view, partials) {
  217 + if (partials) {
  218 + if (typeof partials === "function") {
  219 + self._loadPartial = partials;
  220 + } else {
  221 + for (var name in partials) {
  222 + self.compilePartial(name, partials[name]);
  223 + }
  224 + }
  225 + }
  226 +
  227 + return fn(self, Context.make(view), template);
  228 + };
  229 + };
  230 +
  231 + Writer.prototype.render = function (template, view, partials) {
  232 + return this.compile(template)(view, partials);
  233 + };
  234 +
  235 + Writer.prototype._section = function (name, context, text, callback) {
  236 + var value = context.lookup(name);
  237 +
  238 + switch (typeof value) {
  239 + case "object":
  240 + if (isArray(value)) {
  241 + var buffer = "";
  242 +
  243 + for (var i = 0, len = value.length; i < len; ++i) {
  244 + buffer += callback(this, context.push(value[i]));
  245 + }
  246 +
  247 + return buffer;
  248 + }
  249 +
  250 + return value ? callback(this, context.push(value)) : "";
  251 + case "function":
  252 + var self = this;
  253 + var scopedRender = function (template) {
  254 + return self.render(template, context);
  255 + };
  256 +
  257 + return value.call(context.view, text, scopedRender) || "";
  258 + default:
  259 + if (value) {
  260 + return callback(this, context);
  261 + }
  262 + }
  263 +
  264 + return "";
  265 + };
  266 +
  267 + Writer.prototype._inverted = function (name, context, callback) {
  268 + var value = context.lookup(name);
  269 +
  270 + // Use JavaScript's definition of falsy. Include empty arrays.
  271 + // See https://github.com/janl/mustache.js/issues/186
  272 + if (!value || (isArray(value) && value.length === 0)) {
  273 + return callback(this, context);
  274 + }
  275 +
  276 + return "";
  277 + };
  278 +
  279 + Writer.prototype._partial = function (name, context) {
  280 + if (!(name in this._partialCache) && this._loadPartial) {
  281 + this.compilePartial(name, this._loadPartial(name));
  282 + }
  283 +
  284 + var fn = this._partialCache[name];
  285 +
  286 + return fn ? fn(context) : "";
  287 + };
  288 +
  289 + Writer.prototype._name = function (name, context) {
  290 + var value = context.lookup(name);
  291 +
  292 + if (typeof value === "function") {
  293 + value = value.call(context.view);
  294 + }
  295 +
  296 + return (value == null) ? "" : String(value);
  297 + };
  298 +
  299 + Writer.prototype._escaped = function (name, context) {
  300 + return exports.escape(this._name(name, context));
  301 + };
  302 +
  303 + /**
  304 + * Calculates the bounds of the section represented by the given `token` in
  305 + * the original template by drilling down into nested sections to find the
  306 + * last token that is part of that section. Returns an array of [start, end].
  307 + */
  308 + function sectionBounds(token) {
  309 + var start = token[3];
  310 + var end = start;
  311 +
  312 + var tokens;
  313 + while ((tokens = token[4]) && tokens.length) {
  314 + token = tokens[tokens.length - 1];
  315 + end = token[3];
  316 + }
  317 +
  318 + return [start, end];
  319 + }
  320 +
  321 + /**
  322 + * Low-level function that compiles the given `tokens` into a function
  323 + * that accepts three arguments: a Writer, a Context, and the template.
  324 + */
  325 + function compileTokens(tokens) {
  326 + var subRenders = {};
  327 +
  328 + function subRender(i, tokens, template) {
  329 + if (!subRenders[i]) {
  330 + var fn = compileTokens(tokens);
  331 + subRenders[i] = function (writer, context) {
  332 + return fn(writer, context, template);
  333 + };
  334 + }
  335 +
  336 + return subRenders[i];
  337 + }
  338 +
  339 + return function (writer, context, template) {
  340 + var buffer = "";
  341 + var token, sectionText;
  342 +
  343 + for (var i = 0, len = tokens.length; i < len; ++i) {
  344 + token = tokens[i];
  345 +
  346 + switch (token[0]) {
  347 + case "#":
  348 + sectionText = template.slice.apply(template, sectionBounds(token));
  349 + buffer += writer._section(token[1], context, sectionText, subRender(i, token[4], template));
  350 + break;
  351 + case "^":
  352 + buffer += writer._inverted(token[1], context, subRender(i, token[4], template));
  353 + break;
  354 + case ">":
  355 + buffer += writer._partial(token[1], context);
  356 + break;
  357 + case "&":
  358 + buffer += writer._name(token[1], context);
  359 + break;
  360 + case "name":
  361 + buffer += writer._escaped(token[1], context);
  362 + break;
  363 + case "text":
  364 + buffer += token[1];
  365 + break;
  366 + }
  367 + }
  368 +
  369 + return buffer;
  370 + };
  371 + }
  372 +
  373 + /**
  374 + * Forms the given array of `tokens` into a nested tree structure where
  375 + * tokens that represent a section have a fifth item: an array that contains
  376 + * all tokens in that section.
  377 + */
  378 + function nestTokens(tokens) {
  379 + var tree = [];
  380 + var collector = tree;
  381 + var sections = [];
  382 + var token, section;
  383 +
  384 + for (var i = 0; i < tokens.length; ++i) {
  385 + token = tokens[i];
  386 +
  387 + switch (token[0]) {
  388 + case "#":
  389 + case "^":
  390 + token[4] = [];
  391 + sections.push(token);
  392 + collector.push(token);
  393 + collector = token[4];
  394 + break;
  395 + case "/":
  396 + if (sections.length === 0) {
  397 + throw new Error("Unopened section: " + token[1]);
  398 + }
  399 +
  400 + section = sections.pop();
  401 +
  402 + if (section[1] !== token[1]) {
  403 + throw new Error("Unclosed section: " + section[1]);
  404 + }
  405 +
  406 + if (sections.length > 0) {
  407 + collector = sections[sections.length - 1][4];
  408 + } else {
  409 + collector = tree;
  410 + }
  411 + break;
  412 + default:
  413 + collector.push(token);
  414 + }
  415 + }
  416 +
  417 + // Make sure there were no open sections when we're done.
  418 + section = sections.pop();
  419 +
  420 + if (section) {
  421 + throw new Error("Unclosed section: " + section[1]);
  422 + }
  423 +
  424 + return tree;
  425 + }
  426 +
  427 + /**
  428 + * Combines the values of consecutive text tokens in the given `tokens` array
  429 + * to a single token.
  430 + */
  431 + function squashTokens(tokens) {
  432 + var token, lastToken;
  433 +
  434 + for (var i = 0; i < tokens.length; ++i) {
  435 + token = tokens[i];
  436 +
  437 + if (lastToken && lastToken[0] === "text" && token[0] === "text") {
  438 + lastToken[1] += token[1];
  439 + lastToken[3] = token[3];
  440 + tokens.splice(i--, 1); // Remove this token from the array.
  441 + } else {
  442 + lastToken = token;
  443 + }
  444 + }
  445 + }
  446 +
  447 + function escapeTags(tags) {
  448 + if (tags.length !== 2) {
  449 + throw new Error("Invalid tags: " + tags.join(" "));
  450 + }
  451 +
  452 + return [
  453 + new RegExp(escapeRe(tags[0]) + "\\s*"),
  454 + new RegExp("\\s*" + escapeRe(tags[1]))
  455 + ];
  456 + }
  457 +
  458 + /**
  459 + * Breaks up the given `template` string into a tree of token objects. If
  460 + * `tags` is given here it must be an array with two string values: the
  461 + * opening and closing tags used in the template (e.g. ["<%", "%>"]). Of
  462 + * course, the default is to use mustaches (i.e. Mustache.tags).
  463 + */
  464 + exports.parse = function (template, tags) {
  465 + tags = tags || exports.tags;
  466 +
  467 + var tagRes = escapeTags(tags);
  468 + var scanner = new Scanner(template);
  469 +
  470 + var tokens = [], // Buffer to hold the tokens
  471 + spaces = [], // Indices of whitespace tokens on the current line
  472 + hasTag = false, // Is there a {{tag}} on the current line?
  473 + nonSpace = false; // Is there a non-space char on the current line?
  474 +
  475 + // Strips all whitespace tokens array for the current line
  476 + // if there was a {{#tag}} on it and otherwise only space.
  477 + function stripSpace() {
  478 + if (hasTag && !nonSpace) {
  479 + while (spaces.length) {
  480 + tokens.splice(spaces.pop(), 1);
  481 + }
  482 + } else {
  483 + spaces = [];
  484 + }
  485 +
  486 + hasTag = false;
  487 + nonSpace = false;
  488 + }
  489 +
  490 + var start, type, value, chr;
  491 +
  492 + while (!scanner.eos()) {
  493 + start = scanner.pos;
  494 + value = scanner.scanUntil(tagRes[0]);
  495 +
  496 + if (value) {
  497 + for (var i = 0, len = value.length; i < len; ++i) {
  498 + chr = value.charAt(i);
  499 +
  500 + if (isWhitespace(chr)) {
  501 + spaces.push(tokens.length);
  502 + } else {
  503 + nonSpace = true;
  504 + }
  505 +
  506 + tokens.push(["text", chr, start, start + 1]);
  507 + start += 1;
  508 +
  509 + if (chr === "\n") {
  510 + stripSpace(); // Check for whitespace on the current line.
  511 + }
  512 + }
  513 + }
  514 +
  515 + start = scanner.pos;
  516 +
  517 + // Match the opening tag.
  518 + if (!scanner.scan(tagRes[0])) {
  519 + break;
  520 + }
  521 +
  522 + hasTag = true;
  523 + type = scanner.scan(tagRe) || "name";
  524 +
  525 + // Skip any whitespace between tag and value.
  526 + scanner.scan(whiteRe);
  527 +
  528 + // Extract the tag value.
  529 + if (type === "=") {
  530 + value = scanner.scanUntil(eqRe);
  531 + scanner.scan(eqRe);
  532 + scanner.scanUntil(tagRes[1]);
  533 + } else if (type === "{") {
  534 + var closeRe = new RegExp("\\s*" + escapeRe("}" + tags[1]));
  535 + value = scanner.scanUntil(closeRe);
  536 + scanner.scan(curlyRe);
  537 + scanner.scanUntil(tagRes[1]);
  538 + type = "&";
  539 + } else {
  540 + value = scanner.scanUntil(tagRes[1]);
  541 + }
  542 +
  543 + // Match the closing tag.
  544 + if (!scanner.scan(tagRes[1])) {
  545 + throw new Error("Unclosed tag at " + scanner.pos);
  546 + }
  547 +
  548 + tokens.push([type, value, start, scanner.pos]);
  549 +
  550 + if (type === "name" || type === "{" || type === "&") {
  551 + nonSpace = true;
  552 + }
  553 +
  554 + // Set the tags for the next time around.
  555 + if (type === "=") {
  556 + tags = value.split(spaceRe);
  557 + tagRes = escapeTags(tags);
  558 + }
  559 + }
  560 +
  561 + squashTokens(tokens);
  562 +
  563 + return nestTokens(tokens);
  564 + };
  565 +
  566 + // The high-level clearCache, compile, compilePartial, and render functions
  567 + // use this default writer.
  568 + var _writer = new Writer();
  569 +
  570 + /**
  571 + * Clears all cached templates and partials in the default writer.
  572 + */
  573 + exports.clearCache = function () {
  574 + return _writer.clearCache();
  575 + };
  576 +
  577 + /**
  578 + * Compiles the given `template` to a reusable function using the default
  579 + * writer.
  580 + */
  581 + exports.compile = function (template, tags) {
  582 + return _writer.compile(template, tags);
  583 + };
  584 +
  585 + /**
  586 + * Compiles the partial with the given `name` and `template` to a reusable
  587 + * function using the default writer.
  588 + */
  589 + exports.compilePartial = function (name, template, tags) {
  590 + return _writer.compilePartial(name, template, tags);
  591 + };
  592 +
  593 + /**
  594 + * Compiles the given array of tokens (the output of a parse) to a reusable
  595 + * function using the default writer.
  596 + */
  597 + exports.compileTokens = function (tokens, template) {
  598 + return _writer.compileTokens(tokens, template);
  599 + };
  600 +
  601 + /**
  602 + * Renders the `template` with the given `view` and `partials` using the
  603 + * default writer.
  604 + */
  605 + exports.render = function (template, view, partials) {
  606 + return _writer.render(template, view, partials);
  607 + };
  608 +
  609 + // This is here for backwards compatibility with 0.4.x.
  610 + exports.to_html = function (template, view, partials, send) {
  611 + var result = exports.render(template, view, partials);
  612 +
  613 + if (typeof send === "function") {
  614 + send(result);
  615 + } else {
  616 + return result;
  617 + }
  618 + };
  619 +
  620 + return exports;
  621 +
  622 +}())));
71 html/status.js → html/js/status.js
... ... @@ -1,5 +1,11 @@
1 1 $(document).ready(function() {
2 2 $.get('data/1.json', function(events) {
  3 + renderHappiness(events);
  4 + renderEvents(events);
  5 + renderUptime(events);
  6 + });
  7 +
  8 + function renderHappiness(events) {
3 9 var howLong;
4 10 if (events.length === 0 || events[0].duration != null) {
5 11 $("#right_now .happy").show();
@@ -9,50 +15,55 @@ $(document).ready(function() {
9 15 howLong = moment.unix(events[0].start);
10 16 }
11 17 $("#right_now .timespan").text(howLong.fromNow());
  18 + }
12 19
13   - var outagesThisMonth = 0;
14   -
15   - var secsInMonth = (30 * 24 * 60 * 60);
16   - var thisMonth = (new Date()).getTime() / 1000 - secsInMonth;
17   -
18   - for(var i=0; i < events.length; i++) {
19   - var ev = events[i];
20   - var domfrag = $("#templates .event").clone();
21   -
22   - // if this was less than 30 days ago, let's count the duration toward our uptime calculation
23   - if (ev.duration && ev.start > thisMonth) outagesThisMonth += ev.duration;
24   -
25   - // when did it start?
26   - domfrag.find(".when").text(moment.unix(ev.start).format('LL'));
  20 + function renderEvents(events) {
  21 + var template = $("#templateEvent").html();
  22 + for(var i=0, ev; ev = events[i]; i++) {
  23 + var viewData = {
  24 + duration: "a few seconds",
  25 + duration_class: "short",
  26 + when: moment.unix(ev.start).format('LL'),
  27 + updates: []
  28 + };
27 29
28 30 // how long did it last?
29 31 if (ev.duration) {
30 32 var c = 'long';
31 33 if (ev.duration < 60) c = "short";
32 34 else if (ev.duration < (60 * 10)) c = "medium";
33   - domfrag.find(".duration").addClass(c);
34   - domfrag.find(".duration").text(moment.duration(ev.duration * 1000).humanize());
35   - } else {
36   - domfrag.find(".duration").addClass("long");
  35 + viewData.duration_class = c;
  36 + viewData.duration = moment.duration(ev.duration * 1000).humanize();
37 37 }
38 38
39 39 // now append specific updates
40   - for (var j=0; j < ev.updates.length; j++) {
41   - var u = ev.updates[j];
  40 + for (var j=0, u; u = ev.updates[j]; j++) {
  41 + viewData.updates[j] = {
  42 + when: moment.unix(u.when).format('LT'),
  43 + comment: u.msg
  44 + };
  45 + }
42 46
43   - var up_domfrag = $("#templates .update").clone();
  47 + var domfrag = Mustache.render(template, viewData);
  48 + $("#history .events").append($(domfrag));
  49 + }
  50 + }
  51 +
  52 +
  53 + function renderUptime(events) {
  54 + var outagesThisMonth = 0;
  55 +
  56 + var secsInMonth = (30 * 24 * 60 * 60);
  57 + var thisMonth = (new Date()).getTime() / 1000 - secsInMonth;
44 58
45   - // when was the comment made?
46   - up_domfrag.find(".when").text(moment.unix(u.when).format('LT'));
47   - // what was said?
48   - up_domfrag.find(".comment").text(u.msg);
49   -
50   - domfrag.find(".updates").append(up_domfrag);
51   - }
  59 + for(var i=0, ev; ev = events[i]; i++) {
  60 + // if this was less than 30 days ago, let's count the duration toward our uptime calculation
  61 + if (ev.duration && ev.start > thisMonth) outagesThisMonth += ev.duration;
52 62
53   - $("#history .events").append(domfrag);
54 63 }
55 64 var pct = (100.0 * (secsInMonth - outagesThisMonth) / secsInMonth).toFixed(3);
56 65 $(".happy .details .value").text(pct);
57   - });
  66 + }
  67 +
  68 +
58 69 });
70 html/style.css
@@ -12,9 +12,34 @@ body {
12 12 h1 {
13 13 font-size: 48px;
14 14 font-weight: 300;
  15 + line-height: 1.2em;
  16 +}
  17 +
  18 +ul, li {
  19 + margin: 0;
  20 + padding: 0;
  21 + list-style: none;
  22 +}
  23 +
  24 +.cf:after {
  25 + content: ".";
  26 + display: block;
  27 + clear: both;
  28 + visibility: hidden;
  29 + line-height: 0;
  30 + height: 0;
  31 +}
  32 +
  33 +html[xmlns] .cf {
  34 + display: block;
  35 +}
  36 +
  37 +* html .cf {
  38 + height: 1%;
15 39 }
16 40
17 41 header .logo {
  42 + float: left;
18 43 background: url("/i/persona-logo-wordmark.png") 0 0 no-repeat;
19 44 width: 205px;
20 45 height: 50px;
@@ -37,7 +62,7 @@ header {
37 62 }
38 63
39 64 #content {
40   -/* text-shadow: 1px 1px 0 rgba(255,255,255,0.5); */
  65 +/* text-shadow: 1px 1px 0 rgba(255,255,255,0.5); */
41 66 background-color: #fff;
42 67 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
43 68 border-radius: 5px;
@@ -52,13 +77,13 @@ section#right_now > div {
52 77
53 78 section#right_now .overview {
54 79 font-size: 24px;
55   -}
  80 +}
56 81
57 82 section#right_now .details {
58 83 font-size: 16px;
59 84 padding-top: 5px;
60 85
61   -}
  86 +}
62 87
63 88 #right_now .happy .status {
64 89 color: #494;
@@ -85,10 +110,6 @@ section#right_now .details {
85 110
86 111 }
87 112
88   -#templates {
89   - display: none;
90   -}
91   -
92 113 .event {
93 114 width: 600px;
94 115 margin: auto;
@@ -143,4 +164,37 @@ section#right_now .details {
143 164
144 165 .event .duration.short {
145 166 color: #9b9;
146   -}*/
  167 +}*/
  168 +
  169 +@media screen and (max-width: 775px) {
  170 + body > *, .event {
  171 + width: auto;
  172 + }
  173 +
  174 + .subtitle {
  175 + float: none;
  176 + text-align: center;
  177 + }
  178 +
  179 + #content {
  180 + padding: 25px;
  181 + }
  182 +
  183 + .event .summary {
  184 + float: none;
  185 + width: auto;
  186 + text-align: left;
  187 + }
  188 +
  189 + .event .duration {
  190 + float: none;
  191 + padding: 0;
  192 + }
  193 +
  194 + .event .updates {
  195 + margin: 0 0 30px 0;
  196 + padding: 10px 0 0 0;
  197 + border: 1px solid grey;
  198 + border-width: 1px 0 0 0;
  199 + }
  200 +}
6 package.json
@@ -10,12 +10,14 @@
10 10 },
11 11 "private": true,
12 12 "scripts": {
13   - "test": "mocha scripts/tests"
  13 + "test": "mocha scripts/tests",
  14 + "start": "node scripts/run"
14 15 },
15 16 "devDependencies": {
16 17 "mocha": "1.5.0",
17 18 "should": "1.2.0",
18 19 "rss": "0.0.4",
19   - "express": "*"
  20 + "express": "*",
  21 + "moment": "1.7.0"
20 22 }
21 23 }

Tip: You can add notes to lines in a file. Hover to the left of a line to make a note

Something went wrong with that request. Please try again.