fix: filter style tweaks, loading icon patch

templates/components/Filter.html.twig

@@ -8,7 +8,7 @@
 >
     {% set preferences_form = form %}
     {{ form_start(preferences_form) }}
-        <div class="flex flex-row gap-2 justify-between">
+        <div class="flex flex-col md:flex-row gap-2 justify-between">
             {{ form_row(preferences_form.resolution) }}
             {{ form_row(preferences_form.codec) }}
             {{ form_row(preferences_form.language) }}
@@ -16,11 +16,11 @@
             {{ form_row(preferences_form.quality) }}
 
             {% if results.media.mediaType == "tvshows" %}
-                <div class="filter-label">
+                <div class="flex flex-col gap-1 md:gap-3">
                     <label for="season">
                         Season
                     </label>
-                    <select id="season" name="season" value="1" data-result-filter-target="season" class="px-1 mb-4 py-0.5 bg-stone-100 text-gray-800"
+                    <select id="season" name="season" value="1" data-result-filter-target="season" class="px-1 mb-4 py-1 md:py-2 text-center bg-orange-500 text-white rounded-ms"
                             {{ stimulus_action('result_filter', 'setSeason', 'change') }}
                             {{ stimulus_action('result_filter', 'uncheckSelectAllBtn', 'change') }}
                     >
@@ -35,33 +35,36 @@
                 </div>
             {% endif %}
         </div>
-
-    <span {{ stimulus_controller('loading_icon', {total: (results.media.mediaType == "tvshows") ? results.media.episodes[1]|length : 1, count: 0}) }}
-            class="loading-icon">
-        <twig:ux:icon name="codex:loader" height="20" width="20" data-loading-icon-target="icon" class="text-end" />
-    </span>
     {{ form_end(preferences_form) }}
 
+    <div class="flex flex-col md:flex-row justify-between">
+        <span
+                {{ stimulus_target('result-filter', 'loadingIcon') }}
+                {{ stimulus_controller('loading_icon', {total: (results.media.mediaType == "tvshows") ? results.media.episodes[1]|length : 1, count: 0}) }}
+            class="loading-icon">
+            <twig:ux:icon name="codex:loader" height="20" width="20" data-loading-icon-target="icon" class="text-end" />
+        </span>
 
-    {% if results.media.mediaType == "tvshows" %}
-        <div class="flex flex-row gap-2 justify-end px-8">
-            <twig:Modal heading="Back up a sec!" button_text="Download Season" submit_action="{{ stimulus_action('result_filter', 'downloadSeason', 'click')|stimulus_action('dialog', 'close') }}" button_class="px-1.5 py-1 border border-green-500 bg-green-800/60 rounded-ms text-sm font-semibold" show_cancel show_submit>
-                Downloading an entire season this way will use the filter from your
-                <a href="{{ path('app_user_preferences') }}" class="text-underline">preferences</a> to choose
-                the appropriate file(s).
-                <br /><br />
-                Do you wish to download <strong>season <span id="downloadSeasonModal">{{ results.season }}</span></strong> of "<strong>{{ results.media.title }}</strong>"?
-            </twig:Modal>
+        {% if results.media.mediaType == "tvshows" %}
+            <div class="flex flex-row gap-2 justify-end px-8">
+                <twig:Modal heading="Back up a sec!" button_text="Download Season" submit_action="{{ stimulus_action('result_filter', 'downloadSeason', 'click')|stimulus_action('dialog', 'close') }}" button_class="px-1.5 py-1 border border-green-500 bg-green-800/60 rounded-ms text-sm font-semibold" show_cancel show_submit>
+                    Downloading an entire season this way will use the filter from your
+                    <a href="{{ path('app_user_preferences') }}" class="text-underline">preferences</a> to choose
+                    the appropriate file(s).
+                    <br /><br />
+                    Do you wish to download <strong>season <span id="downloadSeasonModal">{{ results.season }}</span></strong> of "<strong>{{ results.media.title }}</strong>"?
+                </twig:Modal>
 
-            <button class="px-1.5 py-1 bg-green-800/60 hover:bg-green-700/60 border border-green-500 rounded-ms text-sm font-semibold"
-                    {{ stimulus_target('result_filter', 'downloadSelected') }}
-                    {{ stimulus_action('result_filter', 'downloadSelectedEpisodes', 'click') }}
-            >Download Selected</button>
+                <button class="px-1.5 py-1 bg-green-800/60 hover:bg-green-700/60 border border-green-500 rounded-ms text-sm font-semibold"
+                        {{ stimulus_target('result_filter', 'downloadSelected') }}
+                        {{ stimulus_action('result_filter', 'downloadSelectedEpisodes', 'click') }}
+                >Download Selected</button>
 
-            <input type="checkbox" name="selectAll" id="selectAll"
-                    {{ stimulus_target('result_filter', 'selectAll') }}
-                    {{ stimulus_action('result_filter', 'selectAllEpisodes', 'change') }}
-            />
-        </div>
-    {% endif %}
+                <input type="checkbox" name="selectAll" id="selectAll"
+                        {{ stimulus_target('result_filter', 'selectAll') }}
+                        {{ stimulus_action('result_filter', 'selectAllEpisodes', 'change') }}
+                />
+            </div>
+        {% endif %}
+    </div>
 </div>

templates/components/SearchResult.html.twig

@@ -10,7 +10,7 @@
 
         <div class="w-full flex flex-col">
             <h3 class="mb-4 text-xl font-medium leading-tight font-bold text-gray-50">
-                {{ title }} - {{ year }}
+                {{ title }} ({{ year }})
             </h3>
             <p class="hidden md:block md:text-gray-50">
                 {{ description }}

templates/components/SubmitButton.html.twig

@@ -0,0 +1,8 @@
+<button class="submit-button flex flex-row gap-2 items-center">
+    {% if show_icon|default %}
+        <twig:ux:icon name="zondicons:checkmark" width=".8rem" class="text-green-500" />
+    {% endif %}
+    {% if false == icon_only|default(false) %}
+        {{ text|default('submit') }}
+    {% endif %}
+</button>

templates/search/result.html.twig

@@ -19,7 +19,7 @@
                     <div class="w-full flex flex-col">
                         <div class="mb-4 flex flex-row gap-2 justify-between">
                             <h3 class="text-xl font-medium leading-tight font-bold text-gray-50">
-                                {{ results.media.title }} - {{ results.media.year }}
+                                {{ results.media.title }} ({{ results.media.year }})
                             </h3>
 
                             {% if results.media.mediaType == "tvshows" %}

templates/user/preferences.html.twig

@@ -7,17 +7,15 @@
     <twig:Card title="Media Preferences" class="w-full">
         <p class="text-gray-50 mb-4">Define a filter to be pre-applied to your download options.</p>
         <div id="filter">
-            {{ form_start(preferences_form.instantiateForm) }}
-                <div class="flex flex-row gap-2">
+            {{ form_start(preferences_form) }}
+                <div class="flex flex-col md:flex-row gap-2">
                     {{ form_row(preferences_form.resolution) }}
                     {{ form_row(preferences_form.codec) }}
                     {{ form_row(preferences_form.language) }}
                     {{ form_row(preferences_form.provider) }}
                     {{ form_row(preferences_form.quality) }}
-                </div>
-                <div class="flex flex-row justify-end">
-                    <div>
-                        <button class="submit-button">Save</button>
+                    <div class="self-end mb-4">
+                        <twig:SubmitButton show_icon text="Save"/>
                     </div>
                 </div>
             {{ form_end(preferences_form) }}