tab index and final tags

master
km0 3 years ago
parent 8e47b87f2b
commit 56158f681e

@ -46,6 +46,7 @@ input[type="submit"] {
transform: translate(0); transform: translate(0);
transition: transform 0.4s ease-out; transition: transform 0.4s ease-out;
text-transform: capitalize; text-transform: capitalize;
user-select: none;
} }
.tag:hover { .tag:hover {
@ -117,3 +118,23 @@ input[type="submit"] {
.baloon .contents { .baloon .contents {
margin: 0; margin: 0;
} }
.baloon .category {
color: #fcc;
}
.category::after {
content: ", ";
}
/* .category::before {
content: "#";
} */
.category:first-of-type::before {
content: " ";
}
.category:last-of-type::after {
content: "";
}

@ -189,15 +189,18 @@ function createBaloon(text, username, tags) {
let baloon = document.createElement("div"); let baloon = document.createElement("div");
baloon.classList.add("baloon"); baloon.classList.add("baloon");
let contents;
let author;
if (text) { if (text) {
let contents = document.createElement("p"); contents = document.createElement("p");
contents.classList.add("contents"); contents.classList.add("contents");
contents.innerHTML = text; contents.innerHTML = text;
baloon.appendChild(contents); baloon.appendChild(contents);
} }
if (username) { if (username) {
let author = document.createElement("span"); author = document.createElement("span");
author.classList.add("author"); author.classList.add("author");
author.innerHTML = username; author.innerHTML = username;
baloon.appendChild(author); baloon.appendChild(author);
@ -205,6 +208,11 @@ function createBaloon(text, username, tags) {
if (tags) { if (tags) {
tags.forEach((tag) => { tags.forEach((tag) => {
let category = document.createElement("span");
category.innerHTML = tag;
category.classList.add("category");
if (text) contents.appendChild(category);
tag = tag.replaceAll(" ", "-"); tag = tag.replaceAll(" ", "-");
baloon.classList.add(tag); baloon.classList.add(tag);
}); });
@ -219,6 +227,7 @@ function createTag(tag) {
let chip = document.createElement("li"); let chip = document.createElement("li");
chip.classList.add("tag"); chip.classList.add("tag");
chip.setAttribute("data-tag", tag); chip.setAttribute("data-tag", tag);
chip.setAttribute("tabindex", 0);
chip.innerHTML = tag; chip.innerHTML = tag;
return chip; return chip;
} }

Loading…
Cancel
Save