Skip to content
GitLab

MLAB-206: Account page responsive design

Merged Rosanny Sihombing requested to merge MLAB-206 into testing
Compare
and
4 files
+ 118
- 138
views/DE‎/account‎
home‎.pug‎ +25 -31
profi‎le.pug‎ +25 -31
securi‎ty.pug‎ +42 -44
servic‎es.pug‎ +26 -32
views/DE/account/home.pug
+ 25
- 31
@@ -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>
views/DE/account/profile.pug
+ 25
- 31
@@ -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 }
views/DE/account/security.pug
+ 42
- 44
@@ -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") &times;
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
views/DE/account/services.pug
+ 26
- 32
@@ -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")

Dies ist die Gitlab-Instanz des Transferportals der Hochschule für Technik Stuttgart. Hier geht es zurück zum Portal