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

Expand on the card model

Browse Source
This commit is contained in:
Peder Bergebakken Sundt
2017-10-15 11:43:18 +02:00
parent 1d41e9884a
commit e45da6436f
3 changed files with 173 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/cards/card.css
+32 -13
View File
@@ -22,11 +22,11 @@ article {
margin: 3mm 5mm;
display: block;
float: left;
width: 5.5cm;
width: 5.6cm;
height: 8.9cm;
display: grid;
grid-template-columns: 2fr 1fr;
grid-template-columns: 5fr 2fr;
grid-template-rows: 2em 18mm 1.3em auto 1.5em;
grid-template-areas:
"header header"
@@ -36,11 +36,12 @@ article {
"power cp";
border-radius: 2mm;
grid-gap: 2mm 2mm;
grid-gap: 1.5mm 1.5mm;
border-style: solid;
border-width: 2mm;
border-color: #333;
background-color: #333;
cursor: pointer;
}
article.effects {
grid-template-columns: 4fr 3fr;
@@ -57,28 +58,40 @@ article >* {
text-align: center;
line-height: 1.4em;
padding: 0 1mm;
border-radius: 1mm;
}
article h1 {
grid-area: header;
font-size: 1em;
padding: 1mm 0;
font-size: 1.1em;
font-size: 1.2em;
line-height: 1.1em;
font-weight: 600;
}
article figure {
grid-area: figure;
background: #333;
background: none;
overflow: hidden;
}
article figure img{
height: 100%;
width: auto;
article figure * {
color: #999;
}
article figure img{
display: block;
height: 97%;
margin: auto auto;
}
article figure img.svg{
filter: invert(1) opacity(0.6);
}
article figure .mdi,
article figure .fa,
article figure .material-icons.figure {
font-size: 1.7cm;
color: #999;
line-height: 1.7cm;
}
article ul {
@@ -88,14 +101,14 @@ article ul {
}
article main {
padding: 2mm 0;
padding: 2mm 1mm;
grid-area: info;
position: relative;
}
article main ol {
margin-top: 1mm;
text-align: left;
padding-left: 6mm;
padding-left: 5mm;
}
article main ol li + li{
margin-top: 0.5mm;
@@ -107,6 +120,7 @@ article main .bottom {
width: 100%;
position: absolute;
bottom: 2mm;
left: 0;
}
article .power {
@@ -120,7 +134,8 @@ article .power:before{
article .cost {
grid-area: cost;
}
article .cp {
article .cp,
article .gp {
grid-area: cp;
text-align: right;
}
@@ -128,3 +143,7 @@ article .cp:after{
content: " CP";
font-size: 0.7em;
}
article .gp:after{
content: " Gold";
font-size: 0.6em;
}
resources/cards/card.vm
+72 -40
View File
@@ -1,55 +1,87 @@
<!DOCTYPE html>
<link rel="stylesheet" href="card.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://cdn.materialdesignicons.com/2.0.46/css/materialdesignicons.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
#foreach($card in $cards)
<article #if($card.effects) class="effects"#end>
<h1>
$escape_html($card.title)
</h1>
<figure>
<article #if($card.effects) class="effects"#end onclick="location.href='creator?filename=$escape_html($card.filename)'">
<h1>
$escape_html($card.title)
</h1>
<figure>
#if($card.figure_source == "material-icons")
<!--https://material.io/icons/-->
<i class="material-icons figure">$escape_html($card.figure)</i>
</figure>
#if($card.effects)
<ul>
#foreach($item in $card.effects)
#elseif($card.figure_source == "mdi")
<!--https://materialdesignicons.com/-->
<i class="mdi mdi-$escape_html($card.figure)"></i>
#elseif($card.figure_source == "fa")
<!--http://fontawesome.io/icons/-->
<i class="fa fa-$escape_html($card.figure)"></i>
#elseif($card.figure_source == "svg")
<!--/cards/svg-->
<img class="svg" src="/svg/${escape_html($card.figure)}.svg">
#end
</figure>
#if($card.effects)
<ul>
#foreach($item in $card.effects)
#if($item)
<li>$escape_html($item)</li>
#end
</ul>
#end
<main>
$escape_html($card.description)
#if($card.steps)
<ol>
#foreach($item in $card.steps)
#end
</ul>
#end
<main>
$escape_html($card.description)
#if($card.steps)
<ol>
#foreach($item in $card.steps)
#if($item)
<li>$escape_html($item)</li>
#end
</ol>
#end
#if($card.flags)
<div class="bottom">
<small>-
#foreach($flag in $card.flags)
$escape_html($flag.capitalize()) -
#end
</ol>
#end
#if($card.flags)
<div class="bottom">
<small>
-
#foreach($flag in $card.flags)
#if(!$flag && $foreach.hasNext)
- <br> -
#else
$escape_html($flag.capitalize())#if($foreach.hasNext), #end
#end
</small>
<br>
#if($card.has_flag("mastery"))
<big>
&#x274F; &#x274F; &#x274F; &#x274F; &#x274F;
&#x274F; &#x274F; &#x274F; &#x274F; &#x274F;
</big>
#end
</div>
#end
</main>
<div class="cost">$escape_html($card.cost)</div>
#if($card.power)
<div class="power">$escape_html($card.power)</div>
-
</small>
<br>
#if($card.has_flag("mastery"))
<big>
&#x274F; &#x274F; &#x274F; &#x274F; &#x274F;
&#x274F; &#x274F; &#x274F; &#x274F; &#x274F;
</big>
#end
</div>
#end
#if($card.power)
<div class="cp">$escape_html($card.cp)</div>
#end
</article>
</main>
<div class="cost">$escape_html($card.cost)</div>
#if($card.power)
<div class="power">$escape_html($card.power)</div>
#end
#if($card.cp)
<div class="cp">$escape_html($card.cp)</div>
#elseif($card.gp)
<div class="gp">$escape_html($card.gp)</div>
#end
</article>
#end
#if($was_saved)
<center style="position: absolute; bottom:0; width: 100%;">The card has been saved</center>
#end
#if($was_deleted)
<center style="position: absolute; bottom:0; width: 100%;">The card has been removed from storage</center>
#end