mirror of
https://github.com/TryGhost/Ghost-Admin.git
synced 2023-12-14 02:33:04 +01:00
New PSM markup, nav-item, and refactored input icons
References #97, #98, #99
This commit is contained in:
Paul Adam Davis
parent
ad4e3da104
commit
f309002a53
61
assets/sass/components/navlist.scss
Normal file
61
assets/sass/components/navlist.scss
Normal file
|
|
@ -0,0 +1,61 @@
|
|||
.nav-list {
|
||||
background: #FFF;
|
||||
border: 1px solid #E0DFD7;
|
||||
border-radius: $rounded;
|
||||
max-width: 500px;
|
||||
padding: 0;
|
||||
&.nav-list-block {
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
.nav-list-item {
|
||||
display: block;
|
||||
padding: 8px 40px 8px 12px;
|
||||
position: relative;
|
||||
|
||||
&:first-of-type {
|
||||
border-top-left-radius: $rounded;
|
||||
border-top-right-radius: $rounded;
|
||||
}
|
||||
&:last-of-type {
|
||||
border-bottom-left-radius: $rounded;
|
||||
border-bottom-right-radius: $rounded;
|
||||
}
|
||||
|
||||
&:not(:last-of-type) {
|
||||
border-bottom: 1px solid #E0DFD7;
|
||||
}
|
||||
|
||||
@include icon($i-chevron, 1.4rem, #C0BFB6) {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 10px;
|
||||
-webkit-transform: translateY(-50%);
|
||||
-ms-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
};
|
||||
|
||||
color: #2D3032;
|
||||
a {
|
||||
&:link, &:visited {
|
||||
color: #2D3032;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: #F9F8F5;
|
||||
}
|
||||
|
||||
b {
|
||||
display: block;
|
||||
font-weight: normal;
|
||||
font-size: 1.6rem;
|
||||
line-height: 1.375;
|
||||
}
|
||||
span {
|
||||
display: block;
|
||||
font-size: 1.1rem;
|
||||
color: #7E878B;
|
||||
line-height: 1.375;
|
||||
}
|
||||
}
|
||||
103
assets/sass/layouts/post-settings-menu.scss
Normal file
103
assets/sass/layouts/post-settings-menu.scss
Normal file
|
|
@ -0,0 +1,103 @@
|
|||
//
|
||||
// Post Settings Menu
|
||||
// --------------------------------------------------
|
||||
|
||||
// Wrapper
|
||||
.post-settings-menu {
|
||||
background: #FCFCFC;
|
||||
width: 100%;
|
||||
max-width: 350px;
|
||||
}
|
||||
|
||||
// Header
|
||||
.post-settings-header {
|
||||
position: relative;
|
||||
padding: 19px 24px;
|
||||
h4 {
|
||||
font-weight: normal;
|
||||
font-size: 1.6rem;
|
||||
line-height: 1.375;
|
||||
margin: 0;
|
||||
}
|
||||
.close {
|
||||
right: 0;
|
||||
&:before {
|
||||
right: 22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.subview .post-settings-header {
|
||||
h4 {
|
||||
text-align: center;
|
||||
}
|
||||
.back {
|
||||
left: 0;
|
||||
&:before {
|
||||
left: 19px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.post-settings-header-action {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 7px;
|
||||
width: 45px;
|
||||
padding: 0;
|
||||
&:before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
-webkit-transform: translateY(-50%);
|
||||
-ms-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
color: #C0BFB6;
|
||||
font-size: 2rem;
|
||||
}
|
||||
&:hover {
|
||||
&:before {
|
||||
color: #7E878B;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Content
|
||||
.post-settings-content {
|
||||
padding: 0 24px 24px;
|
||||
|
||||
.image-uploader {
|
||||
padding-top: 35px;
|
||||
padding-bottom: 35px;
|
||||
margin: 0 0 1.5rem 0;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
// margin-bottom: 1.5rem;
|
||||
} // .form-group
|
||||
|
||||
textarea {
|
||||
height: 108px;
|
||||
}
|
||||
|
||||
.nav-list {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
.seo-preview {
|
||||
font-family: Arial, sans-serif;
|
||||
line-height: 1.46;
|
||||
}
|
||||
.seo-preview-title {
|
||||
font-size: 1.6rem;
|
||||
text-decoration: underline;
|
||||
color: #1E0FBE;
|
||||
}
|
||||
.seo-preview-link {
|
||||
font-size: 1.3rem;
|
||||
color: #006621;
|
||||
margin: 2px 0;
|
||||
}
|
||||
.seo-preview-description {
|
||||
font-size: 1.3rem;
|
||||
color: #545454;
|
||||
}
|
||||
|
|
@ -45,30 +45,29 @@ form {
|
|||
} // .form-group
|
||||
|
||||
// If the from group has an icon...
|
||||
.form-group[class*='icon-'] {
|
||||
.input-icon[class*='icon-'] {
|
||||
position: relative;
|
||||
display: block;
|
||||
#{$all-text-inputs} {
|
||||
padding-left: 3.2rem;
|
||||
}
|
||||
.gh-select {
|
||||
select {
|
||||
padding-left: 3.2rem;
|
||||
}
|
||||
}
|
||||
&:before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 1.1rem;
|
||||
font-size: 1.3rem;
|
||||
margin-top: calc(-0.45rem - 1px);
|
||||
-webkit-transform: translateY(-52%);
|
||||
-ms-transform: translateY(-52%);
|
||||
transform: translateY(-52%);
|
||||
z-index: 100;
|
||||
}
|
||||
} // .thing[class*='icon-']
|
||||
|
||||
// Wrapper for <select> elements
|
||||
.form-group.for-select {
|
||||
&[class*="icon-"] {
|
||||
.gh-select {
|
||||
&:before {
|
||||
left: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
} // .form-group.for-select
|
||||
|
||||
// Wrapper for input[type="radio"] and input[type="checkbox"] elements
|
||||
.for-radio,
|
||||
.for-checkbox {
|
||||
|
|
@ -161,6 +160,7 @@ textarea {
|
|||
min-width: 250px;
|
||||
height: auto;
|
||||
min-height: 10rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
input[type="number"] {
|
||||
|
|
|
|||
|
|
@ -42,6 +42,7 @@
|
|||
@import "components/dropdowns";
|
||||
@import "components/pagination";
|
||||
@import "components/badges";
|
||||
@import "components/navlist";
|
||||
|
||||
|
||||
//
|
||||
|
|
@ -53,6 +54,7 @@
|
|||
@import "layouts/auth";
|
||||
@import "layouts/content";
|
||||
@import "layouts/editor";
|
||||
@import "layouts/post-settings-menu";
|
||||
@import "layouts/settings";
|
||||
@import "layouts/users";
|
||||
@import "layouts/about";
|
||||
|
|
|
|||
158
docs/dist/css/ghost-ui.css
vendored
158
docs/dist/css/ghost-ui.css
vendored
|
|
@ -1325,17 +1325,22 @@ form label {
|
|||
.form-group {
|
||||
max-width: 100%; } }
|
||||
|
||||
.form-group[class*='icon-'] input[type="email"], .form-group[class*='icon-'] input[type="number"], .form-group[class*='icon-'] input[type="password"], .form-group[class*='icon-'] input[type="search"], .form-group[class*='icon-'] input[type="tel"], .form-group[class*='icon-'] input[type="text"], .form-group[class*='icon-'] input[type="url"], .form-group[class*='icon-'] input[type="color"], .form-group[class*='icon-'] input[type="date"], .form-group[class*='icon-'] input[type="datetime"], .form-group[class*='icon-'] input[type="datetime-local"], .form-group[class*='icon-'] input[type="month"], .form-group[class*='icon-'] input[type="time"], .form-group[class*='icon-'] input[type="week"] {
|
||||
padding-left: 3.2rem; }
|
||||
.form-group[class*='icon-']:before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 1.1rem;
|
||||
font-size: 1.3rem;
|
||||
margin-top: calc(-0.45rem - 1px); }
|
||||
|
||||
.form-group.for-select[class*="icon-"] .gh-select:before {
|
||||
left: 32px; }
|
||||
.input-icon[class*='icon-'] {
|
||||
position: relative;
|
||||
display: block; }
|
||||
.input-icon[class*='icon-'] input[type="email"], .input-icon[class*='icon-'] input[type="number"], .input-icon[class*='icon-'] input[type="password"], .input-icon[class*='icon-'] input[type="search"], .input-icon[class*='icon-'] input[type="tel"], .input-icon[class*='icon-'] input[type="text"], .input-icon[class*='icon-'] input[type="url"], .input-icon[class*='icon-'] input[type="color"], .input-icon[class*='icon-'] input[type="date"], .input-icon[class*='icon-'] input[type="datetime"], .input-icon[class*='icon-'] input[type="datetime-local"], .input-icon[class*='icon-'] input[type="month"], .input-icon[class*='icon-'] input[type="time"], .input-icon[class*='icon-'] input[type="week"] {
|
||||
padding-left: 3.2rem; }
|
||||
.input-icon[class*='icon-'] .gh-select select {
|
||||
padding-left: 3.2rem; }
|
||||
.input-icon[class*='icon-']:before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 1.1rem;
|
||||
font-size: 1.3rem;
|
||||
-webkit-transform: translateY(-52%);
|
||||
-ms-transform: translateY(-52%);
|
||||
transform: translateY(-52%);
|
||||
z-index: 100; }
|
||||
|
||||
.for-radio:after,
|
||||
.for-checkbox:after {
|
||||
|
|
@ -1417,7 +1422,8 @@ textarea {
|
|||
max-width: 500px;
|
||||
min-width: 250px;
|
||||
height: auto;
|
||||
min-height: 10rem; }
|
||||
min-height: 10rem;
|
||||
line-height: 1.5; }
|
||||
|
||||
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button {
|
||||
padding-right: 6px; }
|
||||
|
|
@ -3150,6 +3156,63 @@ a.badge:hover, a.badge:focus {
|
|||
background-color: #e25440;
|
||||
box-shadow: 0 0 0 1px #e25440; }
|
||||
|
||||
.nav-list {
|
||||
background: #FFF;
|
||||
border: 1px solid #E0DFD7;
|
||||
border-radius: 3px;
|
||||
max-width: 500px;
|
||||
padding: 0; }
|
||||
.nav-list.nav-list-block {
|
||||
max-width: none; }
|
||||
|
||||
.nav-list-item {
|
||||
display: block;
|
||||
padding: 8px 40px 8px 12px;
|
||||
position: relative;
|
||||
color: #2D3032; }
|
||||
.nav-list-item:first-of-type {
|
||||
border-top-left-radius: 3px;
|
||||
border-top-right-radius: 3px; }
|
||||
.nav-list-item:last-of-type {
|
||||
border-bottom-left-radius: 3px;
|
||||
border-bottom-right-radius: 3px; }
|
||||
.nav-list-item:not(:last-of-type) {
|
||||
border-bottom: 1px solid #E0DFD7; }
|
||||
.nav-list-item:before {
|
||||
font-family: "GhostIcons";
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
vertical-align: -7%;
|
||||
text-transform: none;
|
||||
speak: none;
|
||||
line-height: 1;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
content: "\e01d";
|
||||
font-size: 1.4rem;
|
||||
color: #c0bfb6;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 10px;
|
||||
-webkit-transform: translateY(-50%);
|
||||
-ms-transform: translateY(-50%);
|
||||
transform: translateY(-50%); }
|
||||
.nav-list-item:hover {
|
||||
text-decoration: none; }
|
||||
.nav-list-item a:link, .nav-list-item a:visited {
|
||||
color: #2D3032; }
|
||||
.nav-list-item:hover {
|
||||
background: #F9F8F5; }
|
||||
.nav-list-item b {
|
||||
display: block;
|
||||
font-weight: normal;
|
||||
font-size: 1.6rem;
|
||||
line-height: 1.375; }
|
||||
.nav-list-item span {
|
||||
display: block;
|
||||
font-size: 1.1rem;
|
||||
color: #7E878B;
|
||||
line-height: 1.375; }
|
||||
|
||||
#container {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
|
|
@ -4594,6 +4657,77 @@ body.zen {
|
|||
.modal-markdown-help-table {
|
||||
margin-top: 0; }
|
||||
|
||||
.post-settings-menu {
|
||||
background: #FCFCFC;
|
||||
width: 100%;
|
||||
max-width: 350px; }
|
||||
|
||||
.post-settings-header {
|
||||
position: relative;
|
||||
padding: 19px 24px; }
|
||||
.post-settings-header h4 {
|
||||
font-weight: normal;
|
||||
font-size: 1.6rem;
|
||||
line-height: 1.375;
|
||||
margin: 0; }
|
||||
.post-settings-header .close {
|
||||
right: 0; }
|
||||
.post-settings-header .close:before {
|
||||
right: 22px; }
|
||||
|
||||
.subview .post-settings-header h4 {
|
||||
text-align: center; }
|
||||
.subview .post-settings-header .back {
|
||||
left: 0; }
|
||||
.subview .post-settings-header .back:before {
|
||||
left: 19px; }
|
||||
|
||||
.post-settings-header-action {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 7px;
|
||||
width: 45px;
|
||||
padding: 0; }
|
||||
.post-settings-header-action:before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
-webkit-transform: translateY(-50%);
|
||||
-ms-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
color: #C0BFB6;
|
||||
font-size: 2rem; }
|
||||
.post-settings-header-action:hover:before {
|
||||
color: #7E878B; }
|
||||
|
||||
.post-settings-content {
|
||||
padding: 0 24px 24px; }
|
||||
.post-settings-content .image-uploader {
|
||||
padding-top: 35px;
|
||||
padding-bottom: 35px;
|
||||
margin: 0 0 1.5rem 0; }
|
||||
.post-settings-content textarea {
|
||||
height: 108px; }
|
||||
.post-settings-content .nav-list {
|
||||
margin-top: 3rem; }
|
||||
|
||||
.seo-preview {
|
||||
font-family: Arial, sans-serif;
|
||||
line-height: 1.46; }
|
||||
|
||||
.seo-preview-title {
|
||||
font-size: 1.6rem;
|
||||
text-decoration: underline;
|
||||
color: #1E0FBE; }
|
||||
|
||||
.seo-preview-link {
|
||||
font-size: 1.3rem;
|
||||
color: #006621;
|
||||
margin: 2px 0; }
|
||||
|
||||
.seo-preview-description {
|
||||
font-size: 1.3rem;
|
||||
color: #545454; }
|
||||
|
||||
.settings-menu {
|
||||
width: 25%;
|
||||
position: fixed;
|
||||
|
|
|
|||
6
docs/dist/css/ghost-ui.min.css
vendored
6
docs/dist/css/ghost-ui.min.css
vendored
File diff suppressed because one or more lines are too long
135
docs/nav-list.html
Normal file
135
docs/nav-list.html
Normal file
|
|
@ -0,0 +1,135 @@
|
|||
---
|
||||
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>Nav List</h3>
|
||||
|
||||
<h5><code>ul > li > a</code> structure</h5>
|
||||
|
||||
<ul class="nav-list">
|
||||
<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>
|
||||
|
||||
<hr>
|
||||
<h5>Full width</h5>
|
||||
|
||||
<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>
|
||||
|
||||
<hr>
|
||||
<h5><code>nav > li > a</code> structure</h5>
|
||||
|
||||
<nav class="nav-list">
|
||||
<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>
|
||||
</nav>
|
||||
|
||||
<hr>
|
||||
<h5><code>div > a</code> Structure</h5>
|
||||
|
||||
<div class="nav-list">
|
||||
<a href="#" class="nav-list-item">
|
||||
<b>Revision History</b>
|
||||
<span>12 versions of this post by 3 people.</span>
|
||||
</a>
|
||||
<a href="#" class="nav-list-item">
|
||||
<b>Advanced Settings</b>
|
||||
<span>Convert to a page, mark as featured.</span>
|
||||
</a>
|
||||
<a href="#" class="nav-list-item">
|
||||
<b>Meta Data</b>
|
||||
<span>Extra content for SEO and social media.</span>
|
||||
</a>
|
||||
<a href="#" class="nav-list-item">
|
||||
<b>Multi-line nav list item, checking internationalization</b>
|
||||
</a>
|
||||
<a href="#" class="nav-list-item">
|
||||
<b>Custom App</b>
|
||||
<span>Registered an advanced setting panel.</span>
|
||||
</a>
|
||||
<a href="#" class="nav-list-item">
|
||||
<b>Single Line</b>
|
||||
</a>
|
||||
<a href="#" class="nav-list-item">
|
||||
<span>Just the description, that's going to split into multiple lines, because testing yo.</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
133
docs/psm.html
Normal file
133
docs/psm.html
Normal file
|
|
@ -0,0 +1,133 @@
|
|||
---
|
||||
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. You’ve 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. Don’t miss my stunning insights!</textarea>
|
||||
<p>Recommended: <b>156</b> characters. You’ve 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. Don’t 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>
|
||||
Loading…
Reference in a new issue