PonyMirrors/philomena
1
0
Fork 0
mirror of https://github.com/philomena-dev/philomena.git synced 2024-11-27 13:47:58 +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
.tag {
border: 1px solid;
display: inline-block;
display: inline-flex;
align-items: center;
font-size: 14px;
font-weight: bold;
margin-bottom: 5px;
margin-right: 5px;
}
.tag > span {
padding: 5px;
}
@ -67,6 +71,7 @@
}
.tag__count {
background-color: $tag_normal_border;
color: $foreground-color;
font-weight: normal;
}
@ -87,46 +92,73 @@
background: $tag_category_rating_background;
border-color: $tag_category_rating_border;
color: $tag_category_rating_color;
.tag__count {
background: $tag_category_rating_border;
}
}
&[data-tag-category="spoiler"] {
background: $tag_category_spoiler_background;
border-color: $tag_category_spoiler_border;
color: $tag_category_spoiler_color;
.tag__count {
background: $tag_category_spoiler_border;
}
}
&[data-tag-category="origin"] {
background: $tag_category_origin_background;
border-color: $tag_category_origin_border;
color: $tag_category_origin_color;
.tag__count {
background: $tag_category_origin_border;
}
}
&[data-tag-category="oc"] {
background: $tag_category_oc_background;
border-color: $tag_category_oc_border;
color: $tag_category_oc_color;
.tag__count {
background: $tag_category_oc_border;
}
}
&[data-tag-category="error"] {
background: $tag_category_error_background;
border-color: $tag_category_error_border;
color: $tag_category_error_color;
.tag__count {
background: $tag_category_error_border;
}
}
&[data-tag-category="character"] {
background: $tag_category_character_background;
border-color: $tag_category_character_border;
color: $tag_category_character_color;
.tag__count {
background: $tag_category_character_border;
}
}
&[data-tag-category="content-official"] {
background: $tag_category_content_official_background;
border-color: $tag_category_content_official_border;
color: $tag_category_content_official_color;
.tag__count {
background: $tag_category_content_official_border;
}
}
&[data-tag-category="content-fanmade"] {
background: $tag_category_content_fanmade_background;
border-color: $tag_category_content_fanmade_border;
color: $tag_category_content_fanmade_color;
.tag__count {
background: $tag_category_content_fanmade_border;
}
}
&[data-tag-category="species"] {
background: $tag_category_species_background;
border-color: $tag_category_species_border;
color: $tag_category_species_color;
.tag__count {
background: $tag_category_species_border;
}
}
}

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

@ -1,9 +1,4 @@
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
span
span.tag__state.hidden title="Unwatched"
@ -14,6 +9,9 @@ span.tag.dropdown data-tag-category="#{@tag.category}" data-tag-id="#{@tag.id}"
| S
span.tag__state.hidden title="Hidden"
| H
a.tag__name< href="/tags/#{@tag.slug}" title="#{@tag.short_description}" = @tag.name
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="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="/filters" Filter
span.tag__count
= @tag.images_count