okos
/
rpg-cards
关注 1
点赞 0
派生 0
代码 工单 0 合并请求 0 版本发布 0 百科 动态
浏览代码

Card size options

crobi 11 年前
父节点
a966fd8d1e
当前提交
e58c269a92
共有 7 个文件被更改，包括 110 次插入 和 66 次删除
合并视图 显示文件统计
  1. 70
    0
      generator/css/card-size.css
  2. 1
    3
      generator/css/cards.css
  3. 24
    0
      generator/css/output.css
  4. 0
    51
      generator/css/page.css
  5. 2
    1
      generator/generate.html
  6. 10
    9
      generator/js/cards.js
  7. 3
    2
      generator/output.html

+ 70
- 0
generator/css/card-size.css 查看文件

1 
+/*
2 
+    Full page printing CSS
3 
+    ======================
4 
+
5 
+    Since we want precisely specify the card sizes, we must not allow the user to scale the content to fit a sheet of paper.
6 
+    We must also make sure the browser does not add randomly sized margins to the page.
7 
+
8 
+    Instead, we use absolute sizes for all content, such that it fills a sheet of paper:
9 
+    1) Remove all page margins (using the @page CSS rule). The borders of the document will be outside of the printable area,
10 
+       however, we will cluster all content around the center, so that we won't crop anything.
11 
+    2) Fill the document with <page> elements which have an absolute size equal to the full area of the paper.
12 
+    3) Fill each page with cards, arranged around the center of the page.
13 
+*/
14 
+
15 
+/* Remove page margins */
16 
+@page {
17 
+    margin: 0;
18 
+    padding: 0;
19 
+}
20 
+
21 
+/* Center all content within a page */
22 
+.page {
23 
+    display: flex;
24 
+    align-content: center;
25 
+    justify-content: center;
26 
+    flex-direction: row;
27 
+    flex-wrap: wrap;
28 
+    page-break-after: always;
29 
+    padding: 0mm;
30 
+}
31 
+
32 
+/* A4 paper area (minus epsilon for rounding) */
33 
+page[size="A4"] {
34 
+    width:  209.5mm; /* full: 210.0mm */
35 
+    height: 296.5mm; /* full: 297.0mm */
36 
+}
37 
+
38 
+/* US letter area (minus epsilon for rounding) */
39 
+page[size="Letter"] {
40 
+    width:  215.4mm; /* full: 215.9mm (8.5in) */
41 
+    height: 278.9mm; /* full: 279.4mm (11.0in) */
42 
+}
43 
+
44 
+/* Default card size */
45 
+.card {
46 
+    width:2.5in;
47 
+    min-width:2.5in;
48 
+    height:3.5in;
49 
+}
50 
+
51 
+/* Poker / Magic card size */
52 
+.card-size-25x35 {
53 
+    width:2.5in;
54 
+    min-width:2.5in;
55 
+    height:3.5in;
56 
+}
57 
+
58 
+/* Poker / Magic card size */
59 
+.card-size-35x50 {
60 
+    width:3.5in;
61 
+    min-width:3.5in;
62 
+    height:5.0in;
63 
+}
64 
+
65 
+/* Landscape big card */
66 
+.card-size-75x50 {
67 
+    width:7.5in;
68 
+    min-width:7.5in;
69 
+    height:5.0in;
70 
+}

+ 1
- 3
generator/css/cards.css 查看文件

1 
 .card {
 1 
 .card {
2 
-    width:66mm;
3 
-    min-width:66mm;
4 
-    height:95mm;
5 
     border: 2mm solid;
 2 
     border: 2mm solid;
6 
     border-radius: 4px;
 3 
     border-radius: 4px;
4 
+    box-sizing: border-box;
7 
     position: relative;
 5 
     position: relative;
8 
     display: flex;
 6 
     display: flex;
9 
     flex-direction: column;
 7 
     flex-direction: column;

+ 24
- 0
generator/css/output.css 查看文件

1 
+.page-background {
2 
+  background: rgb(204,204,204);
3 
+}
4 
+
5 
+.page-preview {
6 
+    background: white;
7 
+    margin: 0 auto;
8 
+    margin-bottom: 16px;
9 
+    box-shadow: 0 0 8px rgba(0,0,0,0.5);
10 
+}
11 
+
12 
+@media print {
13 
+  .page-preview {
14 
+    margin: 0;
15 
+    box-shadow: 0;
16 
+    background-color: white;
17 
+  }
18 
+  .page-background {
19 
+    margin: 0;
20 
+    box-shadow: 0;
21 
+    /* Set the background to gray to visualize the page size in the print preview */
22 
+    background-color: gray;
23 
+  }
24 
+}

+ 0
- 51
generator/css/page.css 查看文件

1 
-body {
2 
-  background: rgb(204,204,204);
3 
-}
4 
-
5 
-page[size="A4"] {
6 
-    background: white;
7 
-    width: 210mm;
8 
-    height: 297mm;
9 
-    display: block;
10 
-    margin: 0 auto;
11 
-    margin-bottom: 16px;
12 
-    box-shadow: 0 0 8px rgba(0,0,0,0.5);
13 
-    display: flex;
14 
-    align-content: center;
15 
-    justify-content: center;
16 
-    flex-direction: row;
17 
-    flex-wrap: wrap;
18 
-    page-break-after: always;
19 
-}
20 
-
21 
-#output-frame {
22 
-    border: 0;
23 
-    width: 100%;
24 
-}
25 
-
26 
-@media print {
27 
-  body, page[size="A4"] {
28 
-    margin: 0;
29 
-    box-shadow: 0;
30 
-    background-color: white;
31 
-  }
32 
-  #input-container {
33 
-      display: none;
34 
-  }
35 
-  #output-container {
36 
-      margin: 0;
37 
-      padding: 0;
38 
-  }
39 
-}
40 
-
41 
-.input-button {
42 
-    display:block;
43 
-    height: 40px;
44 
-    font-size: 24px;
45 
-    width: 100%;
46 
-    margin-bottom: 10px;
47 
-}
48 
-
49 
-.input-data {
50 
-    width: 100%;
51 
-}

+ 2
- 1
generator/generate.html 查看文件

1 
-<!DOCTYPE html>
1 
+<!DOCTYPE html>
2 
 <html lang="en">
 2 
 <html lang="en">
3 
 <head>
 3 
 <head>
4 
     <title>RPG cards</title>
 4 
     <title>RPG cards</title>
24 
     <!-- CSS -->
 24 
     <!-- CSS -->
25 
     <link href="css/ui.css" rel="stylesheet" />
 25 
     <link href="css/ui.css" rel="stylesheet" />
26 
     <link href="css/cards.css" rel="stylesheet" />
 26 
     <link href="css/cards.css" rel="stylesheet" />
27 
+    <link href="css/card-size.css" rel="stylesheet" />
27 
     <link href="css/icons.css" rel="stylesheet" />
 28 
     <link href="css/icons.css" rel="stylesheet" />
28 
     <link href="css/custom-icons.css" rel="stylesheet" />
 29 
     <link href="css/custom-icons.css" rel="stylesheet" />
29 
     <!-- Fonts -->
 30 
     <!-- Fonts -->

+ 10
- 9
generator/js/cards.js 查看文件

9 
         page_size: "A4",
 9 
         page_size: "A4",
10 
         page_rows: 3,
 10 
         page_rows: 3,
11 
         page_columns: 3,
 11 
         page_columns: 3,
12 
+        card_size: "25x35",
12 
         icon_inline: true
 13 
         icon_inline: true
13 
     }
 14 
     }
14 
 }
 15 
 }
191 
     var style_color = card_generate_color_style(color, options);
 192 
     var style_color = card_generate_color_style(color, options);
192
193
193 
     var result = "";
 194 
     var result = "";
194 
-    result += '<div class="card" ' + style_color + '>';
195 
+    result += '<div class="card card-size-' + options.card_size + '" ' + style_color + '>';
195 
     result += card_element_icon(data, options);
 196 
     result += card_element_icon(data, options);
196 
     result += card_element_title(data, options);
 197 
     result += card_element_title(data, options);
197 
     result += card_generate_contents(data.contents, data, options);
 198 
     result += card_generate_contents(data.contents, data, options);
207 
     var icon = card_data_icon_back(data, options);
 208 
     var icon = card_data_icon_back(data, options);
208
209
209 
     var result = "";
 210 
     var result = "";
210 
-    result += '<div class="card" ' + style_color + '>';
211 
+    result += '<div class="card card-size-' + options.card_size + '" ' + style_color + '>';
211 
     result += '  <div class="card-back" ' + style_gradient + '>';
 212 
     result += '  <div class="card-back" ' + style_gradient + '>';
212 
     result += '    <div class="card-back-inner">';
 213 
     result += '    <div class="card-back-inner">';
213 
     result += '      <div class="card-back-icon icon-' + icon + '" ' + style_color + '></div>';
 214 
     result += '      <div class="card-back-icon icon-' + icon + '" ' + style_color + '></div>';
222 
     var style_color = card_generate_color_style("white");
 223 
     var style_color = card_generate_color_style("white");
223
224
224 
     var result = "";
 225 
     var result = "";
225 
-    result += '<div class="card" ' + style_color + '>';
226 
+    result += '<div class="card card-size-' + options.card_size + '" ' + style_color + '>';
226 
     result += '</div>';
 227 
     result += '</div>';
227
228
228 
     return card_repeat(result, count);
 229 
     return card_repeat(result, count);
262 
     return result;
 263 
     return result;
263 
 }
 264 
 }
264
265
265 
-function card_pages_add_padding(cards, rows, cols) {
266 
-    var cards_per_page = rows * cols;
266 
+function card_pages_add_padding(cards, options) {
267 
+    var cards_per_page = options.page_rows * options.page_columns;
267 
     var last_page_cards = cards.length % cards_per_page;
 268 
     var last_page_cards = cards.length % cards_per_page;
268 
     if (last_page_cards !== 0) {
 269 
     if (last_page_cards !== 0) {
269 
-        return cards.concat(card_generate_empty(cards_per_page - last_page_cards));
270 
+        return cards.concat(card_generate_empty(cards_per_page - last_page_cards, options));
270 
     } else {
 271 
     } else {
271 
         return cards;
 272 
         return cards;
272 
     }
 273 
     }
277
278
278 
     var result = "";
 279 
     var result = "";
279 
     for (var i = 0; i < pages.length; ++i) {
 280 
     for (var i = 0; i < pages.length; ++i) {
280 
-        result += '<page size="' + size + '">\n';
281 
+        result += '<page class="page page-preview" size="' + size + '">\n';
281 
         result += pages[i].join("\n");
 282 
         result += pages[i].join("\n");
282 
         result += '</page>\n';
 283 
         result += '</page>\n';
283 
     }
 284 
     }
301 
     });
 302 
     });
302
303
303 
     // Add padding cards so that the last page is full of cards
 304 
     // Add padding cards so that the last page is full of cards
304 
-    front_cards = card_pages_add_padding(front_cards, rows, cols);
305 
-    back_cards = card_pages_add_padding(back_cards, rows, cols);
305 
+    front_cards = card_pages_add_padding(front_cards, options);
306 
+    back_cards = card_pages_add_padding(back_cards, options);
306
307
307 
     // Split cards to pages
 308 
     // Split cards to pages
308 
     var front_pages = card_pages_split(front_cards, rows, cols);
 309 
     var front_pages = card_pages_split(front_cards, rows, cols);

+ 3
- 2
generator/output.html 查看文件

5 
     <!-- Javascript -->
 5 
     <!-- Javascript -->
6 
     <script type="text/javascript" src="js/output.js"></script>
 6 
     <script type="text/javascript" src="js/output.js"></script>
7 
     <!-- CSS -->
 7 
     <!-- CSS -->
8 
-    <link rel=" stylesheet" type="text/css" href="css/page.css">
8 
+    <link rel=" stylesheet" type="text/css" href="css/output.css">
9 
     <link rel="stylesheet" type="text/css" href="css/cards.css">
 9 
     <link rel="stylesheet" type="text/css" href="css/cards.css">
10 
+    <link rel="stylesheet" type="text/css" href="css/card-size.css">
10 
     <link rel="stylesheet" type="text/css" href="css/icons.css">
 11 
     <link rel="stylesheet" type="text/css" href="css/icons.css">
11 
     <link rel="stylesheet" type="text/css" href="css/custom-icons.css">
 12 
     <link rel="stylesheet" type="text/css" href="css/custom-icons.css">
12 
     <!-- Fonts -->
 13 
     <!-- Fonts -->
13 
     <link href='https://fonts.googleapis.com/css?family=Noto+Sans:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
 14 
     <link href='https://fonts.googleapis.com/css?family=Noto+Sans:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
14 
     <link href='https://fonts.googleapis.com/css?family=Lora:700' rel='stylesheet' type='text/css'>
 15 
     <link href='https://fonts.googleapis.com/css?family=Lora:700' rel='stylesheet' type='text/css'>
15 
 </head>
 16 
 </head>
16 
-<body>
17 
+<body class="page-background">
17 
 </body>
 18 
 </body>
18 
 </html>
 19 
 </html>

撰写 预览
正在加载...
取消
保存