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

Verbesserung der Benutzeroberfläche und Funktionalität des Sprachauswahl-Dropdown-Menüs

Browse Source
This commit is contained in:
Developer 02
2024-05-13 16:27:46 +02:00
parent ef6e921451
commit db83f25d57
9 changed files with 154 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
EnvelopeGenerator.Web/Views/Home/EnvelopeLocked.cshtml
View File

@@ -3,7 +3,7 @@
var userLanguage = ViewData["UserLanguage"] as string;
var languages = ViewData["Languages"] as string[];
}
<div class="page container p-5">
<div class="page container py-5 px-2">
<header class="text-center">
<div class="icon locked">
<svg xmlns="http://www.w3.org/2000/svg" width="72" height="72" fill="currentColor" class="bi bi-shield-lock" viewBox="0 0 16 16">
@@ -16,28 +16,32 @@
<section class="text-center">
<p>Wir haben Ihnen gerade den Zugriffscode an die hinterlegte Email Adresse gesendet. Dies kann evtl. einige Minuten dauern.</p>
</section>
<section class="d-flex">
<form id="form-access-code" class="form pl-0 ml-0" method="post">
<div class="input">
<label class="visually-hidden" for="access_code">Zugriffscode</label>
<input type="password" id="access_code" class="form-control" name="access_code" placeholder="Zugriffscode" required="required">
</div>
<div class="button">
<button type="submit" class="btn btn-primary">Öffnen</button>
</div>
</form>
<form class="form pl-0 ml-0" method="post" action="/lang">
<div class="dropdown">
<select class="form-select" name="language" onchange="this.form.submit()">
@if(languages is not null)
foreach(var lang in languages)
{
<option data-icon="flag-icon flag-icon-us" value="@lang.TrySanitize(_sanitizer)">@_localizer[@lang].Value.TrySanitize(_sanitizer)</option>
}
</select>
</div>
</form>
</section>
<div class="row m-0 p-0">
<div class="col-8">
<form id="form-access-code" class="form ms-5" method="post">
<div class="input">
<label class="visually-hidden" for="access_code">Zugriffscode</label>
<input type="password" id="access_code" class="form-control" name="access_code" placeholder="Zugriffscode" required="required">
</div>
<div class="button">
<button type="submit" class="btn btn-primary">Öffnen</button>
</div>
</form>
</div>
<div class="col-4">
<form class="form ps-4" method="post" action="/lang">
<div class="dropdown dropdown-flag">
<select class="form-select select-flag" name="language" onchange="this.form.submit()">
@if (languages is not null)
foreach (var lang in languages)
{
<option class="select-option option-flag" value="@lang.TrySanitize(_sanitizer)">@_localizer[lang].Value.TrySanitize(_sanitizer)</option>
}
</select>
</div>
</form>
</div>
</div>
<section class="text-center">
<details>
<summary>Sie haben keinen Zugriffscode erhalten?</summary>
@@ -45,4 +49,34 @@
</details>
</section>
</div>
<footer class="container" id="page-footer">&copy; SignFlow 2023-2024 <a href="https://digitaldata.works">Digital Data GmbH</a></footer>
<footer class="container" id="page-footer">&copy; SignFlow 2023-2024 <a href="https://digitaldata.works">Digital Data GmbH</a></footer>
<script>
$(document).ready(function () {
$('.select-flag').select2({
templateResult: formatResult,
templateSelection: formatSelection
});
});
function formatResult(state) {
if (!state.id) {
return state.text;
}
var baseUrl = "/img/flags";
var $state = $(
`<span style="font-size: 0.85rem;"><img src="${baseUrl}/${state.element.value}.png" class="img-flag me-3" />${state.text}</span>`
);
return $state;
};
function formatSelection(state) {
if (!state.id) {
return state.text;
}
var baseUrl = "/img/flags";
var $state = $(
`<span class="d-flex justify-content-center align-items-center"><img src="${baseUrl}/${state.element.value}.png" class="img-flag pt-1"/></span>`
);
return $state;
};
</script>

3
EnvelopeGenerator.Web/Views/Shared/_Layout.cshtml
View File

@@ -13,6 +13,8 @@
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/lipis/flag-icons@7.0.0/css/flag-icons.min.css"/>
<!-- Select2 CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />
</head>
<body>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
@@ -29,6 +31,7 @@
<script src="~/js/app.js" asp-append-version="true"></script>
<script src="~/lib/pspdfkit/pspdfkit.js" asp-append-version="true"></script>
<script src="~/lib/bootstrap-cookie-consent-settings-main/bootstrap-cookie-consent-settings.js" asp-append-version="true"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js" asp-append-version="true"></script>
@await RenderSectionAsync("Scripts", required: false)
<main role="main">
<partial name="_CookieConsentPartial" />