Release

asset_server_resize/templates/asset_server_resize/index.html

+{% extends "shared/base.html" %}
+
+{% load render_bundle from webpack_loader %}
+
+{% block title %}Generátor škálovaných odkazů na obrázky v Asset Serveru{% endblock %}
+{% block header_name %}Škálované obrázky{% endblock %}
+{% block description %}Vyplněním získáš odkaz na zmenšený obrázek z asset serveru, který se dá použít pro embedování.{% endblock %}
+
+{% block head %}
+    <link
+        rel="stylesheet"
+        href="https://styleguide.pirati.cz/2.12.x/css/styles.css"
+    >
+
+    {% render_bundle "asset_server_resize" %}
+{% endblock %}
+
+{% block content %}
+    <main>
+        <h1 class="text-6xl font-bebas mb-5">Generátor škálovaných odkazů na obrázky v Asset Serveru</h1>
+
+        <div class="grid grid-cols-2 gap-4">
+            <div class="flex flex-col gap-2">
+                <form class="flex flex-col gap-2 mb-4" id="asset-info-form">
+                    <input
+                        id="path"
+                        name="path"
+                        type="text"
+                        pattern="[^ :]+\.(jpg|jpeg|png|webp|gif)"
+                        class="text-input form-field__control"
+                        placeholder="Cesta k souboru"
+                        required
+                    >
+                    <small class="prose text-sm">
+                        <p>
+                            Například <code>/jihomoravsky/img/flags/gb.png</code>, pro soubor
+                            <a href="https://mrak.pirati.cz/f/475789" target="_blank">zde na
+                            Mraku</a>. Cestu najdeš nahoře, vynechej z ní <code>Assets</code>.
+                            Na konec dodej název souboru, na který chceš odkázat.
+                        </p>
+                    </small>
+
+                    <input
+                        id="height"
+                        name="height"
+                        type="number"
+                        class="text-input form-field__control"
+                        placeholder="Výška"
+                    >
+                    <input
+                        id="width"
+                        name="width"
+                        type="number"
+                        class="text-input form-field__control"
+                        placeholder="Šírka"
+                    >
+
+                    <small class="prose text-sm my-2">
+                        <p>
+                            Stačí vyplnit pouze jeden rozměr. Obrázek se mu přizpůsobí.
+                        </p>
+                    </small>
+
+                    <div>
+                        <button
+                            type="submit"
+                            class="btn btn--icon"
+                            id="generate-url"
+                        >
+                            <div class="btn__body-wrap">
+                                <div class="btn__body">Vygenerovat</div>
+                                <div class="btn__icon">
+                                    <i class="ico--chevron-right"></i>
+                                </div>
+                            </div>
+                        </button>
+                    </div>
+                </form>
+
+                <small class="prose text-sm">
+                    <p>
+                        Další informace o Asset serveru najdeš na <a
+                        href="https://wiki.pirati.cz/to/navody/asset-server" target="_blank">
+                        Wiki v návodu</a>.
+                    </p>
+                </small>
+            </div>
+            <div id="result-wrapper" class="flex flex-col gap-2 hidden">
+                <h3 class="head-alt-sm">Vygenerovaný odkaz</h3>
+
+                <a href="" id="result"></a>
+            </div>
+        </div>
+    </main>
+{% endblock %}