Owner style applied

lib/handlers/bin.js

@@ -900,6 +900,10 @@ module.exports = Observable.extend({
       return !!bin[panel].trim();
     }).concat('live');
 
+    if (!options.metadata) {
+      options.metadata = {};
+    }
+
     if (options.metadata.email) {
       options.metadata.avatar = utils.gravatar(options.metadata.email);
     }
@@ -924,7 +928,7 @@ module.exports = Observable.extend({
         revision: bin.url ? (bin.revision || 1) : null,
         processors: bin.settings.processors || {},
         checksum: options.checksum || null,
-        metadata: options.metadata || {},
+        metadata: options.metadata,
       },
       settings: options.settings ? _.extend(options.settings, { panels: panels }) : { panels: panels }
     };

public/css/style.css

@@ -2584,7 +2584,7 @@ form + hr {
   text-decoration: none;
 }
 
-.name span {
+.label .name span {
   /*margin-left: -41px;*/
   padding-left: 4px;
   color: #999;
@@ -3649,13 +3649,37 @@ h2 {
   background: #fafafa;
   display: inline-block;
   box-sizing: border-box;
-  margin: 10px;
+  /*margin: 10px;*/
   border: 1px solid #fff;
   box-shadow: 0 1px 1px rgba(0,0,0,0.2);
   font-size: 16px;
   /* min-width: 500px; */
 }
 
+.card.owner header img {
+  display: none;
+}
+
+.card.author .meta .name,
+.card .meta .author,
+.card.author header img {
+  display: none;
+
+}
+
+.card.author .meta .author {
+  display: inline-block;
+}
+
+
+.card span {
+  opacity: 1;
+}
+
+.card b {
+  font-weight: inherit;
+}
+
 .card header {
   cursor: pointer;
   background: #fafafa;
@@ -3711,10 +3735,11 @@ h2 {
 .card .meta {
   white-space: nowrap;
   padding-right: 10px;
+  margin: 5px 0;
 }
 
 .card.author .meta {
-  padding-left: 5px;
+  padding-left: 10px;
 }
 
 .card .name {
@@ -3773,3 +3798,11 @@ h2 {
   font-size: 12px;
   display: block;
 }
+
+.card.viewers .viewers {
+  display: inline-block;
+}
+
+.card .viewers {
+  display: none;
+}

public/js/chrome/infocard.js

@@ -1,6 +1,6 @@
 (function () {
   'use strict';
-  /*global $:true, jsbin:true*/
+  /*global $:true, jsbin:true, prettyDate:true*/
 
   var $template = $($('#infocard').html()); // donkey way of cloning from template
   var $header = $template.find('header');
@@ -14,12 +14,16 @@
 
   $header.find('time').html(prettyDate(meta.updated));
 
+  if (!jsbin.checksum) {
+    classes.push('meta');
+  }
+
   if (meta.pro) {
     classes.push('pro');
   }
 
   if (meta.name === jsbin.user.name) {
-    classes.push('owner');
+    classes.push('author');
   }
 
   $header.find('.visibility').text(meta.visibility);
@@ -30,5 +34,12 @@
     classes.push('public');
   } // TODO handle team
 
-  $template.addClass(classes.join(' ')).appendTo('body');
+  if (jsbin.state.code) {
+    $template.addClass(classes.join(' ')).appendTo('body');
+
+    $header.click(function (e) {
+      e.preventDefault();
+      $template.toggleClass('open');
+    });
+  }
 })();

views/index.html

@@ -462,7 +462,8 @@ Include alerts, prompts &amp; confirm boxes">Run with JS</button>
     <header><img>
       <div class="visibility"></div>
       <div class="meta">
-        <div class="name"><b></b><span class="pro">pro</span></div><span class="when">Modified <time>yesterday</time></span>
+        <div class="author">Bin info</div>
+        <div class="name"><b></b><span class="pro">pro</span></div><span class="when"><time></time></span>
       </div>
       <div class="viewers">0<span>viewers</span>
       </div>