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的拖拽不好用，加上去之后没法拖到另一个卡组里... */
   }

decks/index.html

@@ -73,25 +73,9 @@
             <i>${count}</i>
         </p>
     </script>
-    <script id="card_usage_graphic_main_template" type="text/x-jquery-tmpl">
+    <script id="card_usage_graphic_template" type="text/x-jquery-tmpl">
         {{each Array(count)}}
-        <div style="float:left;width:31px;overflow:visible;">
-            <img class="card_usage" width="44" height="64" src="${$data.card().image_thumbnail_url()}"/>
-        </div>
-        {{/each}}
-    </script>
-    <script id="card_usage_graphic_side_template" type="text/x-jquery-tmpl">
-        {{each Array(count)}}
-        <div style="float:left;width:${side_count+((465/side_count)-side_count)}px;overflow:visible;">
-            <img class="card_usage" width="44" height="64" src="${$data.card().image_thumbnail_url()}"/>
-        </div>
-        {{/each}}
-    </script>
-    <script id="card_usage_graphic_extra_template" type="text/x-jquery-tmpl">
-        {{each Array(count)}}
-        <div style="float:left;width:${extra_count+((465/extra_count)-extra_count)}px;overflow:visible;">
-            <img class="card_usage" width="44" height="64" src="${$data.card().image_thumbnail_url()}"/>
-        </div>
+            <img class="card_usage" width="44" height="64" style="float:left;overflow:visible;" src="${$data.card().image_thumbnail_url()}"/>
         {{/each}}
     </script>
     <script id="deck_template" type="text/x-jquery-tmpl">
@@ -104,7 +88,7 @@
             </legend>
             <div class="deck_part main">
 
-            {{tmpl(main) '#card_usage_' + ($('.operate_area').hasClass('text') ? 'text' : 'graphic_main') + '_template'}}
+            {{tmpl(main) '#card_usage_' + ($('.operate_area').hasClass('text') ? 'text' : 'graphic') + '_template'}}
             </div>
         </fieldset>
         <fieldset id="deck_side">
@@ -113,7 +97,7 @@
             </legend>
             <div class="deck_part side">
 
-            {{tmpl(side) '#card_usage_' + ($('.operate_area').hasClass('text') ? 'text' : 'graphic_side') + '_template'}}
+            {{tmpl(side) '#card_usage_' + ($('.operate_area').hasClass('text') ? 'text' : 'graphic') + '_template'}}
             </div>
         </fieldset>
         <fieldset id="deck_extra">
@@ -122,7 +106,7 @@
             </legend>
             <div class="deck_part extra">
 
-            {{tmpl(extra) '#card_usage_' + ($('.operate_area').hasClass('text') ? 'text' : 'graphic_extra') + '_template'}}
+            {{tmpl(extra) '#card_usage_' + ($('.operate_area').hasClass('text') ? 'text' : 'graphic') + '_template'}}
             </div>
         </fieldset>
 </script>