#53 remake of conference list without table

5 years ago · cb673d8782
parent 1364e8e84d
commit cb673d8782
3 changed files with 33 additions and 92 deletions
--- a/src/main/resources/public/css/conference.css
+++ b/src/main/resources/public/css/conference.css
@ -1,3 +1,22 @@
+.conference-list-body {
+    height: 500px;
+}
+
+.conference-item {
+    align-items: center;
+    justify-content: center;
+}
+
+.form-check {
+    padding: 0;
+}
+
+.form-check input {
+    margin: 10px;
+}
+
+
+
 .col-lg-12 a {
    position: absolute;
    font-size: smaller;
--- a/src/main/resources/public/js/conference.js
+++ b/src/main/resources/public/js/conference.js
@ -1,60 +1,6 @@
 $(document).ready(function () {
-    $('#table_id').DataTable({
-    "pageLength": 10,
-    select: {
-            style: 'multi'
-        },
-    "lengthChange": false,
-    dom: 'Bfrtip',
-    buttons: [
-                'selectAll',
-                'selectNone'
-            ],
-    language: {
-          "processing": "Подождите...",
-          "search": "Поиск:",
-          "lengthMenu": "Показать _MENU_ записей",
-          "info": "Записи с _START_ до _END_ из _TOTAL_ записей",
-          "infoEmpty": "Записи с 0 до 0 из 0 записей",
-          "infoFiltered": "(отфильтровано из _MAX_ записей)",
-          "infoPostFix": "",
-          "loadingRecords": "Загрузка записей...",
-          "zeroRecords": "Записи отсутствуют.",
-          "emptyTable": "В таблице отсутствуют данные",
-          "paginate": {
-            "first": "Первая",
-            "previous": "Предыдущая",
-            "next": "Следующая",
-            "last": "Последняя"
-          },
-          "aria": {
-            "sortAscending": ": активировать для сортировки столбца по возрастанию",
-            "sortDescending": ": активировать для сортировки столбца по убыванию"
-          },
-          "buttons": {
-                      "selectAll": "Выбрать всё",
-                      "selectNone": "Убрать выделение"
-                  }
-        },
-    columnDefs: [ {
-        orderable: false,
-        className: 'select-checkbox',
-        targets:   0
-    } ],
-    select: {
-        style:    'multi'
-    },
-    order: [[ 1, 'asc' ]]
-    });
-
-    var table = $('#table_id').DataTable();

-    $('#table_id tbody').on( 'click', 'tr', function () {
-        $(this).toggleClass('selected');
+    $('tbody tr[data-href]').addClass('clickable').click( function() {
+        window.location = $(this).attr('data-href');
    });
-
-
-//    $('tbody tr[data-href]').addClass('clickable').click( function() {
-//        window.location = $(this).attr('data-href');
-//    });
 });
--- a/src/main/resources/templates/conferences/conferences.html
+++ b/src/main/resources/templates/conferences/conferences.html
@ -3,11 +3,7 @@
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorator="default">
 <head>
-    <link rel="stylesheet" type="text/css"
-          href="https://cdn.datatables.net/v/bs4/dt-1.10.18/b-1.5.6/sl-1.3.0/datatables.min.css"/>
-
-    <script type="text/javascript"
-            src="https://cdn.datatables.net/v/bs4/dt-1.10.18/b-1.5.6/sl-1.3.0/datatables.min.js"></script>
+    <link rel="stylesheet" type="text/css" href="../css/conference.css"/>
 </head>

 <body>
@ -22,37 +18,17 @@
            <hr/>
            <div class="row">
                <div class="col-lg-12">
-                    <form id="conferences-form" method="post">
-                        <table id="table_id" class="table table-bordered table-hover dataTable">
-                            <thead>
-                            <tr>
-                                <th></th>
-                                <th>Название:</th>
-                                <th>Описание:</th>
-                                <th>Начало:</th>
-                                <th>Конец:</th>
-                            </tr>
-                            </thead>
-                            <tbody>
-                            <tr data-href="./conference">
-                                <td></td>
-                                <td>Конференция 1</td>
-                                <td>Описание 1</td>
-                                <td>01.01.2000</td>
-                                <td>02.01.2000</td>
-
-                            </tr>
-                            <tr data-href="./conference">
-                                <td></td>
-                                <td>Конференция 2</td>
-                                <td>Описание 2</td>
-                                <td>01.02.2001</td>
-                                <td>02.02.2001</td>
-                            </tr>
-
-                            </tbody>
-                        </table>
-                    </form>
+                    <div class="conference-list-body grey-border">
+                        <div class="conference-item d-flex bd-highlight">
+                            <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="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>
                </div>
            </div>
        </div>