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 --> <!-- Page Content -->
<div id="content"> <div id="content">
<nav class="navbar navbar-expand-lg navbar-light bg-light"> <nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid"> <div class="container-fluid">
@ -70,35 +69,41 @@
</div> </div>
</nav> </nav>
<div class="container"> <div class="container">
<div class="container shadow border border-primary m-sm-3 rounded" style="height: 280px;"> <div class="row border border-primary rounded">
<div class="row bg-primary" style="height: 40px;"> <div class="col-sm-12 bg-primary">
<div class="m-auto text-white footer">Cek Protokol Kesehatan</div> <div class="text-white text-center">Cek Protokol Kesehatan</div>
</div> </div>
<div class="row controls" style="height: 240px;"> <div class="col-sm-12" style="min-height: 150px;">
<div id="question-container" class="mx-3 my-auto hide"> <br>
<p id="question" class="text-primary">Question</p> <div class="row justify-content-center">
<div id="answer-buttons" class="btn-grid"> <div id="question-container" class="col-sm-10 hide">
<button type="button" class="btn btn-outline-primary">Answer 1</button> <p id="question" class="text-primary">Question</p>
<button type="button" class="btn btn-outline-primary">Answer 1</button> <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>
</div> <button type="button" class="btn btn-outline-primary">Answer 1</button>
</div> <button type="button" class="btn btn-outline-primary">Answer 1</button>
<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> </div>
</div> </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> </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") setPopAtt(resultPSign, "Anda mungkin menjadi carrier COVID 19, diharapkan untuk tetap di rumah sekaligus menjaga jarak dengan keluarga")
break; break;
case "3": 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") setPopAtt(resultPSign, "Anda berpeluang besar mengalami kondisi kritis jika terkena COVID 19, mohon menahan diri selama pandemi")
break; break;
case "4": case "4":

View File

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