Skip to content
Jump to bottom

Refine top-links responsive behavior to remain in a dropdown menu when more than three actions are present. (CFM-301) #111

Merged
merged 1 commit into from
Jul 27, 2023
+12 −9
Merged

Refine top-links responsive behavior to remain in a dropdown menu when more than three actions are present. (CFM-301) #111

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion app/templates/element/menuAction.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 : '';
Expand Down
17 changes: 9 additions & 8 deletions app/webroot/css/co-responsive.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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 */
Expand Down