Fix #3220 - Show avatar/header on edit profile page (#4288)

diff --git a/app/javascript/styles/accounts.scss b/app/javascript/styles/accounts.scss
index 801817d80e55655080f2fc2696b5f7f6eb8029fd..d5c18e1e3d4abfd0bc7f8642da0a3d6ef7d56284 100644 (file)
--- a/app/javascript/styles/accounts.scss
+++ b/app/javascript/styles/accounts.scss
@@ -26,6 +26,15 @@
     z-index: 1;
   }
 
+  &.compact {
+    padding: 30px 0;
+    border-radius: 4px;
+
+    .avatar {
+      margin-bottom: 0;
+    }
+  }
+
   .name {
     display: block;
     font-size: 20px;

diff --git a/app/javascript/styles/forms.scss b/app/javascript/styles/forms.scss
index e1de36d554d464a46e013b230d4c1762bfe3fb75..c467aa7db336510d42383305e66430a4e9763712 100644 (file)
--- a/app/javascript/styles/forms.scss
+++ b/app/javascript/styles/forms.scss
@@ -40,6 +40,10 @@ code {
     }
   }
 
+  .card {
+    margin-bottom: 15px;
+  }
+
   strong {
     font-weight: 500;
   }

diff --git a/app/views/settings/profiles/show.html.haml b/app/views/settings/profiles/show.html.haml
index 2b846006f8f59a4ba568f59eaf35c2211a3bc8c9..e0fb613f83128705a60e459cd510decde1baead8 100644 (file)
--- a/app/views/settings/profiles/show.html.haml
+++ b/app/views/settings/profiles/show.html.haml
@@ -7,10 +7,17 @@
   .fields-group
     = f.input :display_name, placeholder: t('simple_form.labels.defaults.display_name'), hint: t('simple_form.hints.defaults.display_name', count: 30 - @account.display_name.size).html_safe
     = f.input :note, placeholder: t('simple_form.labels.defaults.note'), hint: t('simple_form.hints.defaults.note', count: 160 - @account.note.size).html_safe
+
+  .card.compact{ style: "background-image: url(#{@account.header.url(:original)})" }
+    .avatar= image_tag @account.avatar.url(:original)
+
+  .fields-group
     = f.input :avatar, wrapper: :with_label, input_html: { accept: AccountAvatar::IMAGE_MIME_TYPES.join(',') }, hint: t('simple_form.hints.defaults.avatar')
+
     = f.input :header, wrapper: :with_label, input_html: { accept: AccountHeader::IMAGE_MIME_TYPES.join(',') }, hint: t('simple_form.hints.defaults.header')
 
-  = f.input :locked, as: :boolean, wrapper: :with_label, hint: t('simple_form.hints.defaults.locked')
+  .fields-group
+    = f.input :locked, as: :boolean, wrapper: :with_label, hint: t('simple_form.hints.defaults.locked')
 
   .actions
     = f.button :button, t('generic.save_changes'), type: :submit