#123 fixing layout

This commit is contained in:
ASH 2019-05-12 11:04:43 +04:00
parent a11e10dec4
commit 5b4180e685
3 changed files with 53 additions and 17 deletions

View File

@ -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;

View File

@ -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');

View File

@ -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>