From 9182a71015eb61296d1cea1525ad46f6d583bbe3 Mon Sep 17 00:00:00 2001
From: Nightblade73 <v-zar@list.ru>
Date: Thu, 21 Mar 2019 11:30:28 +0400
Subject: [PATCH] #53 added ping style

---
 src/main/resources/public/css/conference.css    | 17 +++++++++++++++++
 src/main/resources/public/js/conference.js      |  4 ++++
 .../templates/conferences/conferences.html      | 10 ++++++----
 3 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/src/main/resources/public/css/conference.css b/src/main/resources/public/css/conference.css
index af5b7aa..8175771 100644
--- a/src/main/resources/public/css/conference.css
+++ b/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;
 }
 
 
diff --git a/src/main/resources/public/js/conference.js b/src/main/resources/public/js/conference.js
index 04eba51..2c657d2 100644
--- a/src/main/resources/public/js/conference.js
+++ b/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');
+    });
 });
diff --git a/src/main/resources/templates/conferences/conferences.html b/src/main/resources/templates/conferences/conferences.html
index 2afc7d9..857df60 100644
--- a/src/main/resources/templates/conferences/conferences.html
+++ b/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>