AppStd/EnvelopeGenerator
8
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat: UI für die Dokumentenunterzeichnungsseite verbessert

Browse Source 
- Layout modernisiert und responsiver gestaltet.
- Button-Stile und Farbschemata aktualisiert.
- Verbesserte Ausrichtung von Text und Symbolen für mehr visuelle Klarheit.
- Fokus auf die Verbesserung der Benutzererfahrung beim Unterzeichnen von Dokumenten.
This commit is contained in:
Developer 02
2024-09-17 00:38:37 +02:00
parent a83994af43
commit 9ffeb7afe8
3 changed files with 137 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
EnvelopeGenerator.Web/Views/Home/ShowEnvelope.cshtml
View File

@@ -21,43 +21,43 @@
}
<div class="d-flex flex-column min-vh-100">
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<div class="container">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
<span class="material-symbols-outlined">
more_vert
</span>
</button>
<span class="material-symbols-outlined">
info
</span>
<span class="navbar-brand me-auto ms-5 envelope-message">@($"{_localizer[WebKey.Hello]} {Model.Name}, {@envelope?.Message}".TrySanitize(_sanitizer))</span>
<div class="col-1 p-0 m-0 me-3 d-flex">
<div class="envelope-message">
<span class="icon material-symbols-outlined">history_edu</span>
<span class="message navbar-brand">@($"{_localizer[WebKey.Hello]} {Model.Name}, {@envelope?.Message}".TrySanitize(_sanitizer))</span>
</div>
<div class="logo">
<img src="~/img/digital_data.svg" alt="...">
</div>
</div>
</nav>
<div class="collapse show" id="navbarToggleExternalContent" data-bs-theme="light">
<div class="bg-light p-1">
<div class="card sender-card mb-3">
<div class="row g-0">
<div class="col p-0 m-0">
<div class="card-body p-0 m-0 ms-4">
<h5 class="card-title p-0 m-0">
<span class="signature-process-title">@($"{_localizer[WebKey.SigningProcessTitle]}: ".TrySanitize(_sanitizer))</span>
<span class="signature-process-name">@($"{envelope?.Title}".TrySanitize(_sanitizer))</span>
</h5>
<p class="card-text p-0 m-0">@Html.Raw(string.Format(_localizer[WebKey.EnvelopeInfo1], pages.Count(), stPageIndexes).TrySanitize(_hlSanitizer))</p>
<p class="card-text p-0 m-0">
<small class="text-body-secondary">
@Html.Raw(string.Format(_localizer[WebKey.EnvelopeInfo2], /* sanitize separately but don't sanitize the URI */
envelope?.AddedWhen.ToString(userCulture?.Info?.DateTimeFormat).TrySanitize(_sanitizer),
$"{sender?.Prename} {sender?.Name}".TrySanitize(_sanitizer),
sender?.Email.TrySanitize(_sanitizer),
envelope?.Title.TrySanitize(_sanitizer),
sender?.Prename.TrySanitize(_sanitizer),
sender?.Name.TrySanitize(_sanitizer),
sender?.Email.TrySanitize(_sanitizer)))
</small>
</p>
</div>
<div class="collapse show bg-light " id="navbarToggleExternalContent" data-bs-theme="light">
<div class="card sender-card p-1 mb-3">
<div class="row g-0">
<div class="col p-0 m-0">
<div class="card-body p-0 m-0 ms-4">
<h5 class="card-title p-0 m-0">
<span class="signature-process-title">@($"{_localizer[WebKey.SigningProcessTitle]}: ".TrySanitize(_sanitizer))</span>
<span class="signature-process-name">@($"{envelope?.Title}".TrySanitize(_sanitizer))</span>
</h5>
<p class="card-text p-0 m-0">@Html.Raw(string.Format(_localizer[WebKey.EnvelopeInfo1], pages.Count(), stPageIndexes).TrySanitize(_hlSanitizer))</p>
<p class="card-text p-0 m-0">
<small class="text-body-secondary">
@Html.Raw(string.Format(_localizer[WebKey.EnvelopeInfo2], /* sanitize separately but don't sanitize the URI */
envelope?.AddedWhen.ToString(userCulture?.Info?.DateTimeFormat).TrySanitize(_sanitizer),
$"{sender?.Prename} {sender?.Name}".TrySanitize(_sanitizer),
sender?.Email.TrySanitize(_sanitizer),
envelope?.Title.TrySanitize(_sanitizer),
sender?.Prename.TrySanitize(_sanitizer),
sender?.Name.TrySanitize(_sanitizer),
sender?.Email.TrySanitize(_sanitizer)))
</small>
</p>
</div>
</div>
</div>