Ghost/core/client/docs/psm.html
2014-08-18 17:57:04 +01:00

133 lines
5.1 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

---
layout: default
title: Ghost UI · Making publishing beautiful.
---
<header class="page-header">
<a class="menu-button" href="#"><span class="sr-only">Menu</span></a>
<h2>Home</h2>
</header>
<section class="page-content">
<h3>Post Settings Menu</h3>
<!-- Styles used only for docs presentation -->
<style>
.docs-psm-wrapper {overflow: hidden;}
.post-settings-menu {float: left; margin: 30px; outline: 1px solid #EDECE4;}
</style>
<div class="docs-psm-wrapper">
<div class="post-settings-menu">
<div class="post-settings-header">
<h4>Post Settings</h4>
<button class="close icon-x post-settings-header-action"><span class="hidden">Close</span></button>
</div>
<div class="post-settings-content">
<section class="image-uploader">
<span class="media">
<span class="hidden">Image Upload</span>
</span>
<img class="js-upload-target" style="display: none;" src="">
<div class="description">Add image of <strong></strong></div>
</section>
<div class="form-group">
<label for="blog-title">Post URL</label>
<span class="input-icon icon-link">
<input type="text" value="myblog.com/this-is-my-post/" />
</span>
</div>
<div class="form-group">
<label for="blog-title">Publish Date</label>
<span class="input-icon icon-calendar">
<input type="text" value="23 Apr 14 @ 11:59" />
</span>
</div>
<div class="form-group for-select">
<label for="activeTheme">Author</label>
<span class="input-icon icon-user">
<span class="gh-select">
<select>
<option>Lorem Ipsum</option>
<option>Corporis Voluptates</option>
<option>Veniam Quae</option>
</select>
</span>
</span>
</div>
<ul class="nav-list nav-list-block">
<li class="nav-list-item">
<a href="#">
<b>Revision History</b>
<span>12 versions of this post by 3 people.</span>
</a>
</li>
<li class="nav-list-item">
<a href="#">
<b>Advanced Settings</b>
<span>Convert to a page, mark as featured.</span>
</a>
</li>
<li class="nav-list-item">
<a href="#">
<b>Meta Data</b>
<span>Extra content for SEO and social media.</span>
</a>
</li>
<li class="nav-list-item">
<a href="#">
<b>Custom App</b>
<span>Registered an advanced setting panel.</span>
</a>
</li>
</ul>
</div>
</div>
<!-- This would be a class on the body, or container.
Here, it'll change the alignment of .post-settings-header -->
<div class="subview">
<div class="post-settings-menu">
<div class="post-settings-header">
<button class="back icon-chevron-left post-settings-header-action"><span class="hidden">Back</span></button>
<h4>Meta Data</h4>
</div>
<div class="post-settings-content">
<div class="form-group">
<label for="blog-title">Meta Title</label>
<input type="text" value="My Post is Super SEO Friendly" />
<p>Recommended: <b>70</b> characters. Youve used <b class="green">43</b></p>
</div>
<div class="form-group">
<label for="blog-title">Meta Description</label>
<textarea>In this fascinating posts I explore the value of SEO meta descriptions and their impact on blogging. Dont miss my stunning insights!</textarea>
<p>Recommended: <b>156</b> characters. Youve used <b class="green">133</b></p>
</div>
<div class="form-group">
<label>Search Engine Result Preview</label>
<div class="seo-preview">
<div class="seo-preview-title">My Post is Super SEO Friendly</div>
<div class="seo-preview-link">myblog.com/this-is-my-post/</div>
<div class="seo-preview-description">In this fascinating posts I explore the value of SEO meta descriptions and their impact on blogging. Dont miss my stunning insights!</div>
</div>
</div><!-- .post-settings-search-preview -->
</div><!-- .post-settings-content -->
</div><!-- .post-settings-menu -->
</div><!-- .subview -->
</div><!-- .docs-psm-wrapper -->
</section>