Feat : Update list editor click

clementp0 · Aug 10, 2024 · ab5f86f · ab5f86f
1 parent 7a52583
commit ab5f86f
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 6 deletions.
diff --git a/assets/index.js b/assets/index.js
@@ -39,6 +39,18 @@ $(() => {
     $('.dropdown-content').removeClass('dropdown-content-open')
   })
 
+  // Favorite menu
+  $('.dropbtnfav').on('click', function() {
+    $('.dropdown-favorite-content').removeClass('dropdown-favorite-content-open');
+    $(this).siblings('.dropdown-favorite-content').toggleClass('dropdown-favorite-content-open');
+  });
+
+  $('.dropdown-favorite-tray').on('click', function (e) {
+    if (e.target != this) return
+    $('.dropdown-favorite-content').removeClass('dropdown-favorite-content-open')
+  })
+
+
   // Copy link
   $("#copyButton").click(function(){
       var $tempInput = $("<input>");

diff --git a/assets/scss/page/favorite.scss b/assets/scss/page/favorite.scss
@@ -126,12 +126,17 @@ p.favorite-page-title {
         display: flex;
       }
 
-      &:hover .dropdown-favorite-content {
-        transform: translateY(0);
-        transition: all 1s;
+      .dropdown-favorite-content-open{
+        transform: translateY(0)!important;
+        transition: all .5s!important;
       }
 
-      .dropbtn {
+      // &:hover .dropdown-favorite-content {
+      //   transform: translateY(0);
+      //   transition: all 1s;
+      // }
+
+      .dropbtnfav {
         background-color: transparent;
         border: none;
         color: #adadad;
@@ -151,8 +156,10 @@ p.favorite-page-title {
       .dropdown-favorite-content {
         position: fixed;
         display: flex;
+        border-top-left-radius: 6px;
+        border-top-right-radius: 6px;
         flex-direction: column;
-        transition: all 1s;
+        transition: all .5s;
         transform: translateY(100%);
         justify-content: space-evenly;
         padding: 10px 10px 31px 10px;
@@ -162,6 +169,14 @@ p.favorite-page-title {
         z-index: 1030;
         width: 100%;
 
+        .dropdown-favorite-tray {
+          height: 5px;
+          width: 50%;
+          background-color: #353535;
+          margin: 5px auto 15px auto;
+          border-radius: 20px;
+        }
+
         .dropdown-favorite-title{
           color:rgb(216, 216, 216);
         }

diff --git a/templates/favorite/index.html.twig b/templates/favorite/index.html.twig
@@ -51,10 +51,11 @@
 				</a>
 
 				<div class="dropdown-favorite desktop-none">
-					<button class="dropbtn">
+					<button class="dropbtnfav">
 						<i class="fa-solid fa-circle-plus"></i>
 					</button>
 					<div class="dropdown-favorite-content fav-item-edit">
+					<div class="dropdown-favorite-tray"></div>
 					<p class="dropdown-favorite-title">{{ item.fav.name }}</p>
 					<div class="dropdown-favorite-content-buttons">
 						<a href="{{ path('app_user_modal', {'type': 'fav', 'param': item.fav.id}) }}" class="inmodal fav-item-share-user{{ item.fav.master ? ' disabled' : '' }}">