2.1 Responsive still bug

master
wisnupramoedya 2020-03-28 23:52:52 +07:00
parent 280ea233d4
commit fec18da750
3 changed files with 34 additions and 29 deletions

View File

@ -59,7 +59,6 @@
<!-- Page Content -->
<div id="content">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
@ -70,35 +69,41 @@
</div>
</nav>
<div class="container">
<div class="container shadow border border-primary m-sm-3 rounded" style="height: 280px;">
<div class="row bg-primary" style="height: 40px;">
<div class="m-auto text-white footer">Cek Protokol Kesehatan</div>
</div>
<div class="row controls" style="height: 240px;">
<div id="question-container" class="mx-3 my-auto 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>
</div>
</div>
<div>
<div id="result-container" class="justify-content-center hide">
<div id="kondisi" class="btn btn-outline-info">Kondisi 1:</div>
<br><br>
<div id="prosedur-sign" class="btn-group" data-toggle="popover" data-placement="top">
<button id="prosedur" type="button" class="btn btn-outline-info">Prosedur 1:</button>
<button type="button" class="btn btn-info">?</button>
</div>
</div>
<br>
<div class="row justify-content-center">
<button id="start-btn" type="button" class="justify-content-center btn btn-primary">Start Test</button>
</div>
<div class="row border border-primary rounded">
<div class="col-sm-12 bg-primary">
<div class="text-white text-center">Cek Protokol Kesehatan</div>
</div>
<div class="col-sm-12" style="min-height: 150px;">
<br>
<div class="row justify-content-center">
<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>
</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 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>
</div>
<br>
<div class="row justify-content-center justify-content-end">
<button id="start-btn" type="button" class="justify-content-center btn btn-primary">Start Test</button>
</div>
<br>
</div>
</div>
</div>
</div>
</div>

View File

@ -135,7 +135,7 @@ function showResult() {
setPopAtt(resultPSign, "Anda mungkin menjadi carrier COVID 19, diharapkan untuk tetap di rumah sekaligus menjaga jarak dengan keluarga")
break;
case "3":
resultProsedur.innerHTML = 'Prosedur 3 : Direkomendasikan untuk di rumah selama pandemi berlangsung atau menunggu pandemi dapat diatur'
resultProsedur.innerHTML = 'Prosedur 3 : Direkomendasikan untuk selalu di rumah selama pandemi berlangsung'
setPopAtt(resultPSign, "Anda berpeluang besar mengalami kondisi kritis jika terkena COVID 19, mohon menahan diri selama pandemi")
break;
case "4":

View File

@ -16,7 +16,7 @@
.btn-grid {
display: grid;
grid-template-columns: repeat(2, auto);
grid-template-columns: repeat(1, auto);
gap: 10px;
}