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

35
templates/main/_shipStatusAside.html.twig Normal file
View File

@@ -0,0 +1,35 @@
<aside
class="pb-8 lg:pb-0 lg:w-[411px] shrink-0 lg:block lg:min-h-screen text-white transition-all overflow-hidden px-8 border-b lg:border-b-0 lg:border-r border-white/20"
>
<div class="flex justify-between mt-11 mb-7">
<h2 class="text-[32px] font-semibold">My Ship Status</h2>
<button>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 448 512"><!--!Font Awesome Pro 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.--><path fill="#fff" d="M384 96c0-17.7 14.3-32 32-32s32 14.3 32 32V416c0 17.7-14.3 32-32 32s-32-14.3-32-32V96zM9.4 278.6c-12.5-12.5-12.5-32.8 0-45.3l128-128c12.5-12.5 32.8-12.5 45.3 0s12.5 32.8 0 45.3L109.3 224 288 224c17.7 0 32 14.3 32 32s-14.3 32-32 32l-178.7 0 73.4 73.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0l-128-128z"/></svg>
</button>
</div>
<div>
<div class="flex flex-col space-y-1.5">
<div class="rounded-2xl py-1 px-3 flex justify-center w-32 items-center" style="background: rgba(255, 184, 0, .1);">
<div class="rounded-full h-2 w-2 bg-amber-400 blur-[1px] mr-2"></div>
<p class="uppercase text-xs">in progress</p>
</div>
<h3 class="tracking-tight text-[22px] font-semibold">
<a class="hover:underline" href="{{ path('app_starship_show', {
id: myShip.id
}) }}">{{ myShip.name }}</a>
</h3>
</div>
<div class="flex mt-4">
<div class="border-r border-white/20 pr-8">
<p class="text-slate-400 text-xs">Captain</p>
<p class="text-xl">{{ myShip.captain }}</p>
</div>
<div class="pl-8">
<p class="text-slate-400 text-xs">Class</p>
<p class="text-xl">{{ myShip.class }}</p>
</div>
</div>
</div>
</aside>

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 %}