#53 added ping style

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

@@ -28,6 +28,19 @@
     margin: 10px 5px;
 }
 
+.circle {
+    width: 13px;
+    height: 13px;
+    margin: 10px 5px;
+    border-radius: 50%;
+    background: #fff;
+    border: 1px solid #fed136;
+}
+
+.circle-active {
+    background: #ffa129;
+}
+
 .conference-info:hover {
     cursor: pointer;
 }
@@ -38,6 +51,10 @@
 
 .conference-item:hover .form-check:hover {
     background-color: #ccc;
+    cursor: pointer;
+}
+.conference-item:hover .form-check:hover .circle {
+    background: #ffdc64;
 }
 
 

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

@@ -3,4 +3,8 @@ $(document).ready(function () {
     $('.conference-info').click( function() {
         window.location = $(this).attr('data-href');
     });
+
+    $('.circle').parent().click( function() {
+        $(this).children(".circle").toggleClass('circle-active');
+    });
 });

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

@@ -24,7 +24,9 @@
                         </div>
                         <button type="button" class="btn btn-danger">Удалить</button>
                         <button type="button" class="btn btn-success">Добавить</button>
+                        <div class="p-1 flex-grow-1 bd-highlight">
 
+                        </div>
                     </div>
                 </div>
             </div>
@@ -33,10 +35,10 @@
                     <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"/>
+                                <input class="" type="checkbox" disabled="disabled"/>
                             </div>
                             <div class="form-check p-1 bd-highlight">
-                                <input class="" type="checkbox"/>
+                                <div class="circle"></div>
                             </div>
                             <div class="conference-info p-1 flex-grow-1 bd-highlight d-flex" data-href="./conference">
                                 <div class="conference-name p-1 flex-grow-1 bd-highlight">Конференция 1</div>
@@ -48,11 +50,11 @@
             </div>
             <div class="row justify-content-end">
                 <ul class="pagination">
-                    <li class="page-item disabled"><a class="page-link" href="#">Previous</a></li>
+                    <li class="page-item disabled"><a class="page-link" href="#">Предыдущая</a></li>
                     <li class="page-item active"><a class="page-link" href="#">1</a></li>
                     <li class="page-item"><a class="page-link" href="#">2</a></li>
                     <li class="page-item"><a class="page-link" href="#">3</a></li>
-                    <li class="page-item"><a class="page-link" href="#">Next</a></li>
+                    <li class="page-item"><a class="page-link" href="#">Следующая</a></li>
                 </ul>
             </div>
         </div>