From 2c633da05502ad484b00ce5fd26aac990c85f1cd Mon Sep 17 00:00:00 2001
From: Arlen Johnson <arlen@sphericalcowgroup.com>
Date: Fri, 6 Jan 2023 14:51:10 -0500
Subject: [PATCH] Improve layout and styling of delete matchgrid page (CO-1705)
(#54)
---
app/resources/locales/en_US/default.po | 5 ++-
app/templates/Matchgrids/delete.php | 42 ++++++++++++++++++++------
app/webroot/css/co-base.css | 7 +++++
app/webroot/css/co-color.css | 2 +-
4 files changed, 44 insertions(+), 12 deletions(-)
diff --git a/app/resources/locales/en_US/default.po b/app/resources/locales/en_US/default.po
index f9e95f59e..93d7b2464 100644
--- 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
index 5a5990a7d..72ec888df 100644
--- 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
index cb3a8e492..d17351bd5 100644
--- 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
index a9479ad62..6f44f538c 100644
--- 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 */