Added support for US-Letter paper size

Aressel · Oct 20, 2014 · 8bcd6f3 · 8bcd6f3
1 parent 77050db
commit 8bcd6f3
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 11 deletions.
diff --git a/generator/css/cards.css b/generator/css/cards.css
@@ -4,9 +4,6 @@
 }
 
 .card {
-    width:66mm;
-    min-width:66mm;
-    height:95mm;
     border: 2mm solid;
     border-radius: 4px;
     position: relative;
@@ -16,6 +13,18 @@
     font-size: 8pt;
 }
 
+.card-A4 {
+    width:66mm;
+    min-width:66mm;
+    height:95mm;
+}
+
+.card-US-Letter {
+    width:66mm;
+    min-width:66mm;
+    height:89mm;
+}
+
 .content-container {
     padding:2mm;
     padding-top:1mm;

diff --git a/generator/css/page.css b/generator/css/page.css
@@ -18,8 +18,24 @@ page[size="A4"] {
     page-break-after: always;
 }
 
+page[size="US-Letter"] {
+    background: white;
+    width: 216mm;
+    height: 279mm;
+    display: block;
+    margin: 0 auto;
+    margin-bottom: 16px;
+    box-shadow: 0 0 8px rgba(0,0,0,0.5);
+    display: flex;
+    align-content: center;
+    justify-content: center;
+    flex-direction: row;
+    flex-wrap: wrap;
+    page-break-after: always;
+}
+
 @media print {
-  body, page[size="A4"] {
+  body, page[size="A4"], page[size="US-Letter"] {
     margin: 0;
     box-shadow: 0;
     background-color: white;

diff --git a/generator/js/cards.js b/generator/js/cards.js
@@ -174,7 +174,7 @@ function card_generate_front(data, options) {
     var count = data.count || 1;
 
     var result = "";
-    result += '<div class="card" ' + style_color + '>';
+    result += '<div class="card card-' + options.page_size + '" ' + style_color + '>';
     result += card_element_icon(data, options);
     result += card_element_title(data, options);
     result += card_generate_contents(data.contents, data, options);
@@ -191,7 +191,7 @@ function card_generate_back(data, options) {
     var count = data.count || 1;
 
     var result = "";
-    result += '<div class="card" ' + style_color + '>';
+    result += '<div class="card card-' + options.page_size + '" ' + style_color + '>';
     result += '  <div class="card-back" ' + style_gradient + '>';
     result += '    <div class="card-back-inner">';
     result += '      <div class="back-icon icon-' + icon + '" ' + style_color + '></div>';
@@ -206,7 +206,7 @@ function card_generate_empty(count, options) {
     var style_color = card_generate_color_style("white");
 
     var result = "";
-    result += '<div class="card" ' + style_color + '>';
+    result += '<div class="card card-' + options.page_size + '" ' + style_color + '>';
     result += '</div>';
 
     return card_repeat(result, count);
@@ -246,11 +246,11 @@ function cards_pages_flip_left_right(cards, rows, cols) {
     return result;
 }
 
-function card_pages_add_padding(cards, rows, cols) {
+function card_pages_add_padding(cards, rows, cols, options) {
     var cards_per_page = rows * cols;
     var last_page_cards = cards.length % cards_per_page;
     if (last_page_cards !== 0) {
-        return cards.concat(card_generate_empty(cards_per_page - last_page_cards));
+        return cards.concat(card_generate_empty(cards_per_page - last_page_cards, options));
     } else {
         return cards;
     }
@@ -282,8 +282,8 @@ function card_pages_generate_html(card_data, options) {
     });
 
     // Add padding cards so that the last page is full of cards
-    front_cards = card_pages_add_padding(front_cards, rows, cols);
-    back_cards = card_pages_add_padding(back_cards, rows, cols);
+    front_cards = card_pages_add_padding(front_cards, rows, cols, options);
+    back_cards = card_pages_add_padding(back_cards, rows, cols, options);
 
     // Split cards to pages
     var front_pages = card_pages_split(front_cards, rows, cols);