Improve MVEA table layout (CFM-417)

COmanage · Mar 31, 2026 · 94065ec · 94065ec
1 parent 4c32800
commit 94065ec
Show file tree

Hide file tree

Showing 7 changed files with 174 additions and 158 deletions.
diff --git a/app/resources/locales/en_US/field.po b/app/resources/locales/en_US/field.po
@@ -197,6 +197,9 @@ msgstr "Full Name"
 msgid "hostname"
 msgstr "Hostname"
 
+msgid "key"
+msgstr "Key"
+
 msgid "language"
 msgstr "Language"
 

diff --git a/app/src/View/Helper/VueHelper.php b/app/src/View/Helper/VueHelper.php
@@ -53,13 +53,17 @@ class VueHelper extends Helper {
     ],
     'field' => [
       'email',
+      'key',
       'login',
       'primary',
       'datepicker.chooseTime',
       'datepicker.hour',
       'datepicker.minute',
+      'source',
       'status',
+      'type',
       'unverified',
+      'value'
     ],
     'information' => [
       'global.attributes.none',
@@ -98,7 +102,7 @@ class VueHelper extends Helper {
   ];
 
   /**
-   * Helper which will produce an array of configured locales
+   * Helper which will produce an array of configured locales from the locales_list above.
    *
    * @param   string  $lang  The language of the locale
    *

diff --git a/app/templates/element/mveaCanvas.php b/app/templates/element/mveaCanvas.php
@@ -92,7 +92,7 @@
   }
 ?>
 <div id="mvea-canvas" class="co-cards">
-  <div id="mvea-canvas-attributes-js" class="row row-cols-1 g-4<?= ($widgetCount > 1) ? ' row-cols-md-2' : ''?>">
+  <div id="mvea-canvas-attributes-js" class="row row-cols-1 g-4<?= ($widgetCount > 1) ? ' row-cols-lg-2' : ''?>">
     <?php if($widgetCount == 0): ?>
         <div class="no-attributes"><?= __d('information','noattrs') ?></div>
     <?php else: ?>

diff --git a/app/webroot/css/co-base.css b/app/webroot/css/co-base.css
@@ -1375,9 +1375,15 @@ h2.card-title a {
   text-decoration: none;
 }
 table.cm-mvea td {
-  width: 25%;
+  width: 30%;
 }
 table.cm-mvea td:first-child {
+  width: 70%;
+}
+table.cm-mvea.cm-mvea-with-eis td {
+  width: 25%;
+}
+table.cm-mvea.cm-mvea-with-eis td:first-child {
   width: 50%;
 }
 .field-data-container .id-col {
@@ -2429,7 +2435,7 @@ code.source-record {
   align-items: center;
 }
 button.cm-copy-value-button {
-  display: flex;
+  display: none; /* turn on at 576px */
   align-items: center;
   gap: 0.1em;
   padding: 0 0.5em 0.2em;

diff --git a/app/webroot/css/co-responsive.css b/app/webroot/css/co-responsive.css
@@ -113,26 +113,16 @@
   /* PERSON CANVAS / CARDS */
   .co-cards .field-data-container {
     vertical-align: center;
-    /*display: grid;*/
-    /*grid-template-columns: 1fr 1fr;*/
-    /*align-items: center;*/
-    /*min-height: 2.5em;*/
   }
   .co-cards th {
     font-size: 0.8rem;
     padding: 0.25rem 0.75rem;
   }
-  .co-cards .cm-mvea-with-eis .field-data-container {
-    /*grid-template-columns: 2fr 100px 1fr;*/
-  }
-  .co-cards .field-data.data-eis {
-    /*padding: 0.25em 0;*/
-  }
   .co-cards .field-data.data-eis .badge {
     margin: 0;
   }
-  #mvea-canvas-roles .field-data-container {
-    /*grid-template-columns: 1fr 1fr 2fr auto;*/
+  button.cm-copy-value-button {
+    display: flex;
   }
   /* PAGINATION */
   #pagination {