From cc1f5c00c5559af949c4322fcaefdd8c143e694d Mon Sep 17 00:00:00 2001
From: Nightblade73 <v-zar@list.ru>
Date: Sun, 24 Mar 2019 16:17:26 +0400
Subject: [PATCH] #53 adapted, refactor css

---
 src/main/resources/public/css/conference.css  | 48 +++++++++++++--
 .../templates/conferences/conference.html     | 61 +++++++++++--------
 .../templates/conferences/conferences.html    | 13 ++--
 3 files changed, 85 insertions(+), 37 deletions(-)

diff --git a/src/main/resources/public/css/conference.css b/src/main/resources/public/css/conference.css
index 27d9c5d..0722a19 100644
--- a/src/main/resources/public/css/conference.css
+++ b/src/main/resources/public/css/conference.css
@@ -105,6 +105,7 @@
 
 .deadline {
     margin: 0;
+    height: 40px;
 }
 
 .deadline-text {
@@ -145,12 +146,18 @@
     height: 38px;
     padding: 2px;
     cursor: pointer;
+
 }
 
 .icon-delete {
     background-color: #f44;
 }
 
+.icon-delete:hover {
+    background-color: #ff2929;
+    transition: background-color .15s ease-in-out;
+}
+
 .icon-paper {
     height: 26px;
     width: 26px;
@@ -166,15 +173,46 @@
     transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
 }
 
-#add-paper {
-    margin-left: 10px;
-}
-
 #cancel-button {
     position: relative;
     font-size: 1rem;
 }
 
-@media (min-width: 768px) {
+.paper-control button{
+    margin: 0 0 10px 10px;
+    float: right;
+}
+
+@media (max-width: 1199px) {
+    .paper-control {
+        display: block!important;
+    }
+}
+
+@media (max-width: 991px) {
+    .dates-panel {
+        display: block!important;
+    }
+
+    .date {
+        margin-bottom: 10px;
+    }
+}
+
+@media (max-width: 768px) {
+    .dashboard-elements {
+        position: relative!important;
+        display: block!important;
+        height: 100px;
+    }
+
+    .dashboard-left {
+        position: relative;
+        top: 58px;
+    }
 
+    .dashboard-right {
+        position: relative;
+        top: -39px;
+    }
 }
diff --git a/src/main/resources/templates/conferences/conference.html b/src/main/resources/templates/conferences/conference.html
index 0f2cf66..9b3f322 100644
--- a/src/main/resources/templates/conferences/conference.html
+++ b/src/main/resources/templates/conferences/conference.html
@@ -18,9 +18,9 @@
             <hr/>
             <div class="row">
                 <div class="col-lg-12">
-                    <form id="paper-form" method="post">
-                        <div class="row">
+                    <form id="conference-form" method="post">
 
+                        <div class="row">
                             <div class="col-md-7 col-sm-12">
                                 <input type="hidden" name="id"/>
 
@@ -44,14 +44,15 @@
 
                                 <div class="form-group">
                                     <label for="deadlines">Дедлайны:</label>
-                                    <div class="deadline-list form-control" id="deadlines">
-                                        <div class="row deadline grey-border">
-                                            <input class="form-control deadline-text" type="text"
+                                    <div class="deadline-list form-control list-group" id="deadlines">
+                                        <div class="deadline d-flex p-0 list-group-item list-group-horizontal">
+                                            <input class="deadline-text list-group-item" type="text"
                                                    placeholder="Текст дедлайна"/>
-                                            <input type="date"/>
-                                            <img class="icon grey-border icon-delete" src="/img/conference/delete.png"
+                                            <input class="list-group-item" type="date"/>
+                                            <img class="icon icon-delete grey-border" src="/img/conference/delete.png"
                                                  alt="Удалить"/>
                                         </div>
+
                                     </div>
                                 </div>
 
@@ -66,39 +67,45 @@
                                 <div class="form-group">
                                     <label for="dates">Дата проведения:</label>
                                     <div class="row" id="dates">
-                                        <div class="col">
-                                            <input type="date" id="date-begin"/>
-                                            -
-                                            <input type="date" id="date-end"/>
+                                        <div class="d-flex col justify-content-between dates-panel">
+                                            <div class="date">
+                                                <input class="grey-border form-control" type="date" id="date-begin"/>
+                                            </div>
+
+                                            <div class="date">
+                                                <input class="grey-border form-control" type="date" id="date-end"/>
+                                            </div>
                                         </div>
                                     </div>
                                 </div>
 
                                 <div class="form-group">
                                     <label for="members">Участники:</label>
-                                    <div class="member-list form-control" id="members">
-                                        <div class="row member grey-border">
-                                            <div class="col-5 member-name">
+                                    <div class="member-list form-control list-group" id="members">
+                                        <div class="member d-flex list-group-item justify-content-between  p-1">
+                                            <div class="member-name">
                                                 Пользователь 1
                                             </div>
-                                            <div class="col-3 member-participation">
+                                            <div class="member-participation">
                                                 очная
                                             </div>
-                                            <div class="col member-deposit">
+                                            <div class="member-deposit">
                                                 статья
                                             </div>
                                         </div>
-                                        <div class="row member grey-border">
-                                            <div class="col-5 member-name">
-                                                Пользователь 2
+
+                                        <div class="member d-flex list-group-item justify-content-between  p-1">
+                                            <div class="member-name">
+                                                Пользователь 1
                                             </div>
-                                            <div class="col-3 member-participation">
-                                                заочная
+                                            <div class="member-participation">
+                                                очная
                                             </div>
-                                            <div class="col member-deposit">
+                                            <div class="member-deposit">
                                                 доклад
                                             </div>
                                         </div>
+
                                     </div>
                                 </div>
 
@@ -111,20 +118,20 @@
 
                                 <div class="form-group">
                                     <label for="papers">Статьи:</label>
-                                    <div class="paper-list form-control" id="papers">
-                                        <div class="row paper grey-border">
-                                            <div class="paper-name grey-border">
+                                    <div class="paper-list form-control list-group" id="papers">
+                                        <div class="paper d-flex list-group-item p-0">
+                                            <a class="paper-name" href="/papers/papers">
                                                 <span>
                                                     Имя статьи
                                                 </span>
                                                 <img class="icon-paper" src="/img/conference/paper.png"/>
-                                            </div>
+                                            </a>
                                             <img class="icon grey-border icon-delete" src="/img/conference/delete.png"
                                                  alt="Удалить"/>
                                         </div>
                                     </div>
                                 </div>
-                                <div class="form-group d-flex justify-content-end">
+                                <div class="paper-control form-group d-flex justify-content-end">
                                     <button id="attach-paper" class="btn btn-primary"
                                             type="button">
                                         Прикрепить статью
diff --git a/src/main/resources/templates/conferences/conferences.html b/src/main/resources/templates/conferences/conferences.html
index ac5348f..d4c148b 100644
--- a/src/main/resources/templates/conferences/conferences.html
+++ b/src/main/resources/templates/conferences/conferences.html
@@ -20,13 +20,16 @@
 
             <div class="row dashboard">
                 <div class="col-lg-12">
-                    <div class="d-flex bd-highlight dashboard-elements align-items-center justify-content-left">
-                        <div class="form-check p-1 bd-highlight">
-                            <div class="checkbox" id="select-all-js"></div>
+                    <div class="dashboard-elements d-flex bd-highlight align-items-center justify-content-left">
+
+                        <div class="dashboard-left d-flex mr-auto">
+                            <div class="form-check p-1 bd-highlight">
+                                <div class="checkbox" id="select-all-js"></div>
+                            </div>
+                            <button type="button" class="btn btn-danger ">Удалить</button>
                         </div>
-                        <button type="button" class="btn btn-danger mr-auto">Удалить</button>
 
-                        <div class="form-row align-items-center justify-content-end">
+                        <div class="dashboard-right form-row align-items-center justify-content-end">
                             <label for="filter" class="col-auto col-form-label">Фильтровать по годам:</label>
                             <div class="year-filter" id="filter">
                                 <input type="text" class="form-control" placeholder="2000"/>