samuelzielke
/
piomint
1
0
Fork 0
Code Issues 11 Pull Requests 1 Packages Projects Releases Wiki Activity

Edit Layout of HomePage and Design Fixes

Browse Source
sortierung
Samuel Zielke 1 year ago
parent eaa6de22c0
commit 444e6d1abe
6 changed files with 130 additions and 68 deletions
Show Stats Download Patch File Download Diff File

118
app/static/app/css/bootstrap.css vendored
Unescape View File

@ -5,22 +5,22 @@
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/
:root {
--blue: #007bff;
--blue: rgb(43,100,110);
--indigo: #6610f2;
--purple: #6f42c1;
--pink: #e83e8c;
--red: #dc3545;
--orange: #fd7e14;
--yellow: #ffc107;
--green: #28a745;
--green: rgb(131,169,96);
--teal: #20c997;
--cyan: #17a2b8;
--white: #fff;
--gray: #6c757d;
--gray-dark: #343a40;
--primary: #007bff;
--primary: rgb(43,100,110);
--secondary: #6c757d;
--success: #28a745;
--success: rgb(131,169,96);
--info: #17a2b8;
--warning: #ffc107;
--danger: #dc3545;
@ -161,7 +161,7 @@ sup {
}
a {
color: #007bff;
color: rgb(43,100,110);
text-decoration: none;
background-color: transparent;
-webkit-text-decoration-skip: objects;
@ -2179,7 +2179,7 @@ select.form-control-lg:not([size]):not([multiple]), .input-group-lg > select.for
width: 100%;
margin-top: 0.25rem;
font-size: 80%;
color: #28a745;
color: rgb(131,169,96);
}
.valid-tooltip {
@ -2200,13 +2200,13 @@ select.form-control-lg:not([size]):not([multiple]), .input-group-lg > select.for
.was-validated .form-control:valid, .form-control.is-valid, .was-validated
.custom-select:valid,
.custom-select.is-valid {
border-color: #28a745;
border-color: rgb(131,169,96);
}
.was-validated .form-control:valid:focus, .form-control.is-valid:focus, .was-validated
.custom-select:valid:focus,
.custom-select.is-valid:focus {
border-color: #28a745;
border-color: rgb(131,169,96);
box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}
@ -2222,7 +2222,7 @@ select.form-control-lg:not([size]):not([multiple]), .input-group-lg > select.for
}
.was-validated .form-check-input:valid ~ .form-check-label, .form-check-input.is-valid ~ .form-check-label {
color: #28a745;
color: rgb(131,169,96);
}
.was-validated .form-check-input:valid ~ .valid-feedback,
@ -2232,7 +2232,7 @@ select.form-control-lg:not([size]):not([multiple]), .input-group-lg > select.for
}
.was-validated .custom-control-input:valid ~ .custom-control-label, .custom-control-input.is-valid ~ .custom-control-label {
color: #28a745;
color: rgb(131,169,96);
}
.was-validated .custom-control-input:valid ~ .custom-control-label::before, .custom-control-input.is-valid ~ .custom-control-label::before {
@ -2254,7 +2254,7 @@ select.form-control-lg:not([size]):not([multiple]), .input-group-lg > select.for
}
.was-validated .custom-file-input:valid ~ .custom-file-label, .custom-file-input.is-valid ~ .custom-file-label {
border-color: #28a745;
border-color: rgb(131,169,96);
}
.was-validated .custom-file-input:valid ~ .custom-file-label::before, .custom-file-input.is-valid ~ .custom-file-label::before {
@ -2519,8 +2519,8 @@ fieldset:disabled a.btn {
.btn-primary.disabled, .btn-primary:disabled {
color: #fff;
background-color: #007bff;
border-color: #007bff;
background-color: rgb(43,100,110);
border-color: rgb(43,100,110);
}
.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active,
@ -2571,14 +2571,14 @@ fieldset:disabled a.btn {
.btn-success {
color: #fff;
background-color: #28a745;
border-color: #28a745;
background-color: rgb(131,169,96);
border-color: rgb(131,169,96);
}
.btn-success:hover {
color: #fff;
background-color: #218838;
border-color: #1e7e34;
background-color: rgb(131,169,96);
border-color: rgb(131,169,96);
}
.btn-success:focus, .btn-success.focus {
@ -2587,15 +2587,15 @@ fieldset:disabled a.btn {
.btn-success.disabled, .btn-success:disabled {
color: #fff;
background-color: #28a745;
border-color: #28a745;
background-color: rgb(131,169,96);
border-color: rgb(131,169,96);
}
.btn-success:not(:disabled):not(.disabled):active, .btn-success:not(:disabled):not(.disabled).active,
.show > .btn-success.dropdown-toggle {
color: #fff;
background-color: #1e7e34;
border-color: #1c7430;
background-color: rgb(131,169,96);
border-color: rgb(131,169,96);
}
.btn-success:not(:disabled):not(.disabled):active:focus, .btn-success:not(:disabled):not(.disabled).active:focus,
@ -2774,16 +2774,16 @@ fieldset:disabled a.btn {
}
.btn-outline-primary {
color: #007bff;
color: rgb(43,100,110);
background-color: transparent;
background-image: none;
border-color: #007bff;
border-color: rgb(43,100,110);
}
.btn-outline-primary:hover {
color: #fff;
background-color: #007bff;
border-color: #007bff;
background-color: rgb(43,100,110);
border-color: rgb(43,100,110);
}
.btn-outline-primary:focus, .btn-outline-primary.focus {
@ -2791,15 +2791,15 @@ fieldset:disabled a.btn {
}
.btn-outline-primary.disabled, .btn-outline-primary:disabled {
color: #007bff;
color: rgb(43,100,110);
background-color: transparent;
}
.btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled).active,
.show > .btn-outline-primary.dropdown-toggle {
color: #fff;
background-color: #007bff;
border-color: #007bff;
background-color: rgb(43,100,110);
border-color: rgb(43,100,110);
}
.btn-outline-primary:not(:disabled):not(.disabled):active:focus, .btn-outline-primary:not(:disabled):not(.disabled).active:focus,
@ -2842,16 +2842,16 @@ fieldset:disabled a.btn {
}
.btn-outline-success {
color: #28a745;
color: rgb(131,169,96);
background-color: transparent;
background-image: none;
border-color: #28a745;
border-color: rgb(131,169,96);
}
.btn-outline-success:hover {
color: #fff;
background-color: #28a745;
border-color: #28a745;
background-color: rgb(131,169,96);
border-color: rgb(131,169,96);
}
.btn-outline-success:focus, .btn-outline-success.focus {
@ -2859,15 +2859,15 @@ fieldset:disabled a.btn {
}
.btn-outline-success.disabled, .btn-outline-success:disabled {
color: #28a745;
color: rgb(131,169,96);
background-color: transparent;
}
.btn-outline-success:not(:disabled):not(.disabled):active, .btn-outline-success:not(:disabled):not(.disabled).active,
.show > .btn-outline-success.dropdown-toggle {
color: #fff;
background-color: #28a745;
border-color: #28a745;
background-color: rgb(131,169,96);
border-color: rgb(131,169,96);
}
.btn-outline-success:not(:disabled):not(.disabled):active:focus, .btn-outline-success:not(:disabled):not(.disabled).active:focus,
@ -3047,7 +3047,7 @@ fieldset:disabled a.btn {
.btn-link {
font-weight: 400;
color: #007bff;
color: rgb(43,100,110);
background-color: transparent;
}
@ -3285,7 +3285,7 @@ tbody.collapse.show {
.dropdown-item.active, .dropdown-item:active {
color: #fff;
text-decoration: none;
background-color: #007bff;
background-color: rgb(43,100,110);
}
.dropdown-item.disabled, .dropdown-item:disabled {
@ -3622,7 +3622,7 @@ tbody.collapse.show {
.custom-control-input:checked ~ .custom-control-label::before {
color: #fff;
background-color: #007bff;
background-color: rgb(43,100,110);
}
.custom-control-input:focus ~ .custom-control-label::before {
@ -3680,7 +3680,7 @@ tbody.collapse.show {
}
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
background-color: #007bff;
background-color: rgb(43,100,110);
}
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
@ -3688,7 +3688,7 @@ tbody.collapse.show {
}
.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before {
background-color: #007bff;
background-color: rgb(43,100,110);
}
.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::after {
@ -3708,7 +3708,7 @@ tbody.collapse.show {
}
.custom-radio .custom-control-input:checked ~ .custom-control-label::before {
background-color: #007bff;
background-color: rgb(43,100,110);
}
.custom-radio .custom-control-input:checked ~ .custom-control-label::after {
@ -3906,7 +3906,7 @@ tbody.collapse.show {
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
color: #fff;
background-color: #007bff;
background-color: rgb(43,100,110);
}
.nav-fill .nav-item {
@ -4734,7 +4734,7 @@ tbody.collapse.show {
padding: 0.5rem 0.75rem;
margin-left: -1px;
line-height: 1.25;
color: #007bff;
color: rgb(43,100,110);
background-color: #fff;
border: 1px solid #dee2e6;
}
@ -4770,8 +4770,8 @@ tbody.collapse.show {
.page-item.active .page-link {
z-index: 1;
color: #fff;
background-color: #007bff;
border-color: #007bff;
background-color: rgb(43,100,110);
border-color: rgb(43,100,110);
}
.page-item.disabled .page-link {
@ -4843,7 +4843,7 @@ tbody.collapse.show {
.badge-primary {
color: #fff;
background-color: #007bff;
background-color: rgb(43,100,110);
}
.badge-primary[href]:hover, .badge-primary[href]:focus {
@ -4865,13 +4865,13 @@ tbody.collapse.show {
.badge-success {
color: #fff;
background-color: #28a745;
background-color: rgb(131,169,96);
}
.badge-success[href]:hover, .badge-success[href]:focus {
color: #fff;
text-decoration: none;
background-color: #1e7e34;
background-color: rgb(131,169,96);
}
.badge-info {
@ -5130,7 +5130,7 @@ tbody.collapse.show {
justify-content: center;
color: #fff;
text-align: center;
background-color: #007bff;
background-color: rgb(43,100,110);
transition: width 0.6s ease;
}
@ -5221,8 +5221,8 @@ tbody.collapse.show {
.list-group-item.active {
z-index: 2;
color: #fff;
background-color: #007bff;
border-color: #007bff;
background-color: rgb(43,100,110);
border-color: rgb(43,100,110);
}
.list-group-flush .list-group-item {
@ -6075,7 +6075,7 @@ button.close {
}
.bg-primary {
background-color: #007bff !important;
background-color: rgb(43,100,110) !important;
}
a.bg-primary:hover, a.bg-primary:focus,
@ -6095,13 +6095,13 @@ button.bg-secondary:focus {
}
.bg-success {
background-color: #28a745 !important;
background-color: rgb(131,169,96) !important;
}
a.bg-success:hover, a.bg-success:focus,
button.bg-success:hover,
button.bg-success:focus {
background-color: #1e7e34 !important;
background-color: rgb(131,169,96) !important;
}
.bg-info {
@ -6203,7 +6203,7 @@ button.bg-dark:focus {
}
.border-primary {
border-color: #007bff !important;
border-color: rgb(43,100,110) !important;
}
.border-secondary {
@ -6211,7 +6211,7 @@ button.bg-dark:focus {
}
.border-success {
border-color: #28a745 !important;
border-color: rgb(131,169,96) !important;
}
.border-info {
@ -8824,7 +8824,7 @@ button.bg-dark:focus {
}
.text-primary {
color: #007bff !important;
color: rgb(43,100,110) !important;
}
a.text-primary:hover, a.text-primary:focus {
@ -8840,11 +8840,11 @@ a.text-secondary:hover, a.text-secondary:focus {
}
.text-success {
color: #28a745 !important;
color: rgb(131,169,96) !important;
}
a.text-success:hover, a.text-success:focus {
color: #1e7e34 !important;
color: rgb(131,169,96) !important;
}
.text-info {

BIN
app/static/app/images/add.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
app/static/app/images/addcircle.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.3 KiB

BIN
app/static/app/images/open.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

42
app/templates/app/base.html
Unescape View File

@ -27,6 +27,48 @@
<span class="col-3 d-none" id="settings_close_icon"><img src="{% static 'app/images/close.png' %}" alt="SettingsClose" class="img-fluid" id="image" style="width: 40%; opacity: 0.75; padding-top: 0.65rem;"></span>
</div>
<div class="settings text-left">
<div class="settings-card container">
<h5 class="pt-3">Allgemein</h5>
<ul class="list-group" style="color: black;">
<li class="list-group-item d-flex justify-content-between align-items-center">
LDC-Tätigkeiten
<button class="badge btn btn-success">On</button>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Dauer-Hippi
<button class="badge btn btn-secondary">Off</button>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Stunden-Schnitt berechnung
<button class="badge btn btn-success">On</button>
</li>
</ul>
<h5 class="pt-4">Account</h5>
<ul class="list-group" style="color: black;">
<li class="list-group-item d-flex justify-content-between align-items-center">
Username: <b>maxmüller</b>
<button class="badge btn btn-primary">ändern</button>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Passwort
<button class="badge btn btn-primary">ändern</button>
</li>
</ul>
<h5 class="pt-4">Bericht</h5>
<ul class="list-group" style="color: black;">
<li class="list-group-item d-flex justify-content-between align-items-center">
Bibelstudien:
<button class="badge btn btn-disabled" style="min-width: 50px;">1</button>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Erinnerung:
<button class="badge btn btn-success">On</button>
</li>
</ul>
</div>
</div>
</div>
</div>

38
app/templates/app/home.html
Unescape View File

@ -25,20 +25,35 @@
<div class="d-none" id="dashboard">
<div class="row justify-content-around mt-3" style="width: 95vw; color: black;">
<div class="col-5" style="height: 15vh; padding: 1rem; border-radius:1rem; box-shadow: 0 0 0.5rem gray">
<p style="font-size: 1.2rem;"><b>Monat</b> - 50h</p>
<div class="progress" style="height: 12px; width: 90%; border-radius: 2rem; background-color: lightgray;">
<div class="progress-bar" role="progressbar" style="background-color:rgb(120,170,86); width: 20%; height: 12px;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
<div class="col-11" style="height: 5vh; padding: 1rem; border-radius:1rem; box-shadow: 0 0 0.5rem gray">
<div class="row justify-content-between">
<p class="col-6" style="font-size: 1rem; margin-top: -0.75rem;"><b>Jahr</b> - 450h/600h</p>
<p class="offset-1 col-5" style="font-size: 1rem; margin-top: -0.75rem;"><b>Offen:</b> 150h</p>
</div>
<div class="progress" style="height: 5px; width: 100%; border-radius: 2rem; background-color: lightgray; margin-top: -1rem;">
<div class="progress-bar" role="progressbar" style="background-color:rgb(120,170,86); width: 90%; height: 5px;" aria-valuenow="10" aria-valuemin="0" aria-valuemax="50"></div>
</div>
<p style="font-size: 1.5rem;">12h/18h</p>
</div>
<div class="col-5" style="height: 15vh; padding: 1rem; border-radius:1rem; box-shadow: 0 0 0.5rem gray">
<div class="col-11 mt-4" style="height: 15vh; padding: 1rem; border-radius:1rem; box-shadow: 0 0 0.5rem gray">
<div class="row justify-content-between">
<p class="col-7" style="font-size: 1.25rem;"><b>Monat:</b> 25h/50h</p>
<p class="col-5" style="font-size: 1.25rem;"><b>Offen:</b> 25h</p>
</div>
<div class="progress" style="height: 5px; width: 100%; border-radius: 2rem; background-color: lightgray; margin-top: -0.75rem">
<div class="progress-bar" role="progressbar" style="background-color:rgb(120,170,86); width: 50%; height: 5px;" aria-valuenow="10" aria-valuemin="0" aria-valuemax="50"></div>
</div>
<div class="row justify-content-center">
<button class="col-3 mt-3 badge badge-primary" style="height: 25px; border: none;">Dienst: 10h</button>
<button class="offset-1 col-3 mt-3 badge badge-primary" style="height: 25px; border: none;">LDC: 10h</button>
</div>
</div>
<!-- <div class="col-5" style="height: 15vh; padding: 1rem; border-radius:1rem; box-shadow: 0 0 0.5rem gray">
<p style="font-size: 1.2rem;"><b>Jahr</b> - 600h</p>
<div class="progress" style="height: 12px; width: 90%; border-radius: 2rem; background-color: lightgray;">
<div class="progress-bar" role="progressbar" style="background-color:rgb(120,170,86); width: 51%; height: 12px;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<p style="font-size: 1.5rem;">58h/65h</p>
</div>
</div> -->
</div>
<div class="row justify-content-around" style="width: 95vw; color: black; padding-top: 2rem;">
<div class="col-11" style="height: 15vh; padding: 1rem; border-radius:1rem; box-shadow: 0 0 0.5rem gray">
@ -55,8 +70,13 @@
</div>
</div>
<div class="row justify-content-around" style="width: 95vw; color: black; padding-top: 2rem;"></div>
<div class="col-12" style="height: 45vh; padding: 1rem; border-radius:1rem; box-shadow: 0 0 0.5rem gray">
<p style="font-size: 1.2rem;" ><b>Aktivitäten</b></p>
<div class="col-12" style="height: 40vh; padding: 1rem; border-radius:1rem; box-shadow: 0 0 0.5rem gray">
<div class="row justify-content-between">
<p class="col-4" style="font-size: 1.2rem;" ><b>Aktivitäten</b></p>
<span class="col-2" style="margin-left: 32%; padding: 0;"><img id="resetTimer" src="{% static 'app/images/addcircle.png' %}" alt="add" class="img-fluid" style="height: 35px"></span>
<span class="col-2" style="padding: 0;"><img id="resetTimer" src="{% static 'app/images/open.png' %}" alt="open" class="img-fluid" style="height: 30px"></span>
</div>
<table class="table table-striped">
<thead>
<tr>

Write Preview
Loading…
Cancel
Save

Powered by TurnKey Linux.