81 lines
5.5 KiB
Twig
81 lines
5.5 KiB
Twig
{% extends 'base.html.twig' %}
|
|
{% block body %}
|
|
<div class="container w-full ml-60 p-4">
|
|
<form>
|
|
<div class="form-group">
|
|
|
|
<div class="relative h-10 w-72 min-w-[200px]">
|
|
<label for="manga-select"></label>
|
|
<select id="manga-select"
|
|
class="peer h-full w-full rounded-[7px] border border-blue-gray-200 border-t-transparent
|
|
bg-transparent px-3 py-2.5 font-sans text-sm font-normal text-blue-gray-700 outline
|
|
outline-0 transition-all placeholder-shown:border placeholder-shown:border-blue-gray-200
|
|
placeholder-shown:border-t-blue-gray-200 empty:!bg-gray-900 focus:border-2
|
|
focus:border-gray-900 focus:border-t-transparent focus:outline-0 disabled:border-0
|
|
disabled:bg-blue-gray-50">
|
|
{% for manga in availableManga %}
|
|
<option
|
|
value="{{ path('manga_show', { 'mangaSlug': manga.slug }) }}">{{ manga.name }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
<label
|
|
class="before:content[' '] after:content[' '] pointer-events-none absolute left-0 -top-1.5 flex
|
|
h-full w-full select-none text-[11px] font-normal leading-tight text-blue-gray-400
|
|
transition-all before:pointer-events-none before:mt-[6.5px] before:mr-1 before:box-border
|
|
before:block before:h-1.5 before:w-2.5 before:rounded-tl-md before:border-t before:border-l
|
|
before:border-blue-gray-200 before:transition-all after:pointer-events-none after:mt-[6.5px]
|
|
after:ml-1 after:box-border after:block after:h-1.5 after:w-2.5 after:flex-grow
|
|
after:rounded-tr-md after:border-t after:border-r after:border-blue-gray-200
|
|
after:transition-all peer-placeholder-shown:text-sm peer-placeholder-shown:leading-[3.75]
|
|
peer-placeholder-shown:text-blue-gray-500 peer-placeholder-shown:before:border-transparent
|
|
peer-placeholder-shown:after:border-transparent peer-focus:text-[11px] peer-focus:leading-tight
|
|
peer-focus:text-gray-900 peer-focus:before:border-t-2 peer-focus:before:border-l-2
|
|
peer-focus:before:border-gray-900 peer-focus:after:border-t-2 peer-focus:after:border-r-2
|
|
peer-focus:after:border-gray-900 peer-disabled:text-transparent
|
|
peer-disabled:before:border-transparent peer-disabled:after:border-transparent
|
|
peer-disabled:peer-placeholder-shown:text-blue-gray-500">
|
|
Select a Manga
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="container w-full p-4">
|
|
<form>
|
|
<div class="relative w-full min-w-[200px] h-10">
|
|
<input
|
|
class="peer w-full h-full bg-transparent text-blue-gray-700 font-sans font-normal outline outline-0
|
|
focus:outline-0 disabled:bg-blue-gray-50 disabled:border-0 transition-all placeholder-shown:border
|
|
placeholder-shown:border-blue-gray-200 placeholder-shown:border-t-blue-gray-200 border focus:border-2
|
|
border-t-transparent focus:border-t-transparent text-sm px-3 py-2.5 rounded-[7px] border-blue-gray-200
|
|
focus:border-gray-900" placeholder=" "/>
|
|
<label class="flex w-full h-full select-none pointer-events-none absolute left-0 font-normal
|
|
!overflow-visible truncate peer-placeholder-shown:text-blue-gray-500 leading-tight
|
|
peer-focus:leading-tight peer-disabled:text-transparent peer-disabled:peer-placeholder-shown:text-blue-gray-500
|
|
transition-all -top-1.5 peer-placeholder-shown:text-sm text-[11px] peer-focus:text-[11px]
|
|
before:content[' '] before:block before:box-border before:w-2.5 before:h-1.5
|
|
before:mt-[6.5px] before:mr-1 peer-placeholder-shown:before:border-transparent before:rounded-tl-md
|
|
before:border-t peer-focus:before:border-t-2 before:border-l peer-focus:before:border-l-2
|
|
before:pointer-events-none before:transition-all peer-disabled:before:border-transparent after:content[' ']
|
|
after:block after:flex-grow after:box-border after:w-2.5 after:h-1.5 after:mt-[6.5px] after:ml-1
|
|
peer-placeholder-shown:after:border-transparent after:rounded-tr-md after:border-t peer-focus:after:border-t-2
|
|
after:border-r peer-focus:after:border-r-2 after:pointer-events-none after:transition-all peer-disabled:after:border-transparent
|
|
peer-placeholder-shown:leading-[3.75] text-gray-500 peer-focus:text-gray-900 before:border-blue-gray-200
|
|
peer-focus:before:!border-gray-900 after:border-blue-gray-200 peer-focus:after:!border-gray-900">
|
|
Manga
|
|
</label>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block javascripts %}
|
|
<script>
|
|
const mangaSelect = document.getElementById('manga-select');
|
|
mangaSelect.addEventListener('change', () => {
|
|
const selectedUrl = mangaSelect.options[mangaSelect.selectedIndex].value;
|
|
window.open(selectedUrl, '_top');
|
|
});
|
|
</script>
|
|
{% endblock %}
|