Merge pull request #14 from olinpin/FiltersCSS

Filters css

dashboard_static/index.html

@@ -90,17 +90,27 @@
                     </div>
                 </div>
                 <div class="centercol column">
-                    <h1 class="colheader">FILTERED CLUCCS</h1>
+                    <span class="colheader">Filtered Cluccs</span>
                 </div>
                 <div class="rightcol column">
                     <div class="searchcontainer column">
-                    <input class = "searchbar" type = "text" placeholder="SEARCH CLUCCS...">
-                    <button class = "button">SORT BY</button>
-                    <button class = "button">BLOCKED WORDS</button>
-                    <button class = "button">POPULARITY FILTER</button>
+                        <input class="searchbar" type="text" placeholder="SEARCH CLUCCS...">
+                        <div class="button sort-btn">
+                            <span class="sortby">SORT BY <span class="material-symbols-outlined">arrow_drop_down</span></span>
+                            <div class="sort-dropdown">
+                                <ul class="sort-dropdown-list">
+                                    <li>Time</li>
+                                    <li>Likes</li>
+                                    <li>Retweets</li>
+                                    <li>Replies</li>
+                                </ul>
+                            </div>
+                        </div>
+                        <div class="button">BLOCKED WORDS</div>
+                        <div class="button">POPULARITY FILTER</div>
                     </div>
                     <div class="popchart column">
-                    <h1 class="colheader chartheader">SPORTS POPULARITY CHART</h1>
+                        <span class="colheader chartheader">Sports Popularity Filter</span>
                     </div>
                 </div>
             </div>
@@ -113,7 +123,7 @@
     <script src="/lib/log.js"></script>
     <script src="./lib/tweets.js"></script>
     <script src="./js/code.js"></script>
-    <script src="./js/connection.js"></script>
+    <script src="./js/events.js"></script>
     <script>
         block("#tweet").tweets({
             memory: 20

dashboard_static/js/code.js

@@ -1,26 +1,12 @@
-let root = document.documentElement // Used for css variables
-
 let selectedSports = []
 
-$(".sport").on("click", function() {
-    $(this).toggleClass("selected")
-
-    let sportName = $(this).children()[1].innerHTML // 2nd element, which is the sport name
-
-    
-    let index = selectedSports.indexOf(sportName)
-    if (index > -1 ) {  // If element is found in array
-        selectedSports.splice(index, 1) // Remove sport at index
-    } else {
-        selectedSports.push(sportName)  // Add sport to array
-    }
-
-    $(this).trigger("selected", [selectedSports.includes(sportName), selectedSports]) // Trigger event
-    showFeeds()
-})
-
-function getCSSVariable(name) {
-    return getComputedStyle(root).getPropertyValue(name)
+let filters = {
+    selectedSports: selectedSports,
+    searchedWords: [],
+    blockedWords: [],
+    popularityFilter: {},
+    sorted: "time",
+    order: "desc"
 }
 
 function showFeeds() {
@@ -38,14 +24,6 @@ function showFeeds() {
     }
 }
 
-$(window).on("resize", function(){
-    showFeeds()
-});
-
-$(window).on("load", function() {
-    showFeeds()
-})
-
 function tweetCell(tweet) {
     var cell = document.createElement("div");
     cell.innerHTML =

dashboard_static/js/connection.js

@@ -1,8 +0,0 @@
-// Selected = is clicked sport selected or not, BOOL
-// Sports = all selected sports, ARRAY
-$(".sport").on("selected", function(e, selected, sports) {
-    console.log(selected, sports);
-})
-window.addEventListener('DOMContentLoaded', (event) => {
-    window.sessionStorage.setItem('tweets', JSON.stringify([]));
-});

dashboard_static/js/events.js

@@ -0,0 +1,49 @@
+// Selected = is clicked sport selected or not, BOOL
+// Sports = all selected sports, ARRAY
+$(".sport").on("selected", function(e, selected, sports) {
+    console.log(selected, sports);
+})
+
+window.addEventListener('DOMContentLoaded', (event) => {
+    window.sessionStorage.setItem('tweets', JSON.stringify([]));
+});
+
+$(".sport").on("click", function() {
+    $(this).toggleClass("selected")
+
+    let sportName = $(this).children()[1].innerHTML // 2nd element, which is the sport name
+
+    
+    let index = selectedSports.indexOf(sportName)
+    if (index > -1 ) {  // If element is found in array
+        selectedSports.splice(index, 1) // Remove sport at index
+    } else {
+        selectedSports.push(sportName)  // Add sport to array
+    }
+
+    $(this).trigger("selected", [selectedSports.includes(sportName), selectedSports]) // Trigger event
+    showFeeds()
+})
+
+$(window).on("resize", function(){
+    showFeeds()
+});
+
+$(window).on("load", function() {
+    showFeeds()
+})
+
+$(".sortby").on("click", function() {
+    $(".sort-dropdown").toggle()
+    // $(".sort-btn").toggleClass("radius-bottom")
+}) 
+
+$(".sort-dropdown-list li").on("click", function() {
+    $(".sort-dropdown").toggle()
+    filters.sorted = $(this).val()
+    $(window).trigger("test", filters)
+})
+
+$(window).on("test", function(e, filter) {
+    console.log(filter);
+})

dashboard_static/style/style.css

@@ -197,12 +197,14 @@ body {
 
 .searchcontainer {
 	background-color: blue;
-	/* height: 400px; */
+	padding: 8px;
+	box-sizing: border-box;
+	display: flex;
+	flex-wrap: wrap;
 }
 
 .popchart {
 	background-color: rgba(255, 0, 255, 0.344);
-	/* height: 400px; */
 }
 
 .colheader {
@@ -214,19 +216,59 @@ body {
 	padding-left: 30px;
 }
 
-.searchbar, .button {
-	font-weight: bold;
-	font-size: 32px;
-	border-radius: 50px;
-	padding: 10px;
-	margin: 16px;
+
+.searchbar {
+	width: 100%;
 }
 
-.button {
+.searchbar, .button {
+	font-weight: bold;
+	font-size: 24px;
 	border-radius: 50px;
+	padding: 8px;
+	margin: 4px 8px;
 	border: none;
 }
 
-/* .button:hover {
-	background-color: ;
-} */
+.button {
+	color: black;
+	cursor: pointer;
+	background-color: white;
+	border-radius: 30px;
+	border: none;
+}
+
+.sort-btn {
+	user-select: none;
+	position: relative;
+}
+
+.sort-dropdown {
+	display: none;
+}
+
+.sort-dropdown-list {
+	position: absolute;
+	width: 100%;
+	list-style-type: none;
+    padding: 0;
+    margin: 0;
+	margin-left: -8px;
+	background-color: white;
+	border-radius: 0 0 16px 16px;
+}
+
+.sort-dropdown-list li {
+	font-weight: 500;
+	font-size: 22px;
+	padding: 0 8px;
+}
+
+.sort-dropdown-list li:hover {
+	background-color: #dddddd;
+}
+
+.radius-bottom {
+	border-bottom-left-radius: 16px;
+	border-bottom-right-radius: 16px;
+}