Support any amount of figures, with arbitrary positioning/size/colours/sources

This commit is contained in:
2018-01-01 13:15:15 +01:00
parent c61f845741
commit 458652bcae
6 changed files with 226 additions and 57 deletions
+47 -31
View File
@@ -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>