fa/breadcrumb-the-shire
1
0
Fork 1
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat(helpdesk): polish handover wizard and list page UI

Browse Source 
- Simplify wizard step indicator markup (divs instead of ol/li)
- Narrow wizard content width, compact spacing
- Use app-action-success button style on list titlebar
- Add handover-form-heading class for consistent section spacing
- Remove unused wrapper divs and redundant CSS

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Felix Schneider
2026-04-15 21:29:43 +02:00
parent 9a49e18e27
commit 320f0a5a00
4 changed files with 51 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
modules/helpdesk/pages/helpdesk/handovers/_form.phtml
View File

@@ -23,7 +23,7 @@ $readonly = !empty($readonly);
$inputId = 'handover-field-' . $index; $inputId = 'handover-field-' . $index;
?> ?>
<?php if ($type === 'heading'): ?> <?php if ($type === 'heading'): ?>
<h3><?php e($label); ?></h3> <h3 class="handover-form-heading"><?php e($label); ?></h3>
<?php elseif ($type === 'paragraph'): ?> <?php elseif ($type === 'paragraph'): ?>
<p class="app-muted"><?php e($label); ?></p> <p class="app-muted"><?php e($label); ?></p>

40
modules/helpdesk/pages/helpdesk/handovers/create(default).phtml
View File

@@ -16,9 +16,9 @@ $steps = [
['label' => t('Protocol'), 'number' => 2], ['label' => t('Protocol'), 'number' => 2],
]; ];
?> ?>
<div class="app-wizard-container"> <?php require templatePath('partials/app-flash.phtml'); ?>
<?php require templatePath('partials/app-flash.phtml'); ?>
<div class="app-wizard-content">
<div class="app-wizard-header"> <div class="app-wizard-header">
<a href="<?php e(lurl($closeTarget)); ?>" class="app-wizard-back" data-tooltip="<?php e(t('Back to list')); ?>"> <a href="<?php e(lurl($closeTarget)); ?>" class="app-wizard-back" data-tooltip="<?php e(t('Back to list')); ?>">
<i class="bi bi-arrow-left"></i> <i class="bi bi-arrow-left"></i>
@@ -28,18 +28,16 @@ $steps = [
<!-- Step indicator --> <!-- Step indicator -->
<nav class="app-wizard-steps" aria-label="<?php e(t('Progress')); ?>"> <nav class="app-wizard-steps" aria-label="<?php e(t('Progress')); ?>">
<ol> <?php foreach ($steps as $s): ?>
<?php foreach ($steps as $s): ?> <div class="app-wizard-step<?php if ($s['number'] === $step): ?> is-active<?php elseif ($s['number'] < $step): ?> is-completed<?php endif; ?>"
<li class="app-wizard-step<?php if ($s['number'] === $step): ?> is-active<?php elseif ($s['number'] < $step): ?> is-completed<?php endif; ?>" <?php if ($s['number'] === $step): ?>aria-current="step"<?php endif; ?>>
<?php if ($s['number'] === $step): ?>aria-current="step"<?php endif; ?>> <span class="app-wizard-step-number"><?php e($s['number']); ?></span>
<span class="app-wizard-step-number"><?php e($s['number']); ?></span> <span class="app-wizard-step-label"><?php e($s['label']); ?></span>
<span class="app-wizard-step-label"><?php e($s['label']); ?></span> </div>
</li> <?php if ($s['number'] < count($steps)): ?>
<?php if ($s['number'] < count($steps)): ?> <div class="app-wizard-step-connector<?php if ($s['number'] < $step): ?> is-completed<?php endif; ?>" aria-hidden="true"></div>
<li class="app-wizard-step-connector<?php if ($s['number'] < $step): ?> is-completed<?php endif; ?>" aria-hidden="true"></li> <?php endif; ?>
<?php endif; ?> <?php endforeach; ?>
<?php endforeach; ?>
</ol>
</nav> </nav>
<?php if ($validationSummaryErrors): ?> <?php if ($validationSummaryErrors): ?>
@@ -99,7 +97,7 @@ $steps = [
<?php \MintyPHP\Session::getCsrfInput(); ?> <?php \MintyPHP\Session::getCsrfInput(); ?>
<div class="app-wizard-actions"> <div class="app-wizard-actions">
<a href="<?php e(lurl($closeTarget)); ?>" class="secondary outline"><?php e(t('Cancel')); ?></a> <a href="<?php e(lurl($closeTarget)); ?>" role="button" class="outline secondary"><?php e(t('Cancel')); ?></a>
<button type="submit" class="primary"><?php e(t('Continue')); ?></button> <button type="submit" class="primary"><?php e(t('Continue')); ?></button>
</div> </div>
</form> </form>
@@ -114,17 +112,15 @@ $steps = [
<?php e($wizardData['debitor_name'] ?? ''); ?> &mdash; <?php e($productDisplayName); ?> <?php e($wizardData['debitor_name'] ?? ''); ?> &mdash; <?php e($productDisplayName); ?>
</p> </p>
<div class="app-wizard-protocol-form"> <?php
<?php $readonly = false;
$readonly = false; require __DIR__ . '/_form.phtml';
require __DIR__ . '/_form.phtml'; ?>
?>
</div>
<?php \MintyPHP\Session::getCsrfInput(); ?> <?php \MintyPHP\Session::getCsrfInput(); ?>
<div class="app-wizard-actions"> <div class="app-wizard-actions">
<a href="<?php e(lurl($createTarget)); ?>" class="secondary outline"><?php e(t('Back')); ?></a> <a href="<?php e(lurl($createTarget)); ?>" role="button" class="outline secondary"><?php e(t('Back')); ?></a>
<button type="submit" class="primary"><?php e(t('Create handover')); ?></button> <button type="submit" class="primary"><?php e(t('Create handover')); ?></button>
</div> </div>
</form> </form>

18
modules/helpdesk/pages/helpdesk/handovers/index(default).phtml
View File

@@ -13,15 +13,15 @@ $canCreate = $canCreate ?? false;
<?php <?php
$listTitle = t('Handovers'); $listTitle = t('Handovers');
$listActions = []; ob_start();
if ($canCreate) { ?>
$listActions[] = [ <?php if ($canCreate): ?>
'label' => t('New handover'), <a role="button" class="app-action-success" href="<?php e(requestPathWithReturnTarget('helpdesk/handovers/create', \MintyPHP\Http\Request::pathWithQuery())); ?>">
'href' => lurl('helpdesk/handovers/create'), <i class="bi bi-plus"></i> <?php e(t('New handover')); ?>
'class' => 'primary', </a>
'icon' => 'bi-plus-lg', <?php endif; ?>
]; <?php
} $listTitleActionsHtml = ob_get_clean();
require templatePath('partials/app-list-titlebar.phtml'); require templatePath('partials/app-list-titlebar.phtml');
?> ?>
<?php <?php

50
modules/helpdesk/web/css/helpdesk.css
View File

@@ -1448,10 +1448,7 @@
overflow-x: clip; overflow-x: clip;
} }
#app-details-aside-section {
display: flex;
min-width: 0;
}
#app-details-aside-section .helpdesk-comm-aside { #app-details-aside-section .helpdesk-comm-aside {
display: flex; display: flex;
@@ -2595,17 +2592,17 @@
/* ── Wizard (Stripe-style two-step assistant) ───────────────────────── */ /* ── Wizard (Stripe-style two-step assistant) ───────────────────────── */
.app-wizard-container { /* ── Wizard (Stripe-style creation assistant) ─────────────────────── */
max-width: 42rem;
margin: 0 auto; .app-wizard-content {
padding: calc(var(--app-spacing) * 2) var(--app-spacing); max-width: 32rem;
} }
.app-wizard-header { .app-wizard-header {
display: flex; display: flex;
align-items: center; align-items: center;
gap: calc(var(--app-spacing) * 0.75); gap: calc(var(--app-spacing) * 0.75);
margin-bottom: calc(var(--app-spacing) * 1.5); margin-bottom: calc(var(--app-spacing) * 1.25);
} }
.app-wizard-back { .app-wizard-back {
@@ -2631,14 +2628,11 @@
margin: 0; margin: 0;
} }
/* Step indicator */ /* Step indicator — compact, not full-width */
.app-wizard-steps ol { .app-wizard-steps {
display: flex; display: inline-flex;
align-items: center; align-items: center;
list-style: none;
padding: 0;
margin: 0 0 calc(var(--app-spacing) * 1.5); margin: 0 0 calc(var(--app-spacing) * 1.5);
gap: 0;
} }
.app-wizard-step { .app-wizard-step {
@@ -2659,7 +2653,7 @@
border: 2px solid var(--app-border); border: 2px solid var(--app-border);
color: var(--app-muted-color); color: var(--app-muted-color);
background: transparent; background: transparent;
transition: all 0.2s ease; transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
flex-shrink: 0; flex-shrink: 0;
} }
@@ -2691,10 +2685,11 @@
} }
.app-wizard-step-connector { .app-wizard-step-connector {
flex: 1; width: 2rem;
height: 2px; height: 2px;
background: var(--app-border); background: var(--app-border);
margin: 0 0.75rem; margin: 0 0.5rem;
flex-shrink: 0;
transition: background 0.2s ease; transition: background 0.2s ease;
} }
@@ -2720,7 +2715,7 @@
.app-wizard-card-description { .app-wizard-card-description {
font-size: var(--text-sm, 0.875rem); font-size: var(--text-sm, 0.875rem);
color: var(--app-muted-color); color: var(--app-muted-color);
margin: 0 0 calc(var(--app-spacing) * 1.5); margin: 0 0 calc(var(--app-spacing) * 1.25);
} }
.app-wizard-field-group { .app-wizard-field-group {
@@ -2734,10 +2729,6 @@
font-weight: var(--font-medium, 500); font-weight: var(--font-medium, 500);
} }
.app-wizard-protocol-form {
max-width: 100%;
}
.app-wizard-actions { .app-wizard-actions {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
@@ -2748,6 +2739,15 @@
} }
/* Handover form — shared styles */ /* Handover form — shared styles */
.handover-form-heading {
margin-top: calc(var(--app-spacing) * 1.25);
margin-bottom: calc(var(--app-spacing) * 0.75);
}
.handover-form-heading:first-child {
margin-top: 0;
}
.handover-form-required { .handover-form-required {
color: var(--app-danger-color, hsl(0 70% 55%)); color: var(--app-danger-color, hsl(0 70% 55%));
} }
@@ -2767,10 +2767,6 @@
} }
@media (max-width: 576px) { @media (max-width: 576px) {
.app-wizard-container {
padding: var(--app-spacing);
}
.app-wizard-step-label { .app-wizard-step-label {
display: none; display: none;
} }