romanov73/ng-tracker
1
0
Fork 0
Code Issues 18 Pull Requests 4 Projects Releases Wiki Activity

#123 fixing layout

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/main/resources/public/css/tasks.css
View File

@ -39,6 +39,42 @@
max-width: inherit; 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 { .tag {
display: inline-block; display: inline-block;
padding: .2em .6em .3em; padding: .2em .6em .3em;

22
src/main/resources/public/js/tasks.js
View File

@ -70,17 +70,17 @@ $(document).ready(function () {
}); });
$("span[data-role=remove]").click(removeTag); $("span[data-role=remove]").click(removeTag);
$(".task-row").mouseenter(function (event) { // $(".task-row").mouseenter(function (event) {
var taskRow = $(event.target).closest(".task-row"); // var taskRow = $(event.target).closest(".task-row");
$(taskRow).css("background-color", "#f8f9fa"); // $(taskRow).css("background-color", "#f8f9fa");
$(taskRow).find(".remove-task").removeClass("d-none"); // $(taskRow).find(".remove-task").removeClass("d-none");
//
}); // });
$(".task-row").mouseleave(function (event) { // $(".task-row").mouseleave(function (event) {
var taskRow = $(event.target).closest(".task-row"); // var taskRow = $(event.target).closest(".task-row");
$(taskRow).css("background-color", "white"); // $(taskRow).css("background-color", "white");
$(taskRow).closest(".task-row").find(".remove-task").addClass("d-none"); // $(taskRow).closest(".task-row").find(".remove-task").addClass("d-none");
}); // });
$('a[data-confirm]').click(function(ev) { $('a[data-confirm]').click(function(ev) {
var href = $(this).attr('href'); var href = $(this).attr('href');

12
src/main/resources/templates/students/fragments/taskLineFragment.html
View File

@ -6,15 +6,15 @@
<body> <body>
<div th:fragment="taskLine (task)" class="row text-left task-row" style="background-color: white;"> <div th:fragment="taskLine (task)" class="row text-left task-row" style="background-color: white;">
<div class="col"> <div class="col">
<span th:replace="students/fragments/taskStatusFragment :: taskStatus(taskStatus=${task.status})"/>
<a th:href="@{'task?id='+${task.id}}"> <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="h6" th:text="${task.title}"></span>
<span class="text-muted" th:text="${task.tagsString}"/> <span class="text-muted" th:text="${task.tagsString}"/>
</a> <input class="id-class" type="hidden" th:value="${task.id}"/>
<input class="id-class" type="hidden" th:value="${task.id}"/> <a class="remove-task pull-right" th:href="@{'/students/delete/'+${task.id}}"
<a class="remove-task pull-right d-none" th:href="@{'/students/delete/'+${task.id}}" data-confirm="Удалить задачу?">
data-confirm="Удалить задачу?"> <i class="fa fa-trash" aria-hidden="true"></i>
<i class="fa fa-trash" aria-hidden="true"></i> </a>
</a> </a>
</div> </div>
</div> </div>