Projects/cardmaker
Archived
0
0
Fork 0
Code Issues Pull Requests Releases Activity

Add effects list to cards and a card creator with preview

Browse Source
This commit is contained in:
Peder Bergebakken Sundt
2017-09-24 23:09:58 +02:00
parent 7d7642ead6
commit 8790dd83b2
6 changed files with 119 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/cards/card.css
+21 -5
View File
@@ -6,15 +6,17 @@
size: A4;
margin: 1.2cm;
}
@media print {
body {
width: 21cm;
height: 29.7cm;
}
}
:root {
font-family: sans-serif;
font-size: 3mm;
font-weight: 300;
}
body {
width: 21cm;
height: 29.7cm;
}
article {
margin: 3mm 5mm;
@@ -39,7 +41,15 @@ article {
border-width: 2mm;
border-color: #333;
background-color: #333;
}
article.effects {
grid-template-columns: 4fr 3fr;
grid-template-areas:
"header header"
"figure effects"
"cost cost"
"info info"
"power cp";
}
article >* {
@@ -71,6 +81,12 @@ article figure .material-icons.figure {
color: #999;
}
article ul {
grid-area: effects;
list-style-type: none;
padding: 1mm 0;
}
article main {
padding: 2mm 0;
grid-area: info;
resources/cards/card.vm
+21 -8
View File
@@ -3,7 +3,7 @@
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
#foreach($card in $cards)
<article>
<article #if($card.effects) class="effects"#end>
<h1>
$escape_html($card.title)
</h1>
@@ -11,13 +11,22 @@
<!--https://material.io/icons/-->
<i class="material-icons figure">$escape_html($card.figure)</i>
</figure>
<main>
$escape_html($card.description)
<ol>
#foreach($item in $card.steps)
#if($card.effects)
<ul>
#foreach($item in $card.effects)
<li>$escape_html($item)</li>
#end
</ol>
</ul>
#end
<main>
$escape_html($card.description)
#if($card.steps)
<ol>
#foreach($item in $card.steps)
<li>$escape_html($item)</li>
#end
</ol>
#end
#if($card.flags)
<div class="bottom">
<small>-
@@ -36,7 +45,11 @@
#end
</main>
<div class="cost">$escape_html($card.cost)</div>
<div class="power">$escape_html($card.power)</div>
<div class="cp">$escape_html($card.cp)</div>
#if($card.power)
<div class="power">$escape_html($card.power)</div>
#end
#if($card.power)
<div class="cp">$escape_html($card.cp)</div>
#end
</article>
#end
resources/cards/creator.css
+8
View File
@@ -0,0 +1,8 @@
iframe {
width: 8cm;
height: 12cm;
display: block;
position: absolute;
top: 0;
right: 0;
}
resources/cards/creator.vm
+37
View File
@@ -0,0 +1,37 @@
<!DOCTYPE html>
<link rel="stylesheet" href="creator.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<iframe name="preview"></iframe>
<form action="preview" method="post" target="preview">
Title:
<input type="text" name="title"><br>
Figure:
<input type="text" name="figure"><br>
Description:
<input type="text" name="description"><br>
Steps:
<input type="text" name="steps"><br>
Effects:
<input type="text" name="effects"><br>
Cost:
<input type="text" name="cost"><br>
Power
<input type="text" name="power"><br>
CP:
<input type="text" name="cp"><br>
Flags:
<input type="text" name="flags"><br>
<br>
<input type="submit" value="preview">
</form>