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.
This commit is contained in:
Krzysztof Płaczek
@@ -3,14 +3,41 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>{% block title %}Welcome!{% endblock %}</title>
|
||||
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 128 128%22><text y=%221.2em%22 font-size=%2296%22>⚫️</text><text y=%221.3em%22 x=%220.2em%22 font-size=%2276%22 fill=%22%23fff%22>sf</text></svg>">
|
||||
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 128 128%22><text y=%221.2em%22 font-size=%2296%22>⚫️</text></svg>">
|
||||
{% block stylesheets %}
|
||||
{% endblock %}
|
||||
|
||||
{% block javascripts %}
|
||||
{% block importmap %}{{ importmap('app') }}{% endblock %}
|
||||
{% endblock %}
|
||||
</head>
|
||||
<body>
|
||||
{% block body %}{% endblock %}
|
||||
<body class="text-white" style="background: radial-gradient(102.21% 102.21% at 50% 28.75%, #00121C 42.62%, #013954 100%);">
|
||||
<div class="flex flex-col justify-between min-h-screen relative">
|
||||
<div>
|
||||
<header class="h-[114px] shrink-0 flex flex-col sm:flex-row items-center sm:justify-between py-4 sm:py-0 px-6 border-b border-white/20 shadow-md">
|
||||
<a href="#">
|
||||
<img class="h-[42px]" src="{{ asset('images/starshop-logo.png') }}" alt="starshop logo">
|
||||
</a>
|
||||
<nav class="flex space-x-4 font-semibold">
|
||||
<a class="hover:text-amber-400 pt-2" href="#">
|
||||
Home
|
||||
</a>
|
||||
<a class="hover:text-amber-400 pt-2" href="#">
|
||||
About
|
||||
</a>
|
||||
<a class="hover:text-amber-400 pt-2" href="#">
|
||||
Contact
|
||||
</a>
|
||||
<a class="rounded-[60px] py-2 px-5 bg-white/10 hover:bg-white/20" href="#">
|
||||
Get Started
|
||||
</a>
|
||||
</nav>
|
||||
</header>
|
||||
{% block body %}{% endblock %}
|
||||
</div>
|
||||
<div class="p-5 bg-white/5 mt-3 text-center">
|
||||
Made with ❤️ by <a class="text-[#0086C4]" href="https://symfonycasts.com">SymfonyCasts</a>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
35
templates/main/_shipStatusAside.html.twig
Normal file
35
templates/main/_shipStatusAside.html.twig
Normal 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>
|
||||
@@ -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 %}
|
||||
|
||||
@@ -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 %}
|
||||
|
||||
Reference in New Issue
Block a user