krzysiej/symfony-learning
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add symfony/asset-mapper and symfony/asset packages. Using asset twig function to load image from asset directory. Installed tailwind package. Added configuration to .symfony.local.yaml to handle building tailwind automagicly.

Browse Source
This commit is contained in:
Krzysztof Płaczek
2024-10-18 16:02:08 +02:00
parent fd96b128d0
commit 08d6ed936b
23 changed files with 763 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
templates/starship/show.html.twig
View File

@@ -3,18 +3,37 @@
{% block title %}{{ ship.name }}{% endblock %}
{% block body %}
<h1>{{ ship.name }}</h1>
<div class="my-4 px-8">
<a class="bg-white hover:bg-gray-200 rounded-xl p-2 text-black" href="#">
<svg class="inline text-black" xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="#000" d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.2 288 416 288c17.7 0 32-14.3 32-32s-14.3-32-32-32l-306.7 0L214.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z"/></svg>
Back
</a>
</div>
<div class="md:flex justify-center space-x-3 mt-5 px-4 lg:px-8">
<div class="flex justify-center">
<img class="max-h-[300px] md:max-h-[500px]" src="{{ asset('images/purple-rocket.png') }}" alt="purple ship launching">
</div>
<div class="space-y-5">
<div class="mt-8 max-w-xl mx-auto">
<div class="px-8 pt-8">
<div class="rounded-2xl py-1 px-3 flex justify-center w-32 items-center bg-amber-400/10">
<div class="rounded-full h-2 w-2 bg-amber-400 blur-[1px] mr-2"></div>
<p class="uppercase text-xs">{{ ship.status }}</p>
</div>
<table>
<tbody>
<tr>
<th>Class</th>
<td>{{ ship.class }}</td>
</tr>
<tr>
<th>Captain</th>
<td>{{ ship.captain }}</td>
</tr>
</tbody>
</table>
{% endblock %}
<h1 class="text-[32px] font-semibold border-b border-white/10 pb-5 mb-5">
{{ ship.name }}
</h1>
<h4 class="text-xs text-slate-300 font-semibold mt-2 uppercase">Spaceship Captain</h4>
<p class="text-[22px] font-semibold">{{ ship.captain }}</p>
<h4 class="text-xs text-slate-300 font-semibold mt-2 uppercase">Class</h4>
<p class="text-[22px] font-semibold">{{ ship.class }}</p>
<h4 class="text-xs text-slate-300 font-semibold mt-2 uppercase">Ship Status</h4>
<p class="text-[22px] font-semibold">30,000 lys to next service</p>
</div>
</div>
</div>
</div>
{% endblock %}