Ghost/core/client/templates/settings/general.hbs
Paul Adam Davis 4cb7cfff09 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.
2015-03-02 14:53:03 +00:00

90 lines
4.0 KiB
Handlebars

<header class="settings-view-header">
{{#link-to "settings" class="btn btn-default btn-back"}}Back{{/link-to}}
<h2 class="page-title">General</h2>
<section class="page-actions">
<button type="button" class="btn btn-blue" {{action "save"}}>Save</button>
</section>
</header>
<section class="content settings-general">
<form id="settings-general" novalidate="novalidate">
<fieldset>
<div class="form-group">
<label for="blog-title">Blog Title</label>
{{input id="blog-title" name="general[title]" type="text" value=model.title}}
<p>The name of your blog</p>
</div>
<div class="form-group description-container">
<label for="blog-description">Blog Description</label>
{{textarea id="blog-description" name="general[description]" value=model.description}}
<p>
Describe what your blog is about
{{gh-count-characters model.description}}
</p>
</div>
</fieldset>
<div class="form-group">
<label>Blog Logo</label>
{{#if model.logo}}
<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}}
<p>Display a sexy logo for your publication</p>
</div>
<div class="form-group">
<label>Blog Cover</label>
{{#if model.cover}}
<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}}
<p>Display a cover image on your site</p>
</div>
<fieldset>
<div class="form-group">
<label for="email-address">Email Address</label>
{{input id="email-address" name="general[email-address]" type="email" value=model.email autocapitalize="off" autocorrect="off"}}
<p>Address to use for admin notifications</p>
</div>
<div class="form-group">
<label for="postsPerPage">Posts per page</label>
{{! `pattern` brings up numeric keypad allowing any number of digits}}
{{input id="postsPerPage" name="general[postsPerPage]" focus-out="checkPostsPerPage" value=model.postsPerPage min="1" max="1000" type="number" pattern="[0-9]*"}}
<p>How many posts should be displayed on each page</p>
</div>
<div class="form-group for-checkbox">
<label for="permalinks">Dated Permalinks</label>
<label class="checkbox" for="permalinks">
{{input id="permalinks" name="general[permalinks]" type="checkbox" checked=isDatedPermalinks}}
<span class="input-toggle-component"></span>
<p>Include the date in your post URLs</p>
</label>
</div>
<div class="form-group for-select">
<label for="activeTheme">Theme</label>
<span class="gh-select" {{bind-attr data-select-text=selectedTheme.label}} tabindex="0">
{{view "select"
id="activeTheme"
name="general[activeTheme]"
content=themes
optionValuePath="content.name"
optionLabelPath="content.label"
value=model.activeTheme
selection=selectedTheme}}
</span>
<p>Select a theme for your blog</p>
</div>
</fieldset>
</form>
</section>