Improve action icon toggle for accessibility and general layout (CFM-…

…388) (#186)
COmanage · Apr 24, 2024 · b8a627a · b8a627a
1 parent 4b3bc03
commit b8a627a
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 18 deletions.
diff --git a/app/webroot/css/co-base.css b/app/webroot/css/co-base.css
@@ -640,7 +640,7 @@ ul.form-list li.alert-banner .co-alert {
   display: flex;
   justify-content: space-between;
   margin: 1em 0 0.5em;
-  align-items: flex-end;
+  align-items: baseline;
   flex-wrap: wrap;
 }
 #select-co.page-title-container {
@@ -1028,20 +1028,18 @@ th.with-field-actions {
 td.with-field-actions {
   display: flex;
   align-items: center;
+  padding: 0;
 }
-.field-actions {
-  float: left;
-  padding-left: 1.5em;
-  margin-left: -1.5em;
-}
-.field-actions-menu {
-  margin-right: 0.75em;
+.field-actions .action-menu-toggle {
+  display: inline-block;
+  padding: 1em;
 }
 .field-actions-menu.actions-expanded {
   margin-right: 0;
 }
 .field-actions .dropdown-menu {
   padding: 0;
+  margin: -1em 0 !important; /* offset gear icon padding */
   font-size: 1em;
   border-radius: 0;
 }
@@ -1674,9 +1672,6 @@ ul.form-list .cm-time-picker-vals li {
   margin: 0;
 }
 /* MVEA & STANDARD MODAL */
-.cm-modal .modal-dialog {
-  max-width: 90vw;
-}
 .cm-modal .modal-header {
   padding: 0.5rem 1rem;
   background-color: var(--cmg-color-bg-004);
@@ -1837,9 +1832,8 @@ table {
   clear: both;
 }
 th, td {
-  padding: 0.75em;
+  padding: 1em 1em 1em 1.5em;
   text-align: left;
-  vertical-align: top;
 }
 th {
   background-color: var(--cmg-color-bg-003);
@@ -2136,11 +2130,17 @@ html.dark-mode .btn-default:active {
 /* Density "small" */
 html.density-small th, 
 html.density-small td {
-  padding: 0.5em;
+  padding: 0.5em 0.5em 0.5em 1em;
 }
 html.density-small th.with-field-actions {
   padding-left: 2.5em;
 }
+html.density-small td.with-field-actions {
+  padding: 0;
+}
+html.density-small .field-actions .action-menu-toggle {
+  padding: 0.75em;
+}
 html.density-small table.bulk-edit-mode th.with-field-actions {
   padding-left: 0.5em;
 }
@@ -2159,14 +2159,17 @@ html.density-small a.menu-panel-toggle {
 /* Density "large" */
 html.density-large th,
 html.density-large td {
-  padding: 1.25em;
+  padding: 1.25em 1.25em 1.25em 1.75em;
 }
 html.density-large th.with-field-actions {
   padding-left: 2.75em;
 }
 html.density-large table.bulk-edit-mode th.with-field-actions {
   padding-left: 1.25em;
 }
+html.density-large td.with-field-actions {
+  padding-left: 0.5em;
+}
 html.density-large .co-grid .col {
   padding: 1.5em;
 }

diff --git a/app/webroot/css/co-responsive.css b/app/webroot/css/co-responsive.css
@@ -92,6 +92,9 @@
   ul.form-list li.field-stack textarea {
     margin: 0.5em 0 0.5em 0.5em;
   }
+  .cm-modal .modal-dialog {
+    max-width: 90vw;
+  }
   /* PERSON CANVAS / CARDS */
   .co-cards .field-data-container {
     display: grid;
@@ -397,9 +400,6 @@
   /* 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 .actions-expanded .action-menu-toggle {
     display: none;
   }