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

Aktualisiere site.css für eine verbesserte mobile Ansicht und entferne das Benutzericon.

Browse Source
This commit is contained in:
Developer 02 2024-05-28 12:51:50 +02:00
parent 3448c17d8b
commit 9fa5827b09
2 changed files with 82 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -32,11 +32,8 @@
<div class="bg-light p-1"> <div class="bg-light p-1">
<div class="card sender-card mb-3"> <div class="card sender-card mb-3">
<div class="row g-0"> <div class="row g-0">
<div class="col-1 p-0 m-0 ps-4 mx-auto">
<img src="~/img/default-user.svg" class="img-fluid p-0 m-0" alt="...">
</div>
<div class="col p-0 m-0"> <div class="col p-0 m-0">
<div class="card-body p-0 m-0"> <div class="card-body p-0 m-0 ms-4">
<h5 class="card-title p-0 m-0">@($"{envelope?.Title.TrySanitize(_sanitizer)}")</h5> <h5 class="card-title p-0 m-0">@($"{envelope?.Title.TrySanitize(_sanitizer)}")</h5>
<p class="card-text p-0 m-0">@($"Sie müssen {(pages.Count())} Vorgang unterzeichen. Bitte prüfen Sie die Seite {stPageIndexes.TrySanitize(_sanitizer)}.")</p> <p class="card-text p-0 m-0">@($"Sie müssen {(pages.Count())} Vorgang unterzeichen. Bitte prüfen Sie die Seite {stPageIndexes.TrySanitize(_sanitizer)}.")</p>
<p class="card-text p-0 m-0"><small class="text-body-secondary">Erstellt am @envelope?.AddedWhen von @sender?.Prename.TrySanitize(_sanitizer) @sender?.Name.TrySanitize(_sanitizer). Sie können den Absender über <a href="mailto:@(sender?.Email.TryEncode(_encoder))?subject=@(envelope?.Title.TryEncode(_encoder))&body=Sehr%20geehrter%20@(sender?.Prename.TryEncode(_encoder))%20@(sender?.Name.TryEncode(_encoder)),%0A%0A%0A">@sender?.Email.TryEncode(_encoder)</a> kontaktieren.</small></p> <p class="card-text p-0 m-0"><small class="text-body-secondary">Erstellt am @envelope?.AddedWhen von @sender?.Prename.TrySanitize(_sanitizer) @sender?.Name.TrySanitize(_sanitizer). Sie können den Absender über <a href="mailto:@(sender?.Email.TryEncode(_encoder))?subject=@(envelope?.Title.TryEncode(_encoder))&body=Sehr%20geehrter%20@(sender?.Prename.TryEncode(_encoder))%20@(sender?.Name.TryEncode(_encoder)),%0A%0A%0A">@sender?.Email.TryEncode(_encoder)</a> kontaktieren.</small></p>

160
EnvelopeGenerator.Web/wwwroot/css/site.css
View File

@ -14,17 +14,17 @@
margin-right: 10vw; margin-right: 10vw;
margin-bottom: 10vh; margin-bottom: 10vh;
} }
.btn_refresh, .btn_complete { .btn_refresh, .btn_complete {
height:4vh
} }
.btn_complete .icon { .btn_complete .icon {
width: 2vh; width: 1.1rem;
} }
.btn_complete span { .btn_complete span {
vertical-align: middle; vertical-align: middle;
} }
.button-finish { .button-finish {
transition: background-color linear 300ms; transition: background-color linear 300ms;
@ -33,10 +33,10 @@
border-left: none; border-left: none;
} }
.button-finish:hover, .button-finish:focus, .button-finish:active { .button-finish:hover, .button-finish:focus, .button-finish:active {
background-color: #10b981; /* emerald-500 */ background-color: #10b981; /* emerald-500 */
color: white; color: white;
} }
.button-reject { .button-reject {
transition: background-color linear 300ms; transition: background-color linear 300ms;
@ -45,10 +45,10 @@
border-left: none; border-left: none;
} }
.button-reject:hover, .button-reject:focus, .button-reject:active { .button-reject:hover, .button-reject:focus, .button-reject:active {
background-color: #f59e0b; /* amber-500 */ background-color: #f59e0b; /* amber-500 */
color: white; color: white;
} }
.button-reset { .button-reset {
transition: background-color linear 300ms; transition: background-color linear 300ms;
@ -57,10 +57,10 @@
border-left: none; border-left: none;
} }
.button-reset:hover, .button-reset:focus, .button-reset:active { .button-reset:hover, .button-reset:focus, .button-reset:active {
background-color: #3b82f6; /* blue-500 */ background-color: #3b82f6; /* blue-500 */
color: white; color: white;
} }
body { body {
background-color: #bbb; background-color: #bbb;
@ -74,42 +74,41 @@ body {
max-width: 40rem; max-width: 40rem;
} }
.page section { .page section {
max-width: 30rem; max-width: 30rem;
margin: 0 auto; margin: 0 auto;
} }
.page header .icon { .page header .icon {
display: inline-block; display: inline-block;
border-radius: 100px; border-radius: 100px;
padding: 15px; padding: 15px;
margin-bottom: 2rem; margin-bottom: 2rem;
} }
.page header .icon.admin { .page header .icon.admin {
background-color: #331904; background-color: #331904;
color: #fecba1; color: #fecba1;
} }
.page header .icon.locked { .page header .icon.locked {
background-color: #ffc107; background-color: #ffc107;
color: #000; color: #000;
} }
.page header .icon.signed { .page header .icon.signed {
background-color: #146c43; background-color: #146c43;
color: #fff; color: #fff;
} }
.page .form { .page .form {
max-width: 30rem; max-width: 30rem;
margin: 2rem auto; margin: 2rem auto;
display: flex;
gap: 1rem;
}
display: flex; #form-access-code > .input,
gap: 1rem;
}
#form-access-code > .input,
#form-admin-password > .input { #form-admin-password > .input {
flex-grow: 1; flex-grow: 1;
} }
@ -134,26 +133,29 @@ footer#page-footer {
font-size: 0.85rem; font-size: 0.85rem;
} }
footer#page-footer a, footer#page-footer a,
footer#page-footer a:link, footer#page-footer a:link,
footer#page-footer a:hover, footer#page-footer a:hover,
footer#page-footer a:visited, footer#page-footer a:visited,
footer#page-footer a:focus { footer#page-footer a:focus {
color: #444; color: #444;
} }
.sender-card { .sender-card {
background-color: transparent; background-color: transparent;
border: none; border: none;
} }
.sender-card .row {
height: 7vh; .sender-card .row {
} height: 7vh;
.sender-card img{ }
height: 7vh;
background-color: rgb(209, 207, 207); .sender-card img {
border-radius: 50px; height: 7vh;
} background-color: rgb(209, 207, 207);
border-radius: 50px;
}
.envelope-message { .envelope-message {
font-family: 'Roboto', sans-serif; font-family: 'Roboto', sans-serif;
} }
@ -166,6 +168,7 @@ footer#page-footer a:focus {
width: 30%; width: 30%;
height: 70%; height: 70%;
} }
.dropdown-flag { .dropdown-flag {
height: 75%; height: 75%;
width: 75%; width: 75%;
@ -187,7 +190,7 @@ footer#page-footer a:focus {
font-size: 0.85rem; font-size: 0.85rem;
} }
#langDropdownMenuButton{ #langDropdownMenuButton {
min-width: 4vw; min-width: 4vw;
} }
@ -199,7 +202,6 @@ footer#page-footer a:focus {
} }
.navbar-toggler { .navbar-toggler {
margin: 0 0 0.5rem 0;
} }
.navbar-brand { .navbar-brand {
@ -210,13 +212,10 @@ footer#page-footer a:focus {
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.collapse .card-text , .collapsing .card-text { .collapse .card-text, .collapsing .card-text {
font-size: 0.7rem; /* Font size reduced */ font-size: 0.6rem; /* Font size reduced */
padding-left:2rem; margin: 0rem;
} padding: 0rem;
.collapse.show {
height: 100%;
} }
.sender-card .card-body { .sender-card .card-body {
@ -228,8 +227,6 @@ footer#page-footer a:focus {
flex-direction: row; flex-direction: row;
bottom: 0.5rem; bottom: 0.5rem;
right: 0.5rem; right: 0.5rem;
margin: 0;
margin-right: 1rem;
} }
.btn_complete, .btn_refresh { .btn_complete, .btn_refresh {
@ -240,9 +237,14 @@ footer#page-footer a:focus {
margin-bottom: 0.5rem; /* Space between buttons */ margin-bottom: 0.5rem; /* Space between buttons */
} }
.img { .img-fluid {
width: 1.2rem; width: 1.2rem;
height: 100%; height: 100%;
display: none;
}
img {
max-width: 4rem;
} }
.page { .page {
@ -251,7 +253,7 @@ footer#page-footer a:focus {
padding: 0.5rem; padding: 0.5rem;
} }
.page section { .page section {
max-width: 90%; max-width: 90%;
} }
} }