Update style for the display of recipes when filtering transactions

views/dashboardPage/dashboard.css

@@ -465,12 +465,12 @@ Transactions Strand
         padding: 5px;
         margin: 0;
         align-items: center;
+        max-height: 150px;
     }
 
         #transactionFilter > div{
             display: flex;
             justify-content: space-around;
-            align-items: center;
             width: 100%;
         }
 
@@ -478,10 +478,49 @@ Transactions Strand
                 display: flex;
                 flex-direction: column;
                 text-align: center;
+                margin: 0;
             }
 
+            .filterLabel2{
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                position: relative;
+                margin: 0;
+            }
+
+                .filterLabel2 button{
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    height: 25px;
+                    width: 25px;
+                    border-radius: 5px;
+                    border: 1px solid black;
+                    background: none;
+                    cursor: pointer;
+                }
+
+                    .filterLabelHead{
+                        display: flex;
+                    }
+
+                    .filterLabel2 button:hover{
+                        background: rgb(0, 27, 45);
+                        color: white;
+                    }
+
                 #transFilCheckboxes{
                     text-align: left;
+                    position: absolute;
+                    top: 25px;
+                    background: rgb(240, 252, 255);
+                    z-index: 1;
+                    padding: 2px;
+                    border: 1px solid black;
+                    border-radius: 5px;
+                    padding: 5px;
+                    white-space: nowrap;
                 }
 
                     #transFilCheckboxes label{
@@ -489,7 +528,9 @@ Transactions Strand
                     }
         
             #transactionFilter input[type=submit]{
-                max-height: 50px;
+                max-height: 30px;
+                padding: 0;
+                font-size: 15px;
             }
 
 @media screen and (max-width: 1000px){

views/dashboardPage/dashboard.ejs

@@ -279,11 +279,21 @@
                             <input id="transFilDate1"type="date">
                             <input id="transFilDate2" type="date">
                         </label>
-                        <label class="filterLabel">RECIPES:
+                        <div class="filterLabel2">
+                            <div class="filterLabelHead">
+                                <p>RECIPES</p>
+                                <button onclick="transactionsStrandObj.toggleRecipes()">
+                                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                        <polyline points="6 9 12 15 18 9"></polyline>
+                                    </svg>
+                                </button>
+                            </div>
+
                             <div id="transFilCheckboxes"></div>
-                        </label>
-                        <input class="button" type="submit" value="SUBMIT">
+                        </div>
                     </div>
+
+                    <input class="button" type="submit" value="SUBMIT">
                 </form>
 
                 <div id="transactionsList" class="transactionsList"></div>

views/dashboardPage/transactions.js

@@ -12,6 +12,7 @@ window.transactionsStrandObj = {
             document.getElementById("transFilDate1").valueAsDate = monthAgo;
             document.getElementById("transFilDate2").valueAsDate = now;
 
+            checkboxes.style.display = "none";
             while(checkboxes.children.length > 0){
                 checkboxes.removeChild(checkboxes.firstChild);
             }
@@ -135,5 +136,16 @@ window.transactionsStrandObj = {
             .finally(()=>{
                 loader.style.display = "none";
             });
+    },
+
+    toggleRecipes: function(){
+        event.preventDefault();
+
+        let checkboxes = document.getElementById("transFilCheckboxes");
+        if(checkboxes.style.display === "none"){
+            checkboxes.style.display = "block";
+        }else{
+            checkboxes.style.display = "none";
+        }
     }
 }