From c0b849bdfda8a2386bc85836d2d181890746de98 Mon Sep 17 00:00:00 2001
From: ThibG <thib@sitedethib.com>
Date: Sun, 3 May 2020 22:04:18 +0200
Subject: [PATCH] Fix use of inline CSS in public pages (#13576)

Change `account_link_to` to use an image tag rather than some
inline CSS. Dropped the `size` parameter in the process, but it wasn't
used for anything except the default value of 36px.

Dropped CSS rules that were always overriden, and defaulted to 36px width
and height instead.
---
 app/helpers/home_helper.rb                     |  6 +++---
 app/javascript/styles/mastodon/about.scss      | 12 ------------
 app/javascript/styles/mastodon/components.scss |  5 +++++
 app/javascript/styles/mastodon/widgets.scss    |  6 ------
 app/views/admin/reports/index.html.haml        |  2 +-
 5 files changed, 9 insertions(+), 22 deletions(-)

diff --git a/app/helpers/home_helper.rb b/app/helpers/home_helper.rb
index b66e827fee228..4da68500a1b2a 100644
--- a/app/helpers/home_helper.rb
+++ b/app/helpers/home_helper.rb
@@ -7,13 +7,13 @@ module HomeHelper
     }
   end
 
-  def account_link_to(account, button = '', size: 36, path: nil)
+  def account_link_to(account, button = '', path: nil)
     content_tag(:div, class: 'account') do
       content_tag(:div, class: 'account__wrapper') do
         section = if account.nil?
                     content_tag(:div, class: 'account__display-name') do
                       content_tag(:div, class: 'account__avatar-wrapper') do
-                        content_tag(:div, '', class: 'account__avatar', style: "width: #{size}px; height: #{size}px; background-size: #{size}px #{size}px; background-image: url(#{full_asset_url('avatars/original/missing.png', skip_pipeline: true)})")
+                        image_tag(full_asset_url('avatars/original/missing.png', skip_pipeline: true), class: 'account__avatar')
                       end +
                         content_tag(:span, class: 'display-name') do
                           content_tag(:strong, t('about.contact_missing')) +
@@ -23,7 +23,7 @@ module HomeHelper
                   else
                     link_to(path || ActivityPub::TagManager.instance.url_for(account), class: 'account__display-name') do
                       content_tag(:div, class: 'account__avatar-wrapper') do
-                        content_tag(:div, '', class: 'account__avatar', style: "width: #{size}px; height: #{size}px; background-size: #{size}px #{size}px; background-image: url(#{full_asset_url(current_account&.user&.setting_auto_play_gif ? account.avatar_original_url : account.avatar_static_url)})")
+                        image_tag(full_asset_url(current_account&.user&.setting_auto_play_gif ? account.avatar_original_url : account.avatar_static_url), class: 'account__avatar')
                       end +
                         content_tag(:span, class: 'display-name') do
                           content_tag(:bdi) do
diff --git a/app/javascript/styles/mastodon/about.scss b/app/javascript/styles/mastodon/about.scss
index 711f349651c01..3be0aee49bcaa 100644
--- a/app/javascript/styles/mastodon/about.scss
+++ b/app/javascript/styles/mastodon/about.scss
@@ -543,12 +543,6 @@ $small-breakpoint: 960px;
         flex: 0 0 auto;
       }
 
-      &__avatar {
-        width: 44px;
-        height: 44px;
-        background-size: 44px 44px;
-      }
-
       .display-name {
         font-size: 15px;
 
@@ -749,12 +743,6 @@ $small-breakpoint: 960px;
         display: flex;
         align-items: center;
       }
-
-      .account__avatar {
-        width: 44px;
-        height: 44px;
-        background-size: 44px 44px;
-      }
     }
 
     &__counters__wrapper {
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index e22b877117682..3a67bde8f4b93 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -1318,8 +1318,13 @@
 
 .account__avatar {
   @include avatar-radius;
+  display: block;
   position: relative;
 
+  width: 36px;
+  height: 36px;
+  background-size: 36px 36px;
+
   &-inline {
     display: inline-block;
     vertical-align: middle;
diff --git a/app/javascript/styles/mastodon/widgets.scss b/app/javascript/styles/mastodon/widgets.scss
index ca050a8d9931d..5b97d1ec4f3e1 100644
--- a/app/javascript/styles/mastodon/widgets.scss
+++ b/app/javascript/styles/mastodon/widgets.scss
@@ -93,12 +93,6 @@
       display: flex;
       align-items: center;
     }
-
-    .account__avatar {
-      width: 44px;
-      height: 44px;
-      background-size: 44px 44px;
-    }
   }
 
   .trends__item {
diff --git a/app/views/admin/reports/index.html.haml b/app/views/admin/reports/index.html.haml
index 0263b80fb7241..2149fcc465642 100644
--- a/app/views/admin/reports/index.html.haml
+++ b/app/views/admin/reports/index.html.haml
@@ -25,7 +25,7 @@
   - target_account = reports.first.target_account
   .report-card
     .report-card__profile
-      = account_link_to target_account, '', size: 36, path: admin_account_path(target_account.id)
+      = account_link_to target_account, '', path: admin_account_path(target_account.id)
       .report-card__profile__stats
         = link_to t('admin.reports.account.notes', count: target_account.targeted_moderation_notes.count), admin_account_path(target_account.id)
         %br/