diff options
Diffstat (limited to 'pydis_site/templates/resources/resources.html')
| -rw-r--r-- | pydis_site/templates/resources/resources.html | 131 |
1 files changed, 69 insertions, 62 deletions
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 %} |