Quellcode durchsuchen

Customizable title size

crobi vor 10 Jahren
Ursprung
Commit
77050db1a1
3 geänderte Dateien mit 28 neuen und 6 gelöschten Zeilen
  1. 17
    2
      generator/css/cards.css
  2. 3
    2
      generator/data/card_data_example.js
  3. 8
    2
      generator/js/cards.js

+ 17
- 2
generator/css/cards.css Datei anzeigen

98
 
98
 
99
 .title {
99
 .title {
100
     height: 8mm;
100
     height: 8mm;
101
-    line-height: 6mm;
102
     padding-left: 2mm;
101
     padding-left: 2mm;
103
     font-family: Lora, 'Calisto MT', 'Bookman Old Style', Bookman, 'Goudy Old Style', Garamond, 'Hoefler Text', 'Bitstream Charter', Georgia, serif;
102
     font-family: Lora, 'Calisto MT', 'Bookman Old Style', Bookman, 'Goudy Old Style', Garamond, 'Hoefler Text', 'Bitstream Charter', Georgia, serif;
104
     font-variant: small-caps;
103
     font-variant: small-caps;
105
     font-weight: bold;
104
     font-weight: bold;
106
-    font-size: 14pt;
107
     background-color: inherit;
105
     background-color: inherit;
108
     color: white;
106
     color: white;
109
 }
107
 }
108
+.title-big {
109
+    font-size: 6mm;
110
+    line-height: 6mm;
111
+}
112
+.title-normal {
113
+    font-size: 5mm;
114
+    line-height: 6mm;
115
+}
116
+.title-small {
117
+    font-size: 4mm;
118
+    line-height: 6.5mm;
119
+}
120
+.title-tiny {
121
+    font-size: 3.5mm;
122
+    line-height: 6.75mm;
123
+}
124
+
110
 .subtitle {
125
 .subtitle {
111
     height: 18px;
126
     height: 18px;
112
     line-height: 18px;
127
     line-height: 18px;

+ 3
- 2
generator/data/card_data_example.js Datei anzeigen

2
     {
2
     {
3
         "count": 1,
3
         "count": 1,
4
         "color": "maroon",
4
         "color": "maroon",
5
-        "title": "Protection from Energy",
5
+        "title": "Burning Hands",
6
         "icon": "custom-spell-1",
6
         "icon": "custom-spell-1",
7
         "icon_back": "custom-class-arcane",
7
         "icon_back": "custom-class-arcane",
8
         "contents": [
8
         "contents": [
76
     {
76
     {
77
         "count": 1,
77
         "count": 1,
78
         "color": "dimgray",
78
         "color": "dimgray",
79
-        "title": "Shortsword",
79
+        "title": "Shortsword of Very Long Names",
80
+        "title_size": "tiny",
80
         "icon": "custom-swords",
81
         "icon": "custom-swords",
81
         "contents": [
82
         "contents": [
82
             "subtitle | Simple melee weapon (10gp)",
83
             "subtitle | Simple melee weapon (10gp)",

+ 8
- 2
generator/js/cards.js Datei anzeigen

5
     return {
5
     return {
6
         default_color: "black",
6
         default_color: "black",
7
         default_icon: "ace",
7
         default_icon: "ace",
8
+        default_title_size: "normal",
8
         page_size: "A4",
9
         page_size: "A4",
9
         page_rows: 3,
10
         page_rows: 3,
10
         page_columns: 3,
11
         page_columns: 3,
32
     return card_data.icon_back || card_data.icon || options.default_icon || "ace";
33
     return card_data.icon_back || card_data.icon || options.default_icon || "ace";
33
 }
34
 }
34
 
35
 
36
+function card_data_split_params(value) {
37
+    return value.split("|").map(function (str) { return str.trim(); });
38
+}
39
+
35
 // ============================================================================
40
 // ============================================================================
36
 // Card element generating functions
41
 // Card element generating functions
37
 // ============================================================================
42
 // ============================================================================
38
 
43
 
39
 function card_element_title(card_data, options) {
44
 function card_element_title(card_data, options) {
40
     var title = card_data.title || "";
45
     var title = card_data.title || "";
41
-    return '<div class="title">' + title + '</div>';
46
+    var title_size = card_data.title_size || options.default_title_size || 'normal';
47
+    return '<div class="title title-' + title_size + '">' + title + '</div>';
42
 }
48
 }
43
 
49
 
44
 function card_element_icon(card_data, options) {
50
 function card_element_icon(card_data, options) {
132
     var result = "";
138
     var result = "";
133
     result += '<div class="content-container">';
139
     result += '<div class="content-container">';
134
     result += contents.map(function (value) {
140
     result += contents.map(function (value) {
135
-        var parts = value.split("|").map(function (str) { return str.trim(); });
141
+        var parts = card_data_split_params(value);
136
         var element_name = parts[0];
142
         var element_name = parts[0];
137
         var element_params = parts.splice(1);
143
         var element_params = parts.splice(1);
138
         var element_generator = card_element_generators[element_name];
144
         var element_generator = card_element_generators[element_name];

Laden…
Abbrechen
Speichern