From fd22aecd22b340eab42c0947e2802889f6c802b7 Mon Sep 17 00:00:00 2001
From: Nightblade73 <v-zar@list.ru>
Date: Mon, 18 Mar 2019 18:41:59 +0400
Subject: [PATCH] #53 added supporting bootstrap style

---
 src/main/resources/public/css/conference.css  | 47 +++++++++----------
 src/main/resources/public/js/conference.js    |  8 +++-
 .../templates/conferences/conferences.html    | 28 ++++++-----
 3 files changed, 47 insertions(+), 36 deletions(-)
diff --git a/src/main/resources/public/css/conference.css b/src/main/resources/public/css/conference.css
index 06d8041..630e31f 100644
--- a/src/main/resources/public/css/conference.css
+++ b/src/main/resources/public/css/conference.css
@@ -1,94 +1,93 @@
-.col-lg-12 a{
+.col-lg-12 a {
     position: absolute;
     font-size: smaller;
 }
 
-.col-lg-12 a img{
+.col-lg-12 a img {
     width: 36px;
     height: 33px;
 }
 
-.form-group textarea{
+.form-group textarea {
     min-height: 206px;
     max-height: 463px;
 }
 
 
-.deadline-list{
+.deadline-list {
     height: 200px;
     padding: 0px;
     overflow-y: scroll;
 }
 
-.deadline{
+.deadline {
     margin: 0;
 }
 
-.deadline-text{
+.deadline-text {
     flex: 1;
 }
 
-.member-list{
+.member-list {
     height: 200px;
     padding: 0px;
     overflow-y: scroll;
 }
 
-.member{
+.member {
     margin: 0;
 }
 
-.paper-list{
+.paper-list {
     height: 200px;
     padding: 0px;
     overflow-y: scroll;
 }
 
-.paper{
+.paper {
     margin: 0;
 }
 
-.paper-name{
+.paper-name {
     flex: 1;
 }
 
-.paper-name span{
+.paper-name span {
     margin: 6px 15px;
     display: inline-block;
 }
 
-.icon{
+.icon {
     width: 38px;
     height: 38px;
     padding: 2px;
     cursor: pointer;
 }
 
-.icon-delete{
+.icon-delete {
     background-color: #f44;
 }
 
-.icon-paper{
-     height: 26px;
-     width: 26px;
-     float: right;
-     margin: 5px;
+.icon-paper {
+    height: 26px;
+    width: 26px;
+    float: right;
+    margin: 5px;
 }
 
-.grey-border{
+.grey-border {
     color: #495057;
     background-clip: padding-box;
     border: 1px solid #ced4da;
     border-radius: .25rem;
-    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
+    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
 }
 
-#add-paper{
+#add-paper {
     margin-left: 10px;
 }
 
-#cancel-button{
+#cancel-button {
     position: relative;
     font-size: 1rem;
 }
-
diff --git a/src/main/resources/public/js/conference.js b/src/main/resources/public/js/conference.js
index e21cb7a..399cde9 100644
--- a/src/main/resources/public/js/conference.js
+++ b/src/main/resources/public/js/conference.js
@@ -1,3 +1,9 @@
 $(document).ready(function () {
-    $('#table_id').dataTable();
+    $('#table_id').dataTable({
+    "pageLength": 10,
+    select: {
+            style: 'multi'
+        },
+    "lengthChange": false
+    });
 });
diff --git a/src/main/resources/templates/conferences/conferences.html b/src/main/resources/templates/conferences/conferences.html
index d4c171b..1a024fe 100644
--- a/src/main/resources/templates/conferences/conferences.html
+++ b/src/main/resources/templates/conferences/conferences.html
@@ -3,8 +3,8 @@
       xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
       layout:decorator="default">
 <head>
-    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css"/>
-    <script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
+    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4/dt-1.10.18/datatables.min.css"/>
+    <script type="text/javascript" src="https://cdn.datatables.net/v/bs4/dt-1.10.18/datatables.min.js"></script>
 </head>
 
 <body>
@@ -25,24 +25,30 @@
             <hr/>
             <div class="row">
                 <div class="col-lg-12">
-                    <form id="paper-form" method="post">
-
-                        <table id="table_id" class="display">
+                    <form id="conferences-form" method="post">
+                        <table id="table_id" class="table table-bordered table-hover dataTable">
                             <thead>
                             <tr>
-                                <th>Column 1</th>
-                                <th>Column 2</th>
+                                <th>Название:</th>
+                                <th>Описание:</th>
+                                <th>Начало:</th>
+                                <th>Конец:</th>
                             </tr>
                             </thead>
                             <tbody>
                             <tr>
-                                <td>Row 1 Data 1</td>
-                                <td>Row 1 Data 2</td>
+                                <td>Конференция 1</td>
+                                <td>Описание 1</td>
+                                <td>01.01.2000</td>
+                                <td>02.01.2000</td>
                             </tr>
                             <tr>
-                                <td>Row 2 Data 1</td>
-                                <td>Row 2 Data 2</td>
+                                <td>Конференция 2</td>
+                                <td>Описание 2</td>
+                                <td>01.02.2001</td>
+                                <td>02.02.2001</td>
                             </tr>
+
                             </tbody>
                         </table>
                     </form>

Column 1	Column 2	Название:	Описание:	Начало:	Конец:
Row 1 Data 1	Row 1 Data 2	Конференция 1	Описание 1	01.01.2000	02.01.2000
Row 2 Data 1	Row 2 Data 2	Конференция 2	Описание 2	01.02.2001	02.02.2001