Improve layout and styling of delete matchgrid page (CO-1705) (#54)

COmanage · Jan 6, 2023 · 2c633da · 2c633da
1 parent f3fbd20
commit 2c633da
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 12 deletions.
diff --git a/app/resources/locales/en_US/default.po b/app/resources/locales/en_US/default.po
@@ -575,7 +575,10 @@ msgstr "Welcome to {0}."
 
 ### Informational Messages
 msgid "match.in.delete.matchgrid.info"
-msgstr "The database table for this Matchgrid currently exists. You may delete it, or leave it in place. If you delete it, the table CAN NOT BE RESTORED except via database backups. Do you want to delete the physical Matchgrid table ({0})?"
+msgstr "The database table for this Matchgrid currently exists. You may delete it, or leave it in place. If you delete it, the table CAN NOT BE RESTORED except via database backups."
+
+msgid "match.in.delete.matchgrid.prompt"
+msgstr "Do you want to delete the physical Matchgrid table {0}?"
 
 msgid "match.in.matchgrid.display"
 msgstr "Display all records associated with this Matchgrid."

diff --git a/app/templates/Matchgrids/delete.php b/app/templates/Matchgrids/delete.php
@@ -34,14 +34,36 @@
   </div>
 </div>
 
-<p><?= __('match.in.delete.matchgrid.info', [$vv_matchgrid]); ?></p>
+<div class="co-info-topbox">
+  <em class="material-icons">info</em>     
+  <?= __('match.in.delete.matchgrid.info'); ?>
+</div>
+
+<?= $this->Form->create() //$vv_delete_matchgrid_form); ?>
 
-<?php
-  print $this->Form->create(); //$vv_delete_matchgrid_form);
-  print $this->Form->radio('remove',
-                           [
-                              ['value' => 'leave', 'text' => __('match.op.delete.matchgrid.leave', [$vv_matchgrid])],
-                              ['value' => 'remove', 'text' => __('match.op.delete.matchgrid.remove', [$vv_matchgrid])]
-                           ]);
-  print $this->Form->submit(__('match.op.confirm'));
-  print $this->Form->end();
+<fieldset class="content-fieldset">
+  <legend><?= __('match.in.delete.matchgrid.prompt', [$vv_matchgrid]); ?></legend>
+  <?php  
+    $this->Form->setTemplates([
+      'radioWrapper' => '<div class="form-check">{{input}}{{label}}</div>',
+      'nestingLabel' => '<label class="form-check-label" {{attrs}}>{{text}}</label>'
+    ]);
+    print $this->Form->radio('remove',
+      [
+        [
+          'value' => 'leave', 
+          'text' => __('match.op.delete.matchgrid.leave', [$vv_matchgrid]),
+          'class' => 'form-check-input',
+          'checked' => 'checked'
+        ],
+        [
+          'value' => 'remove', 
+          'text' => __('match.op.delete.matchgrid.remove', [$vv_matchgrid]), 
+          'class' => 'form-check-input'
+        ]
+      ]);
+  ?>
+</fieldset>
+
+<?= $this->Form->submit(__('match.op.confirm')) ?>
+<?= $this->Form->end() ?>
diff --git a/app/webroot/css/co-base.css b/app/webroot/css/co-base.css
@@ -354,6 +354,7 @@ body.logged-in #top-menu {
   clear: both;
   padding: 1em;
   background-color: var(--cmg-color-yellow-002);
+  border: 1px solid var(--cmg-color-lightgray-005);
   margin-bottom: 1em;
 }
 #lastLogin p {
@@ -761,6 +762,12 @@ body.logged-in #top-menu {
   margin-bottom: 2em;
   font-style: italic;
 }
+fieldset.content-fieldset {
+  margin-bottom: 1.5em;
+}
+fieldset.content-fieldset legend {
+  float: none;
+}
 /* MATCHGRID CONFIGURATION */
 #matchgrid-config-menu {
   list-style: none;

diff --git a/app/webroot/css/co-color.css b/app/webroot/css/co-color.css
@@ -62,7 +62,7 @@
   --cmg-color-green-007: #28a745;    /* success badge */
 
   --cmg-color-yellow-001: #f5f5bb;    /* yellow warning */
-  --cmg-color-yellow-002: #fbec88;    /* infobox informational area */
+  --cmg-color-yellow-002: #fffeb4;    /* infobox informational area */
   --cmg-color-yellow-003: #ffd;       /* forms: focused input; diffing fields for reconciliation */
 
   --cmg-color-red-001: #fcc;          /* red warning */