1
1
Fork 0

Tag category colors

dev
Jan Kužílek 5 years ago
parent 0698de34ee
commit ef1484e915

@ -280,6 +280,9 @@ label {
word-break: break-word; //chromium word-break: break-word; //chromium
overflow-wrap: anywhere; //just new ff overflow-wrap: anywhere; //just new ff
} }
@each $cat, $color in $tag-category-colors {
&[data-tagcat="#{$cat}"] { .content { color: $color; } }
}
.tag-icon, .tag-right { .tag-icon, .tag-right {
align-self: center; align-self: center;

@ -11,15 +11,22 @@ $ahover-color: #909090;
$notif-bg-color: #000c; $notif-bg-color: #000c;
$notif-bg-error: #500c; $notif-bg-error: #500c;
$bp-desktop: ">=desktop"; $tag-category-colors: (
$bp-tablet: "<desktop"; "general": unset,
"style": #ff2020,
"circle": #0bb,
"artist": #cccc00,
"character": #0a0,
"copyright": #d0d,
);
$main-wrap-padding: 8px; $main-wrap-padding: 8px;
// $sidepanel-width: 14rem; // $sidepanel-width: 14rem;
$sidepanel-width: 18rem; $sidepanel-width: 18rem;
$max-content-width: 1300px; $max-content-width: 1300px;
$bp-desktop: ">=desktop";
$bp-tablet: "<desktop";
@import "base-types"; @import "base-types";
@import "header"; @import "header";
@import "default"; @import "default";

@ -1,7 +1,8 @@
function create_selection_tag(tagname) { // CLEAR function create_selection_tag(tagname, tagcat) { // CLEAR
let tag = document.createElement("a") let tag = document.createElement("a")
tag.classList.add("tagselected") tag.classList.add("tagselected")
tag.dataset.tagname = tagname tag.dataset.tagname = tagname
tag.dataset.tagcat = tagcat
tag.insertAdjacentHTML("beforeend", ` tag.insertAdjacentHTML("beforeend", `
<span class="tag-icon"> <span class="tag-icon">
@ -18,10 +19,11 @@ function create_selection_tag(tagname) { // CLEAR
} }
// Suggestions // Suggestions
function create_suggestion_tag(tagname) { // CLEAR function create_suggestion_tag(tagname, tagcat) { // CLEAR
let tag = document.createElement("a") let tag = document.createElement("a")
tag.classList.add("tagsuggestion") tag.classList.add("tagsuggestion")
tag.dataset.tagname = tagname tag.dataset.tagname = tagname
tag.dataset.tagcat = tagcat
tag.insertAdjacentHTML("beforeend", ` tag.insertAdjacentHTML("beforeend", `
<span class="tag-icon"> <span class="tag-icon">
@ -74,7 +76,7 @@ taginputs.forEach(function (tinput) {
hid_input.value = val.join(' ').trim() hid_input.value = val.join(' ').trim()
} }
function add_selected(tagname) { // 2 references function add_selected(tagname, tagcat) { // 2 references
let predf = predef let predf = predef
let sel = selected let sel = selected
@ -85,7 +87,7 @@ taginputs.forEach(function (tinput) {
} }
} }
let newtag = create_selection_tag(tagname) let newtag = create_selection_tag(tagname, tagcat)
newtag.addEventListener('click', (event) => { newtag.addEventListener('click', (event) => {
remove_selected(event.target.dataset.tagname) remove_selected(event.target.dataset.tagname)
event.preventDefault() event.preventDefault()
@ -116,7 +118,7 @@ taginputs.forEach(function (tinput) {
if (predef) { if (predef) {
predef.querySelectorAll("a").forEach(element => { predef.querySelectorAll("a").forEach(element => {
element.addEventListener('click', (event) => { element.addEventListener('click', (event) => {
add_selected(event.target.dataset.tagname) add_selected(event.target.dataset.tagname, event.target.dataset.tagcat)
event.preventDefault() event.preventDefault()
setTimeout(() => suggest_input.focus(), 2) setTimeout(() => suggest_input.focus(), 2)
@ -150,7 +152,7 @@ taginputs.forEach(function (tinput) {
suggest_input.removeAttribute('value') // Disable prefill by browser suggest_input.removeAttribute('value') // Disable prefill by browser
function select_suggestion(tagelement) { function select_suggestion(tagelement) {
add_selected(tagelement.dataset.tagname) add_selected(tagelement.dataset.tagname, tagelement.dataset.tagcat)
suggest_input.value = '' suggest_input.value = ''
render_suggestions([]) render_suggestions([])
@ -171,7 +173,7 @@ taginputs.forEach(function (tinput) {
if (i > 5) return if (i > 5) return
if (tagnames.includes(el.content)) return if (tagnames.includes(el.content)) return
let sugtag = create_suggestion_tag(el.content) let sugtag = create_suggestion_tag(el.content, el.category.name)
sugtag.addEventListener('click', (event) => { sugtag.addEventListener('click', (event) => {
select_suggestion(event.target) select_suggestion(event.target)

@ -20,7 +20,9 @@ def posts(page):
def tags_prepare(posts): def tags_prepare(posts):
tags = db.session.query(Tag, func.count(Post.id), func.array_agg(Post.id)).join(Tag.posts).filter(Post.id.in_([p.id for p in posts])).group_by(Tag.id).all() tags = db.session.query(Tag, func.count(Post.id), func.array_agg(Post.id)).join(Tag.posts).filter(Post.id.in_([p.id for p in posts])).group_by(Tag.id).all()
tags = [tag for tag, tag.count, tag.post_ids in tags] tags = [tag for tag, tag.count, tag.post_ids in tags]
tags.sort(key=lambda x: (x.category.value, x.content) ) tags.sort(key=lambda x: x.content)
tags.sort(key=lambda x: x.count, reverse=True)
tags.sort(key=lambda x: x.category.value, reverse=True)
return tags return tags
# PARSING ARGUMENTS # PARSING ARGUMENTS
@ -57,7 +59,7 @@ def posts(page):
'post/index.html', 'post/index.html',
posts=posts, posts=posts,
tags=tags, tags=tags,
sel_tags=[tag for tag in tags if tag.content in f_tags] sel_tags=[tag for tag in tags if tag.content in f_tags] or Tag.query.filter(Tag.content.in_(f_tags))
) )
@bp.route('/show/<int:id>') @bp.route('/show/<int:id>')

File diff suppressed because one or more lines are too long

@ -86,10 +86,11 @@ document.getElementById("user-menu").addEventListener('click', (ev) => {
drop.classList.remove("_drop") drop.classList.remove("_drop")
} }
}) })
function create_selection_tag(tagname) { // CLEAR function create_selection_tag(tagname, tagcat) { // CLEAR
let tag = document.createElement("a") let tag = document.createElement("a")
tag.classList.add("tagselected") tag.classList.add("tagselected")
tag.dataset.tagname = tagname tag.dataset.tagname = tagname
tag.dataset.tagcat = tagcat
tag.insertAdjacentHTML("beforeend", ` tag.insertAdjacentHTML("beforeend", `
<span class="tag-icon"> <span class="tag-icon">
@ -106,10 +107,11 @@ function create_selection_tag(tagname) { // CLEAR
} }
// Suggestions // Suggestions
function create_suggestion_tag(tagname) { // CLEAR function create_suggestion_tag(tagname, tagcat) { // CLEAR
let tag = document.createElement("a") let tag = document.createElement("a")
tag.classList.add("tagsuggestion") tag.classList.add("tagsuggestion")
tag.dataset.tagname = tagname tag.dataset.tagname = tagname
tag.dataset.tagcat = tagcat
tag.insertAdjacentHTML("beforeend", ` tag.insertAdjacentHTML("beforeend", `
<span class="tag-icon"> <span class="tag-icon">
@ -162,7 +164,7 @@ taginputs.forEach(function (tinput) {
hid_input.value = val.join(' ').trim() hid_input.value = val.join(' ').trim()
} }
function add_selected(tagname) { // 2 references function add_selected(tagname, tagcat) { // 2 references
let predf = predef let predf = predef
let sel = selected let sel = selected
@ -173,7 +175,7 @@ taginputs.forEach(function (tinput) {
} }
} }
let newtag = create_selection_tag(tagname) let newtag = create_selection_tag(tagname, tagcat)
newtag.addEventListener('click', (event) => { newtag.addEventListener('click', (event) => {
remove_selected(event.target.dataset.tagname) remove_selected(event.target.dataset.tagname)
event.preventDefault() event.preventDefault()
@ -204,7 +206,7 @@ taginputs.forEach(function (tinput) {
if (predef) { if (predef) {
predef.querySelectorAll("a").forEach(element => { predef.querySelectorAll("a").forEach(element => {
element.addEventListener('click', (event) => { element.addEventListener('click', (event) => {
add_selected(event.target.dataset.tagname) add_selected(event.target.dataset.tagname, event.target.dataset.tagcat)
event.preventDefault() event.preventDefault()
setTimeout(() => suggest_input.focus(), 2) setTimeout(() => suggest_input.focus(), 2)
@ -238,7 +240,7 @@ taginputs.forEach(function (tinput) {
suggest_input.removeAttribute('value') // Disable prefill by browser suggest_input.removeAttribute('value') // Disable prefill by browser
function select_suggestion(tagelement) { function select_suggestion(tagelement) {
add_selected(tagelement.dataset.tagname) add_selected(tagelement.dataset.tagname, tagelement.dataset.tagcat)
suggest_input.value = '' suggest_input.value = ''
render_suggestions([]) render_suggestions([])
@ -259,7 +261,7 @@ taginputs.forEach(function (tinput) {
if (i > 5) return if (i > 5) return
if (tagnames.includes(el.content)) return if (tagnames.includes(el.content)) return
let sugtag = create_suggestion_tag(el.content) let sugtag = create_suggestion_tag(el.content, el.category.name)
sugtag.addEventListener('click', (event) => { sugtag.addEventListener('click', (event) => {
select_suggestion(event.target) select_suggestion(event.target)

@ -28,7 +28,7 @@
<!-- <h3>Tags</h3> --> <!-- <h3>Tags</h3> -->
<div class="tag-container tags-selected"> <div class="tag-container tags-selected">
{% for tag in sel_tags %} {% for tag in sel_tags %}
<a class="tagselected" data-tagname="{{ tag.content }}" href="{{ utils.tag_endpoint(tag.content) }}"> <a class="tagselected" data-tagname="{{ tag.content }}" data-tagcat="{{ tag.category.name }}" href="{{ utils.tag_endpoint(tag.content) }}">
<span class="tag-icon"> <span class="tag-icon">
<span class="fa fa-tag"></span> <span class="fa fa-tag"></span>
</span> </span>
@ -43,7 +43,7 @@
</div> </div>
<div class="tag-container tags-inpage"> <div class="tag-container tags-inpage">
{% for tag in tags %} {% for tag in tags %}
<a class="taginpage{%if tag in sel_tags%} tag_hide{%endif%}" data-tagname="{{ tag.content }}" href="{{ utils.tag_endpoint(tag.content) }}"> <a class="taginpage{%if tag in sel_tags%} tag_hide{%endif%}" data-tagname="{{ tag.content }}" data-tagcat="{{ tag.category.name }}" href="{{ utils.tag_endpoint(tag.content) }}">
<span class="tag-icon"> <span class="tag-icon">
<span class="fa fa-tag"></span> <span class="fa fa-tag"></span>
</span> </span>

Loading…
Cancel
Save