feat(vote): show/hide sidebar on mobile version

nossas · Aug 28, 2024 · e7c5e74 · e7c5e74
1 parent 2cd2f7a
commit e7c5e74
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 6 deletions.
diff --git a/app/org_eleicoes/votepeloclima/candidature/static/scss/candidaturesearch.scss b/app/org_eleicoes/votepeloclima/candidature/static/scss/candidaturesearch.scss
@@ -125,4 +125,24 @@ legend.form-label {
     #div_id_intended_position, #div_id_political_party {
         display: none;
     }
+
+    .search-sidebar {
+        label {
+            cursor: pointer;
+        }
+    }
+
+}
+
+
+.search-sidebar {
+    #sidebar-toggle {
+        display: none;
+
+        &:checked + label {
+            i.ds-sidebar-arrow {
+                rotate: 180deg;
+            }
+        }
+    }
 }
diff --git a/app/org_eleicoes/votepeloclima/candidature/templates/candidature/candidature_search.html b/app/org_eleicoes/votepeloclima/candidature/templates/candidature/candidature_search.html
@@ -12,7 +12,7 @@
 
 {% block content %}
 <form method="get">
-<main class="container px-5">
+<main class="container mx-auto pb-4">
     <section class="pt-5 pb-3" style="max-width:570px;">
         <h2 class="text-uppercase fw-bold">Conheça candidaturas da sua cidade</h2>
         <p>Use os filtros para descobrir candidatos comprometidos com políticas climáticas!</span>
@@ -28,8 +28,13 @@ <h2 class="text-uppercase fw-bold">Conheça candidaturas da sua cidade</h2>
         <!-- Sidebar -->
         <div class="g-col-12 g-col-md-4">
             <aside class="search-sidebar">
-                <h6 class="text-uppercase">Filtrar resultados</h6>
-                {% crispy form.sidebar %}
+                <input type="checkbox" id="sidebar-toggle" />
+                <label for="sidebar-toggle">
+                    <h6 class="text-uppercase fw-bold"><i class="ds-sidebar-bars"></i> Filtrar resultados <i class="ds-sidebar-arrow d-inline-block d-md-none"></i></h6>
+                </label>
+                <div class="d-none d-md-block">
+                    {% crispy form.sidebar %}
+                </div>
             </aside>
         </div>
         <!-- Listagem -->
@@ -82,13 +87,17 @@ <h5 class="text-uppercase fw-bold text-center">Infelizmente nenhuma candidatura
 (function ($) {
     "use strict";
     $(function () {
-        console.log("aasdasdasd");
-        $(".search-sidebar input[type='checkbox']").change(function() {
+        $(".search-sidebar .btn-check[type='checkbox']").change(function() {
             $("form").submit();
         });
-        $(".search-sidebar input[type='radio']").change(function() {
+        $(".search-sidebar .btn-check[type='radio']").change(function() {
             $("form").submit();
         });
+
+        // Hide Sidebar Filters only mobile
+        $("#sidebar-toggle").change(function() {
+            $(this).next().next().toggleClass("d-none");
+        });
     });
 }(jQuery));
 </script>

diff --git a/app/org_eleicoes/votepeloclima/static/scss/icons.scss b/app/org_eleicoes/votepeloclima/static/scss/icons.scss
@@ -311,4 +311,22 @@
     background-repeat: no-repeat;
     display: inline-block;
 	background-image: url('data:image/svg+xml,<svg width="32" height="33" viewBox="0 0 32 33" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_3208_84964)"><path d="M23.4879 21.2234C25.4245 18.5807 26.2919 15.3043 25.9165 12.0497C25.5412 8.79497 23.9508 5.80203 21.4635 3.66962C18.9762 1.5372 15.7754 0.422564 12.5016 0.548711C9.22778 0.674857 6.1223 2.03248 3.80647 4.34997C1.49063 6.66746 0.135233 9.77391 0.0114293 13.0478C-0.112374 16.3217 1.00455 19.5217 3.13875 22.0074C5.27294 24.4932 8.26702 26.0815 11.522 26.4545C14.7769 26.8276 18.0527 25.9578 20.6939 24.0194H20.6919C20.7519 24.0994 20.8159 24.1754 20.8879 24.2494L28.5879 31.9494C28.9629 32.3246 29.4717 32.5356 30.0022 32.5358C30.5328 32.5359 31.0417 32.3254 31.4169 31.9504C31.7922 31.5753 32.0032 31.0666 32.0033 30.5361C32.0035 30.0055 31.7929 29.4966 31.4179 29.1214L23.7179 21.4214C23.6464 21.349 23.5695 21.2821 23.4879 21.2214V21.2234ZM24.0039 13.5354C24.0039 14.9799 23.7194 16.4103 23.1666 17.7449C22.6138 19.0795 21.8036 20.2921 20.7821 21.3135C19.7607 22.335 18.548 23.1452 17.2134 23.698C15.8789 24.2508 14.4485 24.5354 13.0039 24.5354C11.5594 24.5354 10.129 24.2508 8.79441 23.698C7.45983 23.1452 6.2472 22.335 5.22576 21.3135C4.20431 20.2921 3.39406 19.0795 2.84126 17.7449C2.28846 16.4103 2.00393 14.9799 2.00393 13.5354C2.00393 10.618 3.16286 7.82008 5.22576 5.75718C7.28866 3.69428 10.0866 2.53536 13.0039 2.53536C15.9213 2.53536 18.7192 3.69428 20.7821 5.75718C22.845 7.82008 24.0039 10.618 24.0039 13.5354Z" fill="%231F8523"/></g><defs><clipPath id="clip0_3208_84964"><rect width="32" height="32" fill="white" transform="translate(0 0.535156)"/></clipPath></defs></svg>');
+}
+
+.ds-sidebar-bars {
+    width: 16px;
+    height: 17px;
+    background-size: contain;
+    background-repeat: no-repeat;
+    display: inline-block;
+	background-image: url('data:image/svg+xml,<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_3208_84098)"><path d="M5.99965 10.5352C5.99965 10.4025 6.05233 10.2754 6.1461 10.1816C6.23986 10.0878 6.36704 10.0352 6.49965 10.0352H9.49965C9.63226 10.0352 9.75944 10.0878 9.8532 10.1816C9.94697 10.2754 9.99965 10.4025 9.99965 10.5352C9.99965 10.6678 9.94697 10.7949 9.8532 10.8887C9.75944 10.9825 9.63226 11.0352 9.49965 11.0352H6.49965C6.36704 11.0352 6.23986 10.9825 6.1461 10.8887C6.05233 10.7949 5.99965 10.6678 5.99965 10.5352ZM3.99965 7.53516C3.99965 7.40255 4.05233 7.27537 4.1461 7.1816C4.23986 7.08783 4.36704 7.03516 4.49965 7.03516H11.4997C11.6323 7.03516 11.7594 7.08783 11.8532 7.1816C11.947 7.27537 11.9997 7.40255 11.9997 7.53516C11.9997 7.66776 11.947 7.79494 11.8532 7.88871C11.7594 7.98248 11.6323 8.03516 11.4997 8.03516H4.49965C4.36704 8.03516 4.23986 7.98248 4.1461 7.88871C4.05233 7.79494 3.99965 7.66776 3.99965 7.53516ZM1.99965 4.53516C1.99965 4.40255 2.05233 4.27537 2.1461 4.1816C2.23986 4.08783 2.36704 4.03516 2.49965 4.03516H13.4997C13.6323 4.03516 13.7594 4.08783 13.8532 4.1816C13.947 4.27537 13.9997 4.40255 13.9997 4.53516C13.9997 4.66776 13.947 4.79494 13.8532 4.88871C13.7594 4.98248 13.6323 5.03516 13.4997 5.03516H2.49965C2.36704 5.03516 2.23986 4.98248 2.1461 4.88871C2.05233 4.79494 1.99965 4.66776 1.99965 4.53516Z" fill="%23C15303"/></g><defs><clipPath id="clip0_3208_84098"><rect width="16" height="16" fill="white" transform="translate(0 0.0351562)"/></clipPath></defs></svg>');
+}
+
+.ds-sidebar-arrow {
+    width: 16px;
+    height: 17px;
+    background-size: contain;
+    background-repeat: no-repeat;
+    display: inline-block;
+	background-image: url('data:image/svg+xml,<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.64567 4.68205C1.69212 4.63549 1.74729 4.59854 1.80804 4.57334C1.86878 4.54813 1.93391 4.53516 1.99967 4.53516C2.06544 4.53516 2.13056 4.54813 2.19131 4.57334C2.25205 4.59854 2.30723 4.63549 2.35367 4.68205L7.99967 10.3291L13.6457 4.68205C13.6922 4.63556 13.7473 4.59869 13.8081 4.57353C13.8688 4.54837 13.9339 4.53542 13.9997 4.53542C14.0654 4.53542 14.1305 4.54837 14.1913 4.57353C14.252 4.59869 14.3072 4.63556 14.3537 4.68205C14.4002 4.72854 14.437 4.78373 14.4622 4.84447C14.4874 4.90521 14.5003 4.97031 14.5003 5.03605C14.5003 5.10179 14.4874 5.16689 14.4622 5.22763C14.437 5.28837 14.4002 5.34356 14.3537 5.39005L8.35367 11.39C8.30723 11.4366 8.25205 11.4736 8.19131 11.4988C8.13056 11.524 8.06544 11.5369 7.99967 11.5369C7.93391 11.5369 7.86878 11.524 7.80804 11.4988C7.74729 11.4736 7.69212 11.4366 7.64567 11.39L1.64567 5.39005C1.59911 5.3436 1.56217 5.28843 1.53696 5.22768C1.51175 5.16694 1.49878 5.10182 1.49878 5.03605C1.49878 4.97028 1.51175 4.90516 1.53696 4.84442C1.56217 4.78367 1.59911 4.7285 1.64567 4.68205Z" fill="%23C15303"/></svg>');
 }