From 399dfa2faf6d24724124c4f5b4b2e9137c2f8d83 Mon Sep 17 00:00:00 2001
From: Marc Auberer <marc.auberer@chillibits.com>
Date: Sat, 4 Jul 2020 00:02:56 +0200
Subject: [PATCH 1/3] Minor styling improvements

---
 src/css/call_list_style.css   | 35 +++++++++++++++--------------------
 src/css/clustered_list.css    | 18 ++++++------------
 src/css/interaction_props.css | 32 +++++++++++++++++---------------
 3 files changed, 38 insertions(+), 47 deletions(-)

diff --git a/src/css/call_list_style.css b/src/css/call_list_style.css
index 2500ca9..cba5383 100644
--- a/src/css/call_list_style.css
+++ b/src/css/call_list_style.css
@@ -1,4 +1,4 @@
-#left_bar{
+#left_bar {
     display:flex;
     position: fixed;
     overflow: hidden;
@@ -10,37 +10,35 @@
     outline: none;
 }
 
-#call_list_div
-{
+#call_list_div {
     overflow: auto;
     height: 100%;
     width: 100%;
     background-color: white;
 }
 
-.call_list_header
-{
+.call_list_header {
     margin: 5px 10px 5px 10px;
     justify-content: center;
     border-bottom: 1px black;
 }
 
-.call_list_content{
+.call_list_content {
     flex-direction: column;
     margin-top: 10px;
 }
 
-h1{
+h1 {
     font-size:medium;
 }
 
-h2{
+h2 {
     font-size: small;
     margin-bottom: -0.1px;
     margin-top: 8px;
 }
 
-.seperator{
+.seperator {
     background-color: black;
     height: 1px;
 }
@@ -52,7 +50,6 @@ h2{
     animation: slideout_call_div .7s ease-in-out forwards;
 }
 
-
 @keyframes slidein_call_div {
     from {
         transform: translate(-100%, 0);
@@ -96,13 +93,13 @@ h2{
     }
 
     to {
-        left: 16%;
+        left: 14%;
     }
 }
 
 @keyframes slideout_search_bar {
     from {
-        left: 16%;
+        left: 14%;
     }
 
     to {
@@ -133,22 +130,21 @@ h2{
     transition: 0.3s;
 }
 
-.call_box :hover {
+.call_box:hover {
     border-width: 0 0 0 8px;
+    background-color: #e6e6e6;
 }
 
-.call_list_element{
+.call_list_element {
     border-top: 1px black;
     margin: 5px 0 5px 0;
-    cursor: pointer;
 }
 
-.call_list_element :hover {
+.call_list_element:hover {
     border-width: 0 0 0 10px;
-    background-color: #e6e6e6;
+    cursor: pointer;
 }
 
-
 .lowprio {
     border-color: green;
 }
@@ -169,8 +165,7 @@ h2{
     border-color: purple;
 }
 
-.done_call_box
-{
+.done_call_box {
     background-color: lightgrey;
     filter: grayscale(100%);
 }
diff --git a/src/css/clustered_list.css b/src/css/clustered_list.css
index fb1ea36..cb6fb10 100644
--- a/src/css/clustered_list.css
+++ b/src/css/clustered_list.css
@@ -1,25 +1,20 @@
-#clustered_list
-{
+#clustered_list {
     padding: 5px;
     overflow: auto;
 }
 
-.list_div
-{
+.list_div {
     padding: 5px;
-
 }
 
-.list_div:hover
-{
+.list_div:hover {
     background-color: #e6e6e6;
     border-radius: 5px;
     border-width: 10px;
-
+    cursor: pointer;
 }
 
-.done_div
-{
+.done_div {
     padding: 5px;
     border-radius: 5px;
     border-width: 10px;
@@ -27,7 +22,6 @@
     filter: grayscale(100%);
 }
 
-.done_div:hover
-{
+.done_div:hover {
     background-color: #e6e6e6;
 }
\ No newline at end of file
diff --git a/src/css/interaction_props.css b/src/css/interaction_props.css
index f52454d..549454b 100644
--- a/src/css/interaction_props.css
+++ b/src/css/interaction_props.css
@@ -16,14 +16,16 @@
 #zoom_in_button {
     height: 50px;
     width: 50px;
-    margin-left: 100px;
+    margin-left: 10px;
     right: 0;
+    bottom: 1%;
 }
 
 #zoom_out_button {
     height: 50px;
     width: 50px;
     left: 0;
+    bottom: 1%;
 }
 
 .zoom_button {
@@ -59,8 +61,8 @@
 }
 
 #search_bar {
-    top: 3%;
-    left: 3%;
+    top: 1%;
+    left: 1%;
     height: auto;
     outline: none;
     background-color: transparent;
@@ -69,7 +71,7 @@
 
 #search_container {
     background-color: white;
-    padding: 4px;
+    padding: 10px;
     border-radius: 10px;
 }
 
@@ -167,8 +169,8 @@
 }
 
 #actionBar {
-    left: 3%;
-    bottom: 3%;
+    left: 1%;
+    bottom: 1%;
     background-color: white;
     padding: 0.5em;
     display: flex;
@@ -176,7 +178,6 @@
     justify-content: space-between;
     border-radius: 10px;
     align-content: center;
-
 }
 
 #snackbar {
@@ -299,7 +300,7 @@
     width: auto;
 }
 
-#waitText{
+#waitText {
     background-color: white;
     padding: 3px;
     border-radius: 10px;
@@ -312,14 +313,15 @@
     position: relative;
 }
 
-.corona_logo{
+.corona_logo {
     position: absolute;
-    bottom: 3px;
-    right: 5px;
+    bottom: 1%;
+    right: 1%;
     z-index: 5;
-    width: 10%;
+    width: 180px;
 }
-.corona_logo_img{
-    width: 100%;
-    height: 13%;
+
+.corona_logo_img {
+    width: 180px;
+    height: 45px;
 }
\ No newline at end of file

From 184a8c0cea50d13767ec76de768a9f20893ae44d Mon Sep 17 00:00:00 2001
From: Marc Auberer <marc.auberer@chillibits.com>
Date: Sat, 4 Jul 2020 00:19:39 +0200
Subject: [PATCH 2/3] Further improvements & code style improvements

---
 src/css/call_list_style.css   |  7 ++-
 src/css/clustered_list.css    |  5 +-
 src/css/detailed_view.css     | 98 +++++++++++++++--------------------
 src/css/interaction_props.css | 28 +++++-----
 4 files changed, 61 insertions(+), 77 deletions(-)

diff --git a/src/css/call_list_style.css b/src/css/call_list_style.css
index cba5383..6536fd3 100644
--- a/src/css/call_list_style.css
+++ b/src/css/call_list_style.css
@@ -110,17 +110,16 @@ h2 {
 .wellbeing_imagespan {
     position: relative;
     top: 4px;
-    margin-right: 5px;
+    margin-right: 10px;
 }
 
 
-.wellbeing_indicator
-{
+.wellbeing_indicator {
     height: 20px;
     width: 20px;
 }
 
-.call_box  {
+.call_box {
     color: black;
     border-style: solid;
     background-color: #f2f2f2;
diff --git a/src/css/clustered_list.css b/src/css/clustered_list.css
index cb6fb10..e27d30f 100644
--- a/src/css/clustered_list.css
+++ b/src/css/clustered_list.css
@@ -4,7 +4,10 @@
 }
 
 .list_div {
-    padding: 5px;
+    padding-top: 3px;
+    padding-bottom: 3px;
+    padding-left: 20px;
+    padding-right: 20px;
 }
 
 .list_div:hover {
diff --git a/src/css/detailed_view.css b/src/css/detailed_view.css
index a0717c8..dfb7ef2 100644
--- a/src/css/detailed_view.css
+++ b/src/css/detailed_view.css
@@ -1,5 +1,4 @@
-
-#right_bar{
+#right_bar {
     width: 30%;
     height: 100%;
     left: 100%;
@@ -18,18 +17,16 @@
     overflow-x: hidden;
 }
 
-#overallDiv{
+#overallDiv {
     width: 100%
 }
 
-.checkbox{
+.checkbox {
     width: 22px;
     height: 18px;
     background-color: #eee;
 }
 
-
-
 .alreadyPrescribed {
     margin-left: 20px;
     color: black;
@@ -82,14 +79,14 @@
     outline: none;
 }
 
-#addSymptomButton:hover{
+#addSymptomButton:hover {
     box-shadow: 4px 4px gray;
     background-color: white;
     border-color: slategray;
     color: slategray;
 }
 
-.text{
+.text {
     margin-left: 1em;
     color: black;
     font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
@@ -102,7 +99,7 @@
     font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
 }
 
-.notesDiv{
+.notesDiv {
     overflow: auto;
     margin: 1em;
     border: solid black 3px;
@@ -111,24 +108,21 @@
     padding-right: 1em;
 }
 
-#textInformationen{
+#textInformationen {
     margin-top: 20px;
 }
 
-#test_result_label{
+#test_result_label {
     font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
     font-weight: 300;
-
-
 }
-#prescribe_test{
+
+#prescribe_test {
     position: relative;
     right: -1em;
     top: -3px;
 }
 
-
-
 .sinceDays {
     color: #737373;
 }
@@ -146,13 +140,9 @@
     border-radius: 10px;
     background-color: white;
     border: solid black 3px;
-
-
 }
 
-
-
-#wellbeingHistoryDiv{
+#wellbeingHistoryDiv {
     margin-left: 1em;
     display: flex;
     width: 100%;
@@ -165,6 +155,7 @@
     background-color: red;
     border-color: black;
 }
+
 .cancel_button:hover {
     color: red;
     background-color: white;
@@ -181,9 +172,7 @@
     border-color: #00cc00;
 }
 
-
-
-#preexistingIllnessButtonSpan{
+#preexistingIllnessButtonSpan {
     position: relative;
     right: -1em;
 }
@@ -213,11 +202,11 @@
     height: auto;
 }
 
-.btn-gray:hover{
+.btn-gray:hover {
     background: darkgray;
 }
 
-.btn-gray{
+.btn-gray {
     border: 3px solid gray;
     background: gray;
 }
@@ -239,10 +228,9 @@
     height: 8.4px;
     box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
     background: url('../assets/icons/wellbeing_slider.svg');
-
 }
 
-#wellbeing_slider::-moz-range-thumb{
+#wellbeing_slider::-moz-range-thumb {
     -webkit-appearance: none;
     border: 1px solid #000000;
     height: 36px;
@@ -253,7 +241,7 @@
     box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; /* Add cool effects to your sliders! */
 }
 
-#wellbeing_slider::-webkit-slider-thumb{
+#wellbeing_slider::-webkit-slider-thumb {
     w-webkit-appearance: none;
     border: 1px solid #000000;
     height: 36px;
@@ -280,21 +268,20 @@
     cursor: grabbing;
 }
 
-#symptomHeader{
+#symptomHeader {
     font-size: 1.5em;
 }
-#courseOfDiseaseHeader{
+#courseOfDiseaseHeader {
     font-size: 1.5em;
 }
 
-#riskParagraph{
+#riskParagraph {
     font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
     font-weight: 300;
     position:relative;
-
 }
 
-#riskDiv{
+#riskDiv {
     border-bottom-style: solid;
     border-bottom-color: lightgray;
     display: flex;
@@ -303,57 +290,55 @@
     justify-content: start;
     padding: 1em;
     flex-wrap: wrap;
-
 }
 
-#preexistingIllnessButtonDiv{
+#preexistingIllnessButtonDiv {
     position: relative;
     top: 5px;
 }
-#preexistingIllnessButton{
+#preexistingIllnessButton {
     margin: 0em;
 }
 
-#riskText{
+#riskText {
     margin-right: 1em;
 }
 
-#wellbeingImage{
+#wellbeingImage {
     height: 3em;
     width: 3em;
     margin-left: 1.2em;
     margin-right: 1.2em;
 }
 
-#informationDiv{
+#informationDiv {
     border-bottom-style: solid;
     border-bottom-color: lightgray;
 }
 
-#prescribeTestDiv{
+#prescribeTestDiv {
 
 }
 
-#wellbeingContentDiv{
+#wellbeingContentDiv {
     width:100%;
     border-bottom-style: solid;
     border-bottom-color: lightgray;
 }
 
-#wellbeingHistoryParagraph{
+#wellbeingHistoryParagraph {
     position: relative;
     top: 1em;
 }
 
-#submitButton{
+#submitButton {
     margin-left: 0;
 }
 
-#endButtonsDiv{
+#endButtonsDiv {
     width: 100%;
 }
 
-
 .detailed_slidein {
     animation: slidein_detailed_div .7s ease-in-out forwards;
 }
@@ -361,14 +346,13 @@
     animation: slideout_detailed_div .7s ease-in-out forwards;
 }
 
-.progressBarSlidein{
+.progressBarSlidein {
     animation: slideinProgressBar .7s ease-in-out forwards;
 }
-.progressBarSlideout{
+.progressBarSlideout {
     animation: slideoutProgressBar .7s ease-in-out forwards;
 }
 
-
 @keyframes slidein_detailed_div {
     from {
         transform: translate(0, 0);
@@ -407,12 +391,12 @@
     }
 }
 
-#notCalledButton{
+#notCalledButton {
     margin-left: 0;
     margin-right: 0;
 }
 
-.flex-container-testresult{
+.flex-container-testresult {
     display: flex;
     width: 100%;
     flex-direction: row;
@@ -421,7 +405,7 @@
     align-items: center;
 }
 
-.flex-container-endbuttons{
+.flex-container-endbuttons {
     display: flex;
     width: 100%;
     flex-direction: row;
@@ -430,7 +414,7 @@
 }
 
 
-#prescribeTestBorderdiv{
+#prescribeTestBorderdiv {
     border-bottom-style: solid;
     border-bottom-color: lightgray;
 }
@@ -521,7 +505,7 @@ input[type="checkbox"] {
     font-weight: bold;
 }
 
-#notesDiv{
+#notesDiv {
     margin: 0.5em;
     display:flex;
     flex-direction: column;
@@ -530,18 +514,18 @@ input[type="checkbox"] {
     margin-bottom: 2em;
 }
 
-#notesHeaderDiv{
+#notesHeaderDiv {
     display: flex;
     justify-content: start;
     align-content: center;
     flex-direction: row;
 }
 
-#notesHeaderText{
+#notesHeaderText {
     position: relative;
     top: 10px;
 }
 
-#notes_area{
+#notes_area {
     width: 70%;
 }
\ No newline at end of file
diff --git a/src/css/interaction_props.css b/src/css/interaction_props.css
index 549454b..a12693c 100644
--- a/src/css/interaction_props.css
+++ b/src/css/interaction_props.css
@@ -7,9 +7,8 @@
 }
 
 #zoom_buttons {
-    position: center;
-    bottom: 4%;
-    left: 35%;
+    bottom: 1%;
+    left: 1%;
     background-color: transparent;
 }
 
@@ -30,7 +29,7 @@
 
 .zoom_button {
     border-radius: 50%;
-    background-color: slategray;
+    background-color: gray;
     border: 0;
     position: relative;
     color: white;
@@ -46,14 +45,14 @@
     user-select:none;
     -o-user-select:none;
 }
-.zoom_button:active{
+.zoom_button:active {
     transform: translateY(4px);
 }
 
 .zoom_button:hover {
-    background-color: white;
-    color: slategray;
-    box-shadow: 5px 5px black;
+    background-color: slategray;
+    transform: translateY(1px);
+    box-shadow: 1px 1px black;
 }
 
 .flex_div {
@@ -131,7 +130,7 @@
     right: -5%;
 }
 
-#continue_search_buttons{
+#continue_search_buttons {
     display: flex;
     flex-direction: column;
     top: 3%;
@@ -159,8 +158,8 @@
 
 #progressBarDiv {
     position: absolute;
-    top: 3%;
-    right: 3%;
+    top: 1%;
+    right: 1%;
     width: 200px;
     height: 20px;
     background-color: transparent;
@@ -196,7 +195,6 @@
     animation: showSnackbar 3s ease-in-out forwards;
 }
 
-
 @keyframes showSnackbar {
     from {
         visibility: hidden;
@@ -222,7 +220,7 @@
     text-align: center;
 }
 
-.spaceAround{
+.spaceAround {
     margin: 0.5em;
 }
 
@@ -232,7 +230,7 @@
 }
 
 
-.smallButton{
+.smallButton {
     cursor: pointer;
     display: inline;
     text-transform: lowercase;
@@ -269,7 +267,7 @@
     box-shadow: 2px 2px black;
 }
 
-#loadingScreen img{
+#loadingScreen img {
     top: 0;
     left: 0;
     right: 0;

From db37b2fecba7188fffe81892d27172181e0e88ae Mon Sep 17 00:00:00 2001
From: Marc Auberer <marc.auberer@chillibits.com>
Date: Sat, 4 Jul 2020 00:37:03 +0200
Subject: [PATCH 3/3] More styling improvements

---
 src/css/clustered_list.css    |  5 +----
 src/css/interaction_props.css | 13 +++++++------
 src/index.html                |  3 +--
 3 files changed, 9 insertions(+), 12 deletions(-)

diff --git a/src/css/clustered_list.css b/src/css/clustered_list.css
index e27d30f..a1f443c 100644
--- a/src/css/clustered_list.css
+++ b/src/css/clustered_list.css
@@ -4,10 +4,7 @@
 }
 
 .list_div {
-    padding-top: 3px;
-    padding-bottom: 3px;
-    padding-left: 20px;
-    padding-right: 20px;
+    padding: 3px 20px 4px;
 }
 
 .list_div:hover {
diff --git a/src/css/interaction_props.css b/src/css/interaction_props.css
index a12693c..4b7deaa 100644
--- a/src/css/interaction_props.css
+++ b/src/css/interaction_props.css
@@ -8,14 +8,13 @@
 
 #zoom_buttons {
     bottom: 1%;
-    left: 1%;
+    left: 50%;
     background-color: transparent;
 }
 
 #zoom_in_button {
     height: 50px;
     width: 50px;
-    margin-left: 10px;
     right: 0;
     bottom: 1%;
 }
@@ -29,7 +28,7 @@
 
 .zoom_button {
     border-radius: 50%;
-    background-color: gray;
+    background-color: #808080;
     border: 0;
     position: relative;
     color: white;
@@ -50,7 +49,7 @@
 }
 
 .zoom_button:hover {
-    background-color: slategray;
+    background-color: #909090;
     transform: translateY(1px);
     box-shadow: 1px 1px black;
 }
@@ -77,8 +76,10 @@
 #search_input {
     height: 1.5em;
     border-width: 1px;
-    border-radius: 5px;
-    margin: auto;
+    border-radius: 3px;
+    margin-left: 5px;
+    mnargin-right: 5px;
+    padding: 3px;
 }
 
 #search_div {
diff --git a/src/index.html b/src/index.html
index a567222..6d4bdee 100644
--- a/src/index.html
+++ b/src/index.html
@@ -66,7 +66,7 @@
           <input type="text" placeholder="Suche..." id="search_input">
           <button id="search_button" onclick="search_call_list();">
             <div id="search_div">
-              <img src="./assets/icons/search_magnifier.svg" style = "height:1.2em" alt="search magnifier"/>
+              <img src="./assets/icons/search_magnifier.svg" style="height:1.2em" alt="search magnifier"/>
             </div>
           </button>
         </div>
@@ -87,7 +87,6 @@
       </span>
     </div>
 
-
     <div id="zoom_buttons" class="floating_object">
       <div class="flex_div">
         <button id="zoom_in_button" class="zoom_button" onclick="zoomIn();">+</button>