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

54
templates/main/homepage.html.twig
View File

@@ -1,9 +1,53 @@
{% extends "base.html.twig" %}
{% extends 'base.html.twig' %}
{% block title %}Starshop: Beam up some parts!{% endblock %}
{% block body %}
{{ variable }}
<main class="flex flex-col lg:flex-row">
{{ include('main/_shipStatusAside.html.twig') }}
<a href="{{ path('app_starship_show', {'id' : 1}) }}">Ship 01</a>
<a href="{{ path('app_starship_show', {'id' : 2}) }}">Ship 02</a>
<a href="{{ path('app_starship_show', {'id' : 3}) }}">Ship 03 (not found)</a>
<div class="px-12 pt-10 w-full">
<h1 class="text-4xl font-semibold mb-8">
Ship Repair Queue
</h1>
<div class="space-y-5">
<!-- start ship item -->
<div class="bg-[#16202A] rounded-2xl pl-5 py-5 pr-11 flex flex-col min-[1174px]:flex-row min-[1174px]:justify-between">
<div class="flex justify-center min-[1174px]:justify-start">
<img class="h-[83px] w-[84px]" src="/images/status-in-progress.png" alt="Status: in progress">
<div class="ml-5">
<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 text-nowrap">in progress</p>
</div>
<h4 class="text-[22px] pt-1 font-semibold">
<a
class="hover:text-slate-200"
href="#"
>USS LeafyCruiser</a>
</h4>
</div>
</div>
<div class="flex justify-center min-[1174px]:justify-start mt-2 min-[1174px]:mt-0 shrink-0">
<div class="border-r border-white/20 pr-8">
<p class="text-slate-400 text-xs">Captain</p>
<p class="text-xl">Jean-Luc Pickles</p>
</div>
<div class="pl-8 w-[100px]">
<p class="text-slate-400 text-xs">Class</p>
<p class="text-xl">Garden</p>
</div>
</div>
</div>
<!-- end ship item -->
</div>
<p class="text-lg mt-5 text-center md:text-left">
Looking for your next galactic ride?
<a href="#" class="underline font-semibold">Browse the {{ ships|length * 10 }} starships for sale!</a>
</p>
</div>
</main>
{% endblock %}