diff --git a/src/main/resources/public/css/tasks.css b/src/main/resources/public/css/tasks.css index 2f42db5..6d18c99 100644 --- a/src/main/resources/public/css/tasks.css +++ b/src/main/resources/public/css/tasks.css @@ -1,24 +1,65 @@ -.bootstrap-tagsinput{ - +.tags-container { width: 100%; padding: .375rem .75rem; + background-color: #fff; + border: 1px solid #ccc; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + display: inline-block; + color: #555; + vertical-align: middle; + border-radius: 4px; + max-width: 100%; + line-height: 22px; + cursor: text; } -.bootstrap-tagsinput .label{ - - display: inline; - padding: .2em .6em .3em; - font-size: 75%; - font-weight: 700; - line-height: 2.5; - color: #fff; - text-align: center; - white-space: nowrap; - vertical-align: baseline; - border-radius: .25em; +.input-tag-name { + border: none; + box-shadow: none; + outline: none; + background-color: transparent; + padding: 0 6px; + margin: 0; + width: auto; + max-width: inherit; } -.bootstrap-tagsinput .label-info{ +.tag { + display: inline-block; + padding: .2em .6em .3em; + background-color: orange; + border-radius: .25em; + margin-right: 4px; + margin-bottom: 4px; + + font-size: 75%; + font-weight: 700; + line-height: 1.5; + color: #fff; +} + +.tag-name span[data-role="remove"] { + margin-left: 8px; + cursor: pointer; +} + +.tag-name span[data-role="remove"]:after { + content: "x"; + padding: 0px 2px; +} + +.tag-name input[type="text"] { + background: transparent; + border: none; + display: inline-flex; + font-size: 100%; + font-weight: 700; + line-height: 1.5; + color: #fff; + text-align: center; + white-space: nowrap; + vertical-align: baseline; + outline: none; + cursor: default; - background-color: orange; } diff --git a/src/main/resources/public/js/tasks.js b/src/main/resources/public/js/tasks.js index 6bf160c..b333c31 100644 --- a/src/main/resources/public/js/tasks.js +++ b/src/main/resources/public/js/tasks.js @@ -1,5 +1,75 @@ /*") + .attr("id", 'tags' + tagNumber) + .addClass("tag"); + // контейнер id + var idInput = $("") + .attr("type", "hidden") + .attr("id", "tags" + tagNumber + ".id") + .attr("name", "tags[" + tagNumber + "].id") + .attr("value", ''); + // контейнер текста + var conDiv = $("
") + .addClass("tag-name"); + // текст тега + var nameInput = $("") + .attr("type", "text") + .attr("id", "tags" + tagNumber + ".tagName") + .attr("name", "tags[" + tagNumber + "].tagName") + .attr("value", tagName) + .attr("readonly", "true") + .attr("size", tagName.length); + // кнопка удалить тег + var removeSpan = $("") + .attr("data-role", "remove") + .bind("click", removeTag); + + conDiv.append(nameInput); + conDiv.append(removeSpan); + newTagRow.append(idInput); + newTagRow.append(conDiv); + $(this).before(newTagRow); + } + + $(this).val(''); + } + }); + + $("span[data-role=remove]").click(removeTag); $(".task-row").mouseenter(function (event) { var taskRow = $(event.target).closest(".task-row"); $(taskRow).css("background-color", "#f8f9fa"); diff --git a/src/main/resources/templates/students/task.html b/src/main/resources/templates/students/task.html index 74ec8f6..968c7a0 100644 --- a/src/main/resources/templates/students/task.html +++ b/src/main/resources/templates/students/task.html @@ -53,8 +53,18 @@
- +
+
+ +
+ + +
+
+ +
@@ -131,7 +141,6 @@
-
\ No newline at end of file