styles: filtering resources page

3 files changed, 25 insertions, 20 deletions

diff --git a/pydis_site/apps/resources/utils.py b/pydis_site/apps/resources/utils.py
index 623dd7b6..bc444df4 100644
--- a/pydis_site/apps/resources/utils.py
+++ b/pydis_site/apps/resources/utils.py
@@ -21,7 +21,7 @@ RESOURCES: dict[str, Resource] = {path.stem: yaml.safe_load(path.read_text()) fo
 
 RESOURCE_TABLE = {category: defaultdict(set) for category in (
     "topics",
-    "payment_tiers",
+    "payment_tiers",    
     "complexity",
     "type"
 )}
diff --git a/pydis_site/static/css/resources/resources_list.css b/pydis_site/static/css/resources/resources_list.css
index e6808a99..283a506b 100644
--- a/pydis_site/static/css/resources/resources_list.css
+++ b/pydis_site/static/css/resources/resources_list.css
@@ -53,3 +53,12 @@ i.resource-icon.is-black {
 i.has-icon-padding {
     padding: 0 10px 25px 0;
 }
+
+#tab-content p {
+    display: none;
+}
+
+#tab-content p.is-active {
+display: block;
+}
+  
\ No newline at end of file
diff --git a/pydis_site/templates/resources/resources.html b/pydis_site/templates/resources/resources.html
index f2d5a976..8105a557 100644
--- a/pydis_site/templates/resources/resources.html
+++ b/pydis_site/templates/resources/resources.html
@@ -17,58 +17,58 @@
              <h1 class="resource-title has-text-centered">Resources</h1>
               <hr/>
           </div>
-          <div class="panel">
+          <div class="panel is-hidden-mobile">
               <p class="panel-heading has-text-centered">Search Options</p>
 
               <div class="field">
                   <div class="columns">
-                      <div class="column has-text-centered">
-                          Topic
+                      <div class="column pl-6">
+                          <div class="title is-5 pt-2 has-text-centered">Topic</div>
 
                           {% for topic in topics %}
                             <div class="field">
-                              <label class="checkbox ml-0">
+                              <label class="checkbox">
                                 <input name="topicOption" type="checkbox" value="{{ topic }}">
-                                  <span class="has-text-grey is-size-7">{{ topic }}</span>
+                                  <span class="has-text-grey is-size-6">{{ topic }}</span>
                               </label>
                             </div>
                           {% endfor %}
                       </div>
 
-                        <div class="column has-text-centered">
-                            Type
+                        <div class="column pl-6">
+                            <div class="title is-5 pt-2 has-text-centered">Type</div>
 
                             {% for tag_type in tag_types %}
                             <div class="field">
                               <label class="checkbox ml-0">
                                 <input name="typeOption" type="checkbox" value="{{ tag_type }}">
-                                  <span class="has-text-grey is-size-7">{{ tag_type }}</span>
+                                  <span class="has-text-grey is-size-6">{{ tag_type }}</span>
                               </label>
                             </div>
                           {% endfor %}
                         </div>
 
-                        <div class="column has-text-centered">
-                            Payment
+                        <div class="column pl-6">
+                            <div class="title is-5 pt-2 has-text-centered">Payment</div>
 
                             {% for payment_tier in payment_tiers %}
                             <div class="field">
                               <label class="checkbox ml-0">
                                 <input name="paymentOption" type="checkbox" value="{{ payment_tier }}">
-                                  <span class="has-text-grey is-size-7">{{ payment_tier }}</span>
+                                  <span class="has-text-grey is-size-6">{{ payment_tier }}</span>
                               </label>
                             </div>
                           {% endfor %}
                         </div>
 
-                        <div class="column has-text-centered">
-                            Level
+                        <div class="column pl-6">
+                            <div class="title is-5 pt-2 has-text-centered">Level</div>
 
                             {% for complexity in complexities %}
                             <div class="field">
                               <label class="checkbox ml-0">
                                 <input name="complexityOption" type="checkbox" value="{{ complexity }}">
-                                  <span class="has-text-grey is-size-7">{{ complexity }}</span>
+                                  <span class="has-text-grey is-size-6">{{ complexity }}</span>
                               </label>
                             </div>
                           {% endfor %}
@@ -76,7 +76,6 @@
                   </div>
 
                   <div class="ml-3 pb-3">
-
                       <span class="control">
                         <button onclick="buildQueryParams()" class="button is-link is-small">Search</button>
                       </span>
@@ -84,12 +83,9 @@
                       <span class="is-one-fifth control">
                         <button onclick="clearQueryParams()" class="button is-danger is-small">Clear Search</button>
                       </span>
-
                   </div>
-
               </div>
           </div>
-      </div>
   </section>
 
     {% if resources|length > 0 %}
@@ -120,7 +116,7 @@
         </div>
     </section>
     {% else %}
-    <p>No resources matching search.</p>
+    <h2 class="title is-3 has-text-centered pt-0 pb-6 ">No resources matching search.</p>
     {% endif %}
 
 <script>