Skip to content
GitLab
Commit f46f8ffe authored by Rosanny Sihombing's avatar Rosanny Sihombing
Browse files

MLAB-206: Account page responsive design

parent 6451d414
master MLAB-677 devel patch-1 reset-jul13 reset-merge testing
2 merge requests!31Prepare prdoucton,!23MLAB-206: Account page responsive design
This commit is part of merge request !31. Comments created here will be created in the context of that merge request.
Hide whitespace changes
Inline Side-by-side
Showing
with 118 additions and 138 deletions
+118 -138
views/DE/account/home.pug
+ 25
- 31
View file @ f46f8ffe
...@@ -6,39 +6,33 @@ html(lang="de") ...@@ -6,39 +6,33 @@ html(lang="de")
meta(name="viewport", content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no") 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", 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") 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 body
div(class="container-fluid") div(class="container-fluid")
div(class="row") div(class="row min-vh-100 flex-column flex-md-row")
div(class="col-3") aside(class="col-12 col-md-2 p-0 flex-shrink-1")
h5 nav(class="navbar navbar-expand flex-md-column flex-row align-items-start py-2")
span #{user.firstname} #{user.lastname} div(class="collapse navbar-collapse")
div(class="nav flex-column nav-pills", id="v-pills-tab", role="tablist", aria-orientation="vertical") ul(class="flex-md-column flex-row navbar-nav w-100 justify-content-between")
a(class="nav-link" href="/account/profile" aria-selected="true") Benutzerprofil li(class="nav-item")
a(class="nav-link" href="/account/security" aria-selected="false") Sicherheitseinstellungen a(class="nav-link pl-0 text-nowrap" href="#")
a(class="nav-link" href="/account/services" aria-selected="false") Projekte und Dienste span(class="font-weight-bold" style="color:black;") #{user.firstname} #{user.lastname}
a(class="nav-link" href="/logout" aria-selected="false") Logout li(class="nav-item")
div(class="col-sm-9") 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 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 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> 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
View file @ f46f8ffe
...@@ -6,39 +6,33 @@ html(lang="de") ...@@ -6,39 +6,33 @@ html(lang="de")
meta(name="viewport", content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no") 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", 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") 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 body
div(class="container-fluid") div(class="container-fluid")
div(class="row") div(class="row min-vh-100 flex-column flex-md-row")
div(class="col-3") aside(class="col-12 col-md-2 p-0 flex-shrink-1")
h5 nav(class="navbar navbar-expand flex-md-column flex-row align-items-start py-2")
span #{user.firstname} #{user.lastname} div(class="collapse navbar-collapse")
div(class="nav flex-column nav-pills", id="v-pills-tab", role="tablist", aria-orientation="vertical") ul(class="flex-md-column flex-row navbar-nav w-100 justify-content-between")
a(class="nav-link" href="#" aria-selected="true") Benutzerprofil li(class="nav-item")
a(class="nav-link" href="/account/security" aria-selected="false") Sicherheitseinstellungen a(class="nav-link pl-0 text-nowrap" href="#")
a(class="nav-link" href="/account/services" aria-selected="false") Projekte und Dienste span(class="font-weight-bold" style="color:black;") #{user.firstname} #{user.lastname}
a(class="nav-link" href="/logout" aria-selected="false") Logout li(class="nav-item")
div(class="col-sm-9") 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 if successes
for success in successes for success in successes
div.alert.alert-success.alert-dismissible #{ success } div.alert.alert-success.alert-dismissible #{ success }
......
views/DE/account/security.pug
+ 42
- 44
View file @ f46f8ffe
...@@ -7,41 +7,36 @@ html(lang="de") ...@@ -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", 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") link(rel="stylesheet", href="https://use.fontawesome.com/releases/v5.8.2/css/all.css", integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay", crossorigin="anonymous")
style. 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 { .warning {
font-size: 11px; font-size: 11px;
} }
body body
div(class="container-fluid") div(class="container-fluid")
div(class="row") div(class="row min-vh-100 flex-column flex-md-row")
div(class="col-3") aside(class="col-12 col-md-2 p-0 flex-shrink-1")
h5 nav(class="navbar navbar-expand flex-md-column flex-row align-items-start py-2")
span #{user.firstName} #{user.lastName} div(class="collapse navbar-collapse")
div(class="nav flex-column nav-pills", id="v-pills-tab", role="tablist", aria-orientation="vertical") ul(class="flex-md-column flex-row navbar-nav w-100 justify-content-between")
a(class="nav-link" href="/account/profile" aria-selected="true") Benutzerprofil li(class="nav-item")
a(class="nav-link" href="#" aria-selected="false") Sicherheitseinstellungen a(class="nav-link pl-0 text-nowrap" href="#")
a(class="nav-link" href="/account/services" aria-selected="false") Projekte und Dienste span(class="font-weight-bold" style="color:black;") #{user.firstname} #{user.lastname}
a(class="nav-link" href="/logout" aria-selected="false") Logout li(class="nav-item")
div(class="col-sm-9") 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 if successes
for success in successes for success in successes
div.alert.alert-success.alert-dismissible #{ success } div.alert.alert-success.alert-dismissible #{ success }
...@@ -51,20 +46,23 @@ html(lang="de") ...@@ -51,20 +46,23 @@ html(lang="de")
div.alert.alert-danger.alert-dismissible.fade.show #{ error } div.alert.alert-danger.alert-dismissible.fade.show #{ error }
a(class="close", href="#", data-dismiss="alert", aria-label="close") &times; a(class="close", href="#", data-dismiss="alert", aria-label="close") &times;
form(class="needs-validation", method="post", action="/account/changePwd" novalidate) form(class="needs-validation", method="post", action="/account/changePwd" novalidate)
div(class="form-group row") div(class="form-row")
label(for="currPwd") Aktuelles Passwort div(class='form-group col-md-8')
input(id="inputCurrPwd", name="inputCurrPwd", type="password", class="form-control" required) label(for="currPwd") Aktuelles Passwort
div(class="invalid-feedback") Bitte füllen Sie dieses Feld aus. input(id="inputCurrPwd", name="inputCurrPwd", type="password", class="form-control" required)
div(class="form-group row") div(class="invalid-feedback") Bitte füllen Sie dieses Feld aus.
label(for="newPwd") Neues Passwort div(class="form-row")
input#inputNewPwd(name="inputNewPwd", type="password", class="form-control" required) div(class='form-group col-md-8')
span#recommendation label(for="newPwd") Neues Passwort
div(class="invalid-feedback") Bitte füllen Sie dieses Feld aus. input#inputNewPwd(name="inputNewPwd", type="password", class="form-control" required)
div(class="form-group row") span#recommendation
label(for="confirm") Bestätigen Sie das neue Passwort div(class="invalid-feedback") Bitte füllen Sie dieses Feld aus.
input#inputConfirm(name="inputConfirm", type="password", class="form-control" required) div(class="form-row")
span#message div(class='form-group col-md-8')
div(class="invalid-feedback") Bitte füllen Sie dieses Feld aus. 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) input#updateBtn(type="submit", class="btn btn-primary", value="Passwort ändern" disabled)
// jQuery // jQuery
......
views/DE/account/services.pug
+ 26
- 32
View file @ f46f8ffe
...@@ -6,41 +6,35 @@ html(lang="de") ...@@ -6,41 +6,35 @@ html(lang="de")
meta(name="viewport", content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no") 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", 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") 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 body
div(class="container-fluid") div(class="container-fluid")
div(class="row") div(class="row min-vh-100 flex-column flex-md-row")
div(class="col-3") aside(class="col-12 col-md-2 p-0 flex-shrink-1")
h5 nav(class="navbar navbar-expand flex-md-column flex-row align-items-start py-2")
span #{user.firstName} #{user.lastName} div(class="collapse navbar-collapse")
div(class="nav flex-column nav-pills", id="v-pills-tab", role="tablist", aria-orientation="vertical") ul(class="flex-md-column flex-row navbar-nav w-100 justify-content-between")
a(class="nav-link" href="/account/profile" aria-selected="true") Benutzerprofil li(class="nav-item")
a(class="nav-link" href="/account/security" aria-selected="false") Sicherheitseinstellungen a(class="nav-link pl-0 text-nowrap" href="#")
a(class="nav-link" href="#" aria-selected="false") Projekte und Dienste span(class="font-weight-bold" style="color:black;") #{user.firstname} #{user.lastname}
a(class="nav-link" href="/logout" aria-selected="false") Logout li(class="nav-item")
div(class="col-sm-9") 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. 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 // jQuery
script(src="https://code.jquery.com/jquery-3.3.1.min.js") 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") script(src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js", integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1", crossorigin="anonymous")
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

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