fix: standardizes styles of the 'bare' template for pre-authenticated pages

fix: puts posters in 2 columns on mobile
2025-07-10 10:32:38 -05:00 · 2025-07-09 23:43:54 -05:00
7 changed files with 8 additions and 8 deletions
--- a/templates/bare.html.twig
+++ b/templates/bare.html.twig
@@ -15,7 +15,7 @@
    </head>
    <body class="bg-cyan-950 flex flex-col h-full">
        <h1 class="px-4 py-4 text-3xl font-extrabold text-orange-500">Torsearch</h1>
-        <div class="flex flex-col justify-center items-center">
+        <div class="p-4 flex flex-col justify-center items-center">
            {% block body %}{% endblock %}
            <div class="mt-2 inline-flex gap-4 justify-between text-white">
                <a class="text-sm" href="{{ path('app_login') }}">Sign In</a>
--- a/templates/components/Poster.html.twig
+++ b/templates/components/Poster.html.twig
@@ -9,6 +9,6 @@
        mediaType: mediaType,
        imdbId: imdbId
    }) }}">
-        <h3 class="text-center text-white text-xl md:text-base md:max-w-[16ch]">{{ title }}</h3>
+        <h3 class="text-center text-white md:text-xl md:text-base md:max-w-[16ch]">{{ title }}</h3>
    </a>
 </div>
--- a/templates/index/index.html.twig
+++ b/templates/index/index.html.twig
@@ -20,7 +20,7 @@
            </twig:Card>
        </div>
        <div class="flex flex-col gap-4">
-            <twig:Card title="Popular Movies" contentClass="flex flex-col gap-4 md:flex-row md:justify-between w-full">
+            <twig:Card title="Popular Movies" contentClass="grid grid-cols-2 gap-4 md:flex md:flex-row md:justify-between w-full">
                {% for movie in popular_movies %}
                    <twig:Poster imdbId="{{ movie.imdbId }}"
                                 tmdbId="{{ movie.tmdbId }}"
@@ -32,7 +32,7 @@
                    />
                {% endfor %}
            </twig:Card>
-            <twig:Card title="Popular TV Shows" contentClass="flex flex-col md:flex-row justify-between w-full">
+            <twig:Card title="Popular TV Shows" contentClass="grid grid-cols-2 gap-4 md:flex flex-col md:flex-row justify-between w-full">
                {% for movie in popular_tvshows %}
                    <twig:Poster imdbId="{{ movie.imdbId }}"
                                 tmdbId="{{ movie.tmdbId }}"
--- a/templates/user/login.html.twig
+++ b/templates/user/login.html.twig
@@ -3,7 +3,7 @@
 {% block title %}Log in &mdash; Torsearch{% endblock %}
 {% block body %}
-    <div class="flex flex-col bg-orange-500/50 p-4 rounded-lg gap-4 min-w-96 border-orange-500 border-2 text-gray-50">
+    <div class="flex flex-col bg-orange-500/50 p-4 rounded-lg gap-4 w-full md:w-[420px] border-orange-500 border-2 text-gray-50">
        <h2 class="text-xl font-bold">Login</h2>
        <form method="post" class="flex flex-col gap-2">
            {% if error %}
--- a/templates/user/reset_password/check_email.html.twig
+++ b/templates/user/reset_password/check_email.html.twig
@@ -3,7 +3,7 @@
 {% block title %}Password Reset Email Sent{% endblock %}
 {% block body %}
-    <div class="flex flex-col bg-orange-500/50 p-4 rounded-lg gap-4 max-w-[420px] border-orange-500 border-2 text-gray-50">
+    <div class="flex flex-col bg-orange-500/50 p-4 rounded-lg gap-4 w-full md:w-[420px] border-orange-500 border-2 text-gray-50">
        <h2 class="text-xl font-bold">Head over to your email</h2>
        <div class="mb-3 flex flex-col gap-4">
--- a/templates/user/reset_password/request.html.twig
+++ b/templates/user/reset_password/request.html.twig
@@ -3,7 +3,7 @@
 {% block title %}Reset your password &mdash; Torsearch{% endblock %}
 {% block body %}
-    <div class="flex flex-col bg-orange-500/50 p-4 rounded-lg gap-4 max-w-[420px] border-orange-500 border-2 text-gray-50">
+    <div class="flex flex-col bg-orange-500/50 p-4 rounded-lg gap-4 w-full md:w-[420px] border-orange-500 border-2 text-gray-50">
        <h2 class="text-xl font-bold">Reset your password</h2>
        <div class="mb-3">
--- a/templates/user/reset_password/reset.html.twig
+++ b/templates/user/reset_password/reset.html.twig
@@ -3,7 +3,7 @@
 {% block title %}Reset your password &mdash; Torsearch{% endblock %}
 {% block body %}
-    <div class="flex flex-col bg-orange-500/50 p-4 rounded-lg gap-4 min-w-96 border-orange-500 border-2 text-gray-50">
+    <div class="flex flex-col bg-orange-500/50 p-4 rounded-lg gap-4 w-full md:w-[420px] border-orange-500 border-2 text-gray-50">
        <h2 class="text-xl font-bold text-white">Reset your password</h2>
        <div class="mb-2">
Author	SHA1	Message	Date
Brock H Caldwell	6f1f1032f6	fix: standardizes styles of the 'bare' template for pre-authenticated pages	2025-07-10 10:32:38 -05:00
Brock H Caldwell	c6e98eff4c	fix: puts posters in 2 columns on mobile	2025-07-09 23:43:54 -05:00