ABI-Web-Apps / medtech-heart-vue

Apache License 2.0
0 stars 3 forks source link

To make the ECG work #20

Closed LinkunGao closed 2 years ago

LinkunGao commented 2 years ago
LinkunGao commented 2 years ago

Fixed the bug - the ECG and Pressure graphs are not working well on phone view. The reason for the bug happened is that: in the origin code, there are two tags in the HTML. Although we can use Vuetify to control which tag can appear in what screen size (one appear, the remaining one disappear), the change is only visual, the hidden tag doesn't really disappear. Thus, when we use getElementById in js it will always select the first tag, so it is impossible to make the ECG and Pressure graphs show on the second tag.

origin code:

 <div class="d-none d-sm-flex justify-center">
      <traces/>
</div> 
<div class="pt-5 d-flex d-sm-none justify-center"> <!--small screens -->
      <traces/>
</div>

Now I remove the second one and use dynamic CSS to control the tag position on different screen sizes.

<div class="pt-5 justify-center" :style="traceMarginBottom">
      <traces />
</div>

the :style="traceMarginBottom" is the way allow us to use dynamic CSS in vue.