fullscreen card view #23 #110

public/css/scss/_overlay.scss

@@ -35,6 +35,7 @@
 
 .fullscreen-card {
   position: relative;
+  max-width: 960px;
 
   background-color: #fff;
 
@@ -49,12 +50,25 @@
 
 }
 
-.fullscreen-card-header {
+.fullscreen-header {
+  margin: 20px 0;
+
   h2{
-    margin-top: 0;
+    margin: 0;
     font-size: 20px;
     line-height: 28px;
   }
+  h3 {
+    margin: 0;
+    font-size: 18px;
+    line-height: 26px;
+  }
+
+}
+.fullscreen-card-preamble {
+  .fullscreen-header {
+    margin-top: 0;
+  }
 
 }
 .fullscreen-card-description {
@@ -84,10 +98,53 @@
 .fullscreen-card-left {
    margin-left: 20px;
    margin-right: 200px;
-   border-right: 1px solid #ccc;
    padding-right: 10px;
    @include prefixer(box-sizing, border-box);
    overflow: hidden;
 }
 
 
+.fullscreen-card-activity {
+  .card-comment {
+    overflow:hidden;
+    margin-bottom: 10px;
+    > img {
+      float: left;
+    }
+  }
+  .comment-body {
+    margin-left: 40px;
+    .email-fragment {
+      margin-bottom: 10px;
+    }
+    .email-hidden-toggle {
+       display:none;
+    }
+  }
+
+}
+
+.labels {
+  list-style: none;
+  margin:0;
+  padding:0;
+  h5 {
+   margin-top: 0px;
+  }
+}
+
+.labels li {
+  margin-bottom: 10px;
+  border-radius: 4px;
+}
+
+.labels li span {
+  position:relative;
+  padding: 10px;
+  display:block;
+  text-decoration: none;
+  border-radius: 4px;
+  color:#777;
+}
+
+

public/scripts/modules/backlog/views/board.js

@@ -71,20 +71,14 @@ define(["../collections/issues",
            var board = $(_.template(template, data)),
                noneBoard = board.clone(),
                noneColumn = data.unassigned,
-               grouped = _.groupBy(data.milestones, function (m){
-                return m.milestone._data.status || "backlog";
-               }),
-               rest = (grouped.wip || []).concat(grouped.backlog),
                sidebar = new sidebarView({data:data,params:this.params}),
                searchView = new headerView(),
                assigneesView = new assigneeView({data:data, params: this.params}),
                self = this;
 
            $(noneBoard).append(new columnView({column: noneColumn, user:this.user,repo:this.repo}).render().el);
 
-           var width = (100 / rest.length);
-
-           _.each(rest, function (label){
+           _.each(data.milestones, function (label){
                var column = new columnView({column: label, user:self.user,repo:self.repo});
                var markup = $(column.render().el).css({width:260 + "px"});
                $(board).append(markup);

public/scripts/modules/backlog/views/cardView.js

@@ -19,16 +19,24 @@ define(["text!../templates/card.html","../models/card", "../../common/events/pos
       "moved" : "moved",
       "click .close": "closed",
       "drop": "dropped",
-      "reorder" : "drop"
+      "reorder" : "drop",
+      "click .number" : "onNumber",
+      "click" : "fullscreen"
     },
     tagName:"li",
     onMoved: function(data){
       postal.publish("Moved.Socket." + data.index,{card: this});
     },
+    onNumber: function (ev) {
+      ev.stopPropagation();
+    },
     onClosed: function(){
       this.remove();
       postal.publish("Closed.Issue",{card: this});
     },
+    fullscreen: function (ev) {
+      postal.publish("Card.Fullscreen",this.issue);
+    },
     render: function(){
       $(this.el).html( _.template(template, this.issue.attributes))
       .droppable({scope:"assignee",hoverClass:"assignee-accept"})

public/scripts/modules/board/views/cardView.js

@@ -20,10 +20,14 @@ define(["text!../templates/card.html","../models/card", "../../common/events/pos
       "click .close": "closed",
       "drop": "dropped",
       "reorder" : "drop",
+      "click .number" : "onNumber",
       "click" : "fullscreen"
 
     },
     tagName:"li",
+    onNumber: function (ev) {
+      ev.stopPropagation();
+    },
     onMoved: function(data){
       postal.publish("Moved.Socket." + data.index,{card: this});
     },
@@ -66,6 +70,7 @@ define(["text!../templates/card.html","../models/card", "../../common/events/pos
     },
     closed: function(ev, index){
       ev.preventDefault();
+      ev.stopPropagation();
       this.issue.close({index: index});
       this.remove();
       postal.publish("Closed.Issue",{card: this});

public/scripts/modules/card/templates/card.html

@@ -1,6 +1,8 @@
 <div class="fullscreen-card-left">
-  <div class="fullscreen-card-header">
-    <h2> <%= title %> </h2>
+  <div class='fullscreen-card-preamble'>
+    <div class="fullscreen-header">
+      <h2> <%= title %> </h2>
+    </div>
   </div>
 
   <div class="fullscreen-card-description">
@@ -9,9 +11,10 @@ <h2> <%= title %> </h2>
 </div>
 <div class="fullscreen-card-right">
   <% _(other_labels).each(function(l) { %>
-  <ul > 
-    <li class="card-label -x<%= l.color %> active large"> 
-      <span> <%= l.name %> </span>
+  <ul class="labels"> 
+    <h5> Labels </h5>
+    <li class="card-label -x<%= l.color %>"> 
+      <span class="active"> <%= l.name %> </span>
     </li>
   </ul>
 

public/scripts/modules/card/templates/feed.html

@@ -1,10 +1,14 @@
 
   <div class="fullscreen-card-activity">
-    <h3> Activity </h3>
+    <div class="fullscreen-header">
+      <h3> Activity </h3>
+    </div>
     <% _(comments).each(function(c) { %>
     <div class="card-comment">
-      <img  src="https://secure.gravatar.com/avatar/<%= user.gravatar_id%>?s=30" />
-      <%= c.body_html %>
+      <img  src="https://secure.gravatar.com/avatar/<%= c.user.gravatar_id%>?s=30" />
+      <div class="comment-body">
+        <%= c.body_html %>
+      </div>
     </div>
     <% }); %>
   </div>

views/backlog.erb

@@ -30,5 +30,15 @@
 
   <div class="sidebar-wrapper lifted hide" > </div>
 <% end %>
+<% content_for :overlay do %>
+  <div class="fullscreen-overlay" >
+
+    <div class="fullscreen-wrapper" data-module="card/main" data-parameters='<%= @parameters.to_json %>'>
+
+    </div>
+
+  </div>
+
+<% end %>
 
 <% content_for :title do %><%= h @parameters[:repo]%> :: <% end %>