change resources to prepare for smart resource search

5 files changed, 105 insertions, 93 deletions

diff --git a/pydis_site/apps/resources/urls.py b/pydis_site/apps/resources/urls.py
index cd4f53e7..c8d441df 100644
--- a/pydis_site/apps/resources/urls.py
+++ b/pydis_site/apps/resources/urls.py
@@ -4,6 +4,6 @@ from pydis_site.apps.resources import views
 
 app_name = "resources"
 urlpatterns = [
-    path("", views.ResourcesView.as_view(), name="index"),
+    path("", views.resources.resource_view, name="index"),
     path("list/", views.ResourcesListView.as_view(), name="resources")
 ]
diff --git a/pydis_site/apps/resources/views/__init__.py b/pydis_site/apps/resources/views/__init__.py
index 8eb383b5..c89071c5 100644
--- a/pydis_site/apps/resources/views/__init__.py
+++ b/pydis_site/apps/resources/views/__init__.py
@@ -1,4 +1,4 @@
-from .resources import ResourcesView
+from .resources import resource_view
 from .resources_list import ResourcesListView
 
-__all__ = ["ResourcesView", "ResourcesListView"]
+__all__ = ["resource_view", "ResourcesListView"]
diff --git a/pydis_site/apps/resources/views/resources.py b/pydis_site/apps/resources/views/resources.py
index 25ce3e50..dfd21682 100644
--- a/pydis_site/apps/resources/views/resources.py
+++ b/pydis_site/apps/resources/views/resources.py
@@ -1,7 +1,11 @@
 from django.views.generic import TemplateView
+from django.shortcuts import render
 
+# class ResourcesView(TemplateView):
+#     """View for resources index page."""
+#
+#     template_name = "resources/resources.html"
 
-class ResourcesView(TemplateView):
-    """View for resources index page."""
 
-    template_name = "resources/resources.html"
+def resource_view(request):
+    return render(request, template_name="resources/resources.html")
diff --git a/pydis_site/static/css/resources/resources.css b/pydis_site/static/css/resources/resources.css
index cf4cb472..a9226647 100644
--- a/pydis_site/static/css/resources/resources.css
+++ b/pydis_site/static/css/resources/resources.css
@@ -1,29 +1,30 @@
-.box, .tile.is-parent {
-    transition: 0.1s ease-out;
-}
-.box {
-    min-height: 15vh;
-}
-.tile.is-parent:hover .box {
-    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
-}
-.tile.is-parent:hover {
-    padding: 0.65rem 0.85rem 0.85rem 0.65rem;
-    filter: saturate(1.1) brightness(1.1);
-}
+/*.box, .tile.is-parent {*/
+/*    transition: 0.1s ease-out;*/
+/*}*/
+/*.box {*/
+/*    min-height: 15vh;*/
+/*}*/
+/*.tile.is-parent:hover .box {*/
+/*    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);*/
+/*}*/
+/*.tile.is-parent:hover {*/
+/*    padding: 0.65rem 0.85rem 0.85rem 0.65rem;*/
+/*    filter: saturate(1.1) brightness(1.1);*/
+/*}*/
 
-#readingBlock {
-    background-image: linear-gradient(141deg, #911eb4 0%, #b631de 71%, #cf4bf7 100%);
-}
+/*#readingBlock {*/
+/*    background-image: linear-gradient(141deg, #911eb4 0%, #b631de 71%, #cf4bf7 100%);*/
+/*}*/
 
-#interactiveBlock {
-    background-image: linear-gradient(141deg, #d05600 0%, #da722a 71%, #e68846 100%);
-}
+/*#interactiveBlock {*/
+/*    background-image: linear-gradient(141deg, #d05600 0%, #da722a 71%, #e68846 100%);*/
+/*}*/
 
-#communitiesBlock {
-    background-image: linear-gradient(141deg, #3b756f 0%, #3a847c 71%, #41948b 100%);
-}
+/*#communitiesBlock {*/
+/*    background-image: linear-gradient(141deg, #3b756f 0%, #3a847c 71%, #41948b 100%);*/
+/*}*/
+
+/*#podcastsBlock {*/
+/*    background-image: linear-gradient(141deg, #232382 0%, #30309c 71%, #4343ad 100%);*/
+/*}*/
 
-#podcastsBlock {
-    background-image: linear-gradient(141deg, #232382 0%, #30309c 71%, #4343ad 100%);
-}
diff --git a/pydis_site/templates/resources/resources.html b/pydis_site/templates/resources/resources.html
index 04744f90..7eb21432 100644
--- a/pydis_site/templates/resources/resources.html
+++ b/pydis_site/templates/resources/resources.html
@@ -12,79 +12,86 @@
   <section class="section">
       <div class="container">
           <div class="content">
-              <h1>Resources</h1>
+             <h1 class="resource-title has-text-centered">Resources</h1>
+              <hr/>
+          </div>
+          <div class="panel">
+              <p class="panel-heading has-text-centered">Search Options</p>
 
-              <div class="tile is-ancestor">
-                  <a class="tile is-parent" href="{% url "content:page_category" location="guides" %}">
-                      <article class="tile is-child box hero is-primary is-bold">
-                          <p class="title is-size-1"><i class="fad fa-info-circle" aria-hidden="true"></i> Guides</p>
-                          <p class="subtitle is-size-4">Made by us, for you</p>
-                      </article>
-                  </a>
+              <div class="field">
+                  <div class="columns">
+                      <div class="column has-text-centered">
+                          Topic
 
-                  <div class="tile is-vertical is-9">
-                      <div class="tile">
-                          <a class="tile is-8 is-parent" href="{% url "resources:resources" %}">
-                              <article class="tile is-child box hero is-black" id="readingBlock">
-                                  <p class="title is-size-1"><i class="fad fa-book-alt" aria-hidden="true"></i> Read</p>
-                                  <p class="subtitle is-size-4">Lovingly curated books to explore</p>
-                              </article>
-                          </a>
+                          <div class="field">
+                              <label class="checkbox">
+                                <input name="checkboxOption" type="checkbox" value="topic1">
+                                  <span class="has-text-grey is-size-7">Topic1</span>
+                              </label>
+                          </div>
 
-                          <div class="tile">
-                              <a class="tile is-parent" href="{% url "resources:resources" %}">
-                                  <article class="tile is-child box hero is-danger is-bold">
-                                      <p class="title is-size-1"><i class="fad fa-video" aria-hidden="true"></i> Watch</p>
-                                      <p class="subtitle is-size-4">Visually engaging</p>
-                                  </article>
-                              </a>
+                          <div class="field">
+                              <label class="checkbox">
+                                <input name="checkboxOption" type="checkbox" value="topic2">
+                                  <span class="has-text-grey is-size-7">Topic1</span>
+                              </label>
                           </div>
-                      </div>
 
-                      <div class="tile">
-                          <a class="tile is-parent" href="{% url "resources:resources" %}">
-                              <article class="tile is-child box hero is-black" id="interactiveBlock">
-                                  <p class="title is-size-1"><i class="fad fa-code" aria-hidden="true"></i> Try</p>
-                                  <p class="subtitle is-size-4">Interactively discover the possibilities</p>
-                              </article>
-                          </a>
-                          <a class="tile is-8 is-parent" href="{% url "resources:resources" %}">
-                              <article class="tile is-child box hero is-success is-bold">
-                                  <p class="title is-size-1"><i class="fad fa-graduation-cap" aria-hidden="true"></i> Learn</p>
-                                  <p class="subtitle is-size-4">Structured courses with clear goals</p>
-                              </article>
-                          </a>
                       </div>
-                  </div>
-              </div>
 
-              <div class="tile is-ancestor">
-                  <div class="tile is-vertical is-9">
-                      <div class="tile">
-                          <a class="tile is-8 is-parent" href="{% url "resources:resources" %}">
-                              <article class="tile is-child box hero is-black" id="communitiesBlock">
-                                  <p class="title is-size-1"><i class="fad fa-users" aria-hidden="true"></i> Communities</p>
-                                  <p class="subtitle is-size-4">Some of our best friends</p>
-                              </article>
-                          </a>
-                          <div class="tile">
-                              <a class="tile is-parent" href="{% url "resources:resources" %}">
-                                  <article class="tile is-child box hero is-black" id="podcastsBlock">
-                                      <p class="title is-size-1"><i class="fad fa-podcast" aria-hidden="true"></i> Listen</p>
-                                      <p class="subtitle is-size-4">Regular podcasts to follow</p>
-                                  </article>
-                              </a>
+                        <div class="column has-text-centered">
+                            Type
+                            <div class="field">
+                              <label class="checkbox">
+                                <input type="checkbox">
+                                    <span class="has-text-grey is-size-7">Remember me</span>
+                              </label>
                           </div>
-                      </div>
+                        </div>
+
+                        <div class="column has-text-centered">
+                            Payment
+                            <div class="field">
+                              <label class="checkbox">
+                                <input type="checkbox">
+                                    <span class="has-text-grey is-size-7">Remember me</span>
+                              </label>
+                          </div>
+                        </div>
+
+                        <div class="column has-text-centered">
+                            Level
+                            <div class="field">
+                              <label class="checkbox">
+                                <input type="checkbox">
+                                    <span class="has-text-grey is-size-7">Remember me</span>
+                              </label>
+                          </div>
+                        </div>
                   </div>
-                  <a class="tile is-parent" href="{% url "resources:resources" %}">
-                      <article class="tile is-child box hero is-dark">
-                          <p class="title is-size-1"><i class="fad fa-tools" aria-hidden="true"></i> Tools</p>
-                          <p class="subtitle is-size-4">Things we love to use</p>
-                      </article>
-                  </a>
+
+                  <div class="control pl-3 pb-3">
+                    <button onclick="buildQueryParams()" class="button is-link is-small">Search</button>
+                  </div>
+
               </div>
           </div>
       </div>
   </section>
+<script>
+    function buildQueryParams(){
+        let params = new URLSearchParams(window.location.search);
+        const checkBoxes = document.querySelectorAll("input[name='checkboxOption']");
+        let allOptions = "";
+        checkBoxes.forEach((x) => {
+            if(x.checked){
+                allOptions += x.value + ",";
+            }
+        });
+        params.set("checkboxOptions", allOptions);
+
+        window.location.search = params;
+        window.location.reload();
+    }
+</script>
 {% endblock %}