diff --git a/dashboard_static/index.html b/dashboard_static/index.html index 757132f..9e26092 100644 --- a/dashboard_static/index.html +++ b/dashboard_static/index.html @@ -99,15 +99,17 @@
-
- Sort By arrow_drop_down +
+ Sort By
    +
  • Time
  • Time
  • Likes
  • Retweets
  • Replies
+ arrow_drop_down
arrow_downward diff --git a/dashboard_static/js/events.js b/dashboard_static/js/events.js index 015b661..8ada20f 100644 --- a/dashboard_static/js/events.js +++ b/dashboard_static/js/events.js @@ -38,15 +38,6 @@ $(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() -}) - let root = document.querySelector(":root") $(".logo").on("click", function() { @@ -87,6 +78,19 @@ $(window).on("filter", function() { } }) +$(".current-sort").on("click", function() { + $(".sort-dropdown-list li:not(:first-of-type)").toggle() +}) + +$(".sort-btn").on("click", function() { + $(".sort-dropdown-list li:not(:first-of-type)").toggle() +}) + +$(".sort-dropdown-list li:not(:first-of-type)").on("click", function() { + $(".sort-dropdown-list li:not(:first-of-type)").toggle() + $(".current-sort").html($(this).html()) +}) + $(".order-btn").on("click", function() { if($(this).html() == "arrow_downward") { // Descending to ascending diff --git a/dashboard_static/style/style.css b/dashboard_static/style/style.css index 530e2dd..ec3f7ef 100644 --- a/dashboard_static/style/style.css +++ b/dashboard_static/style/style.css @@ -252,33 +252,57 @@ body { user-select: none; } -.sort-btn { +.sort-by { user-select: none; - position: relative; + display: flex; + padding: 8px; +} + +.sort-by-title { + font-size: 24px; + font-weight: 500; + margin-right: 8px; } .sort-dropdown { - display: none; + display: flex; + align-items: flex-start; + position: relative; } .sort-dropdown-list { /* position: absolute; */ - width: 100%; list-style-type: none; padding: 0; margin: 0; - margin-left: -8px; - background-color: var(--main-light); - border-radius: 0 0 16px 16px; + background-color: white; + width: 150px; + border-radius: 16px; +} + +.material-symbols-outlined.sort-btn { + position: absolute; + right: 0; + top: 5px; + color: black; + font-size: 26px; +} + +.sort-dropdown-list li:not(:first-of-type) { + display: none; +} + +.sort-dropdown-list li:not(:first-of-type):hover { + background-color: rgb(215, 215, 215); } .sort-dropdown-list li { + color: #1E1E1E; font-weight: 500; font-size: 22px; padding: 0 8px; } -.radius-bottom { - border-bottom-left-radius: 16px; - border-bottom-right-radius: 16px; +.current-sort { + line-height: 36px; } \ No newline at end of file