Merge pull request #3 from arlen/feature-cfm29-legacyPetitionViewerIm…

…provements Styling for Historic Petition attributes (CFM-29)
Ioannis · Jan 14, 2026 · e3bdbc0 · e3bdbc0
2 parents 14f6896 + c7e5d33
commit e3bdbc0
Show file tree

Hide file tree

Showing 6 changed files with 107 additions and 87 deletions.
diff --git a/app/plugins/HistoricPetitionViewer/resources/locales/en_US/historic_petition_viewer.po b/app/plugins/HistoricPetitionViewer/resources/locales/en_US/historic_petition_viewer.po
@@ -0,0 +1,39 @@
+# COmanage Registry Localizations (historic_petition_viewer domain)
+#
+# Portions licensed to the University Corporation for Advanced Internet
+# Development, Inc. ("UCAID") under one or more contributor license agreements.
+# See the NOTICE file distributed with this work for additional information
+# regarding copyright ownership.
+#
+# UCAID licenses this file to you under the Apache License, Version 2.0
+# (the "License"); you may not use this file except in compliance with the
+# License. You may obtain a copy of the License at:
+#
+# http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+#
+# @link          https://www.internet2.edu/comanage COmanage Project
+# @package       registry-plugins
+# @since         COmanage Registry v5.2.0
+# @license       Apache License, Version 2.0 (http://www.apache.org/licenses/LICENSE-2.0)
+
+
+msgid "attributes"
+msgstr "Attributes"
+
+msgid "attributes.none"
+msgstr "No historic attributes recorded for this petition."
+
+msgid "historic.petition"
+msgstr "Historic Petition #{0}"
+
+msgid "metadata"
+msgstr "Metadata"
+
+msgid "metadata.none"
+msgstr "No historic metadata recorded for this petition."
diff --git a/app/plugins/HistoricPetitionViewer/templates/cell/HistoricPetitionViewers/display.php b/app/plugins/HistoricPetitionViewer/templates/cell/HistoricPetitionViewers/display.php
@@ -25,21 +25,17 @@
   return ucwords($label);
 };
 
-// Do not alter font coloring; keep defaults
-// Each row: label 1/3, value 2/3; both left-aligned; 1em padding inside each cell.
 $renderLi = static function (string $label, $value) {
   if ($value === null || $value === '') return;
   $out = is_scalar($value) ? (string)$value : json_encode($value);
   ?>
-    <li class="list-group-item petition-key-value py-0 px-0">
-        <div class="row g-0">
-            <div class="col-12 col-md-4 petition-attr-label text-start" style="padding:1em;">
-              <?= h($label) ?>
-            </div>
-            <div class="col-12 col-md-8 petition-attr-value text-start text-break" style="padding:1em;">
-              <?= h($out) ?>
-            </div>
-        </div>
+    <li class="petition-key-value">
+      <h4 class="petition-attr-label">
+        <?= h($label) ?>
+      </h4>
+      <div class="petition-attr-value">
+        <?= h($out) ?>
+      </div>
     </li>
   <?php
 };
@@ -65,69 +61,44 @@
 $metaTabId = $tabIdBase . '-meta';
 $attrTabId = $tabIdBase . '-attrs';
 ?>
-<div class="historic-petition-view">
-    <h3 class="mb-3"><?= h(__('Historic Petition')) ?> #<?= h($entityId) ?></h3>
 
-    <ul class="nav nav-tabs" role="tablist">
-        <li class="nav-item" role="presentation">
-            <button class="nav-link active" id="<?= h($metaTabId) ?>-tab"
-                    data-bs-toggle="tab"
-                    data-bs-target="#<?= h($metaTabId) ?>"
-                    type="button" role="tab"
-                    aria-controls="<?= h($metaTabId) ?>" aria-selected="true">
-                <strong><?= h(__('Metadata')) ?></strong>
-            </button>
-        </li>
-        <li class="nav-item" role="presentation">
-            <button class="nav-link" id="<?= h($attrTabId) ?>-tab"
-                    data-bs-toggle="tab"
-                    data-bs-target="#<?= h($attrTabId) ?>"
-                    type="button" role="tab"
-                    aria-controls="<?= h($attrTabId) ?>" aria-selected="false">
-                <strong><?= h(__('Attributes')) ?></strong>
-            </button>
-        </li>
+<div class="historic-petition-id"><?= __d('historic_petition_viewer','historic.petition',$entityId) ?></div>
+
+<!-- Metadata -->
+<h3><?= __d('historic_petition_viewer','metadata') ?></h3>
+<?php if (!empty($metaRows)): ?>
+  <?php foreach ($metaRows as $meta): ?>
+    <?php
+    $arr = $toArr($meta);
+    $keys = array_values(array_diff(array_keys($arr), $excludeMetaKeys));
+    $ordered = array_values(array_unique(array_merge($preferredMetaOrder, $keys)));
+    ?>
+    <ul class="petition-metadata-list">
+      <?php foreach ($ordered as $k): ?>
+        <?php if (in_array($k, $excludeMetaKeys, true)) continue; ?>
+        <?php $renderLi($prettify($k), $arr[$k] ?? null); ?>
+      <?php endforeach; ?>
     </ul>
+  <?php endforeach; ?>
+<?php else: ?>
+  <p class="empty-hint"><?= __d('historic_petition_viewer','metadata.none') ?></p>
+<?php endif; ?>
 
-    <div class="tab-content">
-        <!-- Metadata Pane -->
-        <div class="tab-pane fade show active" id="<?= h($metaTabId) ?>" role="tabpanel" aria-labelledby="<?= h($metaTabId) ?>-tab">
-          <?php if (!empty($metaRows)): ?>
-            <?php foreach ($metaRows as $meta): ?>
-              <?php
-              $arr = $toArr($meta);
-              $keys = array_values(array_diff(array_keys($arr), $excludeMetaKeys));
-              $ordered = array_values(array_unique(array_merge($preferredMetaOrder, $keys)));
-              ?>
-                  <ul class="list-group petition-metadata-list">
-                    <?php foreach ($ordered as $k): ?>
-                      <?php if (in_array($k, $excludeMetaKeys, true)) continue; ?>
-                      <?php $renderLi($prettify($k), $arr[$k] ?? null); ?>
-                    <?php endforeach; ?>
-                  </ul>
-            <?php endforeach; ?>
-          <?php else: ?>
-              <p class="empty-hint mb-0"><?= h(__('No historic metadata recorded for this petition.')) ?></p>
-          <?php endif; ?>
-        </div>
+<!-- Attributes -->
+<h3><?= __d('historic_petition_viewer','attributes') ?></h3>
+<?php if (!empty($attrRows)): ?>
+  <ul class="petition-attributes-list">
+    <?php foreach ($attrRows as $row): ?>
+      <?php
+      $a = $toArr($row);
+      $label = $a['attribute'] ?? null;
+      $value = $a['value'] ?? null;
+      if ($label === null) continue;
+      $renderLi($prettify((string)$label), $value);
+      ?>
+    <?php endforeach; ?>
+  </ul>
+<?php else: ?>
+  <p class="empty-hint"><?= __d('historic_petition_viewer','attributes.none') ?></p>
+<?php endif; ?>
 
-        <!-- Attributes Pane -->
-        <div class="tab-pane fade" id="<?= h($attrTabId) ?>" role="tabpanel" aria-labelledby="<?= h($attrTabId) ?>-tab">
-          <?php if (!empty($attrRows)): ?>
-              <ul class="list-group petition-attributes-list">
-                <?php foreach ($attrRows as $row): ?>
-                  <?php
-                  $a = $toArr($row);
-                  $label = $a['attribute'] ?? null;
-                  $value = $a['value'] ?? null;
-                  if ($label === null) continue;
-                  $renderLi($prettify((string)$label), $value);
-                  ?>
-                <?php endforeach; ?>
-              </ul>
-          <?php else: ?>
-              <p class="empty-hint mb-0"><?= h(__('No historic attributes recorded for this petition.')) ?></p>
-          <?php endif; ?>
-        </div>
-    </div>
-</div>
diff --git a/app/resources/locales/en_US/information.po b/app/resources/locales/en_US/information.po
@@ -69,6 +69,9 @@ msgstr "Page {{page}} of {{pages}}, Viewing {{start}}-{{end}} of {{count}}"
 msgid "enrollment.steps"
 msgstr "Enrollment Steps"
 
+msgid "enrollment.steps.plugin"
+msgstr "Plugin: {0}"
+
 msgid "ExternalIdentities.source"
 msgstr "This External Identity was created from {0}."
 

diff --git a/app/templates/Petitions/petition.inc b/app/templates/Petitions/petition.inc
@@ -323,7 +323,7 @@ if (!empty($vv_obj?->petitioner_person?->id)) {
       </div>
     </div>
     <div id="collapse-box-<?= $step->id ?>" class="petition-attrs collapse">
-      <h3><?= $step->plugin ?></h3>
+      <h3 class="ef-step-plugin-title"><?= __d('information', 'enrollment.steps.plugin', $step->plugin) ?></h3>
       <?= $this->cell($step->plugin, [$vv_obj->id], ['vv_obj' => $vv_obj, 'vv_step' => $step, 'viewVars' => $this->viewVars]) ?>
     </div>
   </li>

diff --git a/app/webroot/css/co-base.css b/app/webroot/css/co-base.css
@@ -2227,26 +2227,37 @@ ul#view_Petitions.form-list li.env-source-key-value-newgroup {
   margin-right: 1em;
 }
 .petition-attrs {
-  padding: 0;
+  padding: 1.5rem;
   box-shadow: inset 0 0 0.5rem 0 rgba(0,0,0,0.1);
+  border-top: 1px solid var(--cmg-color-bg-006);
+  word-break: break-word;
 }
 .petition-attrs h3 {
-  padding: 1rem 1rem 0;
-  margin: 0;
+  padding: 0 0 0.25rem;
+  margin: 1.5rem 0 0.5rem;
   font-size: 1.2em;
   font-weight: 600;
-  border-top: 1px solid var(--cmg-color-bg-006);
+  border-bottom: 1px solid var(--cmg-color-bg-005);
 }
-.petition-attrs h4 {
+.petition-attrs h3.ef-step-plugin-title {
+  margin: 0;
+  border-bottom: none;
+}
+.petition-attrs h4.petition-attr-label {
   font-size: 0.9em;
   margin: 0 0 0.25em;
 }
 .petition-attrs > ul {
-  padding: 0 0 1rem;
+  padding: 0;
   border-top: none;
+  margin-top: 1.5rem;
+}
+.petition-attrs h3 + ul {
+  margin-top: 1rem;
 }
 .petition-attrs > ul > li {
-  padding: 0.5rem 1rem;
+  padding: 0;
+  margin-bottom: 1.5rem;
   border: none;
   background-color: unset;
 }

diff --git a/app/webroot/css/co-responsive.css b/app/webroot/css/co-responsive.css
@@ -106,6 +106,7 @@
   .petition-attrs > ul {
     columns: 2;
     column-rule: 1px solid var(--cmg-color-bg-005);
+    gap: 2.5rem;
   }
   .petition-attrs > ul > li {
     break-inside: avoid;
@@ -373,7 +374,7 @@
     gap: 2rem;
     align-items: center;
     text-align: left;
-    margin: 1rem 0 0.5rem;
+    margin: 2rem 0 0.5rem;
   }
   /* GENERAL */
   .table-container {
@@ -671,11 +672,6 @@
     border: 1px solid var(--cmg-color-bg-006);
     border-radius: 1em;
   }
-  /* PETITIONS */
-  .petition-key-value {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-  }
 }
 
 /* EXTRA LARGE */