diff --git a/src/Controller/ServerUsersController.php b/src/Controller/ServerUsersController.php index 238090123..fc6e95336 100644 --- a/src/Controller/ServerUsersController.php +++ b/src/Controller/ServerUsersController.php @@ -18,7 +18,7 @@ class ServerUsersController extends AppController //$this->Auth->allow(['add', 'edit']); $this->Auth->deny('index'); } - + /** * Index method * @@ -30,7 +30,7 @@ class ServerUsersController extends AppController $this->set(compact('serverUsers')); } - + public function login() { if ($this->request->is('post')) { diff --git a/src/Template/Dashboard/index.ctp b/src/Template/Dashboard/index.ctp index 3958f96e7..60f208f2e 100644 --- a/src/Template/Dashboard/index.ctp +++ b/src/Template/Dashboard/index.ctp @@ -11,79 +11,99 @@ if(isset($user)) { } $this->assign( 'title', - __('Willkommen') . ' ' . $user['first_name'] . ' ' . $user['last_name'] + __('Willkommen') . ', ' . $user['first_name'] . ' ' . $user['last_name'] . '!' ); ?> - ms + ms -
-
-

Gradido ...

+
+

Gradido ...

+
+
+ account_balance_wallet Html->link( - __('übersicht'), + __('Kontoübersicht'), ['controller' => 'StateBalances', 'action' => 'overview'], - ['class' => 'grd-nav-bn grd-nav-bn-large'] + ['class' => 'action-button-link'] );?> +
+
+ account_balance Html->link( - __('überweisen'), + __('Überweisung'), ['controller' => 'TransactionSendCoins', 'action' => 'create'], - ['class' => 'grd-nav-bn grd-nav-bn-large'] + ['class' => 'action-button-link'] ); ?> -
- - -

- - -
-

Gradido ...

+
+ + + + +
+

+ + +

Gradido ...

+
+
+ add_box Html->link( __('einzeln schöpfen'), ['controller' => 'TransactionCreations', 'action' => 'create'], - ['class' => 'grd-nav-bn grd-nav-bn-large'] + ['class' => 'action-button-link'] );?> +
+
+ library_add Html->link( __('viele schöpfen'), ['controller' => 'TransactionCreations', 'action' => 'createMulti'], - ['class' => 'grd-nav-bn grd-nav-bn-large'] + ['class' => 'action-button-link'] );?> - -
- Statistik - Html->link( - __('Anmeldungen'), - ['controller' => 'Users', 'action' => 'statistics'], - ['class' => 'grd-nav-bn grd-nav-bn-large'] - );?> -
- Html->link( - __('Fehler') . ' (' . $adminErrorCount . ')', - ['controller' => 'AdminErrors'], ['class' => 'grd-nav-bn']); - ?> - - -
-

Benutzer ...

-
- Html->link( - __('suchen'), - ['controller' => 'StateUsers', 'action' => 'search'], - ['class' => 'grd-nav-bn grd-nav-bn-large'] - ); ?> - - - -
-
- - - -
-
- - +
+
+
+ Statistik +
+
+ cached + Html->link( + __('Anmeldungen'), + ['controller' => 'Users', 'action' => 'statistics'], + ['class' => 'info-item-link'] + );?> +
+
+ error_outline + Html->link( + __('Fehler') . ' (' . $adminErrorCount . ')', + ['controller' => 'AdminErrors'], ['class' => 'info-item-link']); + ?> +
+
+
+ + +
+

Benutzer ...

+ search + Html->link( + __('suchen'), + ['controller' => 'StateUsers', 'action' => 'search'], + ['class' => 'action-button'] + ); ?> + how_to_reg + + + + enhanced_encryption + + + +
+ diff --git a/src/Template/Layout/frontend_ripple.ctp b/src/Template/Layout/frontend_ripple.ctp index 8b908b577..23d0b5708 100644 --- a/src/Template/Layout/frontend_ripple.ctp +++ b/src/Template/Layout/frontend_ripple.ctp @@ -29,12 +29,7 @@ $GLOBALS["self"] = $this; fetch('title') ?> Html->meta('icon') ?> - Html->css( - [ - 'https://fonts.googleapis.com/icon?family=Material+Icons+Outlined', - 'main.css' - ] - ) ?> + Html->css(['main.css']) ?> Html->script(['basic']) ?> fetch('meta') ?> fetch('css') ?> @@ -42,16 +37,8 @@ $GLOBALS["self"] = $this;
- -
+
- Html->link(__('Startseite'), ['controller' => 'Dashboard']); ?> - fetch('content') ?> +
+ Html->link(__('Startseite'), ['controller' => 'Dashboard']); ?> +
+
+

fetch('title') ?>

+
+
+ fetch('content') ?> +
    diff --git a/webroot/css/grd_styles.css b/webroot/css/grd_styles.css index 591d761b9..a27e738f3 100644 --- a/webroot/css/grd_styles.css +++ b/webroot/css/grd_styles.css @@ -14,7 +14,7 @@ display: grid; grid-template-rows: [top] 8vh [line2] 80vh [footer1] 7vh [footer2] 5vh [end]; grid-template-columns: [left1] 1fr [left2] 1fr [left3] 6fr [right3] 1fr [right2] 1fr [right1]; - grid-template-areas: "header header header header header" "left . center center center" "footer footer footer footer footer" "bottom bottom bottom bottom bottom"; + grid-template-areas: "header header header header header" "left . center . ." "footer footer footer footer footer" "bottom bottom bottom bottom bottom"; margin: 0; padding: 0; } @@ -45,7 +45,12 @@ Copyright : Gradio ============================================================*/ +/* MAIN */ +/* MENU */ +/* CONTENT */ +/* */ /*rgba(0, 0, 0, 0.5) ??? */ +/* https://www.w3schools.com/colors/colors_shades.asp */ /* ============================================================ Typography Definitions @@ -67,6 +72,29 @@ Copyright : Gradio ============================================================*/ +@font-face { + font-family: 'Material Icons Outlined'; + font-style: normal; + font-weight: 400; + src: url(../fonts/MaterialIconsOutlined/Material-Icons-Outline.eot); + /* For IE6-8 */ + src: local('Material Icons Outlined'), local('Material-Icons-Outlined'), url(../fonts/MaterialIconsOutlined/Material-Icons-Outline.woff2) format('woff2'), url(../fonts/MaterialIconsOutlined/Material-Icons-Outline.woff) format('woff'), url(../fonts/MaterialIconsOutlined/Material-Icons-Outline.ttf) format('truetype'); +} +.material-icons-outlined { + font-family: 'Material Icons Outlined'; + font-weight: normal; + font-style: normal; + font-size: 24px; + line-height: 1; + letter-spacing: normal; + text-transform: none; + display: inline-block; + white-space: nowrap; + word-wrap: normal; + direction: ltr; + -webkit-font-feature-settings: 'liga'; + -webkit-font-smoothing: antialiased; +} @media screen { /* ======================= Basis @@ -438,24 +466,55 @@ font-family: Roboto, sans-serif; font-weight: 500; font-size: 1rem; - padding-top: 5em; + padding-top: 6em; } /* content container */ - .grd_container { - max-width: 820px; - margin-left: auto; - margin-right: auto; + .nav-content { + margin: 0 0.25em; + margin-bottom: 1em; } - .grd_container_small { - max-width: 500px; - align-self: center; + .content-container { + background-color: #fff; + color: #212529; + padding: 20px 25px 20px; + margin: 1em 0.25em; + border-radius: 0.5em; + box-shadow: 0 0 10px 0 rgba(183, 192, 206, 0.2); + border: 1px solid rgba(238, 238, 238, 0.75); } - .grd_text { - max-width: 550px; - margin-bottom: 5px; + .info-container { + max-width: 70%; } - .grd_text-max-width { - max-width: 550px; + .main-container { + max-width: 100%; + } + .horizontal-collection { + display: flex; + } + .content-region { + border-bottom: 1px dashed #F5F5F5; + padding: 1em; + } + .info-item i, + .info-item-link, + .action-button i, + .action-button-link { + vertical-align: middle; + } + .action-button { + margin: 0 0.75em; + background: green; + width: 150px; + padding: 1em; + text-align: center; + border-radius: 16px; + color: white; + } + .info-item { + margin: 0 0.75em; + width: 150px; + padding: 1em; + text-align: center; } } @media screen and (max-width:639px) { diff --git a/webroot/fonts/MaterialIconsOutlined/Material-Icons-Outline.eot b/webroot/fonts/MaterialIconsOutlined/Material-Icons-Outline.eot new file mode 100644 index 000000000..3e035411c Binary files /dev/null and b/webroot/fonts/MaterialIconsOutlined/Material-Icons-Outline.eot differ diff --git a/webroot/fonts/MaterialIconsOutlined/Material-Icons-Outline.ttf b/webroot/fonts/MaterialIconsOutlined/Material-Icons-Outline.ttf new file mode 100644 index 000000000..db76e5796 Binary files /dev/null and b/webroot/fonts/MaterialIconsOutlined/Material-Icons-Outline.ttf differ diff --git a/webroot/fonts/MaterialIconsOutlined/Material-Icons-Outline.woff b/webroot/fonts/MaterialIconsOutlined/Material-Icons-Outline.woff new file mode 100644 index 000000000..5f10918f0 Binary files /dev/null and b/webroot/fonts/MaterialIconsOutlined/Material-Icons-Outline.woff differ diff --git a/webroot/fonts/MaterialIconsOutlined/Material-Icons-Outline.woff2 b/webroot/fonts/MaterialIconsOutlined/Material-Icons-Outline.woff2 new file mode 100644 index 000000000..34df5fe02 Binary files /dev/null and b/webroot/fonts/MaterialIconsOutlined/Material-Icons-Outline.woff2 differ diff --git a/webroot/fonts/materialdesignicons-webfont.eot b/webroot/fonts/materialdesignicons-webfont.eot deleted file mode 100644 index fe283ac48..000000000 Binary files a/webroot/fonts/materialdesignicons-webfont.eot and /dev/null differ diff --git a/webroot/fonts/materialdesignicons-webfont.svg b/webroot/fonts/materialdesignicons-webfont.svg deleted file mode 100644 index b356c2977..000000000 --- a/webroot/fonts/materialdesignicons-webfont.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/webroot/fonts/materialdesignicons-webfont.ttf b/webroot/fonts/materialdesignicons-webfont.ttf deleted file mode 100644 index 3219fca04..000000000 Binary files a/webroot/fonts/materialdesignicons-webfont.ttf and /dev/null differ diff --git a/webroot/fonts/materialdesignicons-webfont.woff b/webroot/fonts/materialdesignicons-webfont.woff deleted file mode 100644 index abe1e47ef..000000000 Binary files a/webroot/fonts/materialdesignicons-webfont.woff and /dev/null differ diff --git a/webroot/fonts/materialdesignicons-webfont.woff2 b/webroot/fonts/materialdesignicons-webfont.woff2 deleted file mode 100644 index 47e8a2c3e..000000000 Binary files a/webroot/fonts/materialdesignicons-webfont.woff2 and /dev/null differ diff --git a/webroot/js/basic.js b/webroot/js/basic.js index 0d6acf484..57288ad1e 100644 --- a/webroot/js/basic.js +++ b/webroot/js/basic.js @@ -57,22 +57,9 @@ function getJson(basisUrl, method, successFunction, errorFunction, timeoutFuncti xhr.send(); } - -/* - * var el = document.querySelector('.toggle-me'); - -el.onclick = function() { - el.classList.toggle('active'); -} - */ - // cross browser dom is ready (function(document, window, domIsReady, undefined) { domIsReady(function() { - //console.log('My DOM is ready peeps!'); - //document.querySelector('#page').style.background = 'blue'; - - //var Body = $("body"); var DesktopToggler = document.querySelector('.nav-main-button'); var MobileToggler = document.querySelector('.t-header-mobile-toggler'); var HeaderToggle = document.querySelector('.t-header-toggler'); @@ -82,9 +69,13 @@ el.onclick = function() { DesktopToggler.addEventListener('click', function () { console.log('toggler clicked / Desktop'); - //$(Body).toggleClass("sidebar-minimized"); - document.querySelector('.nav-menu').classList.toggle('nav-menu-minimized'); - document.querySelector('.nav-menu').classList.toggle('nav-menu-maximized'); + if(document.querySelector('.nav-menu').classList.contains('initial')){ + document.querySelector('.nav-menu').classList.remove('initial'); + document.querySelector('.nav-menu').classList.add('nav-menu-minimized'); + } else { + document.querySelector('.nav-menu').classList.toggle('nav-menu-minimized'); + document.querySelector('.nav-menu').classList.toggle('nav-menu-maximized'); + } let big = document.querySelectorAll('.logo.big'); big.forEach(function(el) { el.classList.toggle('visible'); diff --git a/websrc/src/less-files.css b/websrc/src/less-files.css index 591d761b9..a27e738f3 100644 --- a/websrc/src/less-files.css +++ b/websrc/src/less-files.css @@ -14,7 +14,7 @@ display: grid; grid-template-rows: [top] 8vh [line2] 80vh [footer1] 7vh [footer2] 5vh [end]; grid-template-columns: [left1] 1fr [left2] 1fr [left3] 6fr [right3] 1fr [right2] 1fr [right1]; - grid-template-areas: "header header header header header" "left . center center center" "footer footer footer footer footer" "bottom bottom bottom bottom bottom"; + grid-template-areas: "header header header header header" "left . center . ." "footer footer footer footer footer" "bottom bottom bottom bottom bottom"; margin: 0; padding: 0; } @@ -45,7 +45,12 @@ Copyright : Gradio ============================================================*/ +/* MAIN */ +/* MENU */ +/* CONTENT */ +/* */ /*rgba(0, 0, 0, 0.5) ??? */ +/* https://www.w3schools.com/colors/colors_shades.asp */ /* ============================================================ Typography Definitions @@ -67,6 +72,29 @@ Copyright : Gradio ============================================================*/ +@font-face { + font-family: 'Material Icons Outlined'; + font-style: normal; + font-weight: 400; + src: url(../fonts/MaterialIconsOutlined/Material-Icons-Outline.eot); + /* For IE6-8 */ + src: local('Material Icons Outlined'), local('Material-Icons-Outlined'), url(../fonts/MaterialIconsOutlined/Material-Icons-Outline.woff2) format('woff2'), url(../fonts/MaterialIconsOutlined/Material-Icons-Outline.woff) format('woff'), url(../fonts/MaterialIconsOutlined/Material-Icons-Outline.ttf) format('truetype'); +} +.material-icons-outlined { + font-family: 'Material Icons Outlined'; + font-weight: normal; + font-style: normal; + font-size: 24px; + line-height: 1; + letter-spacing: normal; + text-transform: none; + display: inline-block; + white-space: nowrap; + word-wrap: normal; + direction: ltr; + -webkit-font-feature-settings: 'liga'; + -webkit-font-smoothing: antialiased; +} @media screen { /* ======================= Basis @@ -438,24 +466,55 @@ font-family: Roboto, sans-serif; font-weight: 500; font-size: 1rem; - padding-top: 5em; + padding-top: 6em; } /* content container */ - .grd_container { - max-width: 820px; - margin-left: auto; - margin-right: auto; + .nav-content { + margin: 0 0.25em; + margin-bottom: 1em; } - .grd_container_small { - max-width: 500px; - align-self: center; + .content-container { + background-color: #fff; + color: #212529; + padding: 20px 25px 20px; + margin: 1em 0.25em; + border-radius: 0.5em; + box-shadow: 0 0 10px 0 rgba(183, 192, 206, 0.2); + border: 1px solid rgba(238, 238, 238, 0.75); } - .grd_text { - max-width: 550px; - margin-bottom: 5px; + .info-container { + max-width: 70%; } - .grd_text-max-width { - max-width: 550px; + .main-container { + max-width: 100%; + } + .horizontal-collection { + display: flex; + } + .content-region { + border-bottom: 1px dashed #F5F5F5; + padding: 1em; + } + .info-item i, + .info-item-link, + .action-button i, + .action-button-link { + vertical-align: middle; + } + .action-button { + margin: 0 0.75em; + background: green; + width: 150px; + padding: 1em; + text-align: center; + border-radius: 16px; + color: white; + } + .info-item { + margin: 0 0.75em; + width: 150px; + padding: 1em; + text-align: center; } } @media screen and (max-width:639px) { diff --git a/websrc/src/less/01-layout.less b/websrc/src/less/01-layout.less index edd3d6b65..f960e23d6 100644 --- a/websrc/src/less/01-layout.less +++ b/websrc/src/less/01-layout.less @@ -19,7 +19,7 @@ grid-template-rows: [top] 8vh [line2] 80vh [footer1] 7vh [footer2] 5vh [end]; grid-template-columns: [left1] 1fr [left2] 1fr [left3] 6fr [right3] 1fr [right2] 1fr [right1]; grid-template-areas: "header header header header header" - "left . center center center" + "left . center . ." "footer footer footer footer footer" "bottom bottom bottom bottom bottom"; margin: 0; diff --git a/websrc/src/less/02-colors.less b/websrc/src/less/02-colors.less index 3e07cdc10..e3041cd1f 100644 --- a/websrc/src/less/02-colors.less +++ b/websrc/src/less/02-colors.less @@ -9,15 +9,24 @@ ============================================================*/ +/* MAIN */ @main-background: #f9fafb; @main-text: #212529; @main-link-text: #000; +/* MENU */ @menu-background: #fff; @menu-link-text: #4F4F4F; @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); + +/* */ @dialog-background: #fff; /*rgba(0, 0, 0, 0.5) ??? */ @dialog-text: #000; @@ -44,4 +53,7 @@ @success-background-hover: lightgreen; @error: red; @error-border: rgba(255, 0, 0, 0.5); + +/* https://www.w3schools.com/colors/colors_shades.asp */ @unobtrusive: grey; +@verylight: #F5F5F5; diff --git a/websrc/src/less/05-screen.less b/websrc/src/less/05-screen.less index 610baa111..c5e1003da 100644 --- a/websrc/src/less/05-screen.less +++ b/websrc/src/less/05-screen.less @@ -8,6 +8,32 @@ Copyright : Gradio ============================================================*/ +@font-face { + font-family: 'Material Icons Outlined'; + font-style: normal; + font-weight: 400; + src: url(../fonts/MaterialIconsOutlined/Material-Icons-Outline.eot); /* For IE6-8 */ + src: local('Material Icons Outlined'), + local('Material-Icons-Outlined'), + url(../fonts/MaterialIconsOutlined/Material-Icons-Outline.woff2) format('woff2'), + url(../fonts/MaterialIconsOutlined/Material-Icons-Outline.woff) format('woff'), + url(../fonts/MaterialIconsOutlined/Material-Icons-Outline.ttf) format('truetype'); +} +.material-icons-outlined { + font-family: 'Material Icons Outlined'; + font-weight: normal; + font-style: normal; + font-size: 24px; + line-height: 1; + letter-spacing: normal; + text-transform: none; + display: inline-block; + white-space: nowrap; + word-wrap: normal; + direction: ltr; + -webkit-font-feature-settings: 'liga'; + -webkit-font-smoothing: antialiased; +} @media screen { /* ======================= diff --git a/websrc/src/less/10-center.less b/websrc/src/less/10-center.less index 62a06c19d..a4251cf38 100644 --- a/websrc/src/less/10-center.less +++ b/websrc/src/less/10-center.less @@ -21,7 +21,7 @@ font-family: Roboto, sans-serif; font-weight: 500; font-size: 1rem; - padding-top: 5em; + padding-top: 6em; } @media @maxMobile { @@ -32,24 +32,60 @@ } /* content container */ - .grd_container { - max-width: 820px; - margin-left: auto; - margin-right: auto; + .nav-content { + margin: 0 .25em; + margin-bottom: 1em; } - .grd_container_small { - max-width: 500px; - align-self: center; + .content-container { + background-color: @container-background; + color: @container-text; + padding: 20px 25px 20px; + margin: 1em .25em; + border-radius: .5em; + box-shadow: 0 0 10px 0 @container-shadow; + border: 1px solid @container-border; } - .grd_text { - max-width: 550px; - margin-bottom: 5px; + .info-container { + max-width: 70%; } - .grd_text-max-width { - max-width: 550px; + .main-container { + max-width: 100%; + } + + .horizontal-collection { + display: flex; + } + + .content-region { + border-bottom: 1px dashed @verylight; + padding: 1em; + } + + .info-item i, + .info-item-link, + .action-button i, + .action-button-link { + vertical-align: middle; + } + + .action-button { + margin: 0 .75em; + background: green; + width: 150px; + padding: 1em; + text-align: center; + border-radius: 16px; + color: white; + } + + .info-item { + margin: 0 .75em; + width: 150px; + padding: 1em; + text-align: center; } }