#53 customization css styles

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

@@ -7,12 +7,28 @@
     justify-content: center;
 }
 
+.conference-item:hover {
+    background-color: #eee;
+}
+
 .form-check {
     padding: 0;
 }
 
 .form-check input {
-    margin: 10px;
+    margin: 10px 5px;
+}
+
+.conference-info:hover {
+    cursor: pointer;
+}
+
+.conference-item:hover .form-check {
+    background-color: #ddd;
+}
+
+.conference-item:hover .form-check:hover {
+    background-color: #ccc;
 }
 
 

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

@@ -1,6 +1,6 @@
 $(document).ready(function () {
 
-    $('tbody tr[data-href]').addClass('clickable').click( function() {
+    $('.conference-info').click( function() {
         window.location = $(this).attr('data-href');
     });
 });

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

@@ -23,7 +23,10 @@
                             <div class="form-check p-1 bd-highlight">
                                 <input class="" type="checkbox"/>
                             </div>
-                            <div class="conference-info p-1 flex-grow-1 bd-highlight d-flex">
+                            <div class="form-check p-1 bd-highlight">
+                                <input class="" type="checkbox"/>
+                            </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>
                                 <div class="conference-date p-1 bd-highlight">01.01.1990</div>
                             </div>