related to #1609 added beginning of drop down for media queries

admin/themes/default/js/albums.js

@@ -29,15 +29,29 @@ $(document).ready(() => {
       +'</div>';
     action_order = "<a data-id='"+node.id+"' class='move-cat-order icon-sort-name-up'></a>";
 
+    action_small = 
+    "<div class='icon-ellipsis-vert move-cat-action-small toggle-cat-option'>"
+      +"<span id='catOptionsSmall' class='dropdown cat-option'>"
+        +"<a class='icon-docs dropdown-option' id='GroupDuplicate' value='duplicate'>{'Duplicate'|@translate}</a>"
+        +"<a class='icon-trash dropdown-option' id='GroupDelete' value='delete'>{'Delete'|@translate}</a>"
+        +"<a class='icon-star dropdown-option' id='GroupDefault' value='delete'></a>"
+      +"</span>"
+    +"</div>";
+
     cont = li.find('.jqtree-element');
     cont.addClass('move-cat-container');
     cont.attr('id', 'cat-'+node.id)
     cont.html('');
 
     cont.append(actions);
-
     cont.find('.move-cat-action .move-cat-see').after(action_order);
 
+    cont.find('.move-cat-action').before(action_small);
+    cont.find(".toggle-cat-option").on("click", function () {
+      $(".cat-option").hide();
+      $(this).find(".cat-option").toggle();
+    })
+
     if (node.children.length != 0) {
       open_nodes = $('.tree').tree('getState').open_nodes;
       if (open_nodes.includes(node.id)) {

admin/themes/default/template/albums.tpl

@@ -528,7 +528,7 @@ input[name="position"] {
 }
 
 .jqtree-moving .move-cat-container .badge-container i,
-.jqtree-moving .move-cat-container .node-icon{
+.jqtree-moving .move-cat-container .node-icon {
   color: #ffd7ad;
   background-color: #f98100;
 }
@@ -539,7 +539,45 @@ input[name="position"] {
 
 .dragging .move-cat-container .move-cat-toogler,
 .dragging .move-cat-container .move-cat-action-cont a,
-.dragging .move-cat-container .move-cat-title-container{
+.dragging .move-cat-container .move-cat-title-container,
+.dragging .move-cat-action-small {
   pointer-events: all;
 }
+
+.move-cat-action-small {
+  display: none;
+  position: relative;
+  right: 10px;
+  font-weight: bold;
+  cursor: pointer;
+  transform: scale(1.2);
+  padding: 20px 10px;
+}
+
+@media (max-width: 1415px) { 
+  .badge-container  .last-update {
+    display: none;
+  }
+}
+
+@media (max-width: 1300px) { 
+  .badge-container {
+    display: none;
+  }
+}
+
+@media (max-width: 1230px) { 
+  .badge-container {
+    display: none;
+  }
+
+  .move-cat-action {
+    display: none;
+  }
+
+  .move-cat-action-small {
+    display: flex;
+  }
+}
+
 </style>

admin/themes/default/theme.css

@@ -684,6 +684,17 @@ LI.menuLi {
   border-color: transparent transparent #ff7700 transparent;
 }
 
+#catOptionsSmall.dropdown::after {
+  content: " ";
+  position: absolute;
+  bottom: 100%;
+  left: 85%;
+  margin-left: -5px;
+  border-width: 5px;
+  border-style: solid;
+  border-color: transparent transparent #ff7700 transparent;
+}
+
 .dropdown-content {
   position: relative;
 }
@@ -4216,7 +4227,7 @@ FORM#categoryOrdering p.albumActions .userSeparator {margin:0 5px;}
   transform: translate(50%, -50%);
   align-items: center;
   flex-direction: row-reverse;
-  overflow: hidden;
+  /* overflow: hidden; */
 }
 
 .move-cat-action {
@@ -4964,7 +4975,7 @@ input:checked + .slider:before, input:checked + .slider::after {
   cursor: pointer;
 }
 
-#GroupOptions{
+#GroupOptions {
   display:none;
   z-index:1;
   position:absolute;
@@ -4972,6 +4983,12 @@ input:checked + .slider:before, input:checked + .slider::after {
   left:50%;
   top: 37px;
 }
+#catOptionsSmall{
+  display:none;
+  position:absolute;
+  right: -10px;
+  top: 40px;
+}
 
 .is-default-token {
   display: block;