#53 added custom checkboxes, added selection of all conferences

src/main/resources/public/css/conference.css

@@ -21,11 +21,29 @@
 }
 
 .form-check {
-    padding: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 31px;
+    height: 41px;
 }
 
-.form-check input {
+.checkbox {
-    margin: 10px 5px;
+    position: relative;
+    width: 13px;
+    height: 13px;
+    border-radius: 15%;
+    background: #fff;
+    border: 1px solid #aaa;
+    cursor: pointer;
+}
+
+.selected:before {
+     content: '✔';
+     position: absolute;
+     line-height: 0.8;
+     color: #09ad7e;
+     transition: all .2s;
 }
 
 .circle {

src/main/resources/public/js/conference.js

@@ -1,10 +1,25 @@
 $(document).ready(function () {
 
-    $('.conference-info').click( function() {
+    $('.data-href-js').click( function() {
         window.location = $(this).attr('data-href');
     });
 
     $('.circle').parent().click( function() {
-        $(this).children(".circle").toggleClass('circle-active');
+        $(this).children('.circle').toggleClass('circle-active');
+    });
+
+    $('.checkbox').parent().click( function() {
+        $(this).children('.checkbox').toggleClass('selected');
+    });
+
+    $('#select-all-js').click( function() {
+        var childNodes = $('.conference-item .form-check .checkbox')
+        .each(function(i, elem) {
+            if ($(this).hasClass('selected') && $('#select-all-js').hasClass('selected')) {
+                $(this).toggleClass('selected');
+            } else if (!$(this).hasClass('selected') && !$('#select-all-js').hasClass('selected')){
+                $(this).toggleClass('selected');
+            }
+        });
     });
 });

src/main/resources/templates/conferences/conferences.html

@@ -20,12 +20,12 @@
                 <div class="col-lg-12">
                     <div class="d-flex bd-highlight">
                         <div class="form-check p-1 bd-highlight">
-                            <input class="" type="checkbox"/>
+                            <div class="checkbox" id="select-all-js"></div>
                         </div>
                         <button type="button" class="btn btn-danger">Удалить</button>
-                        <button type="button" class="btn btn-success">Добавить</button>
+                        <button type="button" class="btn btn-success data-href-js" data-href="./conference">Добавить
+                        </button>
                         <div class="p-1 flex-grow-1 bd-highlight">
-
                         </div>
                     </div>
                 </div>
@@ -35,12 +35,26 @@
                     <div class="conference-list-body list-group">
                         <div class="conference-item d-flex bd-highlight list-group-item">
                             <div class="form-check p-1 bd-highlight">
-                                <input class="" type="checkbox" disabled="disabled"/>
+                                <div class="checkbox"></div>
+                            </div>
+                            <div class="form-check p-1 bd-highlight">
+                                <div class="circle"></div>
+                            </div>
+                            <div class="conference-info p-1 flex-grow-1 bd-highlight d-flex data-href-js"
+                                 data-href="./conference">
+                                <div class="conference-name p-1 flex-grow-1 bd-highlight">Конференция 1</div>
+                                <div class="conference-date p-1 bd-highlight">01.01.1990</div>
+                            </div>
+                        </div>
+                        <div class="conference-item d-flex bd-highlight list-group-item">
+                            <div class="form-check p-1 bd-highlight">
+                                <div class="checkbox"></div>
                             </div>
                             <div class="form-check p-1 bd-highlight">
                                 <div class="circle"></div>
                             </div>
-                            <div class="conference-info p-1 flex-grow-1 bd-highlight d-flex" data-href="./conference">
+                            <div class="conference-info p-1 flex-grow-1 bd-highlight d-flex data-href-js"
+                                 data-href="./conference">
                                 <div class="conference-name p-1 flex-grow-1 bd-highlight">Конференция 1</div>
                                 <div class="conference-date p-1 bd-highlight">01.01.1990</div>
                             </div>