From 49597b1d6d1a78230c79ce6d1d5b36841d7290e3 Mon Sep 17 00:00:00 2001
From: wisnupramoedya <wisnupramoedya@gmail.com>
Date: Sun, 29 Mar 2020 10:36:55 +0700
Subject: [PATCH] w-2.2 fixed bug responsive

---
 prediksi/index.html | 21 ++++++++++-----------
 prediksi/script.js  |  9 +++++----
 prediksi/styles.css |  5 +++++
 3 files changed, 20 insertions(+), 15 deletions(-)

diff --git a/prediksi/index.html b/prediksi/index.html
index 3d3dbd6..c3730f3 100644
--- a/prediksi/index.html
+++ b/prediksi/index.html
@@ -58,7 +58,7 @@
         </nav>
 
         <!-- Page Content  -->
-        <div id="content">
+        <div id="content" class="bg-light">
             <nav class="navbar navbar-expand-lg navbar-light bg-light">
                 <div class="container-fluid">
 
@@ -70,7 +70,7 @@
             </nav>
             <div class="container">
               <div class="row border border-primary rounded">
-                <div class="col-sm-12 bg-primary">
+                <div class="col-sm-12 bg-primary py-1">
                   <div class="text-white text-center">Cek Protokol Kesehatan</div>
                 </div>
                 <div class="col-sm-12" style="min-height: 150px;">
@@ -79,21 +79,20 @@
                     <div id="question-container" class="col-sm-10 hide">
                       <p id="question" class="text-primary">Question</p>
                       <div id="answer-buttons" class="btn-grid">
-                        <button type="button" class="btn btn-outline-primary">Answer 1</button>
-                        <button type="button" class="btn btn-outline-primary">Answer 1</button>
-                        <button type="button" class="btn btn-outline-primary">Answer 1</button>
+                        <button type="button" class="btn btn-sm btn-outline-primary">Answer 1</button>
+                        <button type="button" class="btn btn-sm btn-outline-primary">Answer 1</button>
+                        <button type="button" class="btn btn-sm btn-outline-primary">Answer 1</button>
                       </div>
                     </div>
                   </div>
                   <br>
-                  <div id="result-container" class="row justify-content-sm-center hide">
-                    <div id="kondisi" type="button" class="btn col-sm-10 btn-outline-info">Kondisi 1:</div>
+                  <div id="result-container" class="row justify-content-center hide">
+                    <div id="kondisi" type="button" class="btn btn-outline-info btn-col" style="white-space: normal !important;">Kondisi 1:</div>
                     <div class="w-100"></div>
                     <br>
-                    <div id="prosedur-sign" class="btn-group col-sm-10" data-toggle="popover" data-trigger="focus" data-placement="top">
-                        <div id="prosedur" type="button" class="col-sm-11 btn btn-outline-info">Prosedur 1:</div>
-                        <div type="button" class="col-sm-1 btn btn-info">?</div>
-                      
+                    <div id="prosedur-sign" class="btn-group btn-col" data-toggle="popover" tabindex="0" data-trigger="focus" data-placement="top">
+                        <div id="prosedur" type="button" class="btn btn-outline-info" style="white-space: normal !important; width: 90%;">Prosedur 1:</div>
+                        <div type="button" class="btn btn-info" style="width: 10%;">?</div>
                     </div>
                   </div>
                   <br>
diff --git a/prediksi/script.js b/prediksi/script.js
index ca5dc40..e6de4a7 100644
--- a/prediksi/script.js
+++ b/prediksi/script.js
@@ -17,10 +17,11 @@ let currentKondisi, currentProsedur
 
 $(document).ready(function(){
     $('[data-toggle="popover"]').popover();
-  });
+});
 
 startButton.addEventListener('click', startTest)
 
+
 function startTest() {
     startButton.classList.add('hide')
     questionContainerElement.classList.remove('hide')
@@ -114,9 +115,9 @@ function showResult() {
         case "2":
             resultKondisi.innerHTML = 'Kondisi 2 : Kelompok kuat dengan risiko tertular'
             break;
-            case "3":
-                resultKondisi.innerHTML = 'Kondisi 3 : Kelompok rentan mengalami kritikal kondisi saat tertular'
-            break;
+        case "3":
+            resultKondisi.innerHTML = 'Kondisi 3 : Kelompok rentan mengalami kritikal kondisi saat tertular'
+        break;
         case "4":
             resultKondisi.innerHTML = 'Kondisi 4 : Kelompok kuat dengan risiko tertular sangat rendah'
             break;
diff --git a/prediksi/styles.css b/prediksi/styles.css
index 45752a9..cf0a435 100644
--- a/prediksi/styles.css
+++ b/prediksi/styles.css
@@ -3,6 +3,11 @@
     font-size: 1.0rem;
   }
 
+  .btn-col {
+    width: 90%;
+    white-space: normal;
+  }
+
   .footer {
     font-size: large;
     font-weight: 600;