Kuxaaak
/
yadc
1
1
Fork 0
Code Releases Activity

New (much more stable) tag layout

Browse Source
dev
Jan Kužílek 5 years ago
parent 168446c12a
commit 000928e05d
5 changed files with 78 additions and 47 deletions
Show Stats Download Patch File Download Diff File

54
yadc/assets/css/base-types.scss
Unescape Escape View File

@ -182,7 +182,7 @@ label {
} }
form .tag-input, .tag-input form { .tag-input {
.tag-suggester { .tag-suggester {
// width: calc(100% - 50px); // width: calc(100% - 50px);
width: 100%; width: 100%;
@ -225,39 +225,49 @@ form .tag-input, .tag-input form {
} }
> a { > 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: .2em;
// margin: 2px 2px;
// padding: .4em .75em; // padding: .4em .75em;
padding: .35em .6em; padding: .35em .6em;
//text-align: center;
border-radius: 4px; border-radius: 4px;
background-color: #121212ff; background-color: #121212ff;
cursor: pointer; cursor: pointer;
> * { pointer-events: none; } > * { pointer-events: none; }
> .fa-tag {
font-size: .9em;
margin-right: 2px;
}
> .count {
// display: none;
font-size: .8em;
}
&:not(:hover) { &:not(:hover) {
> span.close { span.close {
display: none; // display: none;
opacity: 0;
} }
> span.plus { span.plus {
display: none; // display: none;
} opacity: 0;
}
&:hover {
> span.count {
display: none;
} }
} }

24
yadc/assets/js/taginput.js
Unescape Escape View File

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

2
yadc/static/all.css
View File

File diff suppressed because one or more lines are too long

24
yadc/static/all.js
Unescape Escape View File

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

21
yadc/templates/layout/base_sidebar_tags.html
Unescape Escape View File

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

Write Preview
Loading…
Cancel
Save