Refine top-links responsive behavior to remain in a dropdown menu whe…

…n more than three actions are present. (CFM-301) (#111)
COmanage · Jul 27, 2023 · 0b1db78 · 0b1db78
1 parent fc38e61
commit 0b1db78
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 9 deletions.
diff --git a/app/templates/element/menuAction.php b/app/templates/element/menuAction.php
@@ -27,7 +27,9 @@
 
 $actionsCount = count($vv_actions);
 $actionsCountClass = $actionsCount > 0 ? ' actions-count-' . $actionsCount : '';
-$actionsMenuClass = (!empty($vv_actions_class) ? $vv_actions_class : 'field-actions-menu') . ' dropdown dropleft' . $actionsCountClass;
+$actionsExpandedClass = ($actionsCount > 0 && $actionsCount < 4) ? ' actions-expanded' : '';
+$actionsMenuClass = (!empty($vv_actions_class) ? $vv_actions_class : 'field-actions-menu') 
+  . ' dropdown dropleft' . $actionsCountClass . $actionsExpandedClass;
 $actionsMenuUid = md5($vv_attr_id);
 $actionsType = !empty($vv_actions_type) ? $vv_actions_type : 'row-actions';
 $actionsTitle = !empty($vv_actions_title) ? $vv_actions_title : '';

diff --git a/app/webroot/css/co-responsive.css b/app/webroot/css/co-responsive.css
@@ -350,15 +350,16 @@
     padding: 0;
   }
   /* EDIT / VIEW / INDEX ACTION TOP-LINKS MENU */
-  /* Convert the dropdown menus to be visible on wider screens.
-     XXX We will likely collapse the toplinks when there are many, but for now, expose them. */
+  /* Convert the dropdown menus to be visible on wider screens when .actions-expanded class exists. 
+     .action-expanded is set when there are fewer than four actions exposed. Otherwise, all links remain
+     in the gear dropdown menu. */
   .field-actions.top-links {
     align-self: end;
   }
-  .field-actions.top-links  .action-menu-toggle {
+  .field-actions.top-links .actions-expanded .action-menu-toggle {
     display: none;
   }
-  .field-actions.top-links  .dropdown-menu {
+  .field-actions.top-links .actions-expanded  .dropdown-menu {
     position: static;
     display: inline-block;
     min-width: 0;
@@ -367,17 +368,17 @@
     background-color: transparent;
     white-space: nowrap;
   }
-  .field-actions.top-links  .action-list-item {
+  .field-actions.top-links .actions-expanded  .action-list-item {
     display: inline-block;
   }
-  .field-actions.top-links  a.dropdown-item {
+  .field-actions.top-links .actions-expanded  a.dropdown-item {
     padding: 0 0.5em;
   }
-  #main .field-actions.top-links  a.dropdown-item:hover {
+  #main .field-actions.top-links .actions-expanded  a.dropdown-item:hover {
     color: var(--cmg-color-link);
     text-decoration: underline;
   }
-  .field-actions.top-links  a.dropdown-item:hover {
+  .field-actions.top-links .actions-expanded  a.dropdown-item:hover {
     background-color: transparent;
   }
   /* FOOTER */