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

31
src/pages/illustrations.html
View File

@@ -14,11 +14,12 @@ illustrations = illustrations | push: illustration %} {% endif %} {% endfor %} {
<div class="card">
<div class="card-body d-flex align-items-center">
<div id="current-illustration">{{ first_illustration }}</div>
<!-- <pre><code id="current-illustration-code">{{ first_illustration | escape | trim }}</code></pre> -->
</div>
</div>
</div>
<div class="col-md-5">
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-body">
<div>
@@ -46,11 +47,16 @@ illustrations = illustrations | push: illustration %} {% endif %} {% endfor %} {
{% endfor %}
</div>
<div class="form-label mt-4">Select illustration</div>
<div class="row g-2">
<div class="form-label mt-4">Select SVG illustration</div>
<div class="row">
{% for illustration in illustrations %}
<div class="col-3 col-md-6">
<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>
<div class="col-3">
<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>
@@ -61,6 +67,8 @@ illustrations = illustrations | push: illustration %} {% endif %} {% endfor %} {
</div>
</div>
</div>
</div>
</div>
</div>
<h2 class="page-title my-5">
@@ -126,18 +134,13 @@ illustrations = illustrations | push: illustration %} {% endif %} {% endfor %} {
currentIllustration = document.getElementById("current-illustration"),
currentIllustrationCode = document.getElementById("current-illustration-code");
selectIllustrations.forEach((elem) => {
elem.addEventListener("click", (e) => {
document.querySelectorAll(".js-select-illustration").forEach(f => f.classList.remove('bg-body'))
elem.classList.add('bg-body')
const selectedId = elem.getAttribute('data-id'),
document.querySelectorAll(".js-select-illustration").forEach((elem) => {
elem.addEventListener("change", (e) => {
const selectedId = e.target.value,
selectedIllustration = illustrations[selectedId]
currentIllustration.innerHTML = selectedIllustration.svg
if(currentIllustrationCode) {
currentIllustrationCode.innerHTML = selectedIllustration.svg.replace(/</g, "&lt;").replace(/>/g, "&gt;")
}
})
})