mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-11 09:53:32 +03:00
Merge pull request #3935 from PaulAdamDavis/new-psm
[WIP] New post settings menu
This commit is contained in:
John O'Nolan
commit
719f56f918
@ -12,12 +12,17 @@
|
||||
left: 0;
|
||||
z-index: 800;
|
||||
background: $darkgrey;
|
||||
transition: transform $side-outlet-transition-duration cubic-bezier(0.1, 0.7, 0.1, 1);
|
||||
|
||||
i:before {
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
&.right-outlet-expanded {
|
||||
transform: translate3d(-350px, 0px, 0px);
|
||||
}
|
||||
|
||||
.thing,
|
||||
.thing2 {
|
||||
display: none; // hide until mobile
|
||||
@ -175,7 +180,7 @@
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
transform: translate3d(-60px, 0px, 0px); // Not off the screen, to give a parallax effect
|
||||
transition: transform 0.4s cubic-bezier(0.1, 0.7, 0.1, 1);
|
||||
transition: transform $side-outlet-transition-duration cubic-bezier(0.1, 0.7, 0.1, 1);
|
||||
|
||||
.thing, .thing2 {
|
||||
display: block;
|
||||
|
||||
@ -36,6 +36,7 @@ $list-colours:
|
||||
$rounded: 3px;
|
||||
$shadow: rgba(0,0,0,0.05) 0 1px 5px;
|
||||
$default-transition-duration: 0.3s;
|
||||
$side-outlet-transition-duration: 0.4s;
|
||||
|
||||
$font-family: 'Open Sans', sans-serif;
|
||||
$font-family-mono: Inconsolata, monospace;
|
||||
|
||||
@ -24,6 +24,7 @@
|
||||
left: 0;
|
||||
overflow: hidden;
|
||||
z-index: 500; // Above the .global-nav when collapsed
|
||||
transition: transform $side-outlet-transition-duration cubic-bezier(0.1, 0.7, 0.1, 1);
|
||||
|
||||
@media (max-width: 900px) {
|
||||
transition: transform 0.4s cubic-bezier(0.1, 0.7, 0.1, 1);
|
||||
@ -32,6 +33,63 @@
|
||||
&.global-nav-expanded {
|
||||
transform: translate3d(260px, 0px, 0px);
|
||||
}
|
||||
|
||||
&.right-outlet-expanded {
|
||||
@media (max-width: 350px) {
|
||||
transform: translate3d(-100%, 0px, 0px);
|
||||
}
|
||||
@media (min-width: 351px) {
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 1000;
|
||||
width: 1px;
|
||||
background: #EDECE4;
|
||||
}
|
||||
transform: translate3d(-350px, 0px, 0px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right-outlet {
|
||||
background: $lightestgrey;
|
||||
width: 100%;
|
||||
max-width: 350px;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
overflow: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
transition: transform $side-outlet-transition-duration cubic-bezier(0.1, 0.7, 0.1, 1);
|
||||
transform: translate3d(60px, 0px, 0px);
|
||||
&.right-outlet-expanded {
|
||||
transform: translate3d(0, 0px, 0px);
|
||||
}
|
||||
.outlet-pane {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
transform: translate3d(0, 0px, 0px);
|
||||
opacity: 1;
|
||||
|
||||
transition: transform $side-outlet-transition-duration cubic-bezier(0.1, 0.7, 0.1, 1);
|
||||
|
||||
&.outlet-pane-out-left {
|
||||
transform: translate3d(-100%, 0px, 0px);
|
||||
}
|
||||
&.outlet-pane-out-right {
|
||||
transform: translate3d(100%, 0px, 0px);
|
||||
}
|
||||
&.outlet-pane-in {
|
||||
transform: translate3d(0, 0px, 0px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
|
||||
@ -3,11 +3,7 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
// Wrapper
|
||||
.post-settings-menu {
|
||||
background: $lightestgrey;
|
||||
width: 100%;
|
||||
max-width: 350px;
|
||||
}
|
||||
.post-settings-menu {}
|
||||
|
||||
// Header
|
||||
.post-settings-header {
|
||||
@ -26,7 +22,8 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.subview .post-settings-header {
|
||||
|
||||
.post-settings-header.subview {
|
||||
h4 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
202
core/client/html/psm.html
Normal file
202
core/client/html/psm.html
Normal file
@ -0,0 +1,202 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>New PSM</title>
|
||||
<link rel="stylesheet" href="../assets/css/ghost.min.css">
|
||||
|
||||
<!--
|
||||
Styles to mimick the rest of Ghost
|
||||
There ARE NOT needed at all.
|
||||
-->
|
||||
<style>
|
||||
.temp-nav {
|
||||
height: 60px;
|
||||
background: #000;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
.temp-main {
|
||||
position: fixed;
|
||||
top: 60px;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: #fff;
|
||||
z-index: 100;
|
||||
}
|
||||
.temp-main .post-settings {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
background: #eee;
|
||||
padding: 11px 20px 10px;
|
||||
margin-left: -108px;
|
||||
margin-top: -22px;
|
||||
}
|
||||
.temp-main .post-settings:before {
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav class="global-nav temp-nav"></nav>
|
||||
<main class="viewport temp-main">
|
||||
<button class="post-settings">Make the magic happen</button>
|
||||
</main>
|
||||
|
||||
<div class="right-outlet">
|
||||
|
||||
<div class="post-settings-menu outlet-pane outlet-pane-in">
|
||||
<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>
|
||||
|
||||
<div class="form-group for-checkbox">
|
||||
<label class="checkbox" for="thing">
|
||||
<input id="thing" type="checkbox">
|
||||
<span class="input-toggle-component"></span>
|
||||
<p>Static Page</p>
|
||||
</label>
|
||||
</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>
|
||||
|
||||
<button class="btn btn-red icon-trash">Delete This Post</button>
|
||||
|
||||
</div><!-- .post-settings-content -->
|
||||
</div><!-- .post-settings-menu -->
|
||||
|
||||
<div class="post-settings-menu outlet-pane outlet-pane-out-right">
|
||||
|
||||
<div class="post-settings-header subview">
|
||||
<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>
|
||||
|
||||
<script src="../../../bower_components/jquery/dist/jquery.js"></script>
|
||||
<script>
|
||||
$(function(){
|
||||
$(".post-settings, .post-settings-header-action.close").on("click", function(e){
|
||||
e.preventDefault();
|
||||
$(".viewport, .global-nav, .right-outlet, body").toggleClass("right-outlet-expanded");
|
||||
});
|
||||
|
||||
$(".nav-list-item a").on("click", function(e){
|
||||
e.preventDefault();
|
||||
$(".outlet-pane:nth-child(1)").addClass("outlet-pane-out-left").removeClass("outlet-pane-in");
|
||||
$(".outlet-pane:nth-child(2)").addClass("outlet-pane-in").removeClass("outlet-pane-hidden-left");
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
$(".post-settings-header-action.back").on("click", function(e){
|
||||
e.preventDefault();
|
||||
$(".outlet-pane:nth-child(1)").addClass("outlet-pane-in").removeClass("outlet-pane-out-left");
|
||||
$(".outlet-pane:nth-child(2)").addClass("outlet-pane-out-right").removeClass("outlet-pane-in");
|
||||
});
|
||||
|
||||
// This also needs to close the right outlet when clicking outside of it (like when clicking outside of popovers)
|
||||
// And... close outlet by hitting escape
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user