From 97a5f84ced1ee0dad9f19953a68fc5f86752b7b5 Mon Sep 17 00:00:00 2001
From: grafixeyehero <grafixeyehero>
Date: Fri, 13 Sep 2019 20:50:22 +0300
Subject: [PATCH] make headerfilters and headerstatus collapsible

---
 .../filterdialog/filterdialog.template.html   | 120 +++++++++---------
 src/components/filterdialog/style.css         |   4 +-
 2 files changed, 65 insertions(+), 59 deletions(-)

diff --git a/src/components/filterdialog/filterdialog.template.html b/src/components/filterdialog/filterdialog.template.html
index 3f334a009f..20f0f2fc91 100644
--- a/src/components/filterdialog/filterdialog.template.html
+++ b/src/components/filterdialog/filterdialog.template.html
@@ -1,62 +1,67 @@
 <div style="margin: 0;padding:1.5em 2em;" class="filterDialogContent">
-    <h2 style="margin-bottom: .25em;">
-        ${HeaderFilters}
-    </h2>
-    <div class="checkboxList">
-        <label>
-            <input type="checkbox" is="emby-checkbox" class="chkStandardFilter videoStandard" data-filter="IsPlayed" />
-            <span>${OptionPlayed}</span>
-        </label>
-        <label>
-            <input type="checkbox" is="emby-checkbox" class="chkStandardFilter videoStandard" data-filter="IsUnPlayed" />
-            <span>${OptionUnplayed}</span>
-        </label>
-        <label>
-            <input type="checkbox" is="emby-checkbox" class="chkStandardFilter videoStandard" data-filter="IsResumable" />
-            <span>${OptionResumable}</span>
-        </label>
-        <label>
-            <input type="checkbox" is="emby-checkbox" class="chkStandardFilter chkFavorite" data-filter="IsFavorite" />
-            <span>${OptionFavorite}</span>
-        </label>
-        <label>
-            <input type="checkbox" is="emby-checkbox" class="chkStandardFilter chkLikes" data-filter="Likes" />
-            <span>${OptionLikes}</span>
-        </label>
-        <label>
-            <input type="checkbox" is="emby-checkbox" class="chkStandardFilter chkDislikes" data-filter="Dislikes" />
-            <span>${OptionDislikes}</span>
-        </label>
-        <label class="episodeFilter hide">
-            <input type="checkbox" is="emby-checkbox" id="chkSpecialEpisode" />
-            <span>${OptionSpecialEpisode}</span>
-        </label>
-        <label class="episodeFilter hide">
-            <input type="checkbox" is="emby-checkbox" id="chkMissingEpisode" />
-            <span>${OptionMissingEpisode}</span>
-        </label>
-        <label class="episodeFilter hide">
-            <input type="checkbox" is="emby-checkbox" id="chkFutureEpisode" />
-            <span>${OptionUnairedEpisode}</span>
-        </label>
-    </div>
-    <div class="seriesStatus hide">
-        <br />
-        <h2 style="margin-bottom: .25em;">
-            ${HeaderStatus}
-        </h2>
-        <div class="checkboxList">
-            <label>
-                <input type="checkbox" is="emby-checkbox" class="chkStatus" data-filter="Continuing" />
-                <span>${OptionContinuing}</span>
-            </label>
-            <label>
-                <input type="checkbox" is="emby-checkbox" class="chkStatus" data-filter="Ended" />
-                <span>${OptionEnded}</span>
-            </label>
+
+    <div is="emby-collapse" title="${HeaderFilters}">
+        <div class="collapseContent">
+            <div class="checkboxList">
+                <label>
+                    <input type="checkbox" is="emby-checkbox" class="chkStandardFilter videoStandard"
+                        data-filter="IsPlayed" />
+                    <span>${OptionPlayed}</span>
+                </label>
+                <label>
+                    <input type="checkbox" is="emby-checkbox" class="chkStandardFilter videoStandard"
+                        data-filter="IsUnPlayed" />
+                    <span>${OptionUnplayed}</span>
+                </label>
+                <label>
+                    <input type="checkbox" is="emby-checkbox" class="chkStandardFilter videoStandard"
+                        data-filter="IsResumable" />
+                    <span>${OptionResumable}</span>
+                </label>
+                <label>
+                    <input type="checkbox" is="emby-checkbox" class="chkStandardFilter chkFavorite"
+                        data-filter="IsFavorite" />
+                    <span>${OptionFavorite}</span>
+                </label>
+                <label>
+                    <input type="checkbox" is="emby-checkbox" class="chkStandardFilter chkLikes" data-filter="Likes" />
+                    <span>${OptionLikes}</span>
+                </label>
+                <label>
+                    <input type="checkbox" is="emby-checkbox" class="chkStandardFilter chkDislikes"
+                        data-filter="Dislikes" />
+                    <span>${OptionDislikes}</span>
+                </label>
+                <label class="episodeFilter hide">
+                    <input type="checkbox" is="emby-checkbox" id="chkSpecialEpisode" />
+                    <span>${OptionSpecialEpisode}</span>
+                </label>
+                <label class="episodeFilter hide">
+                    <input type="checkbox" is="emby-checkbox" id="chkMissingEpisode" />
+                    <span>${OptionMissingEpisode}</span>
+                </label>
+                <label class="episodeFilter hide">
+                    <input type="checkbox" is="emby-checkbox" id="chkFutureEpisode" />
+                    <span>${OptionUnairedEpisode}</span>
+                </label>
+            </div>
+        </div>
+    </div>
+
+    <div is="emby-collapse" title="${HeaderStatus}" class="seriesStatus hide">
+        <div class="collapseContent">
+            <div class="checkboxList">
+                <label>
+                    <input type="checkbox" is="emby-checkbox" class="chkStatus" data-filter="Continuing" />
+                    <span>${OptionContinuing}</span>
+                </label>
+                <label>
+                    <input type="checkbox" is="emby-checkbox" class="chkStatus" data-filter="Ended" />
+                    <span>${OptionEnded}</span>
+                </label>
+            </div>
         </div>
     </div>
-    <br />
 
     <div is="emby-collapse" title="${HeaderFeatures}" class="features hide">
         <div class="collapseContent">
@@ -104,7 +109,8 @@
         <div class="collapseContent">
             <div class="checkboxList">
                 <label>
-                    <input type="checkbox" is="emby-checkbox" class="chkVideoTypeFilter chkBluray" data-filter="Bluray" />
+                    <input type="checkbox" is="emby-checkbox" class="chkVideoTypeFilter chkBluray"
+                        data-filter="Bluray" />
                     <span>${OptionBluray}</span>
                 </label>
                 <label>
diff --git a/src/components/filterdialog/style.css b/src/components/filterdialog/style.css
index ccf65b9d50..5daf6eb38c 100644
--- a/src/components/filterdialog/style.css
+++ b/src/components/filterdialog/style.css
@@ -14,7 +14,7 @@
 @media all and (min-height:600px) {
     .dynamicFilterDialog {
         top: 10% !important;
-        bottom: 10% !important
+        bottom: 25% !important
     }
 }
 
@@ -33,4 +33,4 @@
         margin-left: -150px !important;
         left: 50% !important
     }
-}
\ No newline at end of file
+}