Naming screens, show meta on screens.

static/css/crimsontwins.less

@@ -1,18 +1,6 @@
 @import 'lib/vendor-prefix.less';
 
-.wrap {
-  position: relative;
-  background: url(/img/debut_dark.png);
-  overflow: hidden;
-}
-
 .content {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-
   transition: opacity 2s;
   -moz-transition: opacity 2s;
   -webkit-transition: opacity 2s;
@@ -26,14 +14,48 @@
   }
 
   iframe {
-    width: 100%;
-    height: 100%;
     overflow: hidden;
     border: 0;
     background: #fff;
   }
 }
 
+.wrap {
+  position: relative;
+  background: url(/img/debut_dark.png);
+  overflow: hidden;
+
+  .content {
+    width: 100%;
+    height: ~"calc(100% - 3em)";
+
+    iframe {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .meta {
+    background: #000;
+    font-size: 2em;
+    line-height: 1em;
+    color: #fff;
+    padding: 0.25em;
+    vertical-align: middle;
+    word-wrap: break-word;
+
+    span:not(:first-child) {
+      border-left: 1px solid #fff;
+      margin-left: 0.5em;
+      padding-left: 0.5em;
+
+      &.url {
+        font-size: 0.5em;
+      }
+    }
+  }
+}
+
 .selector {
   list-style: none;
   margin: 0;

static/js/managed.js

@@ -92,7 +92,8 @@ function makeSelector() {
       .on('click', function(ev) {
         console.log('new clicked');
         ev.preventDefault();
-        now.addScreen('herpderp ' + (new Date()).getMilliseconds());
+        var name = prompt('Screen name?');
+        now.addScreen(name);
       }));
 
     /*
@@ -143,14 +144,19 @@ function makeScreenPreview(screen, events) {
   return $elem;
 }
 
+var seletedScreenTemplate =
+  '<div class="wrap" name="screen-{id}">' +
+    '<div class="content"></div>' +
+    '<div class="meta">' +
+      '<span class="name">{name}</span>' +
+      '<span class="url">{content.url}</span>' +
+    '</div>' +
+  '</div>';
+
 function selectScreen($elem) {
   var screen = $elem.data('screen');
-  $wrap = $('<div>', {
-      'class': 'wrap',
-      'name': 'screen-' + screen.id
-    })
-    .append($('<div class="content"/>')
-      .html(elementFor(screen.content)))
+  $wrap = $(seletedScreenTemplate.format(screen))
+    .find('.content').html(elementFor(screen.content)).end()
     .css({
       width: window.innerWidth,
       height: window.innerHeight

static/js/utils.js

@@ -8,14 +8,22 @@ String.prototype.format = function(obj) {
   var args = arguments;
   var str = this;
   // Support either an object, or a series.
-  return str.replace(/\{[\w\d_-]+\}/g, function(part) {
+  return str.replace(/\{[\w\d\._-]+\}/g, function(part) {
     // Strip off {}.
     part = part.slice(1, -1);
     var index = parseInt(part, 10);
     if (isNaN(index)) {
-      return obj[part];
+      return dottedGet(obj, part);
     } else {
       return args[index];
     }
   });
-}
+};
+
+dottedGet = function(obj, selector) {
+  selector = selector.split('.');
+  while (selector.length) {
+    obj = obj[selector.splice(0, 1)[0]];
+  }
+  return obj;
+};

utils.js

@@ -29,18 +29,26 @@ String.prototype.format = function(obj) {
   var args = arguments;
   var str = this;
   // Support either an object, or a series.
-  return str.replace(/\{[\w\d_-]+\}/g, function(part) {
+  return str.replace(/\{[\w\d\._-]+\}/g, function(part) {
     // Strip off {}.
     part = part.slice(1, -1);
     var index = parseInt(part, 10);
     if (isNaN(index)) {
-      return obj[part];
+      return exports.dottedGet(obj, part);
     } else {
       return args[index];
     }
   });
 };
 
+exports.dottedGet = function(obj, selector) {
+  selector = selector.split('.');
+  while (selector.length) {
+    obj = obj[selector.splice(0, 1)[0]];
+  }
+  return obj;
+};
+
 var _nextId = 0;
 exports.getId = function() {
   return _nextId++;