Edit Layout of HomePage and Design Fixes

app/static/app/css/bootstrap.css

@@ -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;
+  background-color: rgb(43,100,110);
-  border-color: #007bff;
+  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;
+  background-color: rgb(131,169,96);
-  border-color: #28a745;
+  border-color: rgb(131,169,96);
 }
 
 .btn-success:hover {
   color: #fff;
-  background-color: #218838;
+  background-color: rgb(131,169,96);
-  border-color: #1e7e34;
+  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;
+  background-color: rgb(131,169,96);
-  border-color: #28a745;
+  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;
+  background-color: rgb(131,169,96);
-  border-color: #1c7430;
+  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;
+  background-color: rgb(43,100,110);
-  border-color: #007bff;
+  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;
+  background-color: rgb(43,100,110);
-  border-color: #007bff;
+  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;
+  background-color: rgb(131,169,96);
-  border-color: #28a745;
+  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;
+  background-color: rgb(131,169,96);
-  border-color: #28a745;
+  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;
+  background-color: rgb(43,100,110);
-  border-color: #007bff;
+  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;
+  background-color: rgb(43,100,110);
-  border-color: #007bff;
+  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 {

app/templates/app/base.html

@@ -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>
 

app/templates/app/home.html

@@ -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">
+        <div class="col-11" style="height: 5vh; 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="row justify-content-between">
-            <div class="progress" style="height: 12px; width: 90%; border-radius: 2rem; background-color: lightgray;">
+                <p class="col-6" style="font-size: 1rem; margin-top: -0.75rem;"><b>Jahr</b> - 450h/600h</p>
-                <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>
+                <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">
+        <div class="col-12" style="height: 40vh; 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="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>