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>