Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2025-12-22 01:44:25 +04:00
Code Issues Projects Releases Wiki Activity

fixes

Browse Source
This commit is contained in:
codecalm
2024-06-16 23:18:50 +02:00
parent 915546cd4a
commit f13d8093c0
1 changed files with 44 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
src/pages/illustrations.html
View File

@@ -14,45 +14,53 @@ illustrations = illustrations | push: illustration %} {% endif %} {% endfor %} {
<div class="card"> <div class="card">
<div class="card-body d-flex align-items-center"> <div class="card-body d-flex align-items-center">
<div id="current-illustration">{{ first_illustration }}</div> <div id="current-illustration">{{ first_illustration }}</div>
<!-- <pre><code id="current-illustration-code">{{ first_illustration | escape | trim }}</code></pre> -->
</div> </div>
</div> </div>
</div> </div>
<div class="col-md-5"> <div class="col-md-5">
<div class="card"> <div class="row">
<div class="card-body"> <div class="col-12">
<div> <div class="card">
<div class="form-label">Primary color</div> <div class="card-body">
<div class="row g-2"> <div>
{% for color in site.colors %} <div class="form-label">Primary color</div>
<div class="col-auto"> <div class="row g-2">
<label class="form-colorinput"> {% for color in site.colors %}
<input name="color" type="radio" value="{{ color[1].hex }}" class="form-colorinput-input js-select-color" {% if forloop.first %} checked{% endif %} /> <div class="col-auto">
<span class="form-colorinput-color bg-{{ color[1].class }}"></span> <label class="form-colorinput">
</label> <input name="color" type="radio" value="{{ color[1].hex }}" class="form-colorinput-input js-select-color" {% if forloop.first %} checked{% endif %} />
</div> <span class="form-colorinput-color bg-{{ color[1].class }}"></span>
{% endfor %} </label>
</div> </div>
{% endfor %}
</div>
<div class="form-label mt-4">Skin color</div> <div class="form-label mt-4">Skin color</div>
<div class="row g-2"> <div class="row g-2">
{% for color in site.skin-colors %} {% for color in site.skin-colors %}
<div class="col-auto"> <div class="col-auto">
<label class="form-colorinput"> <label class="form-colorinput">
<input name="skin-color" type="radio" value="{{ color[1].hex }}" class="form-colorinput-input js-select-skin-color" {% if forloop.first %} checked{% endif %} /> <input name="skin-color" type="radio" value="{{ color[1].hex }}" class="form-colorinput-input js-select-skin-color" {% if forloop.first %} checked{% endif %} />
<span class="form-colorinput-color" style="background-color: {{ color[1].hex }}"></span> <span class="form-colorinput-color" style="background-color: {{ color[1].hex }}"></span>
</label> </label>
</div> </div>
{% endfor %} {% endfor %}
</div> </div>
<div class="form-label mt-4">Select illustration</div> <div class="form-label mt-4">Select SVG illustration</div>
<div class="row g-2"> <div class="row">
{% for illustration in illustrations %} {% for illustration in illustrations %}
<div class="col-3 col-md-6"> <div class="col-3">
<a class="d-block cursor-pointer rounded{% if forloop.first %} bg-body{% endif %} js-select-illustration" data-id="{{ illustration.slug }}"> {{ illustration | replace: '<svg ', '<svg class="w-100 h-auto" ' }} </a> <label class="form-imagecheck mb-2">
<input name="form-imagecheck" type="radio" value="{{ illustration.slug }}" class="form-imagecheck-input js-select-illustration" {% if forloop.first %} checked{% endif %}>
<span class="form-imagecheck-figure">
{{ illustration }}
</span>
</label>
</div>
{% endfor %}
</div>
</div> </div>
{% endfor %}
</div> </div>
</div> </div>
</div> </div>
@@ -126,18 +134,13 @@ illustrations = illustrations | push: illustration %} {% endif %} {% endfor %} {
currentIllustration = document.getElementById("current-illustration"), currentIllustration = document.getElementById("current-illustration"),
currentIllustrationCode = document.getElementById("current-illustration-code"); currentIllustrationCode = document.getElementById("current-illustration-code");
selectIllustrations.forEach((elem) => { document.querySelectorAll(".js-select-illustration").forEach((elem) => {
elem.addEventListener("click", (e) => { elem.addEventListener("change", (e) => {
document.querySelectorAll(".js-select-illustration").forEach(f => f.classList.remove('bg-body')) const selectedId = e.target.value,
elem.classList.add('bg-body')
const selectedId = elem.getAttribute('data-id'),
selectedIllustration = illustrations[selectedId] selectedIllustration = illustrations[selectedId]
currentIllustration.innerHTML = selectedIllustration.svg currentIllustration.innerHTML = selectedIllustration.svg
if(currentIllustrationCode) {
currentIllustrationCode.innerHTML = selectedIllustration.svg.replace(/</g, "&lt;").replace(/>/g, "&gt;")
}
}) })
}) })