From 733ac5cbcc85529522a1541cb9fb15d7cc24faa4 Mon Sep 17 00:00:00 2001 From: Christine Slotty Date: Thu, 11 Jun 2020 15:47:59 +0200 Subject: [PATCH] =?UTF-8?q?TX=20best=C3=A4tigen=20/=20extra=20HTML;=20CSS?= =?UTF-8?q?=20WIP?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Template/Element/Flash/error.ctp | 2 +- src/Template/Element/navi.ctp | 6 +- src/Template/Element/navi_notify.ctp | 18 +-- src/Template/Layout/frontend.ctp | 2 +- src/Template/StateBalances/overview.ctp | 8 +- src/Template/Transactions/decode.ctp | 2 +- webroot/css/grd_styles.css | 179 +++++++++++---------- webroot/transaktion-bestaetigen-login.html | 129 +++++++++++++++ websrc/src/less-files.css | 179 +++++++++++---------- websrc/src/less/02-colors.less | 41 +++-- websrc/src/less/05-screen.less | 13 +- websrc/src/less/09-notification.less | 107 +++++------- websrc/src/less/20-list.less | 42 +++++ websrc/src/less/30-form.less | 10 ++ 14 files changed, 463 insertions(+), 275 deletions(-) create mode 100644 webroot/transaktion-bestaetigen-login.html diff --git a/src/Template/Element/Flash/error.ctp b/src/Template/Element/Flash/error.ctp index b086fe41b..1e95323d6 100644 --- a/src/Template/Element/Flash/error.ctp +++ b/src/Template/Element/Flash/error.ctp @@ -5,5 +5,5 @@ if (!isset($params['escape']) || $params['escape'] !== false) { ?> \ No newline at end of file diff --git a/src/Template/Element/navi.ctp b/src/Template/Element/navi.ctp index 7a22e8dce..7fabbbeba 100644 --- a/src/Template/Element/navi.ctp +++ b/src/Template/Element/navi.ctp @@ -17,7 +17,7 @@ $navi = []; /*if($errorCount > 0) { $errorNaviEntry = new NaviEntry(__('Fehler '). "($errorCount)", 'mdi-alert-outline', 'StateErrors', 'showForUser'); $errorNaviEntry->setBGColor('bg-inverse-danger') - ->setIconColor('grd-alert-color'); + ->setIconColor('alert-color'); array_push($navi, $errorNaviEntry); }*/ $balanceNaviEntry = new NaviEntry( @@ -27,9 +27,9 @@ $balanceNaviEntry = new NaviEntry( 'account_balance_wallet', 'StateBalances', 'overview' ); if($balance < 0 ) { - //$balanceNaviEntry->setIconColor('grd-alert-color'); + //$balanceNaviEntry->setIconColor('alert-color'); } else if($balance > 0) { - //$balanceNaviEntry->setIconColor('grd-success-color'); + //$balanceNaviEntry->setIconColor('success-color'); } array_push($navi, $balanceNaviEntry); array_push($navi, new NaviEntry(__('Startseite'), 'home', 'Dashboard', 'index')); diff --git a/src/Template/Element/navi_notify.ctp b/src/Template/Element/navi_notify.ctp index 8d24f4253..35687687d 100644 --- a/src/Template/Element/navi_notify.ctp +++ b/src/Template/Element/navi_notify.ctp @@ -23,21 +23,19 @@ class NavHeaderEntry } */ ?> - 0) : ?> - Html->link( - 'announcement' - . 'ss', - ['controller' => 'StateErrors', 'action' => 'ShowForUser'], - ['class' => 'nav-link', 'escape' => false, 'title' => "$errorCount " . __('Fehler')]) ?> - 0) : ?> - " href="account/checkTransactions"> - verified_user + " href="account/checkTransactions"> + verified_user - ss + 0) : ?> + Html->link( + 'announcement', + ['controller' => 'StateErrors', 'action' => 'ShowForUser'], + ['class' => 'notify-link', 'escape' => false, 'title' => "$errorCount " . __('Fehler')]) ?> + diff --git a/src/Template/Layout/frontend.ctp b/src/Template/Layout/frontend.ctp index 0c4886399..53cc71816 100644 --- a/src/Template/Layout/frontend.ctp +++ b/src/Template/Layout/frontend.ctp @@ -37,11 +37,11 @@ $GLOBALS["self"] = $this;
-
element('navi_notify'); ?>
+
@@ -62,7 +62,7 @@ $this->assign('header', $header); - redeem + redeem arrow_right_alt diff --git a/src/Template/Transactions/decode.ctp b/src/Template/Transactions/decode.ctp index b9f840d2b..dddde1cb8 100644 --- a/src/Template/Transactions/decode.ctp +++ b/src/Template/Transactions/decode.ctp @@ -8,7 +8,7 @@ ?> 0) : ?> -
+
+ + + \ No newline at end of file diff --git a/websrc/src/less-files.css b/websrc/src/less-files.css index 46e20ee26..54cd4ffc0 100644 --- a/websrc/src/less-files.css +++ b/websrc/src/less-files.css @@ -48,7 +48,9 @@ } /* ============================================================ - Color Definitions + Generic Color Definitions + + Vars and some generic CSS rules. Datei : colors.less Datum : 2020-05-26 @@ -66,7 +68,17 @@ /* VARIOUS INDIVIDUAL */ /* XXX TODO XXX */ /*rgba(0, 0, 0, 0.5) ??? */ +/* NOTIFICATION */ /* https://www.w3schools.com/colors/colors_shades.asp */ +.alert-color { + color: #ff5f66; +} +.success-color { + color: #047006; +} +.orange-color { + color: #ffa600; +} /* ============================================================ Typography Definitions @@ -103,6 +115,7 @@ line-height: 1; letter-spacing: normal; text-transform: none; + vertical-align: middle; display: inline-block; white-space: nowrap; word-wrap: normal; @@ -213,15 +226,6 @@ .gdt-text-color { color: #a27824; } - .grd-alert-color { - color: #ff5f66; - } - .grd-success-color { - color: #047006; - } - .grd-orange-color { - color: #ffa600; - } .grd_clickable { cursor: pointer; } @@ -485,95 +489,65 @@ ============================================================*/ @media screen { .header-notify { - position: relative; display: flex; flex-wrap: wrap; padding-left: 0; margin-bottom: 0; list-style: none; } - .nav-link { + .notify { display: block; - padding: 0.5rem 1rem; + padding: 0.5rem 0.3rem; color: #525c5d; + animation: blinkingNotifySymbol 1.2s infinite; } - .notification-indicator { - display: block; - width: 7px; - height: 7px; - position: absolute; - top: 12px; - right: 12px; - border-radius: 100%; - z-index: 99000; + .notify-alert { + color: #ff5f66; + animation: blinkingAlertSymbol 1.2s infinite; } - .notification-indicator:before { - content: ""; - display: block; - width: 26px; - height: 26px; - z-index: 99000; - border-radius: 100%; - opacity: 0; - -webkit-transform-origin: 50% 50%; - transform-origin: 50% 50%; - mix-blend-mode: screen; - -webkit-animation: blink 1.2s ease-out; - animation: blink 1.2s ease-out; - -webkit-animation-iteration-count: infinite; - animation-iteration-count: infinite; - } - @-webkit-keyframes blink { - 0%, - 35% { - -webkit-transform: scale(0); - transform: scale(0); - opacity: 1; + @keyframes blinkingNotifySymbol { + 0% { + color: #525c5d; } - 50% { - -webkit-transform: scale(0.6); - transform: scale(0.6); - opacity: 0.8; + 49% { + color: #525c5d; + } + 60% { + color: #525c5d82; + } + 99% { + color: #525c5d82; } 100% { - opacity: 0; - -webkit-transform: scale(1.2); - transform: scale(1.2); + color: #525c5d; } } - @keyframes blink { - 0%, - 35% { - -webkit-transform: scale(0); - transform: scale(0); - opacity: 1; + @keyframes blinkingAlertSymbol { + 0% { + color: #ff5f66; } - 50% { - -webkit-transform: scale(0.6); - transform: scale(0.6); - opacity: 0.8; + 49% { + color: #ff5f66; + } + 60% { + color: #ff5f669e; + } + 99% { + color: #ff5f669e; } 100% { - opacity: 0; - -webkit-transform: scale(1.2); - transform: scale(1.2); + color: #ff5f66; } } - .notification-indicator-primary { - background: #047006; - } - .notification-indicator-primary:before { - content: ""; - background: rgba(4, 112, 6, 0.5); - } - .notification-indicator-warning { - background: #f0825f; - } - .notification-indicator-warning:before { - content: ""; - background: rgba(240, 130, 95, 0.5); - } - /* .notification-indicator-secondary { + /* + .notification-indicator-primary { + background: #047006; + } + + .notification-indicator-warning { + background: #f0825f + } + .notification-indicator-secondary { background: grey } @@ -852,6 +826,41 @@ font-size: 80%; font-weight: 400; } + /* ===================================== + FORM TOP CONTENT (checkTransaction) + =====================================*/ + .form-content { + padding: 35px; + padding-top: 20px; + max-width: 80%; + margin: auto; + } + .content-table { + border: 1px solid #f2f4f9; + border-top: none; + margin-bottom: 1.5rem; + } + .content-row { + display: flex; + justify-content: space-between; + font-weight: 400; + border-top: 1px solid #f2f4f9; + } + .content-row-header { + font-weight: 500; + color: #101010; + } + .content-row-bg { + background-color: #f0f2f5; + } + .content-cell { + display: block; + border-collapse: collapse; + padding: 10px 15px; + } + .form-button .material-icons-outlined { + font-size: 1.25em; + } } /* To change this license header, choose License Headers in Project Properties. @@ -961,6 +970,14 @@ and open the template in the editor. background-color: #034b04; border-color: #023f03; } + .button-cancel { + background-color: #f0825f; + border-color: #f0825f; + } + .button-cancel:hover { + background-color: #ec5e30; + border-color: #eb5425; + } /* CENTER FORM SPECIFICS */ .form-body form { display: grid; @@ -1186,13 +1203,13 @@ and open the template in the editor. } .grd-success { padding: 5px; - color: green; + color: #047006; } .flash-messages .message { padding: 5px; } .flash-messages .success { - color: green; + color: #047006; } .flash-messages .error { color: red; diff --git a/websrc/src/less/02-colors.less b/websrc/src/less/02-colors.less index 712b1673c..3e2df7614 100644 --- a/websrc/src/less/02-colors.less +++ b/websrc/src/less/02-colors.less @@ -1,6 +1,8 @@ /* ============================================================ - Color Definitions + Generic Color Definitions + + Vars and some generic CSS rules. Datei : colors.less Datum : 2020-05-26 @@ -20,11 +22,12 @@ @menu-link-selected: #047006; @menu-border-color: #f2f4f5; + /* CONTENT */ @container-background: #fff; @container-text: #212529; -@container-shadow: rgba(183,192,206,.2); -@container-border: rgba(238,238,238,.75); +@container-shadow: rgba(183, 192, 206, .2); +@container-border: rgba(238, 238, 238, .75); /* CONTENT-NAV */ @content-nav: #565656; @@ -41,6 +44,7 @@ @content-table-header: #101010; @content-table-header-bg: #fafafa; @content-table-header-border: #f2f4f9; +@content-row-bg: #f0f2f5; /* FORMS */ @form-label: #212529; @@ -50,40 +54,53 @@ @badge-background-error: #ff5f66; /* VARIOUS INDIVIDUAL */ -@grd-orange: #ffa600; +@orange: #ffa600; /* XXX TODO XXX */ @dialog-background: #fff; + /*rgba(0, 0, 0, 0.5) ??? */ @dialog-text: #000; @dialog-background-extra: rgba(0, 0, 0, 0.1); @dialog-border: grey; - -@form-text-background: rgba(0,0,0,0.05); +@form-text-background: rgba(0, 0, 0, 0.05); @form-button-border: grey; @form-button-text: #444; - @button-text: #000; @button-border-color: #000; @button-background-active: lightgray; - @print-background: #111; @print-text: #000; @print-link-text: #06c; - @gdt-text: #a27824; + +/* NOTIFICATION */ @info-border: gray; @success: green; @success-background: lightcyan; @success-background-hover: lightgreen; @error: red; @error-border: rgba(255, 0, 0, 0.5); - -@grd-alert: #ff5f66; -@grd-success: #047006; +@success: #047006; +@alert: #ff5f66; +@alert-blink: #ff5f669e; +@notify: #525c5d; +@notify-blink: #525c5d82; /* https://www.w3schools.com/colors/colors_shades.asp */ @unobtrusive: grey; @light: #F5F5F5; @verylight: #fbfbfb; + +.alert-color { + color: @alert; +} + +.success-color { + color: @success; +} + +.orange-color { + color: @orange +} diff --git a/websrc/src/less/05-screen.less b/websrc/src/less/05-screen.less index 2ad0dbcf6..b66af0e62 100644 --- a/websrc/src/less/05-screen.less +++ b/websrc/src/less/05-screen.less @@ -24,6 +24,7 @@ line-height: 1; letter-spacing: normal; text-transform: none; + vertical-align: middle; display: inline-block; white-space: nowrap; word-wrap: normal; @@ -153,18 +154,6 @@ color: @gdt-text; } - .grd-alert-color { - color: @grd-alert; - } - - .grd-success-color { - color: @grd-success; - } - - .grd-orange-color { - color: @grd-orange - } - .grd_clickable { cursor: pointer; } diff --git a/websrc/src/less/09-notification.less b/websrc/src/less/09-notification.less index 5a9a55671..173ac5ad9 100644 --- a/websrc/src/less/09-notification.less +++ b/websrc/src/less/09-notification.less @@ -10,7 +10,6 @@ ============================================================*/ @media screen { .header-notify { - position: relative; display: flex; flex-wrap: wrap; padding-left: 0; @@ -18,103 +17,73 @@ list-style: none; } - .nav-link { + .notify { display: block; - padding: .5rem 1rem; - color: #525c5d; + padding: .5rem .3rem; + color: @notify; + animation: blinkingNotifySymbol 1.2s infinite; } - .notification-indicator { - display: block; - width: 7px; - height: 7px; - position: absolute; - top: 12px; - right: 12px; - border-radius: 100%; - z-index: 99000; + .notify-alert { + color: @alert; + animation: blinkingAlertSymbol 1.2s infinite; } - .notification-indicator:before { - content: ""; - display: block; - width: 26px; - height: 26px; - z-index: 99000; - border-radius: 100%; - opacity: 0; - -webkit-transform-origin: 50% 50%; - transform-origin: 50% 50%; - mix-blend-mode: screen; - -webkit-animation: blink 1.2s ease-out; - animation: blink 1.2s ease-out; - -webkit-animation-iteration-count: infinite; - animation-iteration-count: infinite - } - - @-webkit-keyframes blink { - 0%, - 35% { - -webkit-transform: scale(0); - transform: scale(0); - opacity: 1 + @keyframes blinkingNotifySymbol { + 0% { + color: @notify; } - 50% { - -webkit-transform: scale(.6); - transform: scale(.6); - opacity: .8 + 49% { + color: @notify; + } + + 60% { + color: @notify-blink; + } + + 99% { + color: @notify-blink; } 100% { - opacity: 0; - -webkit-transform: scale(1.2); - transform: scale(1.2) + color: @notify; } } - @keyframes blink { - 0%, - 35% { - -webkit-transform: scale(0); - transform: scale(0); - opacity: 1 + @keyframes blinkingAlertSymbol { + 0% { + color: @alert; } - 50% { - -webkit-transform: scale(.6); - transform: scale(.6); - opacity: .8 + 49% { + color: @alert; + } + + 60% { + color: @alert-blink; + } + + 99% { + color: @alert-blink; } 100% { - opacity: 0; - -webkit-transform: scale(1.2); - transform: scale(1.2) + color: @alert; } } + /* .notification-indicator-primary { - background: #047006 - } - - .notification-indicator-primary:before { - content: ""; - background: rgba(4, 112, 6, .5) + background: #047006; } .notification-indicator-warning { background: #f0825f } - - .notification-indicator-warning:before { - content: ""; - background: rgba(240, 130, 95, .5) - } - - /* .notification-indicator-secondary { + .notification-indicator-secondary { background: grey } diff --git a/websrc/src/less/20-list.less b/websrc/src/less/20-list.less index e618cf7b9..ce177427a 100644 --- a/websrc/src/less/20-list.less +++ b/websrc/src/less/20-list.less @@ -130,4 +130,46 @@ font-weight: 400; } + /* ===================================== + FORM TOP CONTENT (checkTransaction) + =====================================*/ + .form-content { + padding: 35px; + padding-top: 20px; + max-width: 80%; + margin: auto; + } + + .content-table { + border: 1px solid @content-table-header-border; + border-top: none; + margin-bottom: 1.5rem; + } + + .content-row { + display: flex; + justify-content: space-between; + font-weight: 400; + border-top: 1px solid @content-table-header-border; + } + + .content-row-header { + font-weight: 500; + color: @content-table-header; + } + + .content-row-bg { + background-color: @content-row-bg; + } + + .content-cell { + display: block; + border-collapse: collapse; + padding: 10px 15px; + } + + .form-button .material-icons-outlined { + font-size: 1.25em; + } + } diff --git a/websrc/src/less/30-form.less b/websrc/src/less/30-form.less index 6ff53c761..85b7ce766 100644 --- a/websrc/src/less/30-form.less +++ b/websrc/src/less/30-form.less @@ -121,6 +121,16 @@ and open the template in the editor. border-color: #023f03; } + .button-cancel { + background-color: #f0825f; + border-color: #f0825f; + } + + .button-cancel:hover { + background-color: #ec5e30; + border-color: #eb5425; + } + /* CENTER FORM SPECIFICS */ .form-body form { display: grid;