changing display blocks

Author: perki

dr-controler.js

@@ -15,13 +15,13 @@ window.onload = (event) => {
 
 async function stateChange(state) {
   if (state === 'loggedIN') {
-    document.getElementById('please-login').style.visibility = 'hidden';
-    document.getElementById('data-view').style.visibility = 'visible';
+    document.getElementById('please-login').style.display = 'none';
+    document.getElementById('data-view').style.display = 'block';
     setQuestionnaries();
 
   } else {
-    document.getElementById('please-login').style.visibility = 'visible';
-    document.getElementById('data-view').style.visibility = 'hidden';
+    document.getElementById('please-login').style.display = 'block';
+    document.getElementById('data-view').style.display = 'none';
   }
 }
 
@@ -71,7 +71,7 @@ async function showQuestionnary(questionaryId) {
   highlightQuestionnaryButton(questionaryId);
   console.log('## showQuestionnary', questionaryId);
   if (questionaryId == null) {
-    document.getElementById('questionnary-view').style.visibility = 'hidden';
+    document.getElementById('questionnary-view').style.display = 'none';
     return;
   }
 
@@ -80,7 +80,7 @@ async function showQuestionnary(questionaryId) {
   document.getElementById('button-download').onclick = () => {
     exportCSVFile(headers, patientsData, 'patients');
   }
-  document.getElementById('questionnary-view').style.visibility = 'visible';
+  document.getElementById('questionnary-view').style.display = 'block';
 }
 
 const rowItems = ['name', 'surname', 'nationality'];

dr.html

@@ -27,15 +27,15 @@ <h2 class="card-title">Welcome</h2>
           Dear Dr, from this page, you can visualize the data from patients and share an invitation to fill your questionnary.
         </span>
         <br>
-        <span id="welcome-message-viewer" style="visibility: hidden;"> Welcome message
+        <span id="welcome-message-viewer" style="display: none;"> Welcome message
         </span>
         <br>
         <span id="please-login">
           Please login.
         </span>
       </div>
     </div>
-    <div class="card" id="data-view" style="visibility: hidden;">
+    <div class="card" id="data-view" style="display: none;">
       <table id='questionnary-table' class="table">
         <thead>
           <th> Select a questionnary:</th>

patient-home-controler.js

@@ -15,12 +15,12 @@ window.onload = (event) => {
 
 function stateChange(state) {
   if (state === 'loggedIN') {
-    document.getElementById('please-login').style.visibility = 'hidden';
-    document.getElementById('card-content').style.visibility = 'visible';
+    document.getElementById('please-login').style.display = 'none';
+    document.getElementById('card-content').style.display = 'block';
     refresh();
   } else {
-    document.getElementById('please-login').style.visibility = 'visible';
-    document.getElementById('card-content').style.visibility = 'hidden';
+    document.getElementById('please-login').style.display = 'block';
+    document.getElementById('card-content').style.display = 'none';
   }
 }
 

patient.html

@@ -27,15 +27,15 @@ <h2 class="card-title">Welcome</h2>
           Dear Madam, from this page you will answer a questionnary to be shared with your Doctor.
         </span>
         <br>
-        <span id="welcome-message-viewer" style="visibility: hidden;"> Welcome message
+        <span id="welcome-message-viewer" style="display: none;"> Welcome message
         </span>
         <br>
         <span id="please-login">
           Please login.
         </span>
       </div>
     </div>
-    <div class="card" id="card-content" style="visibility: hidden;">
+    <div class="card" id="card-content" style="display: none;">
       <h2>Questionnaries</h2>
       <table id='questionnary-table' class="table">
         <thead>