added working indicator

[Biblio-RFID.git] / examples / selfcheck.html

diff --git a/examples/selfcheck.html b/examples/selfcheck.html
index 979ca02..efe2cff 100644 (file)
--- a/examples/selfcheck.html
+++ b/examples/selfcheck.html
@@ -8,11 +8,16 @@
 
 body, input {
        font-family: 'Roboto', sans-serif;
-       background: #eee;
-       font-size: 150%;
+       font-size: 100%;
+       /* disable selection which brings havoc on touchscreens */
+       -webkit-user-select: none;
+       -moz-user-select: -moz-none;
+       -ms-user-select: none;
+       user-select: none;
 }
 
 body {
+       background: #f0f0ff;
        margin: 2em;
 }
 
@@ -43,10 +48,19 @@ body {
 }
 
 input[type=button] {
+       display: block;
+       float: left;
+       width: 100%;
+       height: 6em;
+}
+
+.button {
        margin-top: 1em;
        display: block;
        width: 100%;
-       height: 5em;
+       position: absolute;
+       left: 0;
+       bottom: 0;
 }
 
 #timeout {
@@ -54,13 +68,23 @@ input[type=button] {
        position: absolute;
        top: 50%;
        left: 50%;
-       margin-left: -10em;
-       margin-top: -5em;
-       width: 20em;
-       height: 10em;
+       margin-left: -8em; /* width + 2 * padding / 2 */
+       margin-top: -2.5em;
+       width: 12em;
+       height: 8em;
        background: #ff8;
        padding: 2em;
        border: 0.5em solid #f00;
+       text-align: center;
+}
+
+#working {
+       display: none;
+       position: absolute;
+       top: 50%;
+       left: 50%;
+       margin-left: -250px; /* 500 / 2 */
+       margin-top: -187px;  /* 375 / 2 */
 }
 
 </style>
@@ -77,8 +101,15 @@ RFID reader not found or driver program not started.
 
 <div id="timeout">
 Timeout in <span id="tick">99</span> seconds.
+<div class="button">
 <input type=button value="continue" onClick="start_timeout();">
 </div>
+</div>
+
+
+<div id="working">
+<img src="/examples/giphy.gif">
+</div>
 
 
 <div class="page" id="start">
@@ -95,10 +126,12 @@ Ako želite posuditi knjigu, najprije stavite iskaznicu na za to previđeno mjes
 Select checkin button to return books.
 -->
 
-Ako želite vratiti knjigu, pristisnite ovaj gumb.
+Ako želite vratiti knjigu, pristisnite gumb za povrat.
 
+<div class="button">
 <input name=checkin type=button value="Povrat" onClick="change_page('checkin')">
 </div>
+</div>
 
 <div class="page" id="borrower_info">
 <!--
@@ -128,8 +161,9 @@ Ostatak: 0,00 kn
 
 Greeting from Koha.
 
+<div class="button">
 <input type="button" value="OK" onClick="change_page(circulation_type)">
-
+</div>
 
 </div>
 
@@ -149,9 +183,9 @@ Postavite knjige na predviđeno mjesto ispred monitora.
 
 Dokumenata: <span id="books_count">0</span>
 
-<div style="display: block">
-<input type="button" value="Završi" onClick="change_page('end')">
+<div class="button">
 <input class="checkout" type="button" value="Informacije o članu" onClick="change_page('borrower_info')">
+<input type="button" value="Završi" onClick="change_page('end')">
 </div>
 
 </div>