Merge pull request #24 from PubInv/web-components

Issues #16 and #19

breath_plot.html

@@ -121,16 +121,16 @@ Breath Plot: COVID-19 Respiration Analysis Software
           <slot name="obs-title">OBS-TITLE NEEDED</slot>
         </label>
         <div class="vertical_alarms">
-          <div class="limit max">
+          <div class="limit-max">
             <label for="max_h">H:</label>
             <slot name="obs-max">111</slot>
-            <input class="fence" type='text'>
+            <input style="font-size: 50px; margin: 100px 30px 0 10px;" class="fence" type='text'>
 </input>
           </div>
-          <div class="limit min">
+          <div class="limit-min">
             <label for="max_l">L:</label>
             <slot name="obs-min">222</slot>
-            <input class="fence" type='text'>
+            <input style="font-size: 50px; margin: 200px 80px 0 0;"  class="fence" type='text'>
 </input>
           </div>
         </div>
@@ -216,9 +216,9 @@ Breath Plot: COVID-19 Respiration Analysis Software
         <div id="collapsingleftsidebar" >
           <div id="leftsidebar" style="display: none">
             <observable-setter id="pipmax-setter">
-              <span slot="obs-title">PIP (max):</span>
+              <span  slot="obs-title">PIP (max):</span>
               <span slot="obs-value">0</span>
-              <span slot="obs-max">40</span>
+              <span style="margin-top: 100px" slot="obs-max">40</span>
               <span slot="obs-min">0</span>
             </observable-setter>
             <observable-setter id="pipavg-setter" class="engineering_only">

css/standard.css

@@ -132,18 +132,21 @@ input:checked + .slider:before {
 
 .settings_button {
     background-color: #42c7da;
-    border: 2px;
-    border-solid: 2px;
-    border-color: red;
+    border: 2px solid;
     border-radius: 4px;
-    padding: 10px;
+    padding: 20px;
     margin: 10px;
     width: 10em;
+}
+
+#setting_mode-value, #setting_pimax-value, #setting_TV-value, #setting_RR-value, #setting_IE-value, #setting_PEEP-value {
+    font-size: 300%;
+}
 
 /*
 bg-cyan-300 border-2 border-solid border-red-300-contrast w-100% p-10 m-5 rounded-lg text-black
 */
-}
+
 
 .settings_area {
     display: flex;
@@ -162,4 +165,38 @@ bg-cyan-300 border-2 border-solid border-red-300-contrast w-100% p-10 m-5 rounde
 }
 #leftsidebar {
     width: 25%;
+    margin-top: 10%;
+}
+
+#mode-setter label, #pimax-setter label, #TV-setter label, #RR-setter label, #IE-setter label, #PEEP-setter label {
+    margin: 0 0 200px 90px;
+    font-size: 50px;
+}
+
+#controllable-mode, #controllable-pimax, #controllable-TV, #controllable-RR, #controllable-IE, #controllable-PEEP {
+    font-size: 25px;
 }
+
+#controllable-mode-dismiss, #controllable-pimax-dismiss, #controllable-TV-dismiss, #controllable-RR-dismiss, #controllable-IE-dismiss,
+    #controllable-PEEP-dismiss
+{
+   font-size: 50px;
+   margin-top: 150px;
+   margin-left: 70px;
+
+}
+
+#pipmax-setter, #pipavg-setter, #pipmin-setter, #mv-setter, #bpm-setter, #inhalationtoexhalation-setter, #fioxygen2-setter, #workofbreathing-setter {
+    text-align: center;
+    font-size: 50px;
+}
+
+#tidalvolume-setter {
+    text-align: center;
+    font-size: 30px;
+}
+
+.limit-max label {
+    margin-top: 100px;
+}
+