1
1
Fork 0

New (much more stable) tag layout

dev
Jan Kužílek 5 years ago
parent 168446c12a
commit 000928e05d

@ -182,7 +182,7 @@ label {
}
form .tag-input, .tag-input form {
.tag-input {
.tag-suggester {
// width: calc(100% - 50px);
width: 100%;
@ -225,39 +225,49 @@ form .tag-input, .tag-input form {
}
> a {
display: flex;
justify-content: space-between;
overflow: hidden;
// align-items: center;
align-items: baseline;
.content {
margin: 0 .4em;
flex-grow: 1;
flex-basis: 100%;
word-break: break-all;
word-wrap: break-word;
}
.tag-right {
}
.count {
font-size: .8em;
margin-right: .4em;
}
margin: .2em;
// margin: 2px 2px;
// padding: .4em .75em;
padding: .35em .6em;
//text-align: center;
border-radius: 4px;
background-color: #121212ff;
cursor: pointer;
> * { pointer-events: none; }
> .fa-tag {
font-size: .9em;
margin-right: 2px;
}
> .count {
// display: none;
font-size: .8em;
}
&:not(:hover) {
> span.close {
display: none;
span.close {
// display: none;
opacity: 0;
}
> span.plus {
display: none;
}
}
&:hover {
> span.count {
display: none;
span.plus {
// display: none;
opacity: 0;
}
}

@ -16,11 +16,15 @@ function create_selection_tag(tagname) { // CLEAR
tag.dataset.tagname = tagname
tag.insertAdjacentHTML("beforeend", `
<span class="fa fa-tag"></span>
<span class="name"></span>
<span class="fa fa-close close"></span>
<span class="tag-icon">
<span class="fa fa-tag"></span>
</span>
<span class="content"></span>
<span class="tag-right">
<span class="fa fa-close close"></span>
</span>
`)
tag.querySelector("span.name").textContent = tagname.replace(/_/g, ' ')
tag.querySelector("span.content").textContent = tagname.replace(/_/g, ' ')
// tag.querySelector("input[type=hidden]").setAttribute('name', `tag#${tagname}`)
return tag
}
@ -32,11 +36,15 @@ function create_suggestion_tag(tagname) { // CLEAR
tag.dataset.tagname = tagname
tag.insertAdjacentHTML("beforeend", `
<span class="fa fa-tag"></span>
<span class="name"></span>
<span class="fa fa-plus plus"></span>
<span class="tag-icon">
<span class="fa fa-tag"></span>
</span>
<span class="content"></span>
<span class="tag-right">
<span class="fa fa-plus plus"></span>
</span>
`)
tag.querySelector("span.name").textContent = tagname.replace(/_/g, ' ')
tag.querySelector("span.content").textContent = tagname.replace(/_/g, ' ')
return tag
}

File diff suppressed because one or more lines are too long

@ -73,11 +73,15 @@ function create_selection_tag(tagname) { // CLEAR
tag.dataset.tagname = tagname
tag.insertAdjacentHTML("beforeend", `
<span class="fa fa-tag"></span>
<span class="name"></span>
<span class="fa fa-close close"></span>
<span class="tag-icon">
<span class="fa fa-tag"></span>
</span>
<span class="content"></span>
<span class="tag-right">
<span class="fa fa-close close"></span>
</span>
`)
tag.querySelector("span.name").textContent = tagname.replace(/_/g, ' ')
tag.querySelector("span.content").textContent = tagname.replace(/_/g, ' ')
// tag.querySelector("input[type=hidden]").setAttribute('name', `tag#${tagname}`)
return tag
}
@ -89,11 +93,15 @@ function create_suggestion_tag(tagname) { // CLEAR
tag.dataset.tagname = tagname
tag.insertAdjacentHTML("beforeend", `
<span class="fa fa-tag"></span>
<span class="name"></span>
<span class="fa fa-plus plus"></span>
<span class="tag-icon">
<span class="fa fa-tag"></span>
</span>
<span class="content"></span>
<span class="tag-right">
<span class="fa fa-plus plus"></span>
</span>
`)
tag.querySelector("span.name").textContent = tagname.replace(/_/g, ' ')
tag.querySelector("span.content").textContent = tagname.replace(/_/g, ' ')
return tag
}

@ -1,7 +1,7 @@
{% extends 'layout/base_sidebar.html' %}
{% block sidebar %}
<article class="rating">
<!-- <article class="rating">
<h3>Rating</h3>
<form action="{{ self.search_endpoint() }}" method="get">
<ul class="rating-input">
@ -12,13 +12,13 @@
{% endfor %}
</ul>
</form>
</article>
<article class="tags tag_input">
</article> -->
<article class="tags">
<h3>Search</h3>
<div class="tag-input">
<form action="{% block search_endpoint %}{{ url_for('post.posts') }}{% endblock %}" method="get">
<div class="tag-suggester" data-inputname="tags">
<input type="text" name="tags" autocomplete="off" value="{{ request.args.get('tags', '') }}">
<input type="text" name="tags" autocomplete="off" placeholder="Search for tags" value="{{ request.args.get('tags', '') }}">
<div class="tag-container suggest-dropdown"></div>
</div>
<!-- <input type="submit" value="Search"> -->
@ -28,11 +28,16 @@
<div class="tag-container tags-inpage">
{% for tag in tags %}
<a class="taginpage" data-tagname="{{ tag.content }}" href="{{ tag.endpoint }}">
<span class="fa fa-tag"></span>
<span class="name">{{ tag.content_deser }}</span>
<span class="tag-icon">
<span class="fa fa-tag"></span>
</span>
<span class="content">{{ tag.content_deser }}</span>
<span class="count">{{ tag.count }}</span>
<span class="fa fa-plus plus"></span>
<!-- <span class="post_ids">{{ tag.post_ids }}</span> -->
<span class="tag-right">
<span class="fa fa-plus plus"></span>
{#<span class="fa fa-close close"></span>#}
</span>
{#<span class="post_ids">{{ tag.post_ids }}</span>#}
</a>
{% endfor %}
</div>

Loading…
Cancel
Save