From 91592f94374f16829c48175531616a8dc3a8f2dd Mon Sep 17 00:00:00 2001 From: Christine Slotty Date: Wed, 8 Jul 2020 18:19:27 +0200 Subject: [PATCH] WIP Profil / Suche --- src/Controller/ProfileController.php | 44 +++++++++ src/Template/Element/navi.ctp | 12 --- src/Template/Element/user_menu.ctp | 30 +++++-- src/Template/Profile/index.ctp | 72 +++++++++++++++ webroot/css/grd_styles.css | 90 +++++++++++++++++-- websrc/src/less-files.css | 90 +++++++++++++++++-- .../{06_messages.less => 06-messages.less} | 0 websrc/src/less/07-user.less | 36 ++++++-- websrc/src/less/10-center.less | 4 + websrc/src/less/15-facts.less | 62 +++++++++++++ 10 files changed, 396 insertions(+), 44 deletions(-) create mode 100644 src/Controller/ProfileController.php create mode 100644 src/Template/Profile/index.ctp rename websrc/src/less/{06_messages.less => 06-messages.less} (100%) create mode 100644 websrc/src/less/15-facts.less diff --git a/src/Controller/ProfileController.php b/src/Controller/ProfileController.php new file mode 100644 index 000000000..2253b7ca9 --- /dev/null +++ b/src/Controller/ProfileController.php @@ -0,0 +1,44 @@ +Auth->allow(['index']); + $this->set( + 'naviHierarchy', + (new NaviHierarchy())-> + add(new NaviHierarchyEntry(__('Startseite'), 'Dashboard', 'index', false))-> + add(new NaviHierarchyEntry(__('Mein Profil'), 'Profile', 'index', true)) + ); + } + /** + * Index method + * + * @return \Cake\Http\Response|null + */ + public function index() + { + $startTime = microtime(true); + $this->viewBuilder()->setLayout('frontend'); + $session = $this->getRequest()->getSession(); + $result = $this->requestLogin(); + if ($result !== true) { + return $result; + } + $user = $session->read('StateUser'); + + $this->set('user', $user); + $this->set('timeUsed', microtime(true) - $startTime); + } +} diff --git a/src/Template/Element/navi.ctp b/src/Template/Element/navi.ctp index 7fabbbeba..33055197f 100644 --- a/src/Template/Element/navi.ctp +++ b/src/Template/Element/navi.ctp @@ -1,11 +1,9 @@ getRequest()->getSession(); -$transactionPendings = $session->read('Transactions.pending'); $errorCount = intval($session->read('StateUser.errorCount')); $balance = $session->read('StateUser.balance'); //echo "balance: $balance
"; @@ -36,15 +34,5 @@ array_push($navi, new NaviEntry(__('Startseite'), 'home', 'Dashboard', 'index')) array_push($navi, new NaviEntry(__('Überweisung'), 'account_balance', 'TransactionSendCoins', 'create')); array_push($navi, new NaviEntryExternLink(__('Mitgliederbereich'), 'people_alt', 'https://elopage.com/s/gradido/sign_in')); -if(intval($transactionPendings) > 0) { -/* array_push($navi, new NaviEntryAbsoluteLink( - __("Transaktionen unterzeichnen") . ' (' . intval($transactionPendings) . ')', - 'mdi-signature-freehand', 'account/checkTransactions' - ));*/ -} else { - array_push($navi, new NaviEntryAbsoluteLink(__('Abmelden'), 'exit_to_app', 'account/logout')); -} - - ?> diff --git a/src/Template/Element/user_menu.ctp b/src/Template/Element/user_menu.ctp index 07e4c3c84..e453306bb 100644 --- a/src/Template/Element/user_menu.ctp +++ b/src/Template/Element/user_menu.ctp @@ -5,19 +5,39 @@ * and open the template in the editor. */ use Model\Navigation\NaviEntry; +use Model\Navigation\NaviEntryAbsoluteLink; + $session = $this->getRequest()->getSession(); $user = $session->read('StateUser'); +$transactionPendings = $session->read('Transactions.pending'); $this->set('user', $user); $navi = []; -array_push($navi, new NaviEntry(__('Startseite'), 'home', 'Dashboard', 'index')); -array_push($navi, new NaviEntry(__('Startseite'), 'home', 'Dashboard', 'index')); +array_push($navi, new NaviEntry(__('Mein Profil'), 'build', 'Profile', 'index')); +if(intval($transactionPendings) > 0) { +/* array_push($navi, new NaviEntryAbsoluteLink( + __("Transaktionen unterzeichnen") . ' (' . intval($transactionPendings) . ')', + 'mdi-signature-freehand', 'account/checkTransactions' + ));*/ +} else { + array_push($navi, new NaviEntryAbsoluteLink(__('Abmelden'), 'exit_to_app', 'account/logout')); +} ?> -account_circle - + \ No newline at end of file diff --git a/src/Template/Profile/index.ctp b/src/Template/Profile/index.ctp new file mode 100644 index 000000000..d38ef2641 --- /dev/null +++ b/src/Template/Profile/index.ctp @@ -0,0 +1,72 @@ +assign('title', __('Mein Profil')); +$this->assign( + 'header', + '

'.__('Profil') . ' von: ' . $user['first_name'] . ' ' . $user['last_name'] . '

' +); +?> + + ms + +
+

+ + Meine Daten +

+
+
    +
  • + E-Mail Adresse: + +
    • +
  • + Vorname: + +
    • +
  • + Nachname: + +
    • +
+
+

+ + Zustand meines Kontos +

+
+
    +
  • + Konto auf dem Login Server: + ??? +
    • +
  • + ??? : + +
    • +
+
+

+ + Passwort ändern +

+
+ +
+
diff --git a/webroot/css/grd_styles.css b/webroot/css/grd_styles.css index 06d1a6b5e..c0c2a0c01 100644 --- a/webroot/css/grd_styles.css +++ b/webroot/css/grd_styles.css @@ -387,6 +387,7 @@ and open the template in the editor. align-items: center; align-content: center; background-color: #fff; + border: 1px solid #f2f4f5; padding: 0.75em; border-radius: 0 0 0 18px; z-index: 2; @@ -401,20 +402,30 @@ and open the template in the editor. } .user-icon { display: block; + cursor: pointer; } .nav-vertical.user-menu { position: fixed; - top: 0; - right: 33px; + display: none; + top: 25px; + right: 0; background-color: #fff; - margin-top: 1em; - z-index: -1; - font-size: 0.9em; + border-left: 1px solid #f2f4f5; + border-bottom: 1px solid #f2f4f5; border-radius: 0 0 16px 16px; + z-index: -1; + margin-top: 1em; + font-size: 0.9em; + } + .nav-vertical.user-menu.visible { + display: inherit; } .nav-vertical.user-menu > ul { - padding: 1em 2em; + padding: 2em; + padding-top: 0.5em; + padding-bottom: 1em; margin-block-end: 0; + margin-block-start: 0; } .nav-vertical.user-menu li { padding: 0.0125em; @@ -423,6 +434,12 @@ and open the template in the editor. padding: 0; padding-right: 2em; } + .material-icons-outlined.user-info { + color: grey; + } + .material-icons-outlined.user-info.success { + color: #047006; + } } @media screen and (max-width:767px) { .header-user { @@ -439,13 +456,12 @@ and open the template in the editor. margin-top: 55px; } .nav-vertical.user-menu { - top: 0; - right: 3px; + top: 1px; margin-top: 0; } .nav-vertical.user-menu > ul { padding: 1em 1em; - padding-top: 2em; + padding-top: 3em; } } /* ============================================================ @@ -1099,6 +1115,9 @@ and open the template in the editor. } } @media screen and (max-width:767px) { + .content-region { + padding-left: 5px; + } .content-collection { flex-direction: column; align-items: center; @@ -1111,6 +1130,59 @@ and open the template in the editor. } } /* Ende @media screen */ +/* +To change this license header, choose License Headers in Project Properties. +To change this template file, choose Tools | Templates +and open the template in the editor. +*/ +/* ============================================================ + + Screen styles for plain facts. + + Datei : facts.css + Datum : 08.07.2020 + Autor : Christine Slotty + Copyright : Gradio + + ============================================================*/ +@media screen { + .fact-list { + display: flex; + flex-direction: column; + list-style-type: none; + width: 100%; + padding-inline-start: 0; + font-weight: 300; + } + .fact { + display: inline-block; + padding-left: 1em; + } + .label { + width: 150px; + text-align: right; + font-weight: bold; + } +} +@media screen and (max-width:767px) { + .fact-list { + margin-block-start: 0; + margin-block-end: 0; + } + li.fact { + display: flex; + flex-direction: column; + } + .fact { + padding-left: 0.5em; + } + .label { + width: 250px; + text-align: left; + font-size: 0.9em; + font-weight: normal; + } +} /* ============================================================ Screen styles for lists. diff --git a/websrc/src/less-files.css b/websrc/src/less-files.css index 06d1a6b5e..c0c2a0c01 100644 --- a/websrc/src/less-files.css +++ b/websrc/src/less-files.css @@ -387,6 +387,7 @@ and open the template in the editor. align-items: center; align-content: center; background-color: #fff; + border: 1px solid #f2f4f5; padding: 0.75em; border-radius: 0 0 0 18px; z-index: 2; @@ -401,20 +402,30 @@ and open the template in the editor. } .user-icon { display: block; + cursor: pointer; } .nav-vertical.user-menu { position: fixed; - top: 0; - right: 33px; + display: none; + top: 25px; + right: 0; background-color: #fff; - margin-top: 1em; - z-index: -1; - font-size: 0.9em; + border-left: 1px solid #f2f4f5; + border-bottom: 1px solid #f2f4f5; border-radius: 0 0 16px 16px; + z-index: -1; + margin-top: 1em; + font-size: 0.9em; + } + .nav-vertical.user-menu.visible { + display: inherit; } .nav-vertical.user-menu > ul { - padding: 1em 2em; + padding: 2em; + padding-top: 0.5em; + padding-bottom: 1em; margin-block-end: 0; + margin-block-start: 0; } .nav-vertical.user-menu li { padding: 0.0125em; @@ -423,6 +434,12 @@ and open the template in the editor. padding: 0; padding-right: 2em; } + .material-icons-outlined.user-info { + color: grey; + } + .material-icons-outlined.user-info.success { + color: #047006; + } } @media screen and (max-width:767px) { .header-user { @@ -439,13 +456,12 @@ and open the template in the editor. margin-top: 55px; } .nav-vertical.user-menu { - top: 0; - right: 3px; + top: 1px; margin-top: 0; } .nav-vertical.user-menu > ul { padding: 1em 1em; - padding-top: 2em; + padding-top: 3em; } } /* ============================================================ @@ -1099,6 +1115,9 @@ and open the template in the editor. } } @media screen and (max-width:767px) { + .content-region { + padding-left: 5px; + } .content-collection { flex-direction: column; align-items: center; @@ -1111,6 +1130,59 @@ and open the template in the editor. } } /* Ende @media screen */ +/* +To change this license header, choose License Headers in Project Properties. +To change this template file, choose Tools | Templates +and open the template in the editor. +*/ +/* ============================================================ + + Screen styles for plain facts. + + Datei : facts.css + Datum : 08.07.2020 + Autor : Christine Slotty + Copyright : Gradio + + ============================================================*/ +@media screen { + .fact-list { + display: flex; + flex-direction: column; + list-style-type: none; + width: 100%; + padding-inline-start: 0; + font-weight: 300; + } + .fact { + display: inline-block; + padding-left: 1em; + } + .label { + width: 150px; + text-align: right; + font-weight: bold; + } +} +@media screen and (max-width:767px) { + .fact-list { + margin-block-start: 0; + margin-block-end: 0; + } + li.fact { + display: flex; + flex-direction: column; + } + .fact { + padding-left: 0.5em; + } + .label { + width: 250px; + text-align: left; + font-size: 0.9em; + font-weight: normal; + } +} /* ============================================================ Screen styles for lists. diff --git a/websrc/src/less/06_messages.less b/websrc/src/less/06-messages.less similarity index 100% rename from websrc/src/less/06_messages.less rename to websrc/src/less/06-messages.less diff --git a/websrc/src/less/07-user.less b/websrc/src/less/07-user.less index 887a94458..a7eb54b3c 100644 --- a/websrc/src/less/07-user.less +++ b/websrc/src/less/07-user.less @@ -15,6 +15,7 @@ align-items: center; align-content: center; background-color: @container-background; + border: 1px solid @menu-border-color; padding: .75em; border-radius: 0 0 0 18px; z-index: 2; @@ -31,22 +32,33 @@ .user-icon { display: block; + cursor: pointer; } .nav-vertical.user-menu { position: fixed; - top: 0; - right: 33px; + display: none; + top: 25px; + right: 0; background-color: @container-background; - margin-top: 1em; - z-index: -1; - font-size: .9em; + border-left: 1px solid @menu-border-color; + border-bottom: 1px solid @menu-border-color; border-radius: 0 0 16px 16px; + z-index: -1; + margin-top: 1em; + font-size: .9em; + } + + .nav-vertical.user-menu.visible { + display: inherit; } .nav-vertical.user-menu > ul { - padding: 1em 2em; + padding: 2em; + padding-top: .5em; + padding-bottom: 1em; margin-block-end: 0; + margin-block-start: 0; } .nav-vertical.user-menu li { @@ -58,6 +70,13 @@ padding-right: 2em; } + .material-icons-outlined.user-info { + color: @unobtrusive; + } + .material-icons-outlined.user-info.success { + color: @success; + } + @media @tablet-down { .header-user { align-items: flex-start; @@ -76,14 +95,13 @@ } .nav-vertical.user-menu { - top: 0; - right: 3px; + top: 1px; margin-top: 0; } .nav-vertical.user-menu > ul { padding: 1em 1em; - padding-top: 2em; + padding-top: 3em; } } diff --git a/websrc/src/less/10-center.less b/websrc/src/less/10-center.less index 962d6675b..d2f0e1146 100644 --- a/websrc/src/less/10-center.less +++ b/websrc/src/less/10-center.less @@ -173,6 +173,10 @@ } @media @tablet-down { + .content-region { + padding-left: 5px; + } + .content-collection { flex-direction: column; align-items: center; diff --git a/websrc/src/less/15-facts.less b/websrc/src/less/15-facts.less new file mode 100644 index 000000000..3bac37ff7 --- /dev/null +++ b/websrc/src/less/15-facts.less @@ -0,0 +1,62 @@ +/* +To change this license header, choose License Headers in Project Properties. +To change this template file, choose Tools | Templates +and open the template in the editor. +*/ + +/* ============================================================ + + Screen styles for plain facts. + + Datei : facts.css + Datum : 08.07.2020 + Autor : Christine Slotty + Copyright : Gradio + + ============================================================*/ +@media screen { + .fact-list { + display: flex; + flex-direction: column; + list-style-type: none; + width: 100%; + padding-inline-start: 0; + font-weight: 300; + } + + .fact { + display: inline-block; + padding-left: 1em; + } + + .label { + width: 150px; + text-align: right; + font-weight: bold; + } + + @media @tablet-down { + .fact-list { + margin-block-start: 0; + margin-block-end: 0; + } + + li.fact { + display: flex; + flex-direction: column; + } + + .fact { + padding-left: .5em; + } + + .label { + width: 250px; + text-align: left; + font-size: .9em; + font-weight: normal; + } + + } + +}