temp

assets/javascripts/decks.coffee

@@ -151,7 +151,18 @@ class Deck extends Spine.Controller
       #文字版
       @el.jscroll({W: "12px", Btn:
         {btn: false}})
+    else
+      main_margin = Math.floor(($('.deck_part').width() - $('.card_usage').width() * Math.max(((main_count-1) / 4)+1,10)) / (Math.max(((main_count-1) / 4)+1,10)-1) / 2)
+      $('.deck_part.main').css {'margin-left': -main_margin, 'margin-right': -main_margin}
+      $('.deck_part.main .card_usage').css {'margin-left': main_margin, 'margin-right': main_margin}
+
+      side_margin = Math.floor(($('.deck_part').width() - $('.card_usage').width() * Math.max(side_count,10)) / (Math.max(side_count,10)-1) / 2)
+      $('.deck_part.side').css {'margin-left': -side_margin, 'margin-right': -side_margin}
+      $('.deck_part.side .card_usage').css {'margin-left': side_margin, 'margin-right': side_margin}
 
+      extra_margin = Math.floor(($('.deck_part').width() - $('.card_usage').width() * Math.max(extra_count,10)) / (Math.max(extra_count,10)-1) / 2)
+      $('.deck_part.extra').css {'margin-left': -extra_margin, 'margin-right': -extra_margin}
+      $('.deck_part.extra .card_usage').css {'margin-left': extra_margin, 'margin-right': extra_margin}
   location: ->
     "/decks/?name=#{@deck_name}&cards=#{@encode()}"
   url: ->

assets/javascripts/decks.js

@@ -245,7 +245,7 @@
     };
 
     Deck.prototype.render = function() {
-      var card_usage, category, category_count, extra_count, i, main_count, side_count, _i, _len, _ref,
+      var card_usage, category, category_count, extra_count, extra_margin, i, main_count, main_margin, side_count, side_margin, _i, _len, _ref,
         _this = this;
       this.main = [];
       this.side = [];
@@ -405,6 +405,34 @@
             btn: false
           }
         });
+      } else {
+        main_margin = Math.floor(($('.deck_part').width() - $('.card_usage').width() * Math.max(((main_count - 1) / 4) + 1, 10)) / (Math.max(((main_count - 1) / 4) + 1, 10) - 1) / 2);
+        $('.deck_part.main').css({
+          'margin-left': -main_margin,
+          'margin-right': -main_margin
+        });
+        $('.deck_part.main .card_usage').css({
+          'margin-left': main_margin,
+          'margin-right': main_margin
+        });
+        side_margin = Math.floor(($('.deck_part').width() - $('.card_usage').width() * Math.max(side_count, 10)) / (Math.max(side_count, 10) - 1) / 2);
+        $('.deck_part.side').css({
+          'margin-left': -side_margin,
+          'margin-right': -side_margin
+        });
+        $('.deck_part.side .card_usage').css({
+          'margin-left': side_margin,
+          'margin-right': side_margin
+        });
+        extra_margin = Math.floor(($('.deck_part').width() - $('.card_usage').width() * Math.max(extra_count, 10)) / (Math.max(extra_count, 10) - 1) / 2);
+        $('.deck_part.extra').css({
+          'margin-left': -extra_margin,
+          'margin-right': -extra_margin
+        });
+        return $('.deck_part.extra .card_usage').css({
+          'margin-left': extra_margin,
+          'margin-right': extra_margin
+        });
       }
     };
 

assets/stylesheets/decks.less

@@ -176,7 +176,7 @@ body{margin:0;padding:0;background:#eee;}
     border:1px solid #cccccc;padding:5px;margin:14px 0 0 0;background:#F9F9F9;border-radius:6px;font-size:12px;color:#666666;//height:586px;
     legend{font-size:14px;color:#666666;margin:0 0 0 8px;font-size:14px;}
 
-    .deck_part{width: auto !important;}
+    //.deck_part{width: auto !important;}
     //.card_usage{margin: 0; float: left; width: 44px; height: 64px; }
     /* 一个很神奇的现象，float: left不加的话，Jquery-UI的拖拽不好用，加上去之后没法拖到另一个卡组里... */
   }