#123 fixing layout

5 years ago · 5b4180e685
parent a11e10dec4
commit 5b4180e685
3 changed files with 53 additions and 17 deletions
--- a/src/main/resources/public/css/tasks.css
+++ b/src/main/resources/public/css/tasks.css
@ -39,6 +39,42 @@
    max-width: inherit;
 }

+.task-row{
+
+    position: relative;
+}
+
+.task-row .col:hover{
+
+    background-color: #f8f9fa;
+
+}
+
+.task-row .col > a{
+    display: block;
+    text-decoration: none;
+}
+
+.task-row .col:hover .remove-task{
+
+    visibility: visible;
+
+}
+
+.remove-task{
+    visibility: hidden;
+    position: absolute;
+    right: -20px;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    padding: 0 20px;
+}
+
+.remove-task:hover{
+
+    background-color: #ebebeb;
+}
+
 .tag {
    display: inline-block;
    padding: .2em .6em .3em;
--- a/src/main/resources/public/js/tasks.js
+++ b/src/main/resources/public/js/tasks.js
@ -70,17 +70,17 @@ $(document).ready(function () {
    });

    $("span[data-role=remove]").click(removeTag);
-    $(".task-row").mouseenter(function (event) {
-        var taskRow = $(event.target).closest(".task-row");
-        $(taskRow).css("background-color", "#f8f9fa");
-        $(taskRow).find(".remove-task").removeClass("d-none");
-
-    });
-    $(".task-row").mouseleave(function (event) {
-        var taskRow = $(event.target).closest(".task-row");
-        $(taskRow).css("background-color", "white");
-        $(taskRow).closest(".task-row").find(".remove-task").addClass("d-none");
-    });
+//    $(".task-row").mouseenter(function (event) {
+//        var taskRow = $(event.target).closest(".task-row");
+//        $(taskRow).css("background-color", "#f8f9fa");
+//        $(taskRow).find(".remove-task").removeClass("d-none");
+//
+//    });
+//    $(".task-row").mouseleave(function (event) {
+//        var taskRow = $(event.target).closest(".task-row");
+//        $(taskRow).css("background-color", "white");
+//        $(taskRow).closest(".task-row").find(".remove-task").addClass("d-none");
+//    });

    $('a[data-confirm]').click(function(ev) {
        var href = $(this).attr('href');
--- a/src/main/resources/templates/students/fragments/taskLineFragment.html
+++ b/src/main/resources/templates/students/fragments/taskLineFragment.html
@ -6,15 +6,15 @@
 <body>
 <div th:fragment="taskLine (task)" class="row text-left task-row" style="background-color: white;">
    <div class="col">
-        <span th:replace="students/fragments/taskStatusFragment :: taskStatus(taskStatus=${task.status})"/>
        <a th:href="@{'task?id='+${task.id}}">
+            <span th:replace="students/fragments/taskStatusFragment :: taskStatus(taskStatus=${task.status})"/>
            <span class="h6" th:text="${task.title}"></span>
            <span class="text-muted" th:text="${task.tagsString}"/>
-        </a>
-        <input class="id-class" type="hidden" th:value="${task.id}"/>
-        <a class="remove-task pull-right d-none" th:href="@{'/students/delete/'+${task.id}}"
-           data-confirm="Удалить задачу?">
-            <i class="fa fa-trash" aria-hidden="true"></i>
+            <input class="id-class" type="hidden" th:value="${task.id}"/>
+            <a class="remove-task pull-right" th:href="@{'/students/delete/'+${task.id}}"
+               data-confirm="Удалить задачу?">
+                <i class="fa fa-trash" aria-hidden="true"></i>
+            </a>
        </a>
    </div>
 </div>