From 50c697c8a6bc457743e15caea4caa2c18870cbce Mon Sep 17 00:00:00 2001 From: Earlopain <14981592+Earlopain@users.noreply.github.com> Date: Wed, 18 Oct 2023 19:26:49 +0200 Subject: [PATCH] Replace site-icon sass mixin with native css --- app/helpers/artist_url_helper.rb | 6 ++-- app/stylesheet/base/mixins.scss | 13 ++++---- app/stylesheet/specific/artists.scss | 2 +- app/stylesheet/specific/submission_files.scss | 4 --- app/views/artists/_artist_link.html.erb | 31 ++++++++++--------- 5 files changed, 28 insertions(+), 28 deletions(-) diff --git a/app/helpers/artist_url_helper.rb b/app/helpers/artist_url_helper.rb index cbf15f8b..2e1c196e 100644 --- a/app/helpers/artist_url_helper.rb +++ b/app/helpers/artist_url_helper.rb @@ -13,11 +13,13 @@ def site_types_collection Sites.definitions.map { |definition| [definition.display_name, definition.site_type] }.sort end - def site_icon(artist_url) + def site_icon(artist_url, &) # NOTE: Would be neat to be able to use attr here but no browser supports this at the moment icon_index = ArtistUrl.site_types[artist_url.site_type] icon = tag.span(class: "site-icon", style: "--icon-index: #{icon_index};") - link_to tag.span(icon), gallery_url(artist_url), title: "#{artist_url.site.display_name} - #{artist_url.unescaped_url_identifier}" + icon_link = link_to(icon, gallery_url(artist_url), title: "#{artist_url.site.display_name} - #{artist_url.unescaped_url_identifier}") + text = tag.span(capture(&), class: "site-icon-text") if block_given? + tag.span(icon_link + text, class: "site-icon-wrapper") end def ordered_artist_urls(artist) diff --git a/app/stylesheet/base/mixins.scss b/app/stylesheet/base/mixins.scss index c7971767..f8e63d30 100644 --- a/app/stylesheet/base/mixins.scss +++ b/app/stylesheet/base/mixins.scss @@ -1,5 +1,6 @@ -@mixin site_icon($icon_size) { - font-size: $icon_size; +.site-icon-wrapper { + --_icon-size: var(--icon-size, 1rem); + font-size: var(--_icon-size); white-space: nowrap; .site-icon-text { @@ -10,12 +11,12 @@ vertical-align: middle; &::before { content: ""; - width: $icon_size; - height: $icon_size; + width: var(--_icon-size); + height: var(--_icon-size); display: inline-block; background: url("/icons.png"); - background-size: $icon_size; - background-position: 0px calc(var(--icon-index) * #{$icon_size} * -1); + background-size: var(--_icon-size);; + background-position: 0px calc(var(--icon-index) * var(--_icon-size) * -1); } } } diff --git a/app/stylesheet/specific/artists.scss b/app/stylesheet/specific/artists.scss index fee2a888..3fc4f7ca 100644 --- a/app/stylesheet/specific/artists.scss +++ b/app/stylesheet/specific/artists.scss @@ -4,5 +4,5 @@ } .artist-link { - @include site_icon(1.5rem) + --icon-size: 1.5rem; } diff --git a/app/stylesheet/specific/submission_files.scss b/app/stylesheet/specific/submission_files.scss index 8ca7587b..1239bb3e 100644 --- a/app/stylesheet/specific/submission_files.scss +++ b/app/stylesheet/specific/submission_files.scss @@ -34,10 +34,6 @@ background: $color-table-section; } } - - .submission-file-stats { - @include site_icon(1rem) - } } .original { diff --git a/app/views/artists/_artist_link.html.erb b/app/views/artists/_artist_link.html.erb index c65530f1..22831e02 100644 --- a/app/views/artists/_artist_link.html.erb +++ b/app/views/artists/_artist_link.html.erb @@ -1,19 +1,20 @@ <%# locals: (artist_url:) -%>