From f46f8ffeb0cd6c41db0247c92521d3cac0acb73f Mon Sep 17 00:00:00 2001
From: Rosanny <rosanny.sihombing@hft-stuttgart.de>
Date: Thu, 14 May 2020 14:28:26 +0200
Subject: [PATCH] MLAB-206: Account page responsive design
---
views/DE/account/home.pug | 56 ++++++++++-------------
views/DE/account/profile.pug | 56 ++++++++++-------------
views/DE/account/security.pug | 86 +++++++++++++++++------------------
views/DE/account/services.pug | 58 +++++++++++------------
4 files changed, 118 insertions(+), 138 deletions(-)
diff --git a/views/DE/account/home.pug b/views/DE/account/home.pug
index de3ed363..fa11d3f7 100644
--- a/views/DE/account/home.pug
+++ b/views/DE/account/home.pug
@@ -6,39 +6,33 @@ html(lang="de")
meta(name="viewport", content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no")
link(rel="stylesheet", type="text/css", href="https://transfer.hft-stuttgart.de/css/bootstrap/bootstrap.css")
link(rel="stylesheet", href="https://use.fontawesome.com/releases/v5.8.2/css/all.css", integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay", crossorigin="anonymous")
- style.
- .collapse {
- display: none;
- }
- .collapse.in {
- display: block;
- }
- .collapsing {
- position: relative;
- height: 0;
- overflow: hidden;
- -webkit-transition-timing-function: ease;
- -o-transition-timing-function: ease;
- transition-timing-function: ease;
- -webkit-transition-duration: .35s;
- -o-transition-duration: .35s;
- transition-duration: .35s;
- -webkit-transition-property: height,visibility;
- -o-transition-property: height,visibility;
- transition-property: height,visibility;
- }
body
div(class="container-fluid")
- div(class="row")
- div(class="col-3")
- h5
- span #{user.firstname} #{user.lastname}
- div(class="nav flex-column nav-pills", id="v-pills-tab", role="tablist", aria-orientation="vertical")
- a(class="nav-link" href="/account/profile" aria-selected="true") Benutzerprofil
- a(class="nav-link" href="/account/security" aria-selected="false") Sicherheitseinstellungen
- a(class="nav-link" href="/account/services" aria-selected="false") Projekte und Dienste
- a(class="nav-link" href="/logout" aria-selected="false") Logout
- div(class="col-sm-9")
+ div(class="row min-vh-100 flex-column flex-md-row")
+ aside(class="col-12 col-md-2 p-0 flex-shrink-1")
+ nav(class="navbar navbar-expand flex-md-column flex-row align-items-start py-2")
+ div(class="collapse navbar-collapse")
+ ul(class="flex-md-column flex-row navbar-nav w-100 justify-content-between")
+ li(class="nav-item")
+ a(class="nav-link pl-0 text-nowrap" href="#")
+ span(class="font-weight-bold" style="color:black;") #{user.firstname} #{user.lastname}
+ li(class="nav-item")
+ a(class="nav-link pl-0" href="/account/profile")
+ i(class="fa fa-user fa-fw")
+ span(class="d-none d-md-inline") Benutzerprofil
+ li(class="nav-item")
+ a(class="nav-link pl-0" href="/account/security")
+ i(class="fa fa-lock fa-fw")
+ span(class="d-none d-md-inline") Sicherheitseinstellungen
+ li(class="nav-item")
+ a(class="nav-link pl-0" href="/account/services")
+ i(class="fa fa-tasks fa-fw")
+ span(class="d-none d-md-inline") Projekte und Dienste
+ li(class="nav-item")
+ a(class="nav-link pl-0" href="/logout")
+ i(class="fa fa-sign-out-alt fa-fw")
+ span(class="d-none d-md-inline") Logout
+ main(class="col bg-faded py-3 flex-grow-1")
p Willkommen im Benutzerkonto-Bereich des HFT Transferportals
p In diesem Bereich können Sie Ihr Benutzerkonto pflegen.<br/> Dazu finden Sie auf der linken Seite verschiedene Menüs.
p Bei Rückfragen kontaktieren Sie uns bitte unter: <a href="mailto:support-transfer@hft-stuttgart.de">support-transfer@hft-stuttgart.de</a>
diff --git a/views/DE/account/profile.pug b/views/DE/account/profile.pug
index e30882ef..12f78989 100644
--- a/views/DE/account/profile.pug
+++ b/views/DE/account/profile.pug
@@ -6,39 +6,33 @@ html(lang="de")
meta(name="viewport", content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no")
link(rel="stylesheet", type="text/css", href="https://transfer.hft-stuttgart.de/css/bootstrap/bootstrap.css")
link(rel="stylesheet", href="https://use.fontawesome.com/releases/v5.8.2/css/all.css", integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay", crossorigin="anonymous")
- style.
- .collapse {
- display: none;
- }
- .collapse.in {
- display: block;
- }
- .collapsing {
- position: relative;
- height: 0;
- overflow: hidden;
- -webkit-transition-timing-function: ease;
- -o-transition-timing-function: ease;
- transition-timing-function: ease;
- -webkit-transition-duration: .35s;
- -o-transition-duration: .35s;
- transition-duration: .35s;
- -webkit-transition-property: height,visibility;
- -o-transition-property: height,visibility;
- transition-property: height,visibility;
- }
body
div(class="container-fluid")
- div(class="row")
- div(class="col-3")
- h5
- span #{user.firstname} #{user.lastname}
- div(class="nav flex-column nav-pills", id="v-pills-tab", role="tablist", aria-orientation="vertical")
- a(class="nav-link" href="#" aria-selected="true") Benutzerprofil
- a(class="nav-link" href="/account/security" aria-selected="false") Sicherheitseinstellungen
- a(class="nav-link" href="/account/services" aria-selected="false") Projekte und Dienste
- a(class="nav-link" href="/logout" aria-selected="false") Logout
- div(class="col-sm-9")
+ div(class="row min-vh-100 flex-column flex-md-row")
+ aside(class="col-12 col-md-2 p-0 flex-shrink-1")
+ nav(class="navbar navbar-expand flex-md-column flex-row align-items-start py-2")
+ div(class="collapse navbar-collapse")
+ ul(class="flex-md-column flex-row navbar-nav w-100 justify-content-between")
+ li(class="nav-item")
+ a(class="nav-link pl-0 text-nowrap" href="#")
+ span(class="font-weight-bold" style="color:black;") #{user.firstname} #{user.lastname}
+ li(class="nav-item")
+ a(class="nav-link pl-0" href="/account/profile")
+ i(class="fa fa-user fa-fw" style="color:black;")
+ span(class="d-none d-md-inline" style="color:black;") Benutzerprofil
+ li(class="nav-item")
+ a(class="nav-link pl-0" href="/account/security")
+ i(class="fa fa-lock fa-fw")
+ span(class="d-none d-md-inline") Sicherheitseinstellungen
+ li(class="nav-item")
+ a(class="nav-link pl-0" href="/account/services")
+ i(class="fa fa-tasks fa-fw")
+ span(class="d-none d-md-inline") Projekte und Dienste
+ li(class="nav-item")
+ a(class="nav-link pl-0" href="/logout")
+ i(class="fa fa-sign-out-alt fa-fw")
+ span(class="d-none d-md-inline") Logout
+ main(class="col bg-faded py-3 flex-grow-1")
if successes
for success in successes
div.alert.alert-success.alert-dismissible #{ success }
diff --git a/views/DE/account/security.pug b/views/DE/account/security.pug
index 6a6d1ac6..15c43887 100644
--- a/views/DE/account/security.pug
+++ b/views/DE/account/security.pug
@@ -7,41 +7,36 @@ html(lang="de")
link(rel="stylesheet", type="text/css", href="https://transfer.hft-stuttgart.de/css/bootstrap/bootstrap.css")
link(rel="stylesheet", href="https://use.fontawesome.com/releases/v5.8.2/css/all.css", integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay", crossorigin="anonymous")
style.
- .collapse {
- display: none;
- }
- .collapse.in {
- display: block;
- }
- .collapsing {
- position: relative;
- height: 0;
- overflow: hidden;
- -webkit-transition-timing-function: ease;
- -o-transition-timing-function: ease;
- transition-timing-function: ease;
- -webkit-transition-duration: .35s;
- -o-transition-duration: .35s;
- transition-duration: .35s;
- -webkit-transition-property: height,visibility;
- -o-transition-property: height,visibility;
- transition-property: height,visibility;
- }
.warning {
font-size: 11px;
}
body
div(class="container-fluid")
- div(class="row")
- div(class="col-3")
- h5
- span #{user.firstName} #{user.lastName}
- div(class="nav flex-column nav-pills", id="v-pills-tab", role="tablist", aria-orientation="vertical")
- a(class="nav-link" href="/account/profile" aria-selected="true") Benutzerprofil
- a(class="nav-link" href="#" aria-selected="false") Sicherheitseinstellungen
- a(class="nav-link" href="/account/services" aria-selected="false") Projekte und Dienste
- a(class="nav-link" href="/logout" aria-selected="false") Logout
- div(class="col-sm-9")
+ div(class="row min-vh-100 flex-column flex-md-row")
+ aside(class="col-12 col-md-2 p-0 flex-shrink-1")
+ nav(class="navbar navbar-expand flex-md-column flex-row align-items-start py-2")
+ div(class="collapse navbar-collapse")
+ ul(class="flex-md-column flex-row navbar-nav w-100 justify-content-between")
+ li(class="nav-item")
+ a(class="nav-link pl-0 text-nowrap" href="#")
+ span(class="font-weight-bold" style="color:black;") #{user.firstname} #{user.lastname}
+ li(class="nav-item")
+ a(class="nav-link pl-0" href="/account/profile")
+ i(class="fa fa-user fa-fw")
+ span(class="d-none d-md-inline") Benutzerprofil
+ li(class="nav-item")
+ a(class="nav-link pl-0" href="/account/security")
+ i(class="fa fa-lock fa-fw" style="color:black;")
+ span(class="d-none d-md-inline" style="color:black;") Sicherheitseinstellungen
+ li(class="nav-item")
+ a(class="nav-link pl-0" href="/account/services")
+ i(class="fa fa-tasks fa-fw")
+ span(class="d-none d-md-inline") Projekte und Dienste
+ li(class="nav-item")
+ a(class="nav-link pl-0" href="/logout")
+ i(class="fa fa-sign-out-alt fa-fw")
+ span(class="d-none d-md-inline") Logout
+ main(class="col bg-faded py-3 flex-grow-1")
if successes
for success in successes
div.alert.alert-success.alert-dismissible #{ success }
@@ -51,20 +46,23 @@ html(lang="de")
div.alert.alert-danger.alert-dismissible.fade.show #{ error }
a(class="close", href="#", data-dismiss="alert", aria-label="close") ×
form(class="needs-validation", method="post", action="/account/changePwd" novalidate)
- div(class="form-group row")
- label(for="currPwd") Aktuelles Passwort
- input(id="inputCurrPwd", name="inputCurrPwd", type="password", class="form-control" required)
- div(class="invalid-feedback") Bitte füllen Sie dieses Feld aus.
- div(class="form-group row")
- label(for="newPwd") Neues Passwort
- input#inputNewPwd(name="inputNewPwd", type="password", class="form-control" required)
- span#recommendation
- div(class="invalid-feedback") Bitte füllen Sie dieses Feld aus.
- div(class="form-group row")
- label(for="confirm") Bestätigen Sie das neue Passwort
- input#inputConfirm(name="inputConfirm", type="password", class="form-control" required)
- span#message
- div(class="invalid-feedback") Bitte füllen Sie dieses Feld aus.
+ div(class="form-row")
+ div(class='form-group col-md-8')
+ label(for="currPwd") Aktuelles Passwort
+ input(id="inputCurrPwd", name="inputCurrPwd", type="password", class="form-control" required)
+ div(class="invalid-feedback") Bitte füllen Sie dieses Feld aus.
+ div(class="form-row")
+ div(class='form-group col-md-8')
+ label(for="newPwd") Neues Passwort
+ input#inputNewPwd(name="inputNewPwd", type="password", class="form-control" required)
+ span#recommendation
+ div(class="invalid-feedback") Bitte füllen Sie dieses Feld aus.
+ div(class="form-row")
+ div(class='form-group col-md-8')
+ label(for="confirm") Bestätigen Sie das neue Passwort
+ input#inputConfirm(name="inputConfirm", type="password", class="form-control" required)
+ span#message
+ div(class="invalid-feedback") Bitte füllen Sie dieses Feld aus.
input#updateBtn(type="submit", class="btn btn-primary", value="Passwort ändern" disabled)
// jQuery
diff --git a/views/DE/account/services.pug b/views/DE/account/services.pug
index 268c8aa5..8b99f630 100644
--- a/views/DE/account/services.pug
+++ b/views/DE/account/services.pug
@@ -6,41 +6,35 @@ html(lang="de")
meta(name="viewport", content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no")
link(rel="stylesheet", type="text/css", href="https://transfer.hft-stuttgart.de/css/bootstrap/bootstrap.css")
link(rel="stylesheet", href="https://use.fontawesome.com/releases/v5.8.2/css/all.css", integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay", crossorigin="anonymous")
- style.
- .collapse {
- display: none;
- }
- .collapse.in {
- display: block;
- }
- .collapsing {
- position: relative;
- height: 0;
- overflow: hidden;
- -webkit-transition-timing-function: ease;
- -o-transition-timing-function: ease;
- transition-timing-function: ease;
- -webkit-transition-duration: .35s;
- -o-transition-duration: .35s;
- transition-duration: .35s;
- -webkit-transition-property: height,visibility;
- -o-transition-property: height,visibility;
- transition-property: height,visibility;
- }
body
div(class="container-fluid")
- div(class="row")
- div(class="col-3")
- h5
- span #{user.firstName} #{user.lastName}
- div(class="nav flex-column nav-pills", id="v-pills-tab", role="tablist", aria-orientation="vertical")
- a(class="nav-link" href="/account/profile" aria-selected="true") Benutzerprofil
- a(class="nav-link" href="/account/security" aria-selected="false") Sicherheitseinstellungen
- a(class="nav-link" href="#" aria-selected="false") Projekte und Dienste
- a(class="nav-link" href="/logout" aria-selected="false") Logout
- div(class="col-sm-9")
+ div(class="row min-vh-100 flex-column flex-md-row")
+ aside(class="col-12 col-md-2 p-0 flex-shrink-1")
+ nav(class="navbar navbar-expand flex-md-column flex-row align-items-start py-2")
+ div(class="collapse navbar-collapse")
+ ul(class="flex-md-column flex-row navbar-nav w-100 justify-content-between")
+ li(class="nav-item")
+ a(class="nav-link pl-0 text-nowrap" href="#")
+ span(class="font-weight-bold" style="color:black;") #{user.firstname} #{user.lastname}
+ li(class="nav-item")
+ a(class="nav-link pl-0" href="/account/profile")
+ i(class="fa fa-user fa-fw")
+ span(class="d-none d-md-inline") Benutzerprofil
+ li(class="nav-item")
+ a(class="nav-link pl-0" href="/account/security")
+ i(class="fa fa-lock fa-fw")
+ span(class="d-none d-md-inline") Sicherheitseinstellungen
+ li(class="nav-item")
+ a(class="nav-link pl-0" href="/account/services")
+ i(class="fa fa-tasks fa-fw" style="color:black;")
+ span(class="d-none d-md-inline" style="color:black;") Projekte und Dienste
+ li(class="nav-item")
+ a(class="nav-link pl-0" href="/logout")
+ i(class="fa fa-sign-out-alt fa-fw")
+ span(class="d-none d-md-inline") Logout
+ main(class="col bg-faded py-3 flex-grow-1")
p Auf dieser Seite werden in Zukunft Funktionen bereitgestellt, um Ihre Beteiligung an Projekten und Aktivierung von Diensten zu organisieren. Diese Funktionen stehen zurzeit aber noch nicht zur Verfügung.
-
+
// jQuery
script(src="https://code.jquery.com/jquery-3.3.1.min.js")
script(src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js", integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1", crossorigin="anonymous")
--
GitLab