[] base template
This commit is contained in:
@@ -5,12 +5,19 @@
|
||||
<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>">
|
||||
{% block stylesheets %}
|
||||
<link rel="stylesheet" href="{{ asset('styles/app.css') }}">
|
||||
{% endblock %}
|
||||
|
||||
{% block javascripts %}
|
||||
{% block importmap %}{{ importmap('app') }}{% endblock %}
|
||||
{% endblock %}
|
||||
</head>
|
||||
<body>
|
||||
{% block body %}{% endblock %}
|
||||
<body class="bg-neutral-700 flex flex-col">
|
||||
<twig:Header />
|
||||
|
||||
<div class="flex flex-row w-full">
|
||||
<twig:NavBar />
|
||||
{% block body %}{% endblock %}
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
13
templates/components/Card.html.twig
Normal file
13
templates/components/Card.html.twig
Normal file
@@ -0,0 +1,13 @@
|
||||
<div{{ attributes }}>
|
||||
<div class="flex flex-col bg-white border border-gray-200 border-t-4 border-t-orange-500 shadow-2xs rounded-xl dark:bg-slate-600 dark:border-neutral-700 dark:border-t-orange-500 dark:shadow-neutral-700/70">
|
||||
<div class="p-4 md:p-5">
|
||||
<h3 class="mb-1 text-lg font-bold text-gray-800 dark:text-white">
|
||||
{{ title }}
|
||||
</h3>
|
||||
|
||||
<div class="{{ contentClass|default('flex flex-col overflow-hidden rounded-md') }}">
|
||||
{% block content %}{% endblock %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
15
templates/components/Header.html.twig
Normal file
15
templates/components/Header.html.twig
Normal file
@@ -0,0 +1,15 @@
|
||||
<header {{ attributes }} class="bg-cyan-950">
|
||||
<div class="px-4 sm:px-6 lg:px-8">
|
||||
<div class="h-16 flex flex-row items-center justify-between">
|
||||
<h1 class="text-3xl font-extrabold text-orange-500">Torsearch</h1>
|
||||
<twig:SearchBar />
|
||||
<div class="md:flex md:items-center md:gap-12">
|
||||
<nav aria-label="Global" class="md:block">
|
||||
<ul class="flex items-center gap-6 text-sm">
|
||||
<twig:ux:icon name="fluent:alert-12-regular" width="30px" class="text-gray-950 bg-orange-500 rounded-full p-2"/>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
88
templates/components/NavBar.html.twig
Normal file
88
templates/components/NavBar.html.twig
Normal file
@@ -0,0 +1,88 @@
|
||||
<nav {{ attributes }} class="flex w-64 h-screen flex-col justify-between bg-cyan-950">
|
||||
<div class="px-4 py-6">
|
||||
<ul class="mt-6 space-y-1">
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="block rounded-lg
|
||||
bg-orange-500 hover:bg-opacity-80 bg-clip-padding backdrop-filter backdrop-blur-md bg-opacity-60
|
||||
px-4 py-2 text-sm font-medium text-gray-50"
|
||||
>
|
||||
Dashboard
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<details class="group [&_summary::-webkit-details-marker]:hidden">
|
||||
<summary
|
||||
class="flex cursor-pointer items-center justify-between rounded-lg px-4 py-2 text-gray-50 hover:bg-orange-500 hover:bg-opacity-80 bg-clip-padding backdrop-filter backdrop-blur-md bg-opacity-60"
|
||||
>
|
||||
<span class="text-sm font-medium"> Downloads </span>
|
||||
|
||||
<span class="shrink-0 transition duration-300 group-open:-rotate-180">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="size-5"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</summary>
|
||||
|
||||
<ul class="mt-2 space-y-1 px-4">
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="block rounded-lg px-4 py-2 text-sm font-medium text-gray-50 hover:bg-gray-100 hover:text-stone-700"
|
||||
>
|
||||
In Progress
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="block rounded-lg px-4 py-2 text-sm font-medium text-gray-50 hover:bg-gray-100 hover:text-stone-700"
|
||||
>
|
||||
Complete
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</details>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="block rounded-lg px-4 py-2 text-sm font-medium text-gray-50 hover:bg-gray-100 hover:text-stone-700"
|
||||
>
|
||||
Preferences
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="sticky inset-x-0 bottom-0 border-t border-gray-100">
|
||||
<a href="#" class="flex items-center gap-2 bg-white p-4 hover:bg-gray-50">
|
||||
<img
|
||||
alt=""
|
||||
src="https://images.unsplash.com/photo-1600486913747-55e5470d6f40?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80"
|
||||
class="size-10 rounded-full object-cover"
|
||||
/>
|
||||
|
||||
<div>
|
||||
<p class="text-xs">
|
||||
<strong class="block font-medium">Eric Frusciante</strong>
|
||||
|
||||
<span> eric@frusciante.com </span>
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
4
templates/components/Poster.html.twig
Normal file
4
templates/components/Poster.html.twig
Normal file
@@ -0,0 +1,4 @@
|
||||
<div{{ attributes }}>
|
||||
<img src="{{ image }}" class="w-40 rounded-md" />
|
||||
<h3 class="text-center text-gray-50 text-extrabold">{{ title }}</h3>
|
||||
</div>
|
||||
18
templates/components/SearchBar.html.twig
Normal file
18
templates/components/SearchBar.html.twig
Normal file
@@ -0,0 +1,18 @@
|
||||
<div {{ attributes }} class="w-full max-w-sm min-w-[200px]">
|
||||
<div class="relative">
|
||||
<input
|
||||
class="w-full bg-orange-500 rounded-md bg-clip-padding backdrop-filter
|
||||
backdrop-blur-md bg-opacity-40 placeholder:text-slate-200 text-gray-50
|
||||
text-sm border border-orange-500 rounded-md pl-3 pr-28 py-2 transition
|
||||
duration-300 ease focus:outline-none focus:border-orange-400 hover:border-orange-300
|
||||
shadow-sm focus:shadow"
|
||||
placeholder="TV Show, Movie..."
|
||||
/>
|
||||
<button
|
||||
class="absolute top-1 right-1 flex items-center rounded bg-green-600 py-1 px-2.5 border border-transparent text-center text-sm text-white transition-all shadow-sm hover:shadow focus:bg-green-700 focus:shadow-none active:bg-green-700 hover:bg-green-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
|
||||
type="button"
|
||||
>
|
||||
Search
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,20 +1,122 @@
|
||||
{% extends 'base.html.twig' %}
|
||||
|
||||
{% block title %}Hello IndexController!{% endblock %}
|
||||
{% block title %}Dashboard &mdash - Torsearch{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
<style>
|
||||
.example-wrapper { margin: 1em auto; max-width: 800px; width: 95%; font: 18px/1.5 sans-serif; }
|
||||
.example-wrapper code { background: #F5F5F5; padding: 2px 6px; }
|
||||
</style>
|
||||
<div class="p-4 flex flex-col grow gap-2">
|
||||
<h2 class="mb-2 text-3xl font-bold text-gray-50">Dashboard</h2>
|
||||
<div class="flex flex-row gap-2">
|
||||
<twig:Card title="Active Downloads" class="w-full">
|
||||
<table class="divide-y divide-gray-200 dark:divide-gray-50 dark:bg-gray-50">
|
||||
<thead>
|
||||
<tr class="dark:bg-gray-50">
|
||||
<th scope="col"
|
||||
class="px-6 py-3 text-start text-xs font-medium text-stone-500 uppercase dark:text-stone-800">
|
||||
Title
|
||||
</th>
|
||||
<th scope="col"
|
||||
class="px-6 py-3 text-start text-xs font-medium text-gray-500 uppercase dark:text-stone-800">
|
||||
Progress
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-gray-200 dark:divide-gray-50">
|
||||
<tr>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-stone-800">
|
||||
The Wolf of Wallstreet
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-end text-gray-800 dark:text-gray-50">
|
||||
<span class="p-1.5 bg-purple-600 rounded-full">
|
||||
<span class="text-gray-50">11</span>
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<div class="example-wrapper">
|
||||
<h1>Hello {{ controller_name }}! ✅</h1>
|
||||
<tr>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-stone-800">
|
||||
Inception
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-end text-gray-800 dark:text-gray-50">
|
||||
<span class="p-1.5 bg-purple-600 rounded-full">
|
||||
<span class="text-gray-50">36</span>
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
This friendly message is coming from:
|
||||
<ul>
|
||||
<li>Your controller at <code>/Users/brockcaldwell/Repositories/templates/symfony/src/Controller/IndexController.php</code></li>
|
||||
<li>Your template at <code>/Users/brockcaldwell/Repositories/templates/symfony/templates/index/index.html.twig</code></li>
|
||||
</ul>
|
||||
</div>
|
||||
<tr>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-stone-800">
|
||||
Hop
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-end text-gray-800 dark:text-gray-50">
|
||||
<span class="p-1.5 bg-purple-600 rounded-full">
|
||||
<span class="text-gray-50">0</span>
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</twig:Card>
|
||||
|
||||
<twig:Card title="Recent Downloads" class="w-full">
|
||||
<table class="divide-y divide-gray-200 dark:divide-gray-50 dark:bg-gray-50">
|
||||
<thead>
|
||||
<tr class="dark:bg-gray-50">
|
||||
<th scope="col"
|
||||
class="px-6 py-3 text-start text-xs font-medium text-stone-500 uppercase dark:text-stone-800 rounded-tl-md">
|
||||
Title
|
||||
</th>
|
||||
<th scope="col"
|
||||
class="px-6 py-3 text-start text-xs font-medium text-end text-gray-500 uppercase dark:text-stone-800">
|
||||
Status
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-gray-200 dark:divide-gray-50">
|
||||
<tr>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-stone-800">
|
||||
The Family Plan
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-end text-gray-800 dark:text-gray-50">
|
||||
<span class="p-1 bg-green-600 rounded-lg">
|
||||
<span class="text-gray-50">Complete</span>
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-stone-800">
|
||||
It
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-end text-gray-800 dark:text-gray-50">
|
||||
<span class="p-1 bg-green-600 rounded-lg">
|
||||
<span class="text-gray-50">Complete</span>
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-stone-800">
|
||||
Silicon Cowboys
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-end text-gray-800 dark:text-gray-50">
|
||||
<span class="p-1 bg-green-600 rounded-lg">
|
||||
<span class="text-gray-50">Complete</span>
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</twig:Card>
|
||||
</div>
|
||||
<div class="">
|
||||
<twig:Card title="Popular Movies" contentClass="flex flex-row justify-between w-full">
|
||||
<twig:Poster imdbId="" title="A Working Man" description="" image="https://image.tmdb.org/t/p/w500/xUkUZ8eOnrOnnJAfusZUqKYZiDu.jpg" year="" />
|
||||
<twig:Poster imdbId="" title="In the Lost Lands" description="" image="https://image.tmdb.org/t/p/w500/iHf6bXPghWB6gT8kFkL1zo00x6X.jpg" year="" />
|
||||
<twig:Poster imdbId="" title="A Minecraft Movie" description="" image="https://image.tmdb.org/t/p/w500/yFHHfHcUgGAxziP1C3lLt0q2T4s.jpg" year="" />
|
||||
<twig:Poster imdbId="" title="G20" description="" image="https://image.tmdb.org/t/p/w500/wv6oWAleCJZUk5htrGg413t3GCy.jpg" year="" />
|
||||
<twig:Poster imdbId="" title="Novocaine" description="" image="https://image.tmdb.org/t/p/w500/xmMHGz9dVRaMY6rRAlEX4W0Wdhm.jpg" year="" />
|
||||
<twig:Poster imdbId="" title="Gunslingers" description="" image="https://image.tmdb.org/t/p/w500/O7REXWPANWXvX2jhQydHjAq2DV.jpg" year="" />
|
||||
</twig:Card>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user