From 4cb7cfff09b4c1ebb255f625381996cc7b5e1f92 Mon Sep 17 00:00:00 2001
From: Paul Adam Davis <pauladamdavis@gmail.com>
Date: Mon, 2 Mar 2015 13:30:46 +0000
Subject: [PATCH] Remove button wrapping blog logo image

Closes #4959

An SVG (without width & height attributes) inside a button won't display as it should. There seems to be no fix other than apply a minimum width & height. That doesn't feel right, so I've opted for this.

- Remove the `<button>` wrapping `<img>` elements
- Add `cursor: pointer;` to those images (now they don't get one, not being inside a `<button>`
- Remove the `#blog-logo/cover` IDs and `for` attributes. They only apply focus on text inputs anyway.
---
 core/client/assets/sass/layouts/settings.scss | 5 +++++
 core/client/templates/settings/general.hbs    | 8 ++++----
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/core/client/assets/sass/layouts/settings.scss b/core/client/assets/sass/layouts/settings.scss
index 7201e61538..1f0eacbef4 100644
--- a/core/client/assets/sass/layouts/settings.scss
+++ b/core/client/assets/sass/layouts/settings.scss
@@ -167,6 +167,11 @@
         display: block;
     }
 
+    .blog-logo,
+    .blog-cover {
+        cursor: pointer;
+    }
+
     .content {
         padding: 40px;
 
diff --git a/core/client/templates/settings/general.hbs b/core/client/templates/settings/general.hbs
index 1181a755e0..0d1a3e0691 100644
--- a/core/client/templates/settings/general.hbs
+++ b/core/client/templates/settings/general.hbs
@@ -28,9 +28,9 @@
         </fieldset>
 
         <div class="form-group">
-            <label for="blog-logo">Blog Logo</label>
+            <label>Blog Logo</label>
             {{#if model.logo}}
-                <button type="button" class="js-modal-logo" {{action "openModal" "upload" this "logo"}}><img id="blog-logo" {{bind-attr src=model.logo}} alt="logo"></button>
+                <img class="blog-logo" {{bind-attr src=model.logo}} alt="logo" role="button" {{action "openModal" "upload" this "logo"}}>
             {{else}}
                 <button type="button" class="btn btn-green js-modal-logo" {{action "openModal" "upload" this "logo"}}>Upload Image</button>
             {{/if}}
@@ -38,9 +38,9 @@
         </div>
 
         <div class="form-group">
-            <label for="blog-cover">Blog Cover</label>
+            <label>Blog Cover</label>
             {{#if model.cover}}
-                <button type="button" class="js-modal-cover" {{action "openModal" "upload" this "cover"}}><img id="blog-cover" {{bind-attr src=model.cover}} alt="cover photo"></button>
+                <img class="blog-cover" {{bind-attr src=model.cover}} alt="cover photo" role="button" {{action "openModal" "upload" this "cover"}}>
             {{else}}
                 <button type="button" class="btn btn-green js-modal-cover" {{action "openModal" "upload" this "cover"}}>Upload Image</button>
             {{/if}}