styling changes to the milestones huboard#62

jaykz52 · Jun 14, 2012 · 05d7145 · 05d7145
1 parent a3d3da0
commit 05d7145
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 11 deletions.
diff --git a/public/scripts/modules/workqueue/views/milestones_list.js b/public/scripts/modules/workqueue/views/milestones_list.js
@@ -1,25 +1,28 @@
 define(["./milestoneView"],function(milestoneView,milestones){
 
   return Backbone.View.extend({
-    tagName: "ul",
+    tagName: "div",
+    className:"drop-shadow",
     initialize: function(params){
       this.user = params.user;
       this.repo = params.repo;
       this.status = params.status;
     },
     render: function() {
 
-      $(this.el)
-        .addClass("milestones drop-shadow sortable")
+      $("<ul>")
+        .addClass("milestones sortable")
         .sortable({
          receive: $.proxy(this.onReceive,this),
+         stop: $.proxy(this.fullStop,this),
+         start: $.proxy(this.onStart,this),
          remove: $.proxy(this.onRemove, this),
          over: $.proxy(this.onOver, this),
          update: $.proxy(this.onStop, this),
          out: $.proxy(this.onOut, this),
           connectWith: ".sortable",
            placeholder: "ui-sortable-placeholder"
-        });
+        }).appendTo(this.el);
 
       return this;
     },
@@ -29,20 +32,26 @@ define(["./milestoneView"],function(milestoneView,milestones){
        // don't know if need yet
     },
     onOver: function(ev, ui){
-       $(this.el).addClass("ui-sortable-hover");
+       $("ul",this.el).addClass("ui-sortable-hover");
     },
     onOut: function (ev, ui){
-       $(this.el).removeClass("ui-sortable-hover");
+       $("ul",this.el).removeClass("ui-sortable-hover");
     },
     onfetch: function(data){
       var self = this;
       _.each(data, function(milestone){
         var view = new milestoneView({user: self.user, repo: self.repo,milestone:milestone});
-        $(self.el).append(view.render().el);
+        $("ul",self.el).append(view.render().el);
         view.delegateEvents();
       });
       $("[rel~='twipsy']").twipsy({live:true})
     },
+    fullStop: function(ev, ui) {
+     $(ui.item).removeClass("ui-state-dragging");
+    },
+    onStart: function(ev, ui) {
+     $(ui.item).addClass("ui-state-dragging");
+    },
     onStop : function(ev,ui){
       console.log("onStop");
       var elements = $("li", this.el),

diff --git a/public/scripts/modules/workqueue/views/workflowView.js b/public/scripts/modules/workqueue/views/workflowView.js
@@ -8,10 +8,8 @@ define(["./milestones_list","../collections/milestones"],function(listView, coll
       this.onfetch = function (data) {
 
         $(element)
-          .append("<h3>Work In Progress")
-          .append(wip.render().el)
-          .append("<h3>Backlog")
-          .append(queue.render().el);
+          .append($(wip.render().el).prepend("<h3>Work In Progress"))
+          .append($(queue.render().el).prepend("<h3>Backlog"))
 
         var grouped = _.groupBy(data, function (milestone){
           return milestone._data.status || "backlog";

diff --git a/public/styles/main.css b/public/styles/main.css
@@ -48,9 +48,29 @@ ul.repos li a.btn {
  margin-top:7px;
 }
 
+#workqueue > div {
+
+  margin: 20px 0;
+}
+ ul.milestones .ui-sortable-placeholder {
+   background:rgba(0,0,0,0.1);
+   list-style: none;
+   padding: 20px 5px 15px 5px;
+   margin: 10px 0;
+   border-radius: 4px;
+ }
+
+ li.ui-state-dragging {
+   border-radius: 4px;
+   background:rgba(0,104,215,0.25);
+ }
+
 ul.milestones {
    list-style: none;
    counter-reset: milestone;
+   margin:0;
+   padding: 10px 2px;
+   padding-top: 0px;
 }
 
 ul.milestones li {