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.
This commit is contained in:
Paul Adam Davis 2015-03-02 13:30:46 +00:00
parent 60f1205070
commit 4cb7cfff09
2 changed files with 9 additions and 4 deletions

View File

@ -167,6 +167,11 @@
display: block;
}
.blog-logo,
.blog-cover {
cursor: pointer;
}
.content {
padding: 40px;

View File

@ -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}}