PonyMirrors/philomena
1
0
Fork 0
mirror of https://github.com/philomena-dev/philomena.git synced 2024-11-30 14:57:59 +01:00
Code Issues Projects Releases Packages Wiki Activity

visual denoise in tag layout

Browse source
This commit is contained in:
byte[] 2020-05-21 13:32:19 -04:00
parent 97a0c12971
commit 9a67e5109a
2 changed files with 42 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
assets/css/views/tags.scss
View file

@ -54,11 +54,15 @@
// Tags // Tags
.tag { .tag {
border: 1px solid; border: 1px solid;
display: inline-block; display: inline-flex;
align-items: center;
font-size: 14px; font-size: 14px;
font-weight: bold; font-weight: bold;
margin-bottom: 5px; margin-bottom: 5px;
margin-right: 5px; margin-right: 5px;
}
.tag > span {
padding: 5px; padding: 5px;
} }
@ -67,6 +71,7 @@
} }
.tag__count { .tag__count {
background-color: $tag_normal_border;
color: $foreground-color; color: $foreground-color;
font-weight: normal; font-weight: normal;
} }
@ -87,46 +92,73 @@
background: $tag_category_rating_background; background: $tag_category_rating_background;
border-color: $tag_category_rating_border; border-color: $tag_category_rating_border;
color: $tag_category_rating_color; color: $tag_category_rating_color;
.tag__count {
background: $tag_category_rating_border;
}
} }
&[data-tag-category="spoiler"] { &[data-tag-category="spoiler"] {
background: $tag_category_spoiler_background; background: $tag_category_spoiler_background;
border-color: $tag_category_spoiler_border; border-color: $tag_category_spoiler_border;
color: $tag_category_spoiler_color; color: $tag_category_spoiler_color;
.tag__count {
background: $tag_category_spoiler_border;
}
} }
&[data-tag-category="origin"] { &[data-tag-category="origin"] {
background: $tag_category_origin_background; background: $tag_category_origin_background;
border-color: $tag_category_origin_border; border-color: $tag_category_origin_border;
color: $tag_category_origin_color; color: $tag_category_origin_color;
.tag__count {
background: $tag_category_origin_border;
}
} }
&[data-tag-category="oc"] { &[data-tag-category="oc"] {
background: $tag_category_oc_background; background: $tag_category_oc_background;
border-color: $tag_category_oc_border; border-color: $tag_category_oc_border;
color: $tag_category_oc_color; color: $tag_category_oc_color;
.tag__count {
background: $tag_category_oc_border;
}
} }
&[data-tag-category="error"] { &[data-tag-category="error"] {
background: $tag_category_error_background; background: $tag_category_error_background;
border-color: $tag_category_error_border; border-color: $tag_category_error_border;
color: $tag_category_error_color; color: $tag_category_error_color;
.tag__count {
background: $tag_category_error_border;
}
} }
&[data-tag-category="character"] { &[data-tag-category="character"] {
background: $tag_category_character_background; background: $tag_category_character_background;
border-color: $tag_category_character_border; border-color: $tag_category_character_border;
color: $tag_category_character_color; color: $tag_category_character_color;
.tag__count {
background: $tag_category_character_border;
}
} }
&[data-tag-category="content-official"] { &[data-tag-category="content-official"] {
background: $tag_category_content_official_background; background: $tag_category_content_official_background;
border-color: $tag_category_content_official_border; border-color: $tag_category_content_official_border;
color: $tag_category_content_official_color; color: $tag_category_content_official_color;
.tag__count {
background: $tag_category_content_official_border;
}
} }
&[data-tag-category="content-fanmade"] { &[data-tag-category="content-fanmade"] {
background: $tag_category_content_fanmade_background; background: $tag_category_content_fanmade_background;
border-color: $tag_category_content_fanmade_border; border-color: $tag_category_content_fanmade_border;
color: $tag_category_content_fanmade_color; color: $tag_category_content_fanmade_color;
.tag__count {
background: $tag_category_content_fanmade_border;
}
} }
&[data-tag-category="species"] { &[data-tag-category="species"] {
background: $tag_category_species_background; background: $tag_category_species_background;
border-color: $tag_category_species_border; border-color: $tag_category_species_border;
color: $tag_category_species_color; color: $tag_category_species_color;
.tag__count {
background: $tag_category_species_border;
}
} }
} }

15
lib/philomena_web/templates/tag/_tag.html.slime
View file

@ -1,19 +1,17 @@
span.tag.dropdown data-tag-category="#{@tag.category}" data-tag-id="#{@tag.id}" data-tag-name="#{@tag.name}" data-tag-slug="#{@tag.slug}" span.tag.dropdown data-tag-category="#{@tag.category}" data-tag-id="#{@tag.id}" data-tag-name="#{@tag.name}" data-tag-slug="#{@tag.slug}"
a.tag__name> href="/tags/#{@tag.slug}" title="#{@tag.short_description}" = @tag.name
span.tag__count
| (
= @tag.images_count
| )
/ The order of tag states and dropdown links is important for tags.js / The order of tag states and dropdown links is important for tags.js
span span
span.tag__state.hidden title="Unwatched" span.tag__state.hidden title="Unwatched"
| + | +
span.tag__state.hidden title="Watched" span.tag__state.hidden title="Watched"
| - | -
span.tag__state.hidden title="Spoilered" span.tag__state.hidden title="Spoilered"
| S | S
span.tag__state.hidden title="Hidden" span.tag__state.hidden title="Hidden"
| H | H
a.tag__name< href="/tags/#{@tag.slug}" title="#{@tag.short_description}" = @tag.name
span.dropdown__content span.dropdown__content
a.tag__dropdown__link.hidden data-method="delete" data-remote="true" data-tag-action="unwatch" href=Routes.tag_watch_path(@conn, :delete, @tag) Unwatch a.tag__dropdown__link.hidden data-method="delete" data-remote="true" data-tag-action="unwatch" href=Routes.tag_watch_path(@conn, :delete, @tag) Unwatch
a.tag__dropdown__link.hidden data-method="post" data-remote="true" data-tag-action="watch" href=Routes.tag_watch_path(@conn, :create, @tag) Watch a.tag__dropdown__link.hidden data-method="post" data-remote="true" data-tag-action="watch" href=Routes.tag_watch_path(@conn, :create, @tag) Watch
@ -26,3 +24,6 @@ span.tag.dropdown data-tag-category="#{@tag.category}" data-tag-id="#{@tag.id}"
a.tag__dropdown__link.hidden href="/session/new" Sign in to Watch a.tag__dropdown__link.hidden href="/session/new" Sign in to Watch
a.tag__dropdown__link.hidden href="/filters" Filter a.tag__dropdown__link.hidden href="/filters" Filter
span.tag__count
= @tag.images_count