feat(ui): Add settings boilerplate

herzkadani · Jul 14, 2023 · 713970d · 713970d
1 parent da361d7
commit 713970d
Show file tree

Hide file tree

Showing 4 changed files with 113 additions and 3 deletions.
diff --git a/backend/api.py b/backend/api.py
@@ -307,6 +307,7 @@ def get_any_deal(deal):
     "zmin_weekly",
 ]
 
+
 with Pool(5) as p:
     deals = p.map(get_any_deal, deals_list)
 

diff --git a/frontend/index.php b/frontend/index.php
@@ -66,6 +66,8 @@ function time_elapsed_string($datetime, $full = false) {
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="styles.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <script src="script.js" defer></script>
     <title>alldeals</title>
 </head>
 
@@ -77,8 +79,25 @@ function time_elapsed_string($datetime, $full = false) {
     <div class=deals_wrapper>
         <?=$htmloutput?>
     </div>
+    <div class="modal" id="settings-modal">
+        <div class="wrapper">
+            <h3>Settings</h3>
+            Soon(TM)
+            <br>
+            <br>
+            <button id="close-modal">
+                <span class="label">
+                    <span class="fa fa-close"></span>Close
+                </span>
+            </button>
+        </div>
+    </div>
     <footer>
     <a href="https://github.com/herzkadani/alldeals"><img src="assets/img/GitHub-Mark-120px-plus.png" alt="view on github" class="github_icon" ></a></img><p>made with <span style="color:red">❤</span> in switzerland <br> help us improve by contributing on GitHub</p>
+    <div class="settings">
+        <span class="label">Settings</span>
+        <span class="fa fa-cog"></span>
+    </div>
 
     </footer>
 

diff --git a/frontend/script.js b/frontend/script.js
@@ -0,0 +1,13 @@
+const settingsButton = document.getElementsByClassName("settings")[0];
+const settingsModal  = document.getElementById("settings-modal");
+const closeButton    = document.getElementById("close-modal");
+
+settingsButton.addEventListener("click", function(){
+  settingsModal.classList.add("open");
+});
+
+closeButton.addEventListener("click", function(){
+  settingsModal.classList.remove("open");
+});
+
+
diff --git a/frontend/styles.css b/frontend/styles.css
@@ -44,11 +44,32 @@ header h3 {
     box-shadow: 14px 10px 10px -10px rgba(0, 0, 0, 0.2);
 }
 
+.settings {
+  margin-left: auto;
+  margin-right: 50%;
+  padding: 8px;
+  border: 1px solid #5c5c5c;
+  border-radius: 10px;
+  transition: background-color 0.2s;
+}
+
+.settings .label {
+  margin-left: 5px;
+  margin-right: 5px;
+  font-family: 'Roboto Condensed', sans-serif;
+}
+
+.settings:hover {
+  background-color: grey;
+  color: white;
+  transition: 0.2s;
+  cursor: pointer;
+}
 
 /* progresbar */
 
 .progress {
-    height: 2em;
+    height: 1.8em;
     width: 100% -3px;
     border: 3px solid;
     border-radius: 10px;
@@ -223,6 +244,54 @@ footer {
 }
 
 
+/* settings modal */
+.modal {
+  display: none;
+  position: fixed;
+  z-index: 1;
+  left: 0;
+  top: 0;
+  width: 100%;
+  background-color: rgba(0,0,0,0.4);
+}
+
+.modal .wrapper {
+  border: 1px solid black;
+  margin: 15% auto;
+  max-width: 50%;
+  padding: 20px;
+  background-color: #FFFFFF;
+  border-radius: 10px;
+
+}
+
+
+#close-modal {
+  padding: 8px;
+  border: 1px solid #5c5c5c;
+  background-color: #FFFFFF;
+  border-radius: 10px;
+  transition: background-color 0.2s;
+}
+
+#close-modal:hover{
+  background-color: #5C5C5C;
+  color: #FFFFFF;
+  transition: 0.2s;
+}
+
+#close-modal .label {
+  margin-left: 5px;
+  margin-right: 5px;
+  font-family: 'Roboto Condensed', sans-serif;
+}
+
+
+.open {
+  display: block !important;
+}
+
+
 /* responsive */
 
 @media (max-width: 800px) {
@@ -251,6 +320,13 @@ footer {
     .view_btn {
         font-size: 1.3em;
     }
+    .settings {
+      margin-left: 0;
+      margin-right: 0;
+    }
+    .settings .label {
+      display: none;
+    }
 }
 
 
@@ -261,7 +337,7 @@ footer {
         display: grid;
         margin-left: 2.5%;
         margin-bottom: 40px;
-    
+
     }
     .title {
         font-size: 1.2em;
@@ -281,4 +357,5 @@ footer {
     .last_update {
         font-size: 0.8em;
     }
-}
+}
+
-Original file line number
+Diff line change
@@ Expand Up / @@ -307,6 +307,7 @@ def get_any_deal(deal): @@
         "zmin_weekly",
     ]
     with Pool(5) as p:
         deals = p.map(get_any_deal, deals_list)
@@ Expand Down @@