Improve user interface (#1)

* style(login): improve styling of login form * style(header): Add navigation items in the middle of the header * Update blog post template with new layout and styles * Integrate Symfonycasts Tailwind bundle
AchillesKal · Mar 28, 2024 · b859a5f · b859a5f
1 parent d977958
commit b859a5f
Show file tree

Hide file tree

Showing 8 changed files with 181 additions and 116 deletions.
diff --git a/composer.json b/composer.json
@@ -37,6 +37,7 @@
         "symfony/ux-dropzone": "^2.16",
         "symfony/validator": "7.0.*",
         "symfony/yaml": "7.0.*",
+        "symfonycasts/tailwind-bundle": "^0.5.1",
         "twig/extra-bundle": "^2.12|^3.0",
         "twig/twig": "^2.12|^3.0"
     },

diff --git a/composer.lock b/composer.lock
diff --git a/config/bundles.php b/config/bundles.php
@@ -17,4 +17,5 @@
     Symfony\UX\StimulusBundle\StimulusBundle::class => ['all' => true],
     Symfony\UX\Dropzone\DropzoneBundle::class => ['all' => true],
     Symfony\Bundle\SecurityBundle\SecurityBundle::class => ['all' => true],
+    Symfonycasts\TailwindBundle\SymfonycastsTailwindBundle::class => ['all' => true],
 ];
diff --git a/symfony.lock b/symfony.lock
@@ -272,6 +272,9 @@
             "config/routes/web_profiler.yaml"
         ]
     },
+    "symfonycasts/tailwind-bundle": {
+        "version": "v0.5.1"
+    },
     "twig/extra-bundle": {
         "version": "v3.8.0"
     },

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -7,6 +7,6 @@ module.exports = {
   theme: {
     extend: {},
   },
-  plugins: [],
+  plugins: [require('@tailwindcss/container-queries')],
 }
 
diff --git a/templates/base.html.twig b/templates/base.html.twig
@@ -6,37 +6,55 @@
         <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.tailwind.css') }}">
+            {{ encore_entry_link_tags('app') }}
         {% endblock %}
 
         {% block javascripts %}
             {% block importmap %}{{ importmap('app') }}{% endblock %}
         {% endblock %}
     </head>
     <body class="bg-gray-100 text-gray-800">
-        <header class="bg-white shadow">
-            <nav class="container mx-auto px-6 py-3">
-                <div class="flex justify-between items-center">
-                    <a href="{{ path('app_blog_post_index') }}" class="text-xl font-bold text-gray-800">Symfony Blog</a>
-                    <div class="flex space-x-4">
+        <header class="bg-white border-black border-b-2">
+            <nav class="max-w-screen-xl mx-auto px-8">
+                <div class="flex justify-between items-center h-14">
+                    <a href="{{ path('app_blog_post_index') }}" class="text-xl font-bold text-gray-800">
+                        <div class="flex items-center px-3 py-1 *:font-bold justify-center border border-black">Blog.</div>
+                    </a>
+                    <div class="flex space-x-8 *:font-bold *:text-sm hidden lg:block">
                         <a href="{{ path('app_blog_post_index') }}" class="text-gray-800 hover:text-gray-600">Home</a>
-                        <a href="{{ path('app_about') }}" class="text-gray-800 hover:text-gray-600">About</a>
-                        {% if app.user %}
-                            <a href="{{ path('app_logout') }}">Logout</a>
-                        {% else %}
-                            <a href="{{ path('app_login') }}" class="text-gray-800 hover:text-gray-600">Login</a>
-                        {% endif %}
+                        <a href="{{ path('app_about') }}" class="text-gray-800 hover:text-gray-600">Travel</a>
+                        <a href="{{ path('app_about') }}" class="text-gray-800 hover:text-gray-600">Deals</a>
+                        <a href="{{ path('app_about') }}" class="text-gray-800 hover:text-gray-600">Entertainment</a>
+                        <a href="{{ path('app_about') }}" class="text-gray-800 hover:text-gray-600">Science</a>
+                        <a href="{{ path('app_about') }}" class="text-gray-800 hover:text-gray-600">Tech</a>
+                        <a href="{{ path('app_about') }}" class="text-gray-800 hover:text-gray-600">Shopping</a>
                     </div>
+                    {% if app.user %}
+                        <a href="{{ path('app_logout') }}" class="flex gap-2 items-center">
+                            <span>Logout</span>
+                            <svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 -960 960 960" width="20">
+                                <path d="M212.309-140.001q-30.308 0-51.308-21t-21-51.308v-535.382q0-30.308 21-51.308t51.308-21h238.076q12.769 0 21.384 8.616 8.616 8.615 8.616 21.384t-8.616 21.384Q463.154-760 450.385-760H212.309q-4.616 0-8.463 3.846-3.846 3.847-3.846 8.463v535.382q0 4.616 3.846 8.463 3.847 3.846 8.463 3.846h238.076q12.769 0 21.384 8.615 8.616 8.615 8.616 21.384t-8.616 21.384q-8.615 8.616-21.384 8.616H212.309Zm492.385-310H393.846q-12.769 0-21.384-8.615-8.616-8.615-8.616-21.384t8.616-21.384q8.615-8.615 21.384-8.615h310.848l-76.924-76.923q-8.307-8.308-8.499-20.269-.193-11.961 8.499-21.269 8.693-9.307 21.077-9.615 12.384-.308 21.692 9l123.767 123.768q10.846 10.846 10.846 25.307 0 14.461-10.846 25.307L670.539-330.925q-8.923 8.923-21.192 8.808-12.269-.116-21.577-9.423-8.692-9.308-8.384-21.384.308-12.077 9-20.769l76.308-76.308Z"/>
+                            </svg>
+                        </a>
+                    {% else %}
+                        <a href="{{ path('app_login') }}" class="flex gap-1.5 items-center text-gray-800">
+                            <span>Login</span>
+                            <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
+                                <path d="M517.847-480 354.924-642.924q-8.308-8.307-8.5-20.884-.193-12.576 8.5-21.268 8.692-8.693 21.076-8.693t21.076 8.693l179.769 179.769q5.616 5.615 7.923 11.846 2.308 6.23 2.308 13.461t-2.308 13.461q-2.307 6.231-7.923 11.846L397.076-274.924q-8.307 8.308-20.884 8.5-12.576.193-21.268-8.5-8.693-8.692-8.693-21.076t8.693-21.076L517.847-480Z"/>
+                            </svg>
+                        </a>
+                    {% endif %}
                 </div>
             </nav>
         </header>
 
-        <main class="container mx-auto px-6 py-8">
+        <main class="max-w-screen-2xl mx-auto px-4">
             {% block body %}{% endblock %}
         </main>
+
         <footer class="bg-white shadow mt-8">
             <div class="container mx-auto px-6 py-4">
-                <p class="text-gray-700 text-center">Simple Blog © 2024. All rights reserved.</p>
+                <span class="text-gray-800 text-center">&copy; {{ 'now'|date('Y') }} Blog • All rights reserved</span>
             </div>
         </footer>
     </body>

diff --git a/templates/blog_post/index.html.twig b/templates/blog_post/index.html.twig
@@ -1,80 +1,66 @@
-
-
 {% extends 'base.html.twig' %}
 
-{% block title %}BlogPost index{% endblock %}
+{% block title %}Blog - Home{% endblock %}
 
 {% block body %}
 
     {% if is_granted('IS_AUTHENTICATED_FULLY') %}
-        <section class="actions flex flex-row-reverse mb-2">
-            <a href="{{ path('app_blog_post_new') }}" class="bg-blue-500 text-white font-bold py-2 px-4 rounded hover:bg-blue-700 transition duration-300 ease-in-out">Create new</a>
-        </section>
+        <div class="flex justify-end pt-4">
+            <a href="{{ path('app_blog_post_new') }}">
+                <svg xmlns="http://www.w3.org/2000/svg" height="44" viewBox="0 -960 960 960" width="44">
+                    <path d="M460-460v140q0 8.5 5.758 14.25 5.757 5.75 14.269 5.75t14.242-5.75Q500-311.5 500-320v-140h140q8.5 0 14.25-5.758 5.75-5.757 5.75-14.269t-5.75-14.242Q648.5-500 640-500H500v-140q0-8.5-5.758-14.25-5.757-5.75-14.269-5.75t-14.242 5.75Q460-648.5 460-640v140H320q-8.5 0-14.25 5.758-5.75 5.757-5.75 14.269t5.75 14.242Q311.5-460 320-460h140Zm20.134 340q-74.673 0-140.41-28.339-65.737-28.34-114.365-76.922-48.627-48.582-76.993-114.257Q120-405.194 120-479.866q0-74.673 28.339-140.41 28.34-65.737 76.922-114.365 48.582-48.627 114.257-76.993Q405.194-840 479.866-840q74.673 0 140.41 28.339 65.737 28.34 114.365 76.922 48.627 48.582 76.993 114.257Q840-554.806 840-480.134q0 74.673-28.339 140.41-28.34 65.737-76.922 114.365-48.582 48.627-114.257 76.993Q554.806-120 480.134-120ZM480-160q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/>
+                </svg>
+            </a>
+        </div>
     {% endif %}
 
-    {% set isFirstItem = true %}
-    <div class="grid grid-cols-1 md:grid-cols-2 gap-8 relative">
-        {% for blog_post in pager %}
-            {% if isFirstItem %}
-                <article class="md:col-span-2 relative overflow-hidden rounded-3xl z-40 h-[35rem] md:h-[50vh]">
-                    {% set isFirstItem = false %}
-                    {% if blog_post.banner %}
-                        <div class="absolute inset-0">
-                            <img src="{{ asset(uploaded_asset(blog_post.banner)) }}" alt="{{ blog_post.title }}" class="w-full h-full object-cover">
-                            <div class="absolute inset-0 w-full h-full overflow-hidden bg-gradient-to-t from-black/80 via-transparent to-transparent"></div>
-                        </div>
-                    {% endif %}
-
-                    <div class="relative px-6 py-10 h-full flex flex-col align-items-end justify-end items-baseline">
-                        <a href="{{ path('app_blog_post_show', {'slug': blog_post.slug}) }}" class="text-white">
-                            <h2 class="text-6xl font-bold mb-8">{{ blog_post.title }}</h2>
-                        </a>
-                        {% if is_granted('IS_AUTHENTICATED_FULLY') %}
-                            <a href="{{ path('app_blog_post_edit', {'id': blog_post.id}) }}" class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center">
-                                Edit
-                            </a>
-                        {% endif %}
-                        <p class="text-xl max-w-4xl leading-relaxed text-white">
-                            {{ blog_post.content|slice(0, 300) ~ '...' }}
-                        </p>
-                    </div>
-                </article>
-            {% else %}
-                <article class="bg-white px-6 py-10 rounded-3xl">
-                    <div class="flex justify-between gap-4">
-                        <a href="{{ path('app_blog_post_show', {'slug': blog_post.slug}) }}">
-                            <h2 class="text-4xl font-bold mb-8">{{ blog_post.title }}</h2>
-                        </a>
-                        {% if is_granted('IS_AUTHENTICATED_FULLY') %}
-                            <a href="{{ path('app_blog_post_edit', {'id': blog_post.id}) }}" class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center">
-                                Edit
-                            </a>
-                        {% endif %}
+    <article class="mt-12">
+        <div class="grid grid-flow-dense xl:grid-cols-3 xl:gap-16 gap-10">
+            {% for blog_post in pager %}
+                <div class="first:sm:col-span-2">
+                    <div class="@container">
+                        <figure class="relative">
+                            {# Check if the blog post has a banner image #}
+                            {% if blog_post.banner %}
+                                <img src="{{ asset(uploaded_asset(blog_post.banner)) }}" alt="{{ blog_post.title }}" class="h-full w-full rounded-3xl object-cover">
+                            {% else %}
+                                <div class="min-h-full h-72 flex justify-center items-center bg-gray-200 rounded-3xl fill-gray-500">
+                                    <svg xmlns="http://www.w3.org/2000/svg" height="54" viewBox="0 -960 960 960" width="54">
+                                        <path d="M480-290.769q62.692 0 105.962-43.269 43.269-43.27 43.269-105.962t-43.269-105.962Q542.692-589.231 480-589.231t-105.962 43.269Q330.769-502.692 330.769-440t43.269 105.962q43.27 43.269 105.962 43.269Zm0-40q-46.615 0-77.923-31.308T370.769-440q0-46.615 31.308-77.923T480-549.231q46.615 0 77.923 31.308T589.231-440q0 46.615-31.308 77.923T480-330.769ZM184.615-160Q157-160 138.5-178.5 120-197 120-224.615v-430.77Q120-683 138.5-701.5 157-720 184.615-720h118.308l54.615-59.385q8.693-9.692 21.116-15.154Q391.077-800 405-800h150q13.923 0 26.346 5.461 12.423 5.462 21.116 15.154L657.077-720h118.308Q803-720 821.5-701.5 840-683 840-655.385v430.77Q840-197 821.5-178.5 803-160 775.385-160h-590.77Zm0-40h590.77q10.769 0 17.692-6.923T800-224.615v-430.77q0-10.769-6.923-17.692T775.385-680H639.538l-73.769-80H394.231l-73.769 80H184.615q-10.769 0-17.692 6.923T160-655.385v430.77q0 10.769 6.923 17.692T184.615-200ZM480-440Z"/>
+                                    </svg>
+                                </div>
+                            {% endif %}
+
+                            <div class="space-y-3 z-40 mt-4">
+                                <a href="{{ path('app_blog_post_show', {'slug': blog_post.slug}) }}">
+                                    <h2 class="text-balance @xl:leading-tight text-2xl font-bold @xl:text-5xl text-black">{{ blog_post.title }}</h2>
+                                </a>
+                                <p class="@xl:text-2xl text-md font-light text-black max-w-4xl line-clamp-3 @xl:leading-9 leading-relaxed">
+                                    {{ blog_post.content }}
+                                </p>
+                            </div>
+
+                            {% if is_granted('IS_AUTHENTICATED_FULLY') %}
+                                <div class="absolute right-6 top-6">
+                                    <a href="{{ path('app_blog_post_edit', {'id': blog_post.id}) }}" class="bg-gray-200 shadow hover:bg-gray-300 text-gray-900 font-bold py-2 px-4 rounded-xl inline-flex items-center">
+                                        Edit
+                                    </a>
+                                </div>
+                            {% endif %}
+                        </figure>
                     </div>
+                </div>
 
-                    {% if blog_post.banner %}
-                        <div class="mb-6">
-                            <!-- Keep original aspect ratio but ensure it's responsive -->
-                            <img src="{{ asset(uploaded_asset(blog_post.banner)) }}" alt="{{ blog_post.title }}" class="w-full object-cover rounded">
-                        </div>
-                    {% endif %}
-
-                    <p>
-                        {{ blog_post.content|length > 300 ? blog_post.content|slice(0, 300) ~ '...' : blog_post.content }}
-                    </p>
-                </article>
-            {% endif %}
-        {% else %}
-            <div class="md:col-span-2">
+            {% else %}
                 <div>No Articles found 😞</div>
-            </div>
-        {% endfor %}
-    </div>
+            {% endfor %}
+        </div>
+    </article>
 
-    <nav aria-label="Pagination" class="flex items-center justify-center space-x-2 my-4">
+    <nav aria-label="Pagination" class="flex items-center justify-center space-x-2 my-20">
         {% if pager.hasPreviousPage %}
-            <a href="{{ path('app_blog_post_index', {'page': 1}) }}" class="px-3 py-2 text-sm font-medium text-gray-700 bg-white rounded-md border border-gray-300 hover:bg-gray-100">First</a>
-            <a href="{{ path('app_blog_post_index', {'page': pager.previousPage}) }}" class="px-3 py-2 text-sm font-medium text-gray-700 bg-white rounded-md border border-gray-300 hover:bg-gray-100">Previous</a>
+            <a href="{{ path('app_blog_post_index', {'page': 1}) }}" class="px-4 py-2 text-gray-900 bg-white rounded-full border">First</a>
+            <a href="{{ path('app_blog_post_index', {'page': pager.previousPage}) }}" class="px-4 py-2 text-gray-900 bg-white rounded-full border">Previous</a>
         {% endif %}
 
         {% set current = pager.currentPage %}
@@ -96,15 +82,15 @@
 
         {% if pager.hasNextPage or pager.hasPreviousPage %}
             {% for i in range(left, right) %}
-                <a href="{{ path('app_blog_post_index', {'page': i}) }}" class="px-3 py-2 text-sm font-medium {{ i == current ? 'bg-blue-500 text-white' : 'text-gray-700 bg-white' }} rounded-md border border-gray-300 hover:bg-gray-100">{{ i }}</a>
+                <div class="space-x-10">
+                    <a href="{{ path('app_blog_post_index', {'page': i}) }}" class="h-10 w-10 border text-gray-900 flex justify-center items-center rounded-full {{ i == current ? 'bg-black text-white' : 'text-gray-900 bg-white' }}">{{ i }}</a>
+                </div>
             {% endfor %}
         {% endif %}
 
-
         {% if pager.hasNextPage %}
-            <a href="{{ path('app_blog_post_index', {'page': pager.nextPage}) }}" class="px-3 py-2 text-sm font-medium text-gray-700 bg-white rounded-md border border-gray-300 hover:bg-gray-100">Next</a>
-            <a href="{{ path('app_blog_post_index', {'page': last}) }}" class="px-3 py-2 text-sm font-medium text-gray-700 bg-white rounded-md border border-gray-300 hover:bg-gray-100">Last</a>
+            <a href="{{ path('app_blog_post_index', {'page': pager.nextPage}) }}" class="px-4 py-2 text-gray-900 bg-white rounded-full border">Next</a>
+            <a href="{{ path('app_blog_post_index', {'page': last}) }}" class="px-4 py-2 text-gray-900 bg-white rounded-full border">Last</a>
         {% endif %}
-
     </nav>
 {% endblock %}