Card size options UI

generator/css/card-size.css

@@ -31,14 +31,14 @@
 
 /* A4 paper area (minus epsilon for rounding) */
 page[size="A4"] {
-    width:  209.5mm; /* full: 210.0mm */
-    height: 296.5mm; /* full: 297.0mm */
+    width:  209mm; /* full: 210.0mm */
+    height: 295mm; /* full: 297.0mm */
 }
 
 /* US letter area (minus epsilon for rounding) */
 page[size="Letter"] {
-    width:  215.4mm; /* full: 215.9mm (8.5in) */
-    height: 278.9mm; /* full: 279.4mm (11.0in) */
+    width:  215mm; /* full: 215.9mm (8.5in) */
+    height: 278mm; /* full: 279.4mm (11.0in) */
 }
 
 /* Default card size */
@@ -48,6 +48,13 @@ page[size="Letter"] {
     height:3.5in;
 }
 
+/* Bridge card size */
+.card-size-225x35 {
+    width:2.25in;
+    min-width:2.25in;
+    height:3.5in;
+}
+
 /* Poker / Magic card size */
 .card-size-25x35 {
     width:2.5in;
@@ -67,4 +74,14 @@ page[size="Letter"] {
     width:7.5in;
     min-width:7.5in;
     height:5.0in;
+}
+
+.page[size="A4"] .card-size-full3x3 {
+    width:69mm;
+    height:98mm;
+}
+
+.page[size="Letter"] .card-size-full3x3 {
+    width:71mm;
+    height:92mm;
 }

generator/generate.html

@@ -82,6 +82,41 @@
                     </div>
                     <span class="help-block">Generated cards open in a new tab or window.</span>
                 </form>
+                <h3>Sizes</h3>
+                <form role="form" class="form-horizontal">
+                    <div class="form-group">
+                        <label for="page-size" class="col-sm-4 control-label">Page</label>
+                        <div class="col-sm-8">
+                            <select class="form-control" id="page-size" data-option="page_size">
+                                <option value="A4" selected>A4</option>
+                                <option value="Letter">US letter</option>
+                            </select>
+                        </div>
+                    </div>
+                    <div class="form-group">
+                        <label for="card-size" class="col-sm-4 control-label">Card</label>
+                        <div class="col-sm-8">
+                            <select class="form-control" id="card-size" data-option="card_size">
+                                <option value="225x35">2.25&quot; x 3.5&quot; (Bridge)</option>
+                                <option value="25x35" selected>2.5&quot; x 3.5&quot; (Poker)</option>
+                                <option value="35x50">3.5&quot; x 5.0&quot;</option>
+                                <option value="75x50">7.5&quot; x 5.0&quot;</option>
+                            </select>
+                        </div>
+                    </div>
+                    <div class="form-group">
+                        <label for="card-size" class="col-sm-4 control-label">Cards/page</label>
+                        <div class="col-sm-3">
+                            <input type="text" id="page-rows" class="form-control" data-option="page_rows" value="3">
+                        </div>
+                        <div class="col-sm-2">
+                            <p class="form-control-static">x</p>
+                        </div>
+                        <div class="col-sm-3">
+                            <input type="text" id="page-columns" class="form-control" data-option="page_columns" value="3">
+                        </div>
+                    </div>
+                </form>
                 <h3>Default values</h3>
                 <form role="form" class="form-horizontal">
                     <div class="form-group">

generator/js/ui.js

@@ -209,6 +209,14 @@ function ui_set_default_color(color) {
     ui_render_selected_card();
 }
 
+function ui_change_option() {
+    var property = $(this).attr("data-option");
+    var value = $(this).val();
+    card_options[property] = value;
+    ui_render_selected_card();
+
+}
+
 function ui_change_card_title() {
     var title = $("#card-title").val();
     var card = ui_selected_card();
@@ -366,6 +374,11 @@ $(document).ready(function () {
     $("#card-color").change(ui_change_card_color);
     $("#card-contents").change(ui_change_card_contents);
 
+    $("#page-size").change(ui_change_option);
+    $("#page-rows").change(ui_change_option);
+    $("#page-columns").change(ui_change_option);
+    $("#card-size").change(ui_change_option);
+
     $("#default-color").change(ui_change_default_color);
     $("#default-icon").change(ui_change_default_icon);
     $("#default-title-size").change(ui_change_default_title_size);