Change checkbox 'X' and all present warning

static/allpages.css

@@ -52,4 +52,42 @@ p.highlightAbs.n-2 {
 
 .margin-top {
     margin-top: 20px;
+}
+
+input[type="checkbox"]{
+    -webkit-appearance: initial;
+    appearance: initial;
+    background: rgb(207, 207, 207);
+    width: 20px;
+    height: 20px;
+    border: 1px solid black;
+    margin-top: 3px;
+    position: relative;
+}
+input[type="checkbox"]:checked {
+    background: red;
+}
+input[type="checkbox"]:checked:after {
+    /* Heres your symbol replacement */
+    content: "X";
+    color: #fff;
+    /* The following positions my tick in the center, 
+     * but you could just overlay the entire box
+     * with a full after element with a background if you want to */
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    -webkit-transform: translate(-50%,-50%);
+    -moz-transform: translate(-50%,-50%);
+    -ms-transform: translate(-50%,-50%);
+    transform: translate(-50%,-50%);
+    /*
+     * If you want to fully change the check appearance, use the following:
+     * content: " ";
+     * width: 100%;
+     * height: 100%;
+     * background: blue;
+     * top: 0;
+     * left: 0;
+     */
 }

templates/group_teach.html

@@ -70,7 +70,7 @@
                         {% if [grade,homeroom] in confirmed %}
                         <p class="highlightAbs">--</p>
                         {% else %}
-                        <input type="checkbox" class="{{grade}}^{{homeroom}}^{{student}}">
+                        <input type="checkbox" class="tobeform {{grade}}^{{homeroom}}^{{student}}">
                         {% endif %}
                     </div>
                     {% endif %}
@@ -89,6 +89,9 @@
                     ↑ Confirmed, Sign (Period {{i}}) ↑</button>
                 {% endif %}
                 <div class="signDiv" id="sign^{{i}}" hidden="hidden">
+                    <div class="alert alert-warning" id="allPresentWarning" role="alert" hidden="hidden">
+                        <h4 class="alert-heading">請確認是否全班全到！Please check if everyone is present!</h4>
+                    </div>
                     <h3>Please Sign Below</h3>
                     <div class="forSign"><canvas id="signature_pad^{{i}}"></canvas></div>
                     <button class="btn btn-secondary" type="button" onclick="signaturePad.clear()">Clear
@@ -119,6 +122,18 @@
             $('.viewSignatureBtn').attr({ 'disabled': 'disabled' });
             $('.viewSignatureBtn').removeClass('margin-bottom');
             document.getElementById('sign^' + period).removeAttribute('hidden');
+            var cnt = 0;
+            $('.tobeform').each(function (i, obj) {
+                if ($(this).is(":checked")) {
+                    cnt++;
+                    $('#postHomeroomAbs').append('<input type="checkbox" name="' + $(this).attr('class').split(' ')[1].split('^')[1]
+                        + '" checked="checked">');
+                }
+            });
+            if (cnt == 0) {
+                $('#allPresentWarning').removeAttr('hidden');
+            }
+
             var canvas = document.getElementById("signature_pad^" + period);
             signaturePad = new SignaturePad(canvas);
             function resizeCanvas() {

templates/homeroom.html

@@ -134,6 +134,10 @@
                 Teacher Confirm</button>
             {% endif %}
             <div id="finalCheck" hidden="hidden">
+                <!-- show warning -->
+                <div class="alert alert-warning" id="allPresentWarning" role="alert" hidden="hidden">
+                    <h4 class="alert-heading">請確認是否全班全到！Please check if everyone is present!</h4>
+                </div>
                 <h3>Please Sign Below <br>
                     Period: <span id="showSignPeriod"></span> <br>
                     Subject: <span id="showSignSubjectName"></span>
@@ -243,13 +247,18 @@
             $('.afterSelButton').attr('disabled', 'disabled');
             $('#showSignPeriod').text(period);
             $('#showSignSubjectName').text(periodData[period]);
+            var cnt = 0;
             $('.tobeform').each(function (i, obj) {
                 if ($(this).attr('class').split(' ')[1].split('^')[0] == period &&
                     $(this).is(":checked")) {
+                    cnt++;
                     $('#postHomeroomAbs').append('<input type="checkbox" name="' + $(this).attr('class').split(' ')[1].split('^')[1]
                         + '" checked="checked">');
                 }
             });
+            if (cnt == 0) {
+                $('#allPresentWarning').removeAttr('hidden');
+            }
             // show signature pad
             showSignaturePad()
         }