Support any amount of figures, with arbitrary positioning/size/colours/sources
This commit is contained in:
@@ -111,12 +111,8 @@ article figure >* {
|
||||
color: var(--color-figure);
|
||||
position: absolute;
|
||||
top:0;right:0;left:0;bottom:0;
|
||||
}
|
||||
article figure img {
|
||||
padding: 1mm 0;
|
||||
display: block;
|
||||
height: calc(100% - 2mm);
|
||||
margin: auto auto;
|
||||
height:100%;
|
||||
}
|
||||
article figure img.svg_filter{
|
||||
/*causes DPI issues when printing*/
|
||||
|
||||
+37
-19
@@ -5,29 +5,47 @@
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
|
||||
#macro(figure $card)
|
||||
#if($card.figure.__contains__(","))
|
||||
#figure_embed($card.figure.split(",").get(1).strip(), $card.figure_source, "111")
|
||||
#figure_embed($card.figure.split(",").get(0).strip(), $card.figure_source, "aaa")
|
||||
#else
|
||||
#figure_embed($card.figure, $card.figure_source, "aaa")
|
||||
#foreach($figure in $card.figure_parsed)
|
||||
#figure_embed($figure)
|
||||
#end
|
||||
#end
|
||||
#macro(figure_embed $figure $source $color)
|
||||
#if($source == "material-icons")
|
||||
<!--https://material.io/icons/-->
|
||||
<i class="material-icons figure">$escape_html($label)</i>
|
||||
#elseif($source == "mdi")
|
||||
<!--https://materialdesignicons.com/-->
|
||||
<i class="mdi mdi-$escape_html($figure)"></i>
|
||||
#elseif($source == "fa")
|
||||
<!--http://fontawesome.io/icons/-->
|
||||
<i class="fa fa-$escape_html($figure)"></i>
|
||||
#elseif($source == "svg")
|
||||
<!--/cards/svg-->
|
||||
<!--<img class="svg_filter" src="/svg/${escape_html($figure)}.svg">-->
|
||||
<img src="/svg/${escape_html($figure)}.svg?color=$color">
|
||||
#macro(figure_embed $fig)
|
||||
#if($fig.source == "material-icons")
|
||||
<!--https://material.io/icons/-->
|
||||
<i class="material-icons figure" #figure_style($fig)>$escape_html($label)</i>
|
||||
#elseif($fig.source == "mdi")
|
||||
<!--https://materialdesignicons.com/-->
|
||||
<i class="mdi mdi-$escape_html($fig.filename)" #figure_style($fig)></i>
|
||||
#elseif($fig.source == "fa")
|
||||
<!--http://fontawesome.io/icons/-->
|
||||
<i class="fa fa-$escape_html($fig.filename)" #figure_style($fig)></i>
|
||||
#elseif($fig.source == "svg")
|
||||
<!--/cards/svg-->
|
||||
<!--<img class="svg_filter" src="/svg/${escape_html($figure)}.svg">-->
|
||||
#set($color = "")
|
||||
#if($fig.color)
|
||||
#set($color = "?color=${fig.color}")
|
||||
#end
|
||||
<img src="/svg/${escape_html($fig.filename)}.svg$color" #figure_style($fig)>
|
||||
#end
|
||||
#end
|
||||
#macro(figure_style $fig)
|
||||
style="
|
||||
#if($fig.source == "svg") ## Unsupported with other sources due to being fonts, not images **
|
||||
#if($fig.autoscale)
|
||||
top:${fig.top}px;
|
||||
right:${fig.right}px;
|
||||
bottom:${fig.bottom}px;
|
||||
left:${fig.left}px;
|
||||
height:calc(100% - ${fig.size}px);
|
||||
#else
|
||||
top:calc(${fig.top}px - ${fig.bottom}px);
|
||||
left:calc(${fig.left}px - ${fig.right}px);
|
||||
height:${fig.scale}%;
|
||||
#end
|
||||
#end
|
||||
transform:rotate(${fig.rotate}deg)"
|
||||
#end
|
||||
#macro(specialFlags $card)
|
||||
#if($card.has_flag("mastery"))
|
||||
<big>
|
||||
|
||||
@@ -41,3 +41,37 @@ ul li input[type=text][name=tag],
|
||||
ul li input[type=text][name=filename] {
|
||||
width: 3.8cm;
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
float:right;
|
||||
}
|
||||
|
||||
.tooltiptext {
|
||||
visibility: hidden;
|
||||
width: 160px;
|
||||
background-color: #292A30;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
padding: 5px 0;
|
||||
border-radius: 6px;
|
||||
font-size: 0.6em;
|
||||
font-family:sans-serif;
|
||||
font-style:normal;
|
||||
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.tooltip .tooltiptext {
|
||||
top: -5px;
|
||||
left: 150%;
|
||||
}
|
||||
|
||||
.tooltip:hover .tooltiptext {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
|
||||
+47
-31
@@ -1,6 +1,7 @@
|
||||
<!DOCTYPE html>
|
||||
<link rel="stylesheet" href="creator.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">
|
||||
<script src="creator.js"></script>
|
||||
|
||||
#macro(update_preview)onkeyup="submit_preview(this.form)" onchange="submit_preview(this.form)"#end
|
||||
@@ -19,37 +20,52 @@
|
||||
<input type="text" name="title" value="$escape_html($card.title)" #update_preview()>
|
||||
</li>
|
||||
<li>
|
||||
Figure:<br>
|
||||
<input type="text" name="figure" value="$escape_html($card.figure)" #update_preview()><br>
|
||||
|
||||
Source:
|
||||
#if($card.figure_source=="material-icons")
|
||||
<input checked type="radio" name="figure_source" value="material-icons" #update_preview()>
|
||||
#else
|
||||
<input type="radio" name="figure_source" value="material-icons" #update_preview()>
|
||||
#end
|
||||
<a href="https://material.io/icons/">material-icons</a>
|
||||
|
||||
#if($card.figure_source=="mdi")
|
||||
<input checked type="radio" name="figure_source" value="mdi" #update_preview()>
|
||||
#else
|
||||
<input type="radio" name="figure_source" value="mdi" #update_preview()>
|
||||
#end
|
||||
<a href="https://materialdesignicons.com/">mdi</a>
|
||||
|
||||
#if($card.figure_source=="fa")
|
||||
<input checked type="radio" name="figure_source" value="fa" #update_preview()>
|
||||
#else
|
||||
<input type="radio" name="figure_source" value="fa" #update_preview()>
|
||||
#end
|
||||
<a href="http://fontawesome.io/icons/">fa</a>
|
||||
|
||||
#if($card.figure_source=="svg")
|
||||
<input checked type="radio" name="figure_source" value="svg" #update_preview()>
|
||||
#else
|
||||
<input type="radio" name="figure_source" value="svg" #update_preview()>
|
||||
#end
|
||||
<a href="svg">svg</a>
|
||||
Figures:
|
||||
<i class="tooltip mdi mdi-help-circle">
|
||||
<div class="tooltiptext">
|
||||
figure, attribute:value, ...
|
||||
<br><br><big>Possible attributes:</big>
|
||||
<br>Top, left, bottom, right: x px
|
||||
<br>Colour: xxxxxxxx
|
||||
<br>Rotation: x deg
|
||||
<br>Scale: x % <small>(Leave blank for auto)</small>
|
||||
<br>Source: svg, mdi...
|
||||
<br><br><small>NOTE: svg source required for attributes other than rotation!</small>
|
||||
|
||||
</div>
|
||||
</i>
|
||||
<textarea name="figure" rows="5" #update_preview()>$escape_html($card.figure, False)</textarea>
|
||||
|
||||
<small>
|
||||
Default Source:
|
||||
#if($card.figure_source=="material-icons")
|
||||
<input checked type="radio" name="figure_source" value="material-icons" #update_preview()>
|
||||
#else
|
||||
<input type="radio" name="figure_source" value="material-icons" #update_preview()>
|
||||
#end
|
||||
<a href="https://material.io/icons/">material-icons</a>
|
||||
|
||||
#if($card.figure_source=="mdi")
|
||||
<input checked type="radio" name="figure_source" value="mdi" #update_preview()>
|
||||
#else
|
||||
<input type="radio" name="figure_source" value="mdi" #update_preview()>
|
||||
#end
|
||||
<a href="https://materialdesignicons.com/">mdi</a>
|
||||
|
||||
#if($card.figure_source=="fa")
|
||||
<input checked type="radio" name="figure_source" value="fa" #update_preview()>
|
||||
#else
|
||||
<input type="radio" name="figure_source" value="fa" #update_preview()>
|
||||
#end
|
||||
<a href="http://fontawesome.io/icons/">fa</a>
|
||||
|
||||
#if($card.figure_source=="svg")
|
||||
<input checked type="radio" name="figure_source" value="svg" #update_preview()>
|
||||
#else
|
||||
<input type="radio" name="figure_source" value="svg" #update_preview()>
|
||||
#end
|
||||
<a href="svg">svg</a>
|
||||
</small>
|
||||
</li>
|
||||
<li>
|
||||
Description:<br>
|
||||
|
||||
Reference in New Issue
Block a user