From fb366d3e0b9facd6cab1cb3d73eac99015bd2b33 Mon Sep 17 00:00:00 2001 From: Developer 02 Date: Wed, 25 Sep 2024 09:21:55 +0200 Subject: [PATCH 01/11] refactor: Umschlag nav-menu bearbeiten. minfied card.css --- .../Views/Home/ShowEnvelope.cshtml | 84 +++--- .../Views/Shared/_Layout.cshtml | 6 +- EnvelopeGenerator.Web/bundleconfig.json | 6 + EnvelopeGenerator.Web/wwwroot/css/card.css | 274 ++++++++++++++++++ .../wwwroot/css/card.min.css | 1 + EnvelopeGenerator.Web/wwwroot/css/logo.css | 5 + .../wwwroot/css/logo.min.css | 2 +- EnvelopeGenerator.Web/wwwroot/css/site.css | 56 +++- .../wwwroot/css/site.min.css | 2 +- 9 files changed, 374 insertions(+), 62 deletions(-) create mode 100644 EnvelopeGenerator.Web/wwwroot/css/card.css create mode 100644 EnvelopeGenerator.Web/wwwroot/css/card.min.css diff --git a/EnvelopeGenerator.Web/Views/Home/ShowEnvelope.cshtml b/EnvelopeGenerator.Web/Views/Home/ShowEnvelope.cshtml index b469feb8..30bec195 100644 --- a/EnvelopeGenerator.Web/Views/Home/ShowEnvelope.cshtml +++ b/EnvelopeGenerator.Web/Views/Home/ShowEnvelope.cshtml @@ -18,53 +18,11 @@ var document = Model.Envelope?.Documents?.FirstOrDefault(); var sender = Model.Envelope?.User; var pages = document?.Elements?.Select(e => e.Page) ?? Array.Empty(); + int? signatureCount = document?.Elements?.Count(); var stPageIndexes = string.Join(pages.Count() > 1 ? ", " : "", pages.Take(pages.Count() - 1)) + (pages.Count() > 1 ? $" {_localizer[WebKey.and].TrySanitize(_sanitizer)} " : "") + pages.LastOrDefault(); } -
- -
-
-
-
-
-
- @($"{_localizer[WebKey.SigningProcessTitle]}: ".TrySanitize(_sanitizer)) - @($"{envelope?.Title}".TrySanitize(_sanitizer)) -
-

@Html.Raw(string.Format(_localizer[WebKey.EnvelopeInfo1], pages.Count(), stPageIndexes).TrySanitize(_hlSanitizer))

-

- - @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))) - -

-
-
-
-
-
+
-
+ +
+
+
+
Digital Data
+

signFlow

+ Erfahren Sie mehr +
+
+ +

@($"{envelope?.Title}".TrySanitize(_sanitizer))

+
@($"{@envelope?.Message}".TrySanitize(_sanitizer))
+

+ + @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))) + +

+
+
+ + 0/@signatureCount Unterschriften + +
+
+
+
+ +
@Html.AntiForgeryToken() - + \ No newline at end of file diff --git a/EnvelopeGenerator.Web/bundleconfig.json b/EnvelopeGenerator.Web/bundleconfig.json index 3584b22f..d382de45 100644 --- a/EnvelopeGenerator.Web/bundleconfig.json +++ b/EnvelopeGenerator.Web/bundleconfig.json @@ -76,5 +76,11 @@ "inputFiles": [ "wwwroot/css/privacy-policy.css" ] + }, + { + "outputFileName": "wwwroot/css/card.min.css", + "inputFiles": [ + "wwwroot/css/card.css" + ] } ] diff --git a/EnvelopeGenerator.Web/wwwroot/css/card.css b/EnvelopeGenerator.Web/wwwroot/css/card.css new file mode 100644 index 00000000..7ef17e70 --- /dev/null +++ b/EnvelopeGenerator.Web/wwwroot/css/card.css @@ -0,0 +1,274 @@ +@import url('https://fonts.googleapis.com/css?family=Muli&display=swap'); + +* { + box-sizing: border-box; +} + +.dd-cards-container { + font-family: 'Muli', sans-serif; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + height: 10rem; +} + +.dd-card { + background-color: #fff; + box-shadow: 0 0.625rem 0.625rem rgba(0, 0, 0, 0.2); + display: flex; + max-width: 100%; + margin: 0; + overflow: hidden; + width: 100%; +} + +.dd-card h6 { + opacity: 0.6; + margin: 0; + letter-spacing: 0.0625rem; +} + +.uppercase { + text-transform: uppercase; +} + +.dd-card h2 { + letter-spacing: 0.0625rem; + margin: 0; +} + +.dd-card-preview { + background-color: #2A265F; + color: #fff; + padding: 1.875rem; + max-width: 15.625rem; +} + +.dd-card-preview a { + color: #fff; + display: inline-block; + font-size: 0.75rem; + opacity: 0.6; + margin-top: 1.875rem; + text-decoration: none; +} + +.dd-card-info { + padding: 1rem 0 0 1.875rem; + position: relative; + width: 100%; +} + + .dd-card-info p { + opacity: 0.6; + font-size: 0.75rem; + opacity: 0.6; + margin-top: .875rem; + text-decoration: none; + } + +.progress-container { + text-align: right; + width: 9.375rem; +} + +.progress { + position: relative; + background-color: #ddd; + border-radius: 0.1875rem; + height: 0.3125rem; + width: 10rem; +} + + .progress::after { + background-color: #2A265F; + content: ''; + position: absolute; + top: 0; + left: 0; + height: 0.3125rem; + width:1%; + } + +.progress-text { + font-size: 0.625rem; + opacity: 0.6; + letter-spacing: 0.0625rem; + text-align: left; +} + +.dd-card-btn { + background-color: #2A265F; + border: 0; + border-radius: 3.125rem; + box-shadow: 0 0.625rem 0.625rem rgba(0, 0, 0, 0.2); + color: #fff; + font-size: 1rem; + padding: 0.75rem 1.5625rem; + position: absolute; + bottom: 1.875rem; + right: 1.875rem; + letter-spacing: 0.0625rem; +} + +/* SOCIAL PANEL CSS */ +.social-panel-container { + position: fixed; + right: 0; + bottom: 5rem; + transform: translateX(100%); + transition: transform 0.4s ease-in-out; +} + + .social-panel-container.visible { + transform: translateX(-0.625rem); + } + +.social-panel { + background-color: #fff; + border-radius: 16px; + box-shadow: 0 16px 31px -17px rgba(0,31,97,0.6); + border: 5px solid #001F61; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + font-family: 'Muli'; + position: relative; + height: 169px; + width: 370px; + max-width: calc(100% - 10px); +} + +.social-panel button.close-btn { + border: 0; + color: #97A5CE; + cursor: pointer; + font-size: 20px; + position: absolute; + top: 5px; + right: 5px; +} + +.social-panel button.close-btn:focus { + outline: none; +} + +.social-panel p { + background-color: #001F61; + border-radius: 0 0 10px 10px; + color: #fff; + font-size: 14px; + line-height: 18px; + padding: 2px 17px 6px; + position: absolute; + top: 0; + left: 50%; + margin: 0; + transform: translateX(-50%); + text-align: center; + width: 235px; +} + +.social-panel p i { + margin: 0 5px; +} + +.social-panel p a { + color: #FF7500; + text-decoration: none; +} + +.social-panel h4 { + margin: 20px 0; + color: #97A5CE; + font-family: 'Muli'; + font-size: 14px; + line-height: 18px; + text-transform: uppercase; +} + +.social-panel ul { + display: flex; + list-style-type: none; + padding: 0; + margin: 0; +} + +.social-panel ul li { + margin: 0 10px; +} + +.social-panel ul li a { + border: 1px solid #DCE1F2; + border-radius: 50%; + color: #001F61; + font-size: 20px; + display: flex; + justify-content: center; + align-items: center; + height: 50px; + width: 50px; + text-decoration: none; +} + +.social-panel ul li a:hover { + border-color: #FF6A00; + box-shadow: 0 9px 12px -9px #FF6A00; +} + +.floating-btn { + border-radius: 26.5px; + background-color: #001F61; + border: 1px solid #001F61; + box-shadow: 0 16px 22px -17px #03153B; + color: #fff; + cursor: pointer; + font-size: 16px; + line-height: 20px; + padding: 12px 20px; + position: fixed; + bottom: 20px; + right: 20px; + z-index: 999; +} + +.floating-btn:hover { + background-color: #ffffff; + color: #001F61; +} + +.floating-btn:focus { + outline: none; +} + +.floating-text { + background-color: #001F61; + border-radius: 10px 10px 0 0; + color: #fff; + font-family: 'Muli'; + padding: 7px 15px; + position: fixed; + bottom: 0; + left: 50%; + transform: translateX(-50%); + text-align: center; + z-index: 998; +} + +.floating-text a { + color: #FF7500; + text-decoration: none; +} + +@media screen and (max-width: 480px) { + + .social-panel-container.visible { + transform: translateX(0px); + } + + .floating-btn { + right: 10px; + } +} \ No newline at end of file diff --git a/EnvelopeGenerator.Web/wwwroot/css/card.min.css b/EnvelopeGenerator.Web/wwwroot/css/card.min.css new file mode 100644 index 00000000..02966274 --- /dev/null +++ b/EnvelopeGenerator.Web/wwwroot/css/card.min.css @@ -0,0 +1 @@ +@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');*{box-sizing:border-box}.dd-cards-container{font-family:'Muli',sans-serif;display:flex;align-items:center;justify-content:center;flex-direction:column;height:10rem}.dd-card{background-color:#fff;box-shadow:0 .625rem .625rem rgba(0,0,0,.2);display:flex;max-width:100%;margin:0;overflow:hidden;width:100%}.dd-card h6{opacity:.6;margin:0;letter-spacing:.0625rem}.uppercase{text-transform:uppercase}.dd-card h2{letter-spacing:.0625rem;margin:0}.dd-card-preview{background-color:#2a265f;color:#fff;padding:1.875rem;max-width:15.625rem}.dd-card-preview a{color:#fff;display:inline-block;font-size:.75rem;opacity:.6;margin-top:1.875rem;text-decoration:none}.dd-card-info{padding:1rem 0 0 1.875rem;position:relative;width:100%}.dd-card-info p{opacity:.6;font-size:.75rem;opacity:.6;margin-top:.875rem;text-decoration:none}.progress-container{text-align:right;width:9.375rem}.progress{position:relative;background-color:#ddd;border-radius:.1875rem;height:.3125rem;width:10rem}.progress::after{background-color:#2a265f;content:'';position:absolute;top:0;left:0;height:.3125rem;width:1%}.progress-text{font-size:.625rem;opacity:.6;letter-spacing:.0625rem;text-align:left}.dd-card-btn{background-color:#2a265f;border:0;border-radius:3.125rem;box-shadow:0 .625rem .625rem rgba(0,0,0,.2);color:#fff;font-size:1rem;padding:.75rem 1.5625rem;position:absolute;bottom:1.875rem;right:1.875rem;letter-spacing:.0625rem}.social-panel-container{position:fixed;right:0;bottom:5rem;transform:translateX(100%);transition:transform .4s ease-in-out}.social-panel-container.visible{transform:translateX(-.625rem)}.social-panel{background-color:#fff;border-radius:16px;box-shadow:0 16px 31px -17px rgba(0,31,97,.6);border:5px solid #001f61;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:'Muli';position:relative;height:169px;width:370px;max-width:calc(100% - 10px)}.social-panel button.close-btn{border:0;color:#97a5ce;cursor:pointer;font-size:20px;position:absolute;top:5px;right:5px}.social-panel button.close-btn:focus{outline:0}.social-panel p{background-color:#001f61;border-radius:0 0 10px 10px;color:#fff;font-size:14px;line-height:18px;padding:2px 17px 6px;position:absolute;top:0;left:50%;margin:0;transform:translateX(-50%);text-align:center;width:235px}.social-panel p i{margin:0 5px}.social-panel p a{color:#ff7500;text-decoration:none}.social-panel h4{margin:20px 0;color:#97a5ce;font-family:'Muli';font-size:14px;line-height:18px;text-transform:uppercase}.social-panel ul{display:flex;list-style-type:none;padding:0;margin:0}.social-panel ul li{margin:0 10px}.social-panel ul li a{border:1px solid #dce1f2;border-radius:50%;color:#001f61;font-size:20px;display:flex;justify-content:center;align-items:center;height:50px;width:50px;text-decoration:none}.social-panel ul li a:hover{border-color:#ff6a00;box-shadow:0 9px 12px -9px #ff6a00}.floating-btn{border-radius:26.5px;background-color:#001f61;border:1px solid #001f61;box-shadow:0 16px 22px -17px #03153b;color:#fff;cursor:pointer;font-size:16px;line-height:20px;padding:12px 20px;position:fixed;bottom:20px;right:20px;z-index:999}.floating-btn:hover{background-color:#fff;color:#001f61}.floating-btn:focus{outline:0}.floating-text{background-color:#001f61;border-radius:10px 10px 0 0;color:#fff;font-family:'Muli';padding:7px 15px;position:fixed;bottom:0;left:50%;transform:translateX(-50%);text-align:center;z-index:998}.floating-text a{color:#ff7500;text-decoration:none}@media screen and (max-width:480px){.social-panel-container.visible{transform:translateX(0)}.floating-btn{right:10px}} \ No newline at end of file diff --git a/EnvelopeGenerator.Web/wwwroot/css/logo.css b/EnvelopeGenerator.Web/wwwroot/css/logo.css index 9527cdaa..5cd9526e 100644 --- a/EnvelopeGenerator.Web/wwwroot/css/logo.css +++ b/EnvelopeGenerator.Web/wwwroot/css/logo.css @@ -5,6 +5,11 @@ .dd-show-logo { width: 9rem; + position: absolute; + right: 0; + margin: 0 2rem 0 0; + padding: 0; + top:0; } .cursor-locked-logo { diff --git a/EnvelopeGenerator.Web/wwwroot/css/logo.min.css b/EnvelopeGenerator.Web/wwwroot/css/logo.min.css index bc86abec..3b0dcc86 100644 --- a/EnvelopeGenerator.Web/wwwroot/css/logo.min.css +++ b/EnvelopeGenerator.Web/wwwroot/css/logo.min.css @@ -1 +1 @@ -.dd-locked-logo{width:13rem;padding-top:1rem}.dd-show-logo{width:9rem}.cursor-locked-logo{width:9rem;padding-top:1rem}.cursor-show-logo{width:6rem}@media(max-width:767px){.dd-show-logo{width:5rem}.cursor-show-logo{width:3rem}} \ No newline at end of file +.dd-locked-logo{width:13rem;padding-top:1rem}.dd-show-logo{width:9rem;position:absolute;right:0;margin:0 2rem 0 0;padding:0;top:0}.cursor-locked-logo{width:9rem;padding-top:1rem}.cursor-show-logo{width:6rem}@media(max-width:767px){.dd-show-logo{width:5rem}.cursor-show-logo{width:3rem}} \ No newline at end of file diff --git a/EnvelopeGenerator.Web/wwwroot/css/site.css b/EnvelopeGenerator.Web/wwwroot/css/site.css index d9dbe1a3..3f056363 100644 --- a/EnvelopeGenerator.Web/wwwroot/css/site.css +++ b/EnvelopeGenerator.Web/wwwroot/css/site.css @@ -4,11 +4,6 @@ */ /* Toolbar Buttons */ -#app { - background: gray; - width: 100vw; - height: 80vh; -} .navbar-toggler { border: 0; @@ -19,7 +14,6 @@ margin-bottom: 10vh; } - .btn_refresh, .btn_reject, .btn_complete { height:2.5rem; } @@ -69,8 +63,7 @@ } body { - background-color: #bbb; - + background: #f8fcfc; display: flex; flex-direction: column; height: 100vh; @@ -78,16 +71,51 @@ body { } main { - flex: 1; + display:flex; + margin: 0 0 0.5vh 0; } -footer { - background: #333; - color: white; - text-align: center; - padding: 10px 0; +.envelope-view { + display: flex; /* d-flex */ + flex-direction: column; /* flex-column */ + width: 100vw; + height: 95.9vh; +} + +#app { + background: gray; + width: 100vw; + height: 100%; + flex-grow: 1; + border-width: 0; } +footer { + height: 4vh; + background-color: #001F61; + border-radius: 10px 10px 0 0; + color: #fff; + font-family: 'Muli'; + padding: 0.5vh 0; + position: fixed; + bottom: 0; + width: 100%; + z-index: 998; + border-width: 0; +} + + footer * { + margin-left: 1rem; + } + + footer > * { + margin: 0 6rem 0 1rem; + } + + footer a { + color: #FF7500; + text-decoration: none; + } .page { margin-top: 3rem; diff --git a/EnvelopeGenerator.Web/wwwroot/css/site.min.css b/EnvelopeGenerator.Web/wwwroot/css/site.min.css index 241a4f3d..b9702f5e 100644 --- a/EnvelopeGenerator.Web/wwwroot/css/site.min.css +++ b/EnvelopeGenerator.Web/wwwroot/css/site.min.css @@ -1 +1 @@ -#app{background:#808080;width:100vw;height:50vh}.navbar-toggler{border:0}.btn-group{margin-right:10vw;margin-bottom:10vh}.btn_refresh,.btn_reject,.btn_complete{height:2.5rem}.btn_complete .icon,.btn_reject .icon,.btn_refresh .icon{width:1.1rem}.btn_complete span,.btn_reject span,.btn_refresh span{vertical-align:middle}.button-finish{transition:background-color linear 300ms;background-color:#059669;color:#fff;border-left:0}.button-finish:hover,.button-finish:focus,.button-finish:active{background-color:#10b981;color:#fff}.button-reject{transition:background-color linear 300ms;background-color:#d97706;color:#fff;border-left:0}.button-reject:hover,.button-reject:focus,.button-reject:active{background-color:#f59e0b;color:#fff}.button-reset{transition:background-color linear 300ms;background-color:#2563eb;color:#fff;border-left:0}.button-reset:hover,.button-reset:focus,.button-reset:active{background-color:#3b82f6;color:#fff}body{background-color:#bbb;display:flex;flex-direction:column;height:100vh;margin:0}main{flex:1}footer{background:#333;color:#fff;text-align:center;padding:10px 0}.page{margin-top:3rem;background:#fff;border-radius:.313rem;box-shadow:rgba(9,30,66,.25) 0 .25rem .5rem -.125rem,rgba(9,30,66,.08) 0 0 0 .063rem;max-width:40rem}.page section{max-width:30rem;margin:0 auto}.page header .icon{display:inline-block;border-radius:6.25rem;padding:.938rem;margin-bottom:2rem}.page header .icon.admin{background-color:#331904;color:#fecba1}.page header .icon.locked{background-color:#ffc107;color:#000}.page header .icon.signed{background-color:#146c43;color:#fff}.page header .icon.rejected{background-color:#e4d8d5;color:#fff}.page .form{max-width:30rem;margin:2rem auto;display:flex;gap:1rem}#form-access-code>.input,#form-admin-password>.input{flex-grow:1}#page-admin header .icon{background-color:#331904;color:#fecba1}.envelope{display:block;border:.063rem solid #eee;margin-bottom:1rem;padding:.5rem}footer#page-footer{color:#333;max-width:40rem;margin-top:1rem;font-size:.85rem}footer#page-footer a,footer#page-footer a:link,footer#page-footer a:hover,footer#page-footer a:visited,footer#page-footer a:focus{color:#444}.sender-card{background-color:transparent;border:0}.sender-card .row{height:7vh}.sender-card img{height:7vh;background-color:#d1cfcf;border-radius:3.125rem}.navbar .container{display:flex;padding:0;margin:0}.navbar-toggler{padding:0;margin:0;width:4rem;left:0}.envelope-message{position:absolute;display:flex;width:calc(100% - 8rem);align-items:center;justify-content:start;margin-left:4rem}.envelope-message .icon{margin-right:.5rem}.envelope-message .message{font-family:'Roboto',sans-serif;font-size:16px;font-weight:550}.logo{width:9rem;position:absolute;right:0;margin-right:2rem}.none-display{display:none}.dropdown-flag img,.img-flag{width:30%;height:70%}.dropdown-flag{height:75%;width:75%}.increase-dropdown-height{min-height:25rem}.dropdown-flag .select2-container{width:100%!important;max-width:11.25rem}.lang-item{font-size:.85rem}#langDropdownMenuButton{min-width:4vw}.highlight{font-weight:700;font-size:.85rem}.signature-process-title,.signature-process-name{font-size:1.125rem}.mail-link{color:#000;text-decoration:none}.mail-link:hover{text-decoration:underline}#flex-action-panel{z-index:1050}#form-access-code{margin-left:5rem}.header-1{align-items:center;justify-content:space-between;margin-top:0;padding-top:0}.header-1 .text{text-align:center;margin-left:1.5vw;margin-top:0;padding-top:0}@media(max-height:850px){.navbar .container{display:flex;padding:0;margin:0}.navbar-toggler{padding:0;margin:0;width:4rem;left:0}.envelope-message{width:calc(100% - 4rem - 9rem)}.envelope-message .message{font-size:14px;font-weight:550}.logo{width:9rem;position:absolute;right:0}.card-text,.card-text{font-size:.6rem;margin:0;padding:0}.highlight{font-weight:700;font-size:.5rem}.signature-process-title,.signature-process-name{font-size:.7rem}}@media(max-width:767px){.navbar{flex-direction:column;align-items:flex-start}.navbar-brand{font-size:.5rem;text-align:center;overflow:hidden;text-overflow:ellipsis}.envelope-message{width:calc(100% - 4rem - 4.5rem);margin-left:3rem}.envelope-message .message{font-size:12px;font-weight:550}.envelope-message .icon{margin-right:.1rem;font-size:1rem}.logo{width:5rem;right:0;margin-right:1rem}.btn_group{position:fixed;flex-direction:row;bottom:.5rem;right:.5rem}.img-fluid{width:1.2rem;height:100%;display:none}.page{margin-top:1rem;max-width:90%;padding:.5rem}.page section{max-width:90%}#form-access-code{margin-left:0}}@media(max-height:600px){.collapse{height:4rem}} \ No newline at end of file +.navbar-toggler{border:0}.btn-group{margin-right:10vw;margin-bottom:10vh}.btn_refresh,.btn_reject,.btn_complete{height:2.5rem}.btn_complete .icon,.btn_reject .icon,.btn_refresh .icon{width:1.1rem}.btn_complete span,.btn_reject span,.btn_refresh span{vertical-align:middle}.button-finish{transition:background-color linear 300ms;background-color:#059669;color:#fff;border-left:0}.button-finish:hover,.button-finish:focus,.button-finish:active{background-color:#10b981;color:#fff}.button-reject{transition:background-color linear 300ms;background-color:#d97706;color:#fff;border-left:0}.button-reject:hover,.button-reject:focus,.button-reject:active{background-color:#f59e0b;color:#fff}.button-reset{transition:background-color linear 300ms;background-color:#2563eb;color:#fff;border-left:0}.button-reset:hover,.button-reset:focus,.button-reset:active{background-color:#3b82f6;color:#fff}body{background:#f8fcfc;display:flex;flex-direction:column;height:100vh;margin:0}main{display:flex;margin:0 0 .5vh 0}.envelope-view{display:flex;flex-direction:column;width:100vw;height:95.9vh}#app{background:#808080;width:100vw;height:100%;flex-grow:1;border-width:0}footer{height:4vh;background-color:#001f61;border-radius:10px 10px 0 0;color:#fff;font-family:'Muli';padding:.5vh 0;position:fixed;bottom:0;width:100%;z-index:998;border-width:0}footer *{margin-left:1rem}footer>*{margin:0 6rem 0 1rem}footer a{color:#ff7500;text-decoration:none}.page{margin-top:3rem;background:#fff;border-radius:.313rem;box-shadow:rgba(9,30,66,.25) 0 .25rem .5rem -.125rem,rgba(9,30,66,.08) 0 0 0 .063rem;max-width:40rem}.page section{max-width:30rem;margin:0 auto}.page header .icon{display:inline-block;border-radius:6.25rem;padding:.938rem;margin-bottom:2rem}.page header .icon.admin{background-color:#331904;color:#fecba1}.page header .icon.locked{background-color:#ffc107;color:#000}.page header .icon.signed{background-color:#146c43;color:#fff}.page header .icon.rejected{background-color:#e4d8d5;color:#fff}.page .form{max-width:30rem;margin:2rem auto;display:flex;gap:1rem}#form-access-code>.input,#form-admin-password>.input{flex-grow:1}#page-admin header .icon{background-color:#331904;color:#fecba1}.envelope{display:block;border:.063rem solid #eee;margin-bottom:1rem;padding:.5rem}footer#page-footer{color:#333;max-width:40rem;margin-top:1rem;font-size:.85rem}footer#page-footer a,footer#page-footer a:link,footer#page-footer a:hover,footer#page-footer a:visited,footer#page-footer a:focus{color:#444}.sender-card{background-color:transparent;border:0}.sender-card .row{height:7vh}.sender-card img{height:7vh;background-color:#d1cfcf;border-radius:3.125rem}.navbar .container{display:flex;padding:0;margin:0}.navbar-toggler{padding:0;margin:0;width:4rem;left:0}.envelope-message{position:absolute;display:flex;width:calc(100% - 8rem);align-items:center;justify-content:start;margin-left:4rem}.envelope-message .icon{margin-right:.5rem}.envelope-message .message{font-family:'Roboto',sans-serif;font-size:16px;font-weight:550}.logo{width:9rem;position:absolute;right:0;margin-right:2rem}.none-display{display:none}.dropdown-flag img,.img-flag{width:30%;height:70%}.dropdown-flag{height:75%;width:75%}.increase-dropdown-height{min-height:25rem}.dropdown-flag .select2-container{width:100%!important;max-width:11.25rem}.lang-item{font-size:.85rem}#langDropdownMenuButton{min-width:4vw}.highlight{font-weight:700;font-size:.85rem}.signature-process-title,.signature-process-name{font-size:1.125rem}.mail-link{color:#000;text-decoration:none}.mail-link:hover{text-decoration:underline}#flex-action-panel{z-index:1050}#form-access-code{margin-left:5rem}.header-1{align-items:center;justify-content:space-between;margin-top:0;padding-top:0}.header-1 .text{text-align:center;margin-left:1.5vw;margin-top:0;padding-top:0}@media(max-height:850px){.navbar .container{display:flex;padding:0;margin:0}.navbar-toggler{padding:0;margin:0;width:4rem;left:0}.envelope-message{width:calc(100% - 4rem - 9rem)}.envelope-message .message{font-size:14px;font-weight:550}.logo{width:9rem;position:absolute;right:0}.card-text,.card-text{font-size:.6rem;margin:0;padding:0}.highlight{font-weight:700;font-size:.5rem}.signature-process-title,.signature-process-name{font-size:.7rem}}@media(max-width:767px){.navbar{flex-direction:column;align-items:flex-start}.navbar-brand{font-size:.5rem;text-align:center;overflow:hidden;text-overflow:ellipsis}.envelope-message{width:calc(100% - 4rem - 4.5rem);margin-left:3rem}.envelope-message .message{font-size:12px;font-weight:550}.envelope-message .icon{margin-right:.1rem;font-size:1rem}.logo{width:5rem;right:0;margin-right:1rem}.btn_group{position:fixed;flex-direction:row;bottom:.5rem;right:.5rem}.img-fluid{width:1.2rem;height:100%;display:none}.page{margin-top:1rem;max-width:90%;padding:.5rem}.page section{max-width:90%}#form-access-code{margin-left:0}}@media(max-height:600px){.collapse{height:4rem}} \ No newline at end of file From 36916ed5c8cfa6f2a2aa622d96e0ab15772447a9 Mon Sep 17 00:00:00 2001 From: Developer 02 Date: Wed, 25 Sep 2024 11:01:54 +0200 Subject: [PATCH 02/11] refactor(envelope-lcoked): Konvertierung von 'access-code' Floating Input --- .../Views/Home/EnvelopeLocked.cshtml | 20 +++++++++---------- EnvelopeGenerator.Web/wwwroot/css/site.css | 7 ++++++- .../wwwroot/css/site.min.css | 2 +- 3 files changed, 16 insertions(+), 13 deletions(-) diff --git a/EnvelopeGenerator.Web/Views/Home/EnvelopeLocked.cshtml b/EnvelopeGenerator.Web/Views/Home/EnvelopeLocked.cshtml index 4964fd97..cb37f6ee 100644 --- a/EnvelopeGenerator.Web/Views/Home/EnvelopeLocked.cshtml +++ b/EnvelopeGenerator.Web/Views/Home/EnvelopeLocked.cshtml @@ -25,17 +25,9 @@
-
-
- - -
- @if (ViewData["ErrorMessage"] is string errMsg) - { - @_sanitizer.Sanitize(errMsg) - } -
-
+ + +
@@ -61,6 +53,12 @@
+
+ @if (ViewData["ErrorMessage"] is string errMsg) + { + @_sanitizer.Sanitize(errMsg) + } +
@_localizer[WebKey.LockedFooterTitle] diff --git a/EnvelopeGenerator.Web/wwwroot/css/site.css b/EnvelopeGenerator.Web/wwwroot/css/site.css index 3f056363..4a698b94 100644 --- a/EnvelopeGenerator.Web/wwwroot/css/site.css +++ b/EnvelopeGenerator.Web/wwwroot/css/site.css @@ -312,10 +312,15 @@ footer#page-footer { margin-left: 5rem; } +#access-code-error-message { + margin: 0 0 1.5rem 6rem; + height: 1.25rem; +} + .header-1 { align-items: center; justify-content: space-between; - margin-top:0; + margin-top: 0; padding-top: 0; } diff --git a/EnvelopeGenerator.Web/wwwroot/css/site.min.css b/EnvelopeGenerator.Web/wwwroot/css/site.min.css index b9702f5e..d9f97592 100644 --- a/EnvelopeGenerator.Web/wwwroot/css/site.min.css +++ b/EnvelopeGenerator.Web/wwwroot/css/site.min.css @@ -1 +1 @@ -.navbar-toggler{border:0}.btn-group{margin-right:10vw;margin-bottom:10vh}.btn_refresh,.btn_reject,.btn_complete{height:2.5rem}.btn_complete .icon,.btn_reject .icon,.btn_refresh .icon{width:1.1rem}.btn_complete span,.btn_reject span,.btn_refresh span{vertical-align:middle}.button-finish{transition:background-color linear 300ms;background-color:#059669;color:#fff;border-left:0}.button-finish:hover,.button-finish:focus,.button-finish:active{background-color:#10b981;color:#fff}.button-reject{transition:background-color linear 300ms;background-color:#d97706;color:#fff;border-left:0}.button-reject:hover,.button-reject:focus,.button-reject:active{background-color:#f59e0b;color:#fff}.button-reset{transition:background-color linear 300ms;background-color:#2563eb;color:#fff;border-left:0}.button-reset:hover,.button-reset:focus,.button-reset:active{background-color:#3b82f6;color:#fff}body{background:#f8fcfc;display:flex;flex-direction:column;height:100vh;margin:0}main{display:flex;margin:0 0 .5vh 0}.envelope-view{display:flex;flex-direction:column;width:100vw;height:95.9vh}#app{background:#808080;width:100vw;height:100%;flex-grow:1;border-width:0}footer{height:4vh;background-color:#001f61;border-radius:10px 10px 0 0;color:#fff;font-family:'Muli';padding:.5vh 0;position:fixed;bottom:0;width:100%;z-index:998;border-width:0}footer *{margin-left:1rem}footer>*{margin:0 6rem 0 1rem}footer a{color:#ff7500;text-decoration:none}.page{margin-top:3rem;background:#fff;border-radius:.313rem;box-shadow:rgba(9,30,66,.25) 0 .25rem .5rem -.125rem,rgba(9,30,66,.08) 0 0 0 .063rem;max-width:40rem}.page section{max-width:30rem;margin:0 auto}.page header .icon{display:inline-block;border-radius:6.25rem;padding:.938rem;margin-bottom:2rem}.page header .icon.admin{background-color:#331904;color:#fecba1}.page header .icon.locked{background-color:#ffc107;color:#000}.page header .icon.signed{background-color:#146c43;color:#fff}.page header .icon.rejected{background-color:#e4d8d5;color:#fff}.page .form{max-width:30rem;margin:2rem auto;display:flex;gap:1rem}#form-access-code>.input,#form-admin-password>.input{flex-grow:1}#page-admin header .icon{background-color:#331904;color:#fecba1}.envelope{display:block;border:.063rem solid #eee;margin-bottom:1rem;padding:.5rem}footer#page-footer{color:#333;max-width:40rem;margin-top:1rem;font-size:.85rem}footer#page-footer a,footer#page-footer a:link,footer#page-footer a:hover,footer#page-footer a:visited,footer#page-footer a:focus{color:#444}.sender-card{background-color:transparent;border:0}.sender-card .row{height:7vh}.sender-card img{height:7vh;background-color:#d1cfcf;border-radius:3.125rem}.navbar .container{display:flex;padding:0;margin:0}.navbar-toggler{padding:0;margin:0;width:4rem;left:0}.envelope-message{position:absolute;display:flex;width:calc(100% - 8rem);align-items:center;justify-content:start;margin-left:4rem}.envelope-message .icon{margin-right:.5rem}.envelope-message .message{font-family:'Roboto',sans-serif;font-size:16px;font-weight:550}.logo{width:9rem;position:absolute;right:0;margin-right:2rem}.none-display{display:none}.dropdown-flag img,.img-flag{width:30%;height:70%}.dropdown-flag{height:75%;width:75%}.increase-dropdown-height{min-height:25rem}.dropdown-flag .select2-container{width:100%!important;max-width:11.25rem}.lang-item{font-size:.85rem}#langDropdownMenuButton{min-width:4vw}.highlight{font-weight:700;font-size:.85rem}.signature-process-title,.signature-process-name{font-size:1.125rem}.mail-link{color:#000;text-decoration:none}.mail-link:hover{text-decoration:underline}#flex-action-panel{z-index:1050}#form-access-code{margin-left:5rem}.header-1{align-items:center;justify-content:space-between;margin-top:0;padding-top:0}.header-1 .text{text-align:center;margin-left:1.5vw;margin-top:0;padding-top:0}@media(max-height:850px){.navbar .container{display:flex;padding:0;margin:0}.navbar-toggler{padding:0;margin:0;width:4rem;left:0}.envelope-message{width:calc(100% - 4rem - 9rem)}.envelope-message .message{font-size:14px;font-weight:550}.logo{width:9rem;position:absolute;right:0}.card-text,.card-text{font-size:.6rem;margin:0;padding:0}.highlight{font-weight:700;font-size:.5rem}.signature-process-title,.signature-process-name{font-size:.7rem}}@media(max-width:767px){.navbar{flex-direction:column;align-items:flex-start}.navbar-brand{font-size:.5rem;text-align:center;overflow:hidden;text-overflow:ellipsis}.envelope-message{width:calc(100% - 4rem - 4.5rem);margin-left:3rem}.envelope-message .message{font-size:12px;font-weight:550}.envelope-message .icon{margin-right:.1rem;font-size:1rem}.logo{width:5rem;right:0;margin-right:1rem}.btn_group{position:fixed;flex-direction:row;bottom:.5rem;right:.5rem}.img-fluid{width:1.2rem;height:100%;display:none}.page{margin-top:1rem;max-width:90%;padding:.5rem}.page section{max-width:90%}#form-access-code{margin-left:0}}@media(max-height:600px){.collapse{height:4rem}} \ No newline at end of file +.navbar-toggler{border:0}.btn-group{margin-right:10vw;margin-bottom:10vh}.btn_refresh,.btn_reject,.btn_complete{height:2.5rem}.btn_complete .icon,.btn_reject .icon,.btn_refresh .icon{width:1.1rem}.btn_complete span,.btn_reject span,.btn_refresh span{vertical-align:middle}.button-finish{transition:background-color linear 300ms;background-color:#059669;color:#fff;border-left:0}.button-finish:hover,.button-finish:focus,.button-finish:active{background-color:#10b981;color:#fff}.button-reject{transition:background-color linear 300ms;background-color:#d97706;color:#fff;border-left:0}.button-reject:hover,.button-reject:focus,.button-reject:active{background-color:#f59e0b;color:#fff}.button-reset{transition:background-color linear 300ms;background-color:#2563eb;color:#fff;border-left:0}.button-reset:hover,.button-reset:focus,.button-reset:active{background-color:#3b82f6;color:#fff}body{background:#f8fcfc;display:flex;flex-direction:column;height:100vh;margin:0}main{display:flex;margin:0 0 .5vh 0}.envelope-view{display:flex;flex-direction:column;width:100vw;height:95.9vh}#app{background:#808080;width:100vw;height:100%;flex-grow:1;border-width:0}footer{height:4vh;background-color:#001f61;border-radius:10px 10px 0 0;color:#fff;font-family:'Muli';padding:.5vh 0;position:fixed;bottom:0;width:100%;z-index:998;border-width:0}footer *{margin-left:1rem}footer>*{margin:0 6rem 0 1rem}footer a{color:#ff7500;text-decoration:none}.page{margin-top:3rem;background:#fff;border-radius:.313rem;box-shadow:rgba(9,30,66,.25) 0 .25rem .5rem -.125rem,rgba(9,30,66,.08) 0 0 0 .063rem;max-width:40rem}.page section{max-width:30rem;margin:0 auto}.page header .icon{display:inline-block;border-radius:6.25rem;padding:.938rem;margin-bottom:2rem}.page header .icon.admin{background-color:#331904;color:#fecba1}.page header .icon.locked{background-color:#ffc107;color:#000}.page header .icon.signed{background-color:#146c43;color:#fff}.page header .icon.rejected{background-color:#e4d8d5;color:#fff}.page .form{max-width:30rem;margin:2rem auto;display:flex;gap:1rem}#form-access-code>.input,#form-admin-password>.input{flex-grow:1}#page-admin header .icon{background-color:#331904;color:#fecba1}.envelope{display:block;border:.063rem solid #eee;margin-bottom:1rem;padding:.5rem}footer#page-footer{color:#333;max-width:40rem;margin-top:1rem;font-size:.85rem}footer#page-footer a,footer#page-footer a:link,footer#page-footer a:hover,footer#page-footer a:visited,footer#page-footer a:focus{color:#444}.sender-card{background-color:transparent;border:0}.sender-card .row{height:7vh}.sender-card img{height:7vh;background-color:#d1cfcf;border-radius:3.125rem}.navbar .container{display:flex;padding:0;margin:0}.navbar-toggler{padding:0;margin:0;width:4rem;left:0}.envelope-message{position:absolute;display:flex;width:calc(100% - 8rem);align-items:center;justify-content:start;margin-left:4rem}.envelope-message .icon{margin-right:.5rem}.envelope-message .message{font-family:'Roboto',sans-serif;font-size:16px;font-weight:550}.logo{width:9rem;position:absolute;right:0;margin-right:2rem}.none-display{display:none}.dropdown-flag img,.img-flag{width:30%;height:70%}.dropdown-flag{height:75%;width:75%}.increase-dropdown-height{min-height:25rem}.dropdown-flag .select2-container{width:100%!important;max-width:11.25rem}.lang-item{font-size:.85rem}#langDropdownMenuButton{min-width:4vw}.highlight{font-weight:700;font-size:.85rem}.signature-process-title,.signature-process-name{font-size:1.125rem}.mail-link{color:#000;text-decoration:none}.mail-link:hover{text-decoration:underline}#flex-action-panel{z-index:1050}#form-access-code{margin-left:5rem}#access-code-error-message{margin:0 0 1.5rem 6rem;height:1.25rem}.header-1{align-items:center;justify-content:space-between;margin-top:0;padding-top:0}.header-1 .text{text-align:center;margin-left:1.5vw;margin-top:0;padding-top:0}@media(max-height:850px){.navbar .container{display:flex;padding:0;margin:0}.navbar-toggler{padding:0;margin:0;width:4rem;left:0}.envelope-message{width:calc(100% - 4rem - 9rem)}.envelope-message .message{font-size:14px;font-weight:550}.logo{width:9rem;position:absolute;right:0}.card-text,.card-text{font-size:.6rem;margin:0;padding:0}.highlight{font-weight:700;font-size:.5rem}.signature-process-title,.signature-process-name{font-size:.7rem}}@media(max-width:767px){.navbar{flex-direction:column;align-items:flex-start}.navbar-brand{font-size:.5rem;text-align:center;overflow:hidden;text-overflow:ellipsis}.envelope-message{width:calc(100% - 4rem - 4.5rem);margin-left:3rem}.envelope-message .message{font-size:12px;font-weight:550}.envelope-message .icon{margin-right:.1rem;font-size:1rem}.logo{width:5rem;right:0;margin-right:1rem}.btn_group{position:fixed;flex-direction:row;bottom:.5rem;right:.5rem}.img-fluid{width:1.2rem;height:100%;display:none}.page{margin-top:1rem;max-width:90%;padding:.5rem}.page section{max-width:90%}#form-access-code{margin-left:0}}@media(max-height:600px){.collapse{height:4rem}} \ No newline at end of file From 84fa9e6e7c25270ea77af8d3e83326c206d0f973 Mon Sep 17 00:00:00 2001 From: Developer 02 Date: Wed, 25 Sep 2024 13:28:47 +0200 Subject: [PATCH 03/11] refactor(envelope-locked): Zugriffscode-Panel einrichten --- .../Views/Home/EnvelopeLocked.cshtml | 65 ++++++++++--------- EnvelopeGenerator.Web/wwwroot/css/site.css | 39 ++++++++++- .../wwwroot/css/site.min.css | 2 +- 3 files changed, 71 insertions(+), 35 deletions(-) diff --git a/EnvelopeGenerator.Web/Views/Home/EnvelopeLocked.cshtml b/EnvelopeGenerator.Web/Views/Home/EnvelopeLocked.cshtml index cb37f6ee..2d473124 100644 --- a/EnvelopeGenerator.Web/Views/Home/EnvelopeLocked.cshtml +++ b/EnvelopeGenerator.Web/Views/Home/EnvelopeLocked.cshtml @@ -23,43 +23,46 @@

@_localizer[WebKey.LockedBody]

-
-
- - - -
- +
+
+ +
+ + + +
+
+ +
-
-
- - -
-
-
- @if (ViewData["ErrorMessage"] is string errMsg) - { + @if (ViewData["ErrorMessage"] is string errMsg) + { + -
+ } +
@_localizer[WebKey.LockedFooterTitle]

@_localizer[WebKey.LockedFooterBody]

diff --git a/EnvelopeGenerator.Web/wwwroot/css/site.css b/EnvelopeGenerator.Web/wwwroot/css/site.css index 4a698b94..4caea544 100644 --- a/EnvelopeGenerator.Web/wwwroot/css/site.css +++ b/EnvelopeGenerator.Web/wwwroot/css/site.css @@ -9,6 +9,10 @@ border: 0; } +.material-symbols-outlined { + align-content: center; +} + .btn-group { margin-right: 10vw; margin-bottom: 10vh; @@ -309,12 +313,38 @@ footer#page-footer { } #form-access-code { - margin-left: 5rem; + justify-content: space-evenly; } +.access-code-form-floating { + display: flex; + justify-content: start; + flex-direction: row; +} + + .access-code-form-floating button { + align-content: center; + border-bottom-left-radius: 0; + border-top-left-radius: 0; + } + + .access-code-form-floating input { + align-content: center; + border-bottom-right-radius: 0; + border-top-right-radius: 0; + border-right-width: 0; + width: 7rem; + } + #access-code-error-message { - margin: 0 0 1.5rem 6rem; - height: 1.25rem; + justify-content: center; + align-content: center; + margin: 1.5rem 7rem 0 7rem; + height: 2.5rem; +} + +.flag-dropdown button { + height: 100%; } .header-1 { @@ -331,6 +361,9 @@ footer#page-footer { padding-top: 0; } +.no-receiver-explanation { + padding: 2.5rem; +} /* styles for mobile responsiveness */ @media (max-height: 850px) { .navbar .container { diff --git a/EnvelopeGenerator.Web/wwwroot/css/site.min.css b/EnvelopeGenerator.Web/wwwroot/css/site.min.css index d9f97592..ee2b7189 100644 --- a/EnvelopeGenerator.Web/wwwroot/css/site.min.css +++ b/EnvelopeGenerator.Web/wwwroot/css/site.min.css @@ -1 +1 @@ -.navbar-toggler{border:0}.btn-group{margin-right:10vw;margin-bottom:10vh}.btn_refresh,.btn_reject,.btn_complete{height:2.5rem}.btn_complete .icon,.btn_reject .icon,.btn_refresh .icon{width:1.1rem}.btn_complete span,.btn_reject span,.btn_refresh span{vertical-align:middle}.button-finish{transition:background-color linear 300ms;background-color:#059669;color:#fff;border-left:0}.button-finish:hover,.button-finish:focus,.button-finish:active{background-color:#10b981;color:#fff}.button-reject{transition:background-color linear 300ms;background-color:#d97706;color:#fff;border-left:0}.button-reject:hover,.button-reject:focus,.button-reject:active{background-color:#f59e0b;color:#fff}.button-reset{transition:background-color linear 300ms;background-color:#2563eb;color:#fff;border-left:0}.button-reset:hover,.button-reset:focus,.button-reset:active{background-color:#3b82f6;color:#fff}body{background:#f8fcfc;display:flex;flex-direction:column;height:100vh;margin:0}main{display:flex;margin:0 0 .5vh 0}.envelope-view{display:flex;flex-direction:column;width:100vw;height:95.9vh}#app{background:#808080;width:100vw;height:100%;flex-grow:1;border-width:0}footer{height:4vh;background-color:#001f61;border-radius:10px 10px 0 0;color:#fff;font-family:'Muli';padding:.5vh 0;position:fixed;bottom:0;width:100%;z-index:998;border-width:0}footer *{margin-left:1rem}footer>*{margin:0 6rem 0 1rem}footer a{color:#ff7500;text-decoration:none}.page{margin-top:3rem;background:#fff;border-radius:.313rem;box-shadow:rgba(9,30,66,.25) 0 .25rem .5rem -.125rem,rgba(9,30,66,.08) 0 0 0 .063rem;max-width:40rem}.page section{max-width:30rem;margin:0 auto}.page header .icon{display:inline-block;border-radius:6.25rem;padding:.938rem;margin-bottom:2rem}.page header .icon.admin{background-color:#331904;color:#fecba1}.page header .icon.locked{background-color:#ffc107;color:#000}.page header .icon.signed{background-color:#146c43;color:#fff}.page header .icon.rejected{background-color:#e4d8d5;color:#fff}.page .form{max-width:30rem;margin:2rem auto;display:flex;gap:1rem}#form-access-code>.input,#form-admin-password>.input{flex-grow:1}#page-admin header .icon{background-color:#331904;color:#fecba1}.envelope{display:block;border:.063rem solid #eee;margin-bottom:1rem;padding:.5rem}footer#page-footer{color:#333;max-width:40rem;margin-top:1rem;font-size:.85rem}footer#page-footer a,footer#page-footer a:link,footer#page-footer a:hover,footer#page-footer a:visited,footer#page-footer a:focus{color:#444}.sender-card{background-color:transparent;border:0}.sender-card .row{height:7vh}.sender-card img{height:7vh;background-color:#d1cfcf;border-radius:3.125rem}.navbar .container{display:flex;padding:0;margin:0}.navbar-toggler{padding:0;margin:0;width:4rem;left:0}.envelope-message{position:absolute;display:flex;width:calc(100% - 8rem);align-items:center;justify-content:start;margin-left:4rem}.envelope-message .icon{margin-right:.5rem}.envelope-message .message{font-family:'Roboto',sans-serif;font-size:16px;font-weight:550}.logo{width:9rem;position:absolute;right:0;margin-right:2rem}.none-display{display:none}.dropdown-flag img,.img-flag{width:30%;height:70%}.dropdown-flag{height:75%;width:75%}.increase-dropdown-height{min-height:25rem}.dropdown-flag .select2-container{width:100%!important;max-width:11.25rem}.lang-item{font-size:.85rem}#langDropdownMenuButton{min-width:4vw}.highlight{font-weight:700;font-size:.85rem}.signature-process-title,.signature-process-name{font-size:1.125rem}.mail-link{color:#000;text-decoration:none}.mail-link:hover{text-decoration:underline}#flex-action-panel{z-index:1050}#form-access-code{margin-left:5rem}#access-code-error-message{margin:0 0 1.5rem 6rem;height:1.25rem}.header-1{align-items:center;justify-content:space-between;margin-top:0;padding-top:0}.header-1 .text{text-align:center;margin-left:1.5vw;margin-top:0;padding-top:0}@media(max-height:850px){.navbar .container{display:flex;padding:0;margin:0}.navbar-toggler{padding:0;margin:0;width:4rem;left:0}.envelope-message{width:calc(100% - 4rem - 9rem)}.envelope-message .message{font-size:14px;font-weight:550}.logo{width:9rem;position:absolute;right:0}.card-text,.card-text{font-size:.6rem;margin:0;padding:0}.highlight{font-weight:700;font-size:.5rem}.signature-process-title,.signature-process-name{font-size:.7rem}}@media(max-width:767px){.navbar{flex-direction:column;align-items:flex-start}.navbar-brand{font-size:.5rem;text-align:center;overflow:hidden;text-overflow:ellipsis}.envelope-message{width:calc(100% - 4rem - 4.5rem);margin-left:3rem}.envelope-message .message{font-size:12px;font-weight:550}.envelope-message .icon{margin-right:.1rem;font-size:1rem}.logo{width:5rem;right:0;margin-right:1rem}.btn_group{position:fixed;flex-direction:row;bottom:.5rem;right:.5rem}.img-fluid{width:1.2rem;height:100%;display:none}.page{margin-top:1rem;max-width:90%;padding:.5rem}.page section{max-width:90%}#form-access-code{margin-left:0}}@media(max-height:600px){.collapse{height:4rem}} \ No newline at end of file +.navbar-toggler{border:0}.material-symbols-outlined{align-content:center}.btn-group{margin-right:10vw;margin-bottom:10vh}.btn_refresh,.btn_reject,.btn_complete{height:2.5rem}.btn_complete .icon,.btn_reject .icon,.btn_refresh .icon{width:1.1rem}.btn_complete span,.btn_reject span,.btn_refresh span{vertical-align:middle}.button-finish{transition:background-color linear 300ms;background-color:#059669;color:#fff;border-left:0}.button-finish:hover,.button-finish:focus,.button-finish:active{background-color:#10b981;color:#fff}.button-reject{transition:background-color linear 300ms;background-color:#d97706;color:#fff;border-left:0}.button-reject:hover,.button-reject:focus,.button-reject:active{background-color:#f59e0b;color:#fff}.button-reset{transition:background-color linear 300ms;background-color:#2563eb;color:#fff;border-left:0}.button-reset:hover,.button-reset:focus,.button-reset:active{background-color:#3b82f6;color:#fff}body{background:#f8fcfc;display:flex;flex-direction:column;height:100vh;margin:0}main{display:flex;margin:0 0 .5vh 0}.envelope-view{display:flex;flex-direction:column;width:100vw;height:95.9vh}#app{background:#808080;width:100vw;height:100%;flex-grow:1;border-width:0}footer{height:4vh;background-color:#001f61;border-radius:10px 10px 0 0;color:#fff;font-family:'Muli';padding:.5vh 0;position:fixed;bottom:0;width:100%;z-index:998;border-width:0}footer *{margin-left:1rem}footer>*{margin:0 6rem 0 1rem}footer a{color:#ff7500;text-decoration:none}.page{margin-top:3rem;background:#fff;border-radius:.313rem;box-shadow:rgba(9,30,66,.25) 0 .25rem .5rem -.125rem,rgba(9,30,66,.08) 0 0 0 .063rem;max-width:40rem}.page section{max-width:30rem;margin:0 auto}.page header .icon{display:inline-block;border-radius:6.25rem;padding:.938rem;margin-bottom:2rem}.page header .icon.admin{background-color:#331904;color:#fecba1}.page header .icon.locked{background-color:#ffc107;color:#000}.page header .icon.signed{background-color:#146c43;color:#fff}.page header .icon.rejected{background-color:#e4d8d5;color:#fff}.page .form{max-width:30rem;margin:2rem auto;display:flex;gap:1rem}#form-access-code>.input,#form-admin-password>.input{flex-grow:1}#page-admin header .icon{background-color:#331904;color:#fecba1}.envelope{display:block;border:.063rem solid #eee;margin-bottom:1rem;padding:.5rem}footer#page-footer{color:#333;max-width:40rem;margin-top:1rem;font-size:.85rem}footer#page-footer a,footer#page-footer a:link,footer#page-footer a:hover,footer#page-footer a:visited,footer#page-footer a:focus{color:#444}.sender-card{background-color:transparent;border:0}.sender-card .row{height:7vh}.sender-card img{height:7vh;background-color:#d1cfcf;border-radius:3.125rem}.navbar .container{display:flex;padding:0;margin:0}.navbar-toggler{padding:0;margin:0;width:4rem;left:0}.envelope-message{position:absolute;display:flex;width:calc(100% - 8rem);align-items:center;justify-content:start;margin-left:4rem}.envelope-message .icon{margin-right:.5rem}.envelope-message .message{font-family:'Roboto',sans-serif;font-size:16px;font-weight:550}.logo{width:9rem;position:absolute;right:0;margin-right:2rem}.none-display{display:none}.dropdown-flag img,.img-flag{width:30%;height:70%}.dropdown-flag{height:75%;width:75%}.increase-dropdown-height{min-height:25rem}.dropdown-flag .select2-container{width:100%!important;max-width:11.25rem}.lang-item{font-size:.85rem}#langDropdownMenuButton{min-width:4vw}.highlight{font-weight:700;font-size:.85rem}.signature-process-title,.signature-process-name{font-size:1.125rem}.mail-link{color:#000;text-decoration:none}.mail-link:hover{text-decoration:underline}#flex-action-panel{z-index:1050}#form-access-code{justify-content:space-evenly}.access-code-form-floating{display:flex;justify-content:start;flex-direction:row}.access-code-form-floating button{align-content:center;border-bottom-left-radius:0;border-top-left-radius:0}.access-code-form-floating input{align-content:center;border-bottom-right-radius:0;border-top-right-radius:0;border-right-width:0;width:7rem}#access-code-error-message{justify-content:center;align-content:center;margin:1.5rem 7rem 0 7rem;height:2.5rem}.flag-dropdown button{height:100%}.header-1{align-items:center;justify-content:space-between;margin-top:0;padding-top:0}.header-1 .text{text-align:center;margin-left:1.5vw;margin-top:0;padding-top:0}.no-receiver-explanation{padding:2.5rem}@media(max-height:850px){.navbar .container{display:flex;padding:0;margin:0}.navbar-toggler{padding:0;margin:0;width:4rem;left:0}.envelope-message{width:calc(100% - 4rem - 9rem)}.envelope-message .message{font-size:14px;font-weight:550}.logo{width:9rem;position:absolute;right:0}.card-text,.card-text{font-size:.6rem;margin:0;padding:0}.highlight{font-weight:700;font-size:.5rem}.signature-process-title,.signature-process-name{font-size:.7rem}}@media(max-width:767px){.navbar{flex-direction:column;align-items:flex-start}.navbar-brand{font-size:.5rem;text-align:center;overflow:hidden;text-overflow:ellipsis}.envelope-message{width:calc(100% - 4rem - 4.5rem);margin-left:3rem}.envelope-message .message{font-size:12px;font-weight:550}.envelope-message .icon{margin-right:.1rem;font-size:1rem}.logo{width:5rem;right:0;margin-right:1rem}.btn_group{position:fixed;flex-direction:row;bottom:.5rem;right:.5rem}.img-fluid{width:1.2rem;height:100%;display:none}.page{margin-top:1rem;max-width:90%;padding:.5rem}.page section{max-width:90%}#form-access-code{margin-left:0}}@media(max-height:600px){.collapse{height:4rem}} \ No newline at end of file From 9ce5af7cd0d277b6b4c99c1da5abdb08426c25fc Mon Sep 17 00:00:00 2001 From: Developer 02 Date: Wed, 25 Sep 2024 14:03:05 +0200 Subject: [PATCH 04/11] =?UTF-8?q?feat(event-binder.js):=20Signaturkomponen?= =?UTF-8?q?te=20hinzugef=C3=BCgt,=20um=20die=20Animationen=20in=20der=20Fo?= =?UTF-8?q?rtschrittsleiste=20der=20Signatur=20zu=20behandeln?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Befehl zum Erhöhen der Anzahl von Signaturen unter der createAnnotationFrameBlob-Methode in annotation.js hinzugefügt - Vorzeichenbehafteter Befehl zum Nullsetzen der Zählung unter RESET-case der handleClick-Methode in app.js hinzugefügt --- .../Views/Home/ShowEnvelope.cshtml | 2 +- EnvelopeGenerator.Web/wwwroot/js/annotation.js | 1 + EnvelopeGenerator.Web/wwwroot/js/app.js | 2 +- EnvelopeGenerator.Web/wwwroot/js/app.min.js | 2 +- .../wwwroot/js/event-binder.js | 18 ++++++++++++++++++ .../wwwroot/js/event-binder.min.js | 2 +- 6 files changed, 23 insertions(+), 4 deletions(-) diff --git a/EnvelopeGenerator.Web/Views/Home/ShowEnvelope.cshtml b/EnvelopeGenerator.Web/Views/Home/ShowEnvelope.cshtml index 30bec195..976764e2 100644 --- a/EnvelopeGenerator.Web/Views/Home/ShowEnvelope.cshtml +++ b/EnvelopeGenerator.Web/Views/Home/ShowEnvelope.cshtml @@ -73,7 +73,7 @@
- 0/@signatureCount Unterschriften + 0/@signatureCount Unterschriften
diff --git a/EnvelopeGenerator.Web/wwwroot/js/annotation.js b/EnvelopeGenerator.Web/wwwroot/js/annotation.js index b566c753..8aa021e6 100644 --- a/EnvelopeGenerator.Web/wwwroot/js/annotation.js +++ b/EnvelopeGenerator.Web/wwwroot/js/annotation.js @@ -253,6 +253,7 @@ } static async createAnnotationFrameBlob(receiverName, receiverSignature, timestamp, width, height) { + Comp.SignatureProgress.SignedCount += 1; const canvas = document.createElement('canvas') const scale = 4 const fontSize = 10 diff --git a/EnvelopeGenerator.Web/wwwroot/js/app.js b/EnvelopeGenerator.Web/wwwroot/js/app.js index 81a1717f..2e337132 100644 --- a/EnvelopeGenerator.Web/wwwroot/js/app.js +++ b/EnvelopeGenerator.Web/wwwroot/js/app.js @@ -141,7 +141,7 @@ class App { switch (eventType) { case 'RESET': result = await this.handleReset(null) - + Comp.SignatureProgress.SignedCount = 0; if (result.isConfirmed) { Swal.fire({ title: 'Erfolg', diff --git a/EnvelopeGenerator.Web/wwwroot/js/app.min.js b/EnvelopeGenerator.Web/wwwroot/js/app.min.js index 06a97566..2bca05c7 100644 --- a/EnvelopeGenerator.Web/wwwroot/js/app.min.js +++ b/EnvelopeGenerator.Web/wwwroot/js/app.min.js @@ -1 +1 @@ -const ActionType={Created:0,Saved:1,Sent:2,EmailSent:3,Delivered:4,Seen:5,Signed:6,Rejected:7};class App{constructor(n,t,i,r,u,f){this.container=f??`#${this.constructor.name.toLowerCase()}`;this.envelopeKey=n;this.Network=new Network;this.Instance=null;this.currentDocument=null;this.currentReceiver=null;this.signatureCount=0;this.envelopeReceiver=t;this.documentBytes=i;this.licenseKey=r;this.locale=u}async init(){this.currentDocument=this.envelopeReceiver.envelope.documents[0];this.currentReceiver=this.envelopeReceiver.receiver;const n=this.documentBytes;if(n.fatal||n.error)return Swal.fire({title:"Fehler",text:"Dokument konnte nicht geladen werden!",icon:"error"});const t=this.documentBytes;this.Instance=await UI.loadPSPDFKit(t,this.container,this.licenseKey,this.locale);UI.configurePSPDFKit(this.Instance,this.handleClick.bind(this));this.Instance.addEventListener("annotations.load",this.handleAnnotationsLoad.bind(this));this.Instance.addEventListener("annotations.change",this.handleAnnotationsChange.bind(this));this.Instance.addEventListener("annotations.create",this.handleAnnotationsCreate.bind(this));this.Instance.addEventListener("annotations.willChange",()=>{Comp.ActPanel.Toggle()});try{this.signatureCount=this.currentDocument.elements.length;await Annotation.createAnnotations(this.currentDocument,this.Instance);const n=await this.Network.openDocument(this.envelopeKey);if(n.fatal||n.error)return Swal.fire({title:"Fehler",text:"Umschlag konnte nicht geöffnet werden!",icon:"error"})}catch(i){}[...document.getElementsByClassName("btn_refresh")].forEach(n=>n.addEventListener("click",()=>this.handleClick("RESET")));[...document.getElementsByClassName("btn_complete")].forEach(n=>n.addEventListener("click",()=>this.handleClick("FINISH")))}handleAnnotationsLoad(n){n.toJS()}handleAnnotationsChange(){}async handleAnnotationsCreate(n){const t=n.toJS()[0],i=!!t.formFieldName,r=!!t.isSignature;if(i===!1&&r===!0){const r=t.boundingBox.left-20,u=t.boundingBox.top-20,n=150,i=75,f=new Date,e=await Annotation.createAnnotationFrameBlob(this.envelopeReceiver.name,this.currentReceiver.signature,f,n,i),o=await fetch(e),s=await o.blob(),h=await this.Instance.createAttachment(s),c=Annotation.createImageAnnotation(new PSPDFKit.Geometry.Rect({left:r,top:u,width:n,height:i}),t.pageIndex,h);this.Instance.create(c)}}async handleClick(n){let t=!1;switch(n){case"RESET":t=await this.handleReset(null);t.isConfirmed&&Swal.fire({title:"Erfolg",text:"Dokument wurde zurückgesetzt",icon:"info"});break;case"FINISH":t=await this.handleFinish(null);t==!0&&(window.location.href=`/EnvelopeKey/${this.envelopeKey}/Success`);break;case"REJECT":alert("Dokument abgelent!")}}async handleFinish(){const n=await this.Instance.exportInstantJSON(),t=await n.formFieldValues,r=t.filter(n=>Annotation.isFieldRequired(n)),u=r.some(n=>n.value===undefined||n.value===null||n.value==="");if(u)return Swal.fire({title:"Warnung",text:"Bitte füllen Sie alle Standortinformationen vollständig aus!",icon:"warning"}),!1;const f=new RegExp("^[a-zA-Z\\u0080-\\u024F]+(?:([\\ \\-\\']|(\\.\\ ))[a-zA-Z\\u0080-\\u024F]+)*$"),e=t.filter(n=>Annotation.isCityField(n));for(var i of e)if(!f.test(i.value))return Swal.fire({title:"Warnung",text:`Bitte überprüfen Sie die eingegebene Ortsangabe "${i.value}" auf korrekte Formatierung. Beispiele für richtige Formate sind: München, Île-de-France, Sauðárkrókur, San Francisco, St. Catharines usw.`,icon:"warning"}),!1;const o=await this.validateAnnotations(this.signatureCount);return o===!1?(Swal.fire({title:"Warnung",text:"Es wurden nicht alle Signaturfelder ausgefüllt!",icon:"warning"}),!1):Swal.fire({title:localized.confirmation,html:`
${localized.sigAgree}
`,icon:"question",showCancelButton:!0,confirmButtonColor:"#3085d6",cancelButtonColor:"#d33",confirmButtonText:localized.finalize,cancelButtonText:localized.back}).then(async t=>{if(t.isConfirmed){try{await this.Instance.save()}catch(i){return Swal.fire({title:"Fehler",text:"Umschlag konnte nicht signiert werden!",icon:"error"}),!1}try{const i=await n,t=await this.Network.postEnvelope(this.envelopeKey,this.currentDocument.id,i);return t.fatal?(Swal.fire({title:"Fehler",text:"Umschlag konnte nicht signiert werden!",icon:"error"}),!1):t.error?(Swal.fire({title:"Warnung",text:"Umschlag ist nicht mehr verfügbar.",icon:"warning"}),!1):!0}catch(i){return!1}}else return!1})}async validateAnnotations(n){const t=await Annotation.getAnnotations(this.Instance),i=t.map(n=>n.toJS()).filter(n=>n.isSignature);return n>i.length?!1:!0}async handleReset(){const n=await Swal.fire({title:"Sind sie sicher?",text:"Wollen Sie das Dokument und alle erstellten Signaturen zurücksetzen?",icon:"question",showCancelButton:!0});if(n.isConfirmed){const n=await Annotation.deleteAnnotations(this.Instance)}return n}} \ No newline at end of file +const ActionType={Created:0,Saved:1,Sent:2,EmailSent:3,Delivered:4,Seen:5,Signed:6,Rejected:7};class App{constructor(n,t,i,r,u,f){this.container=f??`#${this.constructor.name.toLowerCase()}`;this.envelopeKey=n;this.Network=new Network;this.Instance=null;this.currentDocument=null;this.currentReceiver=null;this.signatureCount=0;this.envelopeReceiver=t;this.documentBytes=i;this.licenseKey=r;this.locale=u}async init(){this.currentDocument=this.envelopeReceiver.envelope.documents[0];this.currentReceiver=this.envelopeReceiver.receiver;const n=this.documentBytes;if(n.fatal||n.error)return Swal.fire({title:"Fehler",text:"Dokument konnte nicht geladen werden!",icon:"error"});const t=this.documentBytes;this.Instance=await UI.loadPSPDFKit(t,this.container,this.licenseKey,this.locale);UI.configurePSPDFKit(this.Instance,this.handleClick.bind(this));this.Instance.addEventListener("annotations.load",this.handleAnnotationsLoad.bind(this));this.Instance.addEventListener("annotations.change",this.handleAnnotationsChange.bind(this));this.Instance.addEventListener("annotations.create",this.handleAnnotationsCreate.bind(this));this.Instance.addEventListener("annotations.willChange",()=>{Comp.ActPanel.Toggle()});try{this.signatureCount=this.currentDocument.elements.length;await Annotation.createAnnotations(this.currentDocument,this.Instance);const n=await this.Network.openDocument(this.envelopeKey);if(n.fatal||n.error)return Swal.fire({title:"Fehler",text:"Umschlag konnte nicht geöffnet werden!",icon:"error"})}catch(i){}[...document.getElementsByClassName("btn_refresh")].forEach(n=>n.addEventListener("click",()=>this.handleClick("RESET")));[...document.getElementsByClassName("btn_complete")].forEach(n=>n.addEventListener("click",()=>this.handleClick("FINISH")))}handleAnnotationsLoad(n){n.toJS()}handleAnnotationsChange(){}async handleAnnotationsCreate(n){const t=n.toJS()[0],i=!!t.formFieldName,r=!!t.isSignature;if(i===!1&&r===!0){const r=t.boundingBox.left-20,u=t.boundingBox.top-20,n=150,i=75,f=new Date,e=await Annotation.createAnnotationFrameBlob(this.envelopeReceiver.name,this.currentReceiver.signature,f,n,i),o=await fetch(e),s=await o.blob(),h=await this.Instance.createAttachment(s),c=Annotation.createImageAnnotation(new PSPDFKit.Geometry.Rect({left:r,top:u,width:n,height:i}),t.pageIndex,h);this.Instance.create(c)}}async handleClick(n){let t=!1;switch(n){case"RESET":t=await this.handleReset(null);Comp.SignatureProgress.SignedCount=0;t.isConfirmed&&Swal.fire({title:"Erfolg",text:"Dokument wurde zurückgesetzt",icon:"info"});break;case"FINISH":t=await this.handleFinish(null);t==!0&&(window.location.href=`/EnvelopeKey/${this.envelopeKey}/Success`);break;case"REJECT":alert("Dokument abgelent!")}}async handleFinish(){const n=await this.Instance.exportInstantJSON(),t=await n.formFieldValues,r=t.filter(n=>Annotation.isFieldRequired(n)),u=r.some(n=>n.value===undefined||n.value===null||n.value==="");if(u)return Swal.fire({title:"Warnung",text:"Bitte füllen Sie alle Standortinformationen vollständig aus!",icon:"warning"}),!1;const f=new RegExp("^[a-zA-Z\\u0080-\\u024F]+(?:([\\ \\-\\']|(\\.\\ ))[a-zA-Z\\u0080-\\u024F]+)*$"),e=t.filter(n=>Annotation.isCityField(n));for(var i of e)if(!f.test(i.value))return Swal.fire({title:"Warnung",text:`Bitte überprüfen Sie die eingegebene Ortsangabe "${i.value}" auf korrekte Formatierung. Beispiele für richtige Formate sind: München, Île-de-France, Sauðárkrókur, San Francisco, St. Catharines usw.`,icon:"warning"}),!1;const o=await this.validateAnnotations(this.signatureCount);return o===!1?(Swal.fire({title:"Warnung",text:"Es wurden nicht alle Signaturfelder ausgefüllt!",icon:"warning"}),!1):Swal.fire({title:localized.confirmation,html:`
${localized.sigAgree}
`,icon:"question",showCancelButton:!0,confirmButtonColor:"#3085d6",cancelButtonColor:"#d33",confirmButtonText:localized.finalize,cancelButtonText:localized.back}).then(async t=>{if(t.isConfirmed){try{await this.Instance.save()}catch(i){return Swal.fire({title:"Fehler",text:"Umschlag konnte nicht signiert werden!",icon:"error"}),!1}try{const i=await n,t=await this.Network.postEnvelope(this.envelopeKey,this.currentDocument.id,i);return t.fatal?(Swal.fire({title:"Fehler",text:"Umschlag konnte nicht signiert werden!",icon:"error"}),!1):t.error?(Swal.fire({title:"Warnung",text:"Umschlag ist nicht mehr verfügbar.",icon:"warning"}),!1):!0}catch(i){return!1}}else return!1})}async validateAnnotations(n){const t=await Annotation.getAnnotations(this.Instance),i=t.map(n=>n.toJS()).filter(n=>n.isSignature);return n>i.length?!1:!0}async handleReset(){const n=await Swal.fire({title:"Sind sie sicher?",text:"Wollen Sie das Dokument und alle erstellten Signaturen zurücksetzen?",icon:"question",showCancelButton:!0});if(n.isConfirmed){const n=await Annotation.deleteAnnotations(this.Instance)}return n}} \ No newline at end of file diff --git a/EnvelopeGenerator.Web/wwwroot/js/event-binder.js b/EnvelopeGenerator.Web/wwwroot/js/event-binder.js index 7f6dc07a..b2021292 100644 --- a/EnvelopeGenerator.Web/wwwroot/js/event-binder.js +++ b/EnvelopeGenerator.Web/wwwroot/js/event-binder.js @@ -64,4 +64,22 @@ class Comp { Comp.ActPanel.Display = Comp.ActPanel.IsHided ? '' : 'none' } } + + static SignatureProgress = class { + static __SignedCountSpan; + static get SignedCountSpan() { + this.__SignedCountSpan ??= document.getElementById("signed-count"); + return Comp.SignatureProgress.__SignedCountSpan; + } + + static __signedCount = 0; + static get SignedCount() { + return this.__signedCount; + } + + static set SignedCount(value) { + this.__signedCount = value; + this.SignedCountSpan.innerText = value.toString(); + } + } } \ No newline at end of file diff --git a/EnvelopeGenerator.Web/wwwroot/js/event-binder.min.js b/EnvelopeGenerator.Web/wwwroot/js/event-binder.min.js index 1ff095d9..b5984801 100644 --- a/EnvelopeGenerator.Web/wwwroot/js/event-binder.min.js +++ b/EnvelopeGenerator.Web/wwwroot/js/event-binder.min.js @@ -1,3 +1,3 @@ $(".btn_reject").click(()=>Swal.fire({title:localized.rejection,html:`
${localized.rejectionReasonQ}
`,icon:"question",input:"text",inputAttributes:{autocapitalize:"off"},showCancelButton:!0,confirmButtonColor:"#3085d6",cancelButtonColor:"#d33",confirmButtonText:localized.complete,cancelButtonText:localized.back,showLoaderOnConfirm:!0,preConfirm:async n=>{try{return await rejectEnvelope(n)}catch(t){Swal.showValidationMessage(` Request failed: ${t} - `)}},allowOutsideClick:()=>!Swal.isLoading()}).then(n=>{if(n.isConfirmed){const t=n.value;t.ok?redirRejected():Swal.showValidationMessage(`Request failed: ${t.message}`)}}));class Comp{static ActPanel=class{static __Root;static get Root(){Comp.ActPanel.__Root??=document.getElementById("flex-action-panel");return Comp.ActPanel.__Root}static get Elements(){return[...Comp.ActPanel.Root.children]}static get IsHided(){return Comp.ActPanel.Root.style.display=="none"}static set Display(n){Comp.ActPanel.Root.style.display=n;Comp.ActPanel.Elements.forEach(t=>t.style.display=n)}static Toggle(){Comp.ActPanel.Display=Comp.ActPanel.IsHided?"":"none"}};} \ No newline at end of file + `)}},allowOutsideClick:()=>!Swal.isLoading()}).then(n=>{if(n.isConfirmed){const t=n.value;t.ok?redirRejected():Swal.showValidationMessage(`Request failed: ${t.message}`)}}));class Comp{static ActPanel=class{static __Root;static get Root(){Comp.ActPanel.__Root??=document.getElementById("flex-action-panel");return Comp.ActPanel.__Root}static get Elements(){return[...Comp.ActPanel.Root.children]}static get IsHided(){return Comp.ActPanel.Root.style.display=="none"}static set Display(n){Comp.ActPanel.Root.style.display=n;Comp.ActPanel.Elements.forEach(t=>t.style.display=n)}static Toggle(){Comp.ActPanel.Display=Comp.ActPanel.IsHided?"":"none"}};static SignatureProgress=class{static __SignedCountSpan;static get SignedCountSpan(){this.__SignedCountSpan??=document.getElementById("signed-count");return Comp.SignatureProgress.__SignedCountSpan}static __signedCount=0;static get SignedCount(){return this.__signedCount}static set SignedCount(n){this.__signedCount=n;this.SignedCountSpan.innerText=n.toString()}};} \ No newline at end of file From 361bdeb2b20ec7f59aa02ccca308aaedc26cdeda Mon Sep 17 00:00:00 2001 From: Developer 02 Date: Wed, 25 Sep 2024 14:41:30 +0200 Subject: [PATCH 05/11] =?UTF-8?q?feat(event-binder.js):=20Es=20wurde=20der?= =?UTF-8?q?=20Effekt=20hinzugef=C3=BCgt,=20dass=20die=20Breite=20des=20For?= =?UTF-8?q?tschrittsbalkens=20nach=20dem=20Signaturprozess=20um=20einen=20?= =?UTF-8?q?bestimmten=20Anteil=20erh=C3=B6ht=20wird.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Views/Home/ShowEnvelope.cshtml | 4 ++-- EnvelopeGenerator.Web/wwwroot/css/card.css | 2 +- EnvelopeGenerator.Web/wwwroot/css/card.min.css | 2 +- EnvelopeGenerator.Web/wwwroot/js/event-binder.js | 14 ++++++++++++++ .../wwwroot/js/event-binder.min.js | 2 +- 5 files changed, 19 insertions(+), 5 deletions(-) diff --git a/EnvelopeGenerator.Web/Views/Home/ShowEnvelope.cshtml b/EnvelopeGenerator.Web/Views/Home/ShowEnvelope.cshtml index 976764e2..96f33d1e 100644 --- a/EnvelopeGenerator.Web/Views/Home/ShowEnvelope.cshtml +++ b/EnvelopeGenerator.Web/Views/Home/ShowEnvelope.cshtml @@ -71,9 +71,9 @@

-
+
- 0/@signatureCount Unterschriften + 0/@signatureCount Unterschriften
diff --git a/EnvelopeGenerator.Web/wwwroot/css/card.css b/EnvelopeGenerator.Web/wwwroot/css/card.css index 7ef17e70..d44f280f 100644 --- a/EnvelopeGenerator.Web/wwwroot/css/card.css +++ b/EnvelopeGenerator.Web/wwwroot/css/card.css @@ -88,7 +88,7 @@ top: 0; left: 0; height: 0.3125rem; - width:1%; + width: var(--progress-width, 1%); } .progress-text { diff --git a/EnvelopeGenerator.Web/wwwroot/css/card.min.css b/EnvelopeGenerator.Web/wwwroot/css/card.min.css index 02966274..f5f1c9f7 100644 --- a/EnvelopeGenerator.Web/wwwroot/css/card.min.css +++ b/EnvelopeGenerator.Web/wwwroot/css/card.min.css @@ -1 +1 @@ -@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');*{box-sizing:border-box}.dd-cards-container{font-family:'Muli',sans-serif;display:flex;align-items:center;justify-content:center;flex-direction:column;height:10rem}.dd-card{background-color:#fff;box-shadow:0 .625rem .625rem rgba(0,0,0,.2);display:flex;max-width:100%;margin:0;overflow:hidden;width:100%}.dd-card h6{opacity:.6;margin:0;letter-spacing:.0625rem}.uppercase{text-transform:uppercase}.dd-card h2{letter-spacing:.0625rem;margin:0}.dd-card-preview{background-color:#2a265f;color:#fff;padding:1.875rem;max-width:15.625rem}.dd-card-preview a{color:#fff;display:inline-block;font-size:.75rem;opacity:.6;margin-top:1.875rem;text-decoration:none}.dd-card-info{padding:1rem 0 0 1.875rem;position:relative;width:100%}.dd-card-info p{opacity:.6;font-size:.75rem;opacity:.6;margin-top:.875rem;text-decoration:none}.progress-container{text-align:right;width:9.375rem}.progress{position:relative;background-color:#ddd;border-radius:.1875rem;height:.3125rem;width:10rem}.progress::after{background-color:#2a265f;content:'';position:absolute;top:0;left:0;height:.3125rem;width:1%}.progress-text{font-size:.625rem;opacity:.6;letter-spacing:.0625rem;text-align:left}.dd-card-btn{background-color:#2a265f;border:0;border-radius:3.125rem;box-shadow:0 .625rem .625rem rgba(0,0,0,.2);color:#fff;font-size:1rem;padding:.75rem 1.5625rem;position:absolute;bottom:1.875rem;right:1.875rem;letter-spacing:.0625rem}.social-panel-container{position:fixed;right:0;bottom:5rem;transform:translateX(100%);transition:transform .4s ease-in-out}.social-panel-container.visible{transform:translateX(-.625rem)}.social-panel{background-color:#fff;border-radius:16px;box-shadow:0 16px 31px -17px rgba(0,31,97,.6);border:5px solid #001f61;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:'Muli';position:relative;height:169px;width:370px;max-width:calc(100% - 10px)}.social-panel button.close-btn{border:0;color:#97a5ce;cursor:pointer;font-size:20px;position:absolute;top:5px;right:5px}.social-panel button.close-btn:focus{outline:0}.social-panel p{background-color:#001f61;border-radius:0 0 10px 10px;color:#fff;font-size:14px;line-height:18px;padding:2px 17px 6px;position:absolute;top:0;left:50%;margin:0;transform:translateX(-50%);text-align:center;width:235px}.social-panel p i{margin:0 5px}.social-panel p a{color:#ff7500;text-decoration:none}.social-panel h4{margin:20px 0;color:#97a5ce;font-family:'Muli';font-size:14px;line-height:18px;text-transform:uppercase}.social-panel ul{display:flex;list-style-type:none;padding:0;margin:0}.social-panel ul li{margin:0 10px}.social-panel ul li a{border:1px solid #dce1f2;border-radius:50%;color:#001f61;font-size:20px;display:flex;justify-content:center;align-items:center;height:50px;width:50px;text-decoration:none}.social-panel ul li a:hover{border-color:#ff6a00;box-shadow:0 9px 12px -9px #ff6a00}.floating-btn{border-radius:26.5px;background-color:#001f61;border:1px solid #001f61;box-shadow:0 16px 22px -17px #03153b;color:#fff;cursor:pointer;font-size:16px;line-height:20px;padding:12px 20px;position:fixed;bottom:20px;right:20px;z-index:999}.floating-btn:hover{background-color:#fff;color:#001f61}.floating-btn:focus{outline:0}.floating-text{background-color:#001f61;border-radius:10px 10px 0 0;color:#fff;font-family:'Muli';padding:7px 15px;position:fixed;bottom:0;left:50%;transform:translateX(-50%);text-align:center;z-index:998}.floating-text a{color:#ff7500;text-decoration:none}@media screen and (max-width:480px){.social-panel-container.visible{transform:translateX(0)}.floating-btn{right:10px}} \ No newline at end of file +@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');*{box-sizing:border-box}.dd-cards-container{font-family:'Muli',sans-serif;display:flex;align-items:center;justify-content:center;flex-direction:column;height:10rem}.dd-card{background-color:#fff;box-shadow:0 .625rem .625rem rgba(0,0,0,.2);display:flex;max-width:100%;margin:0;overflow:hidden;width:100%}.dd-card h6{opacity:.6;margin:0;letter-spacing:.0625rem}.uppercase{text-transform:uppercase}.dd-card h2{letter-spacing:.0625rem;margin:0}.dd-card-preview{background-color:#2a265f;color:#fff;padding:1.875rem;max-width:15.625rem}.dd-card-preview a{color:#fff;display:inline-block;font-size:.75rem;opacity:.6;margin-top:1.875rem;text-decoration:none}.dd-card-info{padding:1rem 0 0 1.875rem;position:relative;width:100%}.dd-card-info p{opacity:.6;font-size:.75rem;opacity:.6;margin-top:.875rem;text-decoration:none}.progress-container{text-align:right;width:9.375rem}.progress{position:relative;background-color:#ddd;border-radius:.1875rem;height:.3125rem;width:10rem}.progress::after{background-color:#2a265f;content:'';position:absolute;top:0;left:0;height:.3125rem;width:var(--progress-width,1%)}.progress-text{font-size:.625rem;opacity:.6;letter-spacing:.0625rem;text-align:left}.dd-card-btn{background-color:#2a265f;border:0;border-radius:3.125rem;box-shadow:0 .625rem .625rem rgba(0,0,0,.2);color:#fff;font-size:1rem;padding:.75rem 1.5625rem;position:absolute;bottom:1.875rem;right:1.875rem;letter-spacing:.0625rem}.social-panel-container{position:fixed;right:0;bottom:5rem;transform:translateX(100%);transition:transform .4s ease-in-out}.social-panel-container.visible{transform:translateX(-.625rem)}.social-panel{background-color:#fff;border-radius:16px;box-shadow:0 16px 31px -17px rgba(0,31,97,.6);border:5px solid #001f61;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:'Muli';position:relative;height:169px;width:370px;max-width:calc(100% - 10px)}.social-panel button.close-btn{border:0;color:#97a5ce;cursor:pointer;font-size:20px;position:absolute;top:5px;right:5px}.social-panel button.close-btn:focus{outline:0}.social-panel p{background-color:#001f61;border-radius:0 0 10px 10px;color:#fff;font-size:14px;line-height:18px;padding:2px 17px 6px;position:absolute;top:0;left:50%;margin:0;transform:translateX(-50%);text-align:center;width:235px}.social-panel p i{margin:0 5px}.social-panel p a{color:#ff7500;text-decoration:none}.social-panel h4{margin:20px 0;color:#97a5ce;font-family:'Muli';font-size:14px;line-height:18px;text-transform:uppercase}.social-panel ul{display:flex;list-style-type:none;padding:0;margin:0}.social-panel ul li{margin:0 10px}.social-panel ul li a{border:1px solid #dce1f2;border-radius:50%;color:#001f61;font-size:20px;display:flex;justify-content:center;align-items:center;height:50px;width:50px;text-decoration:none}.social-panel ul li a:hover{border-color:#ff6a00;box-shadow:0 9px 12px -9px #ff6a00}.floating-btn{border-radius:26.5px;background-color:#001f61;border:1px solid #001f61;box-shadow:0 16px 22px -17px #03153b;color:#fff;cursor:pointer;font-size:16px;line-height:20px;padding:12px 20px;position:fixed;bottom:20px;right:20px;z-index:999}.floating-btn:hover{background-color:#fff;color:#001f61}.floating-btn:focus{outline:0}.floating-text{background-color:#001f61;border-radius:10px 10px 0 0;color:#fff;font-family:'Muli';padding:7px 15px;position:fixed;bottom:0;left:50%;transform:translateX(-50%);text-align:center;z-index:998}.floating-text a{color:#ff7500;text-decoration:none}@media screen and (max-width:480px){.social-panel-container.visible{transform:translateX(0)}.floating-btn{right:10px}} \ No newline at end of file diff --git a/EnvelopeGenerator.Web/wwwroot/js/event-binder.js b/EnvelopeGenerator.Web/wwwroot/js/event-binder.js index b2021292..076baabe 100644 --- a/EnvelopeGenerator.Web/wwwroot/js/event-binder.js +++ b/EnvelopeGenerator.Web/wwwroot/js/event-binder.js @@ -66,6 +66,12 @@ class Comp { } static SignatureProgress = class { + static __SignatureCount; + static get SignatureCount() { + this.__SignatureCount = parseInt(document.getElementById("signature-count").innerText); + return this.__SignatureCount; + } + static __SignedCountSpan; static get SignedCountSpan() { this.__SignedCountSpan ??= document.getElementById("signed-count"); @@ -79,7 +85,15 @@ class Comp { static set SignedCount(value) { this.__signedCount = value; + const width = (value / this.SignatureCount) * 100; + this.SignedCountBar.style.setProperty('--progress-width', width + '%'); this.SignedCountSpan.innerText = value.toString(); } + + static __SignedCountBar; + static get SignedCountBar() { + this.__SignedCountBar ??= document.getElementById("signed-count-bar"); + return this.__SignedCountBar; + } } } \ No newline at end of file diff --git a/EnvelopeGenerator.Web/wwwroot/js/event-binder.min.js b/EnvelopeGenerator.Web/wwwroot/js/event-binder.min.js index b5984801..7d96784c 100644 --- a/EnvelopeGenerator.Web/wwwroot/js/event-binder.min.js +++ b/EnvelopeGenerator.Web/wwwroot/js/event-binder.min.js @@ -1,3 +1,3 @@ $(".btn_reject").click(()=>Swal.fire({title:localized.rejection,html:`
${localized.rejectionReasonQ}
`,icon:"question",input:"text",inputAttributes:{autocapitalize:"off"},showCancelButton:!0,confirmButtonColor:"#3085d6",cancelButtonColor:"#d33",confirmButtonText:localized.complete,cancelButtonText:localized.back,showLoaderOnConfirm:!0,preConfirm:async n=>{try{return await rejectEnvelope(n)}catch(t){Swal.showValidationMessage(` Request failed: ${t} - `)}},allowOutsideClick:()=>!Swal.isLoading()}).then(n=>{if(n.isConfirmed){const t=n.value;t.ok?redirRejected():Swal.showValidationMessage(`Request failed: ${t.message}`)}}));class Comp{static ActPanel=class{static __Root;static get Root(){Comp.ActPanel.__Root??=document.getElementById("flex-action-panel");return Comp.ActPanel.__Root}static get Elements(){return[...Comp.ActPanel.Root.children]}static get IsHided(){return Comp.ActPanel.Root.style.display=="none"}static set Display(n){Comp.ActPanel.Root.style.display=n;Comp.ActPanel.Elements.forEach(t=>t.style.display=n)}static Toggle(){Comp.ActPanel.Display=Comp.ActPanel.IsHided?"":"none"}};static SignatureProgress=class{static __SignedCountSpan;static get SignedCountSpan(){this.__SignedCountSpan??=document.getElementById("signed-count");return Comp.SignatureProgress.__SignedCountSpan}static __signedCount=0;static get SignedCount(){return this.__signedCount}static set SignedCount(n){this.__signedCount=n;this.SignedCountSpan.innerText=n.toString()}};} \ No newline at end of file + `)}},allowOutsideClick:()=>!Swal.isLoading()}).then(n=>{if(n.isConfirmed){const t=n.value;t.ok?redirRejected():Swal.showValidationMessage(`Request failed: ${t.message}`)}}));class Comp{static ActPanel=class{static __Root;static get Root(){Comp.ActPanel.__Root??=document.getElementById("flex-action-panel");return Comp.ActPanel.__Root}static get Elements(){return[...Comp.ActPanel.Root.children]}static get IsHided(){return Comp.ActPanel.Root.style.display=="none"}static set Display(n){Comp.ActPanel.Root.style.display=n;Comp.ActPanel.Elements.forEach(t=>t.style.display=n)}static Toggle(){Comp.ActPanel.Display=Comp.ActPanel.IsHided?"":"none"}};static SignatureProgress=class{static __SignatureCount;static get SignatureCount(){this.__SignatureCount=parseInt(document.getElementById("signature-count").innerText);return this.__SignatureCount}static __SignedCountSpan;static get SignedCountSpan(){this.__SignedCountSpan??=document.getElementById("signed-count");return Comp.SignatureProgress.__SignedCountSpan}static __signedCount=0;static get SignedCount(){return this.__signedCount}static set SignedCount(n){this.__signedCount=n;const t=(n/this.SignatureCount)*100;this.SignedCountBar.style.setProperty("--progress-width",t+"%");this.SignedCountSpan.innerText=n.toString()}static __SignedCountBar;static get SignedCountBar(){this.__SignedCountBar??=document.getElementById("signed-count-bar");return this.__SignedCountBar}};} \ No newline at end of file From 4a1459d70888ffd9a11d896e3b1e00a0f18a1780 Mon Sep 17 00:00:00 2001 From: Developer 02 Date: Wed, 25 Sep 2024 14:46:08 +0200 Subject: [PATCH 06/11] feat: add smooth width transition to progress bar with 1s ease animation --- EnvelopeGenerator.Web/wwwroot/css/card.css | 1 + EnvelopeGenerator.Web/wwwroot/css/card.min.css | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/EnvelopeGenerator.Web/wwwroot/css/card.css b/EnvelopeGenerator.Web/wwwroot/css/card.css index d44f280f..8904992d 100644 --- a/EnvelopeGenerator.Web/wwwroot/css/card.css +++ b/EnvelopeGenerator.Web/wwwroot/css/card.css @@ -89,6 +89,7 @@ left: 0; height: 0.3125rem; width: var(--progress-width, 1%); + transition: width 1s ease; } .progress-text { diff --git a/EnvelopeGenerator.Web/wwwroot/css/card.min.css b/EnvelopeGenerator.Web/wwwroot/css/card.min.css index f5f1c9f7..26d8b889 100644 --- a/EnvelopeGenerator.Web/wwwroot/css/card.min.css +++ b/EnvelopeGenerator.Web/wwwroot/css/card.min.css @@ -1 +1 @@ -@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');*{box-sizing:border-box}.dd-cards-container{font-family:'Muli',sans-serif;display:flex;align-items:center;justify-content:center;flex-direction:column;height:10rem}.dd-card{background-color:#fff;box-shadow:0 .625rem .625rem rgba(0,0,0,.2);display:flex;max-width:100%;margin:0;overflow:hidden;width:100%}.dd-card h6{opacity:.6;margin:0;letter-spacing:.0625rem}.uppercase{text-transform:uppercase}.dd-card h2{letter-spacing:.0625rem;margin:0}.dd-card-preview{background-color:#2a265f;color:#fff;padding:1.875rem;max-width:15.625rem}.dd-card-preview a{color:#fff;display:inline-block;font-size:.75rem;opacity:.6;margin-top:1.875rem;text-decoration:none}.dd-card-info{padding:1rem 0 0 1.875rem;position:relative;width:100%}.dd-card-info p{opacity:.6;font-size:.75rem;opacity:.6;margin-top:.875rem;text-decoration:none}.progress-container{text-align:right;width:9.375rem}.progress{position:relative;background-color:#ddd;border-radius:.1875rem;height:.3125rem;width:10rem}.progress::after{background-color:#2a265f;content:'';position:absolute;top:0;left:0;height:.3125rem;width:var(--progress-width,1%)}.progress-text{font-size:.625rem;opacity:.6;letter-spacing:.0625rem;text-align:left}.dd-card-btn{background-color:#2a265f;border:0;border-radius:3.125rem;box-shadow:0 .625rem .625rem rgba(0,0,0,.2);color:#fff;font-size:1rem;padding:.75rem 1.5625rem;position:absolute;bottom:1.875rem;right:1.875rem;letter-spacing:.0625rem}.social-panel-container{position:fixed;right:0;bottom:5rem;transform:translateX(100%);transition:transform .4s ease-in-out}.social-panel-container.visible{transform:translateX(-.625rem)}.social-panel{background-color:#fff;border-radius:16px;box-shadow:0 16px 31px -17px rgba(0,31,97,.6);border:5px solid #001f61;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:'Muli';position:relative;height:169px;width:370px;max-width:calc(100% - 10px)}.social-panel button.close-btn{border:0;color:#97a5ce;cursor:pointer;font-size:20px;position:absolute;top:5px;right:5px}.social-panel button.close-btn:focus{outline:0}.social-panel p{background-color:#001f61;border-radius:0 0 10px 10px;color:#fff;font-size:14px;line-height:18px;padding:2px 17px 6px;position:absolute;top:0;left:50%;margin:0;transform:translateX(-50%);text-align:center;width:235px}.social-panel p i{margin:0 5px}.social-panel p a{color:#ff7500;text-decoration:none}.social-panel h4{margin:20px 0;color:#97a5ce;font-family:'Muli';font-size:14px;line-height:18px;text-transform:uppercase}.social-panel ul{display:flex;list-style-type:none;padding:0;margin:0}.social-panel ul li{margin:0 10px}.social-panel ul li a{border:1px solid #dce1f2;border-radius:50%;color:#001f61;font-size:20px;display:flex;justify-content:center;align-items:center;height:50px;width:50px;text-decoration:none}.social-panel ul li a:hover{border-color:#ff6a00;box-shadow:0 9px 12px -9px #ff6a00}.floating-btn{border-radius:26.5px;background-color:#001f61;border:1px solid #001f61;box-shadow:0 16px 22px -17px #03153b;color:#fff;cursor:pointer;font-size:16px;line-height:20px;padding:12px 20px;position:fixed;bottom:20px;right:20px;z-index:999}.floating-btn:hover{background-color:#fff;color:#001f61}.floating-btn:focus{outline:0}.floating-text{background-color:#001f61;border-radius:10px 10px 0 0;color:#fff;font-family:'Muli';padding:7px 15px;position:fixed;bottom:0;left:50%;transform:translateX(-50%);text-align:center;z-index:998}.floating-text a{color:#ff7500;text-decoration:none}@media screen and (max-width:480px){.social-panel-container.visible{transform:translateX(0)}.floating-btn{right:10px}} \ No newline at end of file +@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');*{box-sizing:border-box}.dd-cards-container{font-family:'Muli',sans-serif;display:flex;align-items:center;justify-content:center;flex-direction:column;height:10rem}.dd-card{background-color:#fff;box-shadow:0 .625rem .625rem rgba(0,0,0,.2);display:flex;max-width:100%;margin:0;overflow:hidden;width:100%}.dd-card h6{opacity:.6;margin:0;letter-spacing:.0625rem}.uppercase{text-transform:uppercase}.dd-card h2{letter-spacing:.0625rem;margin:0}.dd-card-preview{background-color:#2a265f;color:#fff;padding:1.875rem;max-width:15.625rem}.dd-card-preview a{color:#fff;display:inline-block;font-size:.75rem;opacity:.6;margin-top:1.875rem;text-decoration:none}.dd-card-info{padding:1rem 0 0 1.875rem;position:relative;width:100%}.dd-card-info p{opacity:.6;font-size:.75rem;opacity:.6;margin-top:.875rem;text-decoration:none}.progress-container{text-align:right;width:9.375rem}.progress{position:relative;background-color:#ddd;border-radius:.1875rem;height:.3125rem;width:10rem}.progress::after{background-color:#2a265f;content:'';position:absolute;top:0;left:0;height:.3125rem;width:var(--progress-width,1%);transition:width 1s ease}.progress-text{font-size:.625rem;opacity:.6;letter-spacing:.0625rem;text-align:left}.dd-card-btn{background-color:#2a265f;border:0;border-radius:3.125rem;box-shadow:0 .625rem .625rem rgba(0,0,0,.2);color:#fff;font-size:1rem;padding:.75rem 1.5625rem;position:absolute;bottom:1.875rem;right:1.875rem;letter-spacing:.0625rem}.social-panel-container{position:fixed;right:0;bottom:5rem;transform:translateX(100%);transition:transform .4s ease-in-out}.social-panel-container.visible{transform:translateX(-.625rem)}.social-panel{background-color:#fff;border-radius:16px;box-shadow:0 16px 31px -17px rgba(0,31,97,.6);border:5px solid #001f61;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:'Muli';position:relative;height:169px;width:370px;max-width:calc(100% - 10px)}.social-panel button.close-btn{border:0;color:#97a5ce;cursor:pointer;font-size:20px;position:absolute;top:5px;right:5px}.social-panel button.close-btn:focus{outline:0}.social-panel p{background-color:#001f61;border-radius:0 0 10px 10px;color:#fff;font-size:14px;line-height:18px;padding:2px 17px 6px;position:absolute;top:0;left:50%;margin:0;transform:translateX(-50%);text-align:center;width:235px}.social-panel p i{margin:0 5px}.social-panel p a{color:#ff7500;text-decoration:none}.social-panel h4{margin:20px 0;color:#97a5ce;font-family:'Muli';font-size:14px;line-height:18px;text-transform:uppercase}.social-panel ul{display:flex;list-style-type:none;padding:0;margin:0}.social-panel ul li{margin:0 10px}.social-panel ul li a{border:1px solid #dce1f2;border-radius:50%;color:#001f61;font-size:20px;display:flex;justify-content:center;align-items:center;height:50px;width:50px;text-decoration:none}.social-panel ul li a:hover{border-color:#ff6a00;box-shadow:0 9px 12px -9px #ff6a00}.floating-btn{border-radius:26.5px;background-color:#001f61;border:1px solid #001f61;box-shadow:0 16px 22px -17px #03153b;color:#fff;cursor:pointer;font-size:16px;line-height:20px;padding:12px 20px;position:fixed;bottom:20px;right:20px;z-index:999}.floating-btn:hover{background-color:#fff;color:#001f61}.floating-btn:focus{outline:0}.floating-text{background-color:#001f61;border-radius:10px 10px 0 0;color:#fff;font-family:'Muli';padding:7px 15px;position:fixed;bottom:0;left:50%;transform:translateX(-50%);text-align:center;z-index:998}.floating-text a{color:#ff7500;text-decoration:none}@media screen and (max-width:480px){.social-panel-container.visible{transform:translateX(0)}.floating-btn{right:10px}} \ No newline at end of file From 6f140f16cd896ff8d403189ee3b2b56224690c9d Mon Sep 17 00:00:00 2001 From: Developer 02 Date: Wed, 25 Sep 2024 15:49:38 +0200 Subject: [PATCH 07/11] fix(footer): Entferne den Ursprung der Datenschutzrichtlinien-URL, um auf den aktuellen Ursprung umzuleiten --- EnvelopeGenerator.Web/Views/Shared/_Layout.cshtml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/EnvelopeGenerator.Web/Views/Shared/_Layout.cshtml b/EnvelopeGenerator.Web/Views/Shared/_Layout.cshtml index 056004ed..e3182ab6 100644 --- a/EnvelopeGenerator.Web/Views/Shared/_Layout.cshtml +++ b/EnvelopeGenerator.Web/Views/Shared/_Layout.cshtml @@ -64,7 +64,7 @@ @Html.AntiForgeryToken() \ No newline at end of file From 8841698aab0e9077d84df970c7f0155c67fc4a3f Mon Sep 17 00:00:00 2001 From: Developer 02 Date: Wed, 25 Sep 2024 15:52:09 +0200 Subject: [PATCH 08/11] chore(web): Version auf 2.0.0.0 aktualisieren und Copyrights schreiben --- EnvelopeGenerator.Web/EnvelopeGenerator.Web.csproj | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/EnvelopeGenerator.Web/EnvelopeGenerator.Web.csproj b/EnvelopeGenerator.Web/EnvelopeGenerator.Web.csproj index 79023085..c59f298f 100644 --- a/EnvelopeGenerator.Web/EnvelopeGenerator.Web.csproj +++ b/EnvelopeGenerator.Web/EnvelopeGenerator.Web.csproj @@ -5,7 +5,7 @@ enable enable EnvelopeGenerator.Web - 2.0.0.0 + 2.1.0.0 Digital Data GmbH Digital Data GmbH EnvelopeGenerator.Web @@ -13,8 +13,9 @@ digital data envelope generator web EnvelopeGenerator.Web is an ASP.NET MVC application developed to manage signing processes. It uses Entity Framework Core (EF Core) for database operations. The user interface for signing processes is developed with Razor View Engine (.cshtml files) and JavaScript under wwwroot, integrated with PSPDFKit. This integration allows users to view and sign documents seamlessly. Assets\icon.ico - 2.0.0.0 - 2.0.0.0 + 2.1.0.0 + 2.1.0.0 + Copyright © 2024 Digital Data GmbH. All rights reserved. From b92d9da3873ac9af1c5977b630783ff7775bbcc0 Mon Sep 17 00:00:00 2001 From: Developer 02 Date: Wed, 25 Sep 2024 16:07:54 +0200 Subject: [PATCH 09/11] refactor(envelope-locked): konvertiere submit-button bootstrap Klasse von btn-outline-primary zu btn-primary --- EnvelopeGenerator.Web/Views/Home/EnvelopeLocked.cshtml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/EnvelopeGenerator.Web/Views/Home/EnvelopeLocked.cshtml b/EnvelopeGenerator.Web/Views/Home/EnvelopeLocked.cshtml index 2d473124..eec2c588 100644 --- a/EnvelopeGenerator.Web/Views/Home/EnvelopeLocked.cshtml +++ b/EnvelopeGenerator.Web/Views/Home/EnvelopeLocked.cshtml @@ -29,7 +29,7 @@
-