Skip to content

Commit d1910c6

Browse files
PaulAdamDavisPaulAdamDavis
committed
Static integration of the new PSM
Reference #3932 Take this, and make it work.
1 parent 57b5f4d commit d1910c6

File tree

5 files changed

+270
-7
lines changed

5 files changed

+270
-7
lines changed

‎core/client/assets/sass/components/navigation.scss

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,17 @@
1212
left: 0;
1313
z-index: 800;
1414
background: $darkgrey;
15+
transition: transform $side-outlet-transition-duration cubic-bezier(0.1, 0.7, 0.1, 1);
1516

1617
i:before {
1718
display: inline-block;
1819
width: 16px;
1920
}
2021

22+
&.right-outlet-expanded {
23+
transform: translate3d(-350px, 0px, 0px);
24+
}
25+
2126
.thing,
2227
.thing2 {
2328
display: none; // hide until mobile
@@ -175,7 +180,7 @@
175180
-webkit-overflow-scrolling: touch;
176181

177182
transform: translate3d(-60px, 0px, 0px); // Not off the screen, to give a parallax effect
178-
transition: transform 0.4s cubic-bezier(0.1, 0.7, 0.1, 1);
183+
transition: transform $side-outlet-transition-duration cubic-bezier(0.1, 0.7, 0.1, 1);
179184

180185
.thing, .thing2 {
181186
display: block;

‎core/client/assets/sass/helpers/variables.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ $list-colours:
3636
$rounded: 3px;
3737
$shadow: rgba(0,0,0,0.05) 0 1px 5px;
3838
$default-transition-duration: 0.3s;
39+
$side-outlet-transition-duration: 0.4s;
3940

4041
$font-family: 'Open Sans', sans-serif;
4142
$font-family-mono: Inconsolata, monospace;

‎core/client/assets/sass/layouts/default.scss

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@
2424
left: 0;
2525
overflow: hidden;
2626
z-index: 500; // Above the .global-nav when collapsed
27+
transition: transform $side-outlet-transition-duration cubic-bezier(0.1, 0.7, 0.1, 1);
2728

2829
@media (max-width: 900px) {
2930
transition: transform 0.4s cubic-bezier(0.1, 0.7, 0.1, 1);
@@ -32,6 +33,63 @@
3233
&.global-nav-expanded {
3334
transform: translate3d(260px, 0px, 0px);
3435
}
36+
37+
&.right-outlet-expanded {
38+
@media (max-width: 350px) {
39+
transform: translate3d(-100%, 0px, 0px);
40+
}
41+
@media (min-width: 351px) {
42+
&:before {
43+
content: '';
44+
position: absolute;
45+
top: 0;
46+
right: 0;
47+
bottom: 0;
48+
z-index: 1000;
49+
width: 1px;
50+
background: #EDECE4;
51+
}
52+
transform: translate3d(-350px, 0px, 0px);
53+
}
54+
}
55+
}
56+
57+
.right-outlet {
58+
background: $lightestgrey;
59+
width: 100%;
60+
max-width: 350px;
61+
position: fixed;
62+
top: 0;
63+
right: 0;
64+
bottom: 0;
65+
overflow: auto;
66+
-webkit-overflow-scrolling: touch;
67+
transition: transform $side-outlet-transition-duration cubic-bezier(0.1, 0.7, 0.1, 1);
68+
transform: translate3d(60px, 0px, 0px);
69+
&.right-outlet-expanded {
70+
transform: translate3d(0, 0px, 0px);
71+
}
72+
.outlet-pane {
73+
position: absolute;
74+
top: 0;
75+
right: 0;
76+
bottom: 0;
77+
left: 0;
78+
transform: translate3d(0, 0px, 0px);
79+
opacity: 1;
80+
81+
transition: transform $side-outlet-transition-duration cubic-bezier(0.1, 0.7, 0.1, 1);
82+
83+
&.outlet-pane-out-left {
84+
transform: translate3d(-100%, 0px, 0px);
85+
}
86+
&.outlet-pane-out-right {
87+
transform: translate3d(100%, 0px, 0px);
88+
}
89+
&.outlet-pane-in {
90+
transform: translate3d(0, 0px, 0px);
91+
}
92+
}
3593
}
3694

3795
//

‎core/client/assets/sass/layouts/post-settings-menu.scss

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,7 @@
33
// --------------------------------------------------
44

55
// Wrapper
6-
.post-settings-menu {
7-
background: $lightestgrey;
8-
width: 100%;
9-
max-width: 350px;
10-
}
6+
.post-settings-menu {}
117

128
// Header
139
.post-settings-header {
@@ -26,7 +22,8 @@
2622
}
2723
}
2824
}
29-
.subview .post-settings-header {
25+
26+
.post-settings-header.subview {
3027
h4 {
3128
text-align: center;
3229
}

‎core/client/html/psm.html

Lines changed: 202 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,202 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>New PSM</title>
6+
<link rel="stylesheet" href="../assets/css/ghost.min.css">
7+
8+
<!--
9+
Styles to mimick the rest of Ghost
10+
There ARE NOT needed at all.
11+
-->
12+
<style>
13+
.temp-nav {
14+
height: 60px;
15+
background: #000;
16+
position: fixed;
17+
top: 0;
18+
right: 0;
19+
left: 0;
20+
z-index: 100;
21+
}
22+
.temp-main {
23+
position: fixed;
24+
top: 60px;
25+
right: 0;
26+
bottom: 0;
27+
left: 0;
28+
background: #fff;
29+
z-index: 100;
30+
}
31+
.temp-main .post-settings {
32+
position: absolute;
33+
top: 50%;
34+
left: 50%;
35+
background: #eee;
36+
padding: 11px 20px 10px;
37+
margin-left: -108px;
38+
margin-top: -22px;
39+
}
40+
.temp-main .post-settings:before {
41+
margin-right: 5px;
42+
}
43+
</style>
44+
45+
</head>
46+
<body>
47+
48+
<nav class="global-nav temp-nav"></nav>
49+
<main class="viewport temp-main">
50+
<button class="post-settings">Make the magic happen</button>
51+
</main>
52+
53+
<div class="right-outlet">
54+
55+
<div class="post-settings-menu outlet-pane outlet-pane-in">
56+
<div class="post-settings-header">
57+
<h4>Post Settings</h4>
58+
<button class="close icon-x post-settings-header-action"><span class="hidden">Close</span></button>
59+
</div>
60+
<div class="post-settings-content">
61+
62+
<section class="image-uploader">
63+
<span class="media">
64+
<span class="hidden">Image Upload</span>
65+
</span>
66+
<img class="js-upload-target" style="display: none;" src="">
67+
<div class="description">Add image of <strong></strong></div>
68+
</section>
69+
70+
<div class="form-group">
71+
<label for="blog-title">Post URL</label>
72+
<span class="input-icon icon-link">
73+
<input type="text" value="myblog.com/this-is-my-post/" />
74+
</span>
75+
</div>
76+
77+
<div class="form-group">
78+
<label for="blog-title">Publish Date</label>
79+
<span class="input-icon icon-calendar">
80+
<input type="text" value="23 Apr 14 @ 11:59" />
81+
</span>
82+
</div>
83+
84+
<div class="form-group for-select">
85+
<label for="activeTheme">Author</label>
86+
<span class="input-icon icon-user">
87+
<span class="gh-select">
88+
<select>
89+
<option>Lorem Ipsum</option>
90+
<option>Corporis Voluptates</option>
91+
<option>Veniam Quae</option>
92+
</select>
93+
</span>
94+
</span>
95+
</div>
96+
97+
<div class="form-group for-checkbox">
98+
<label class="checkbox" for="thing">
99+
<input id="thing" type="checkbox">
100+
<span class="input-toggle-component"></span>
101+
<p>Static Page</p>
102+
</label>
103+
</div>
104+
105+
<ul class="nav-list nav-list-block">
106+
<li class="nav-list-item">
107+
<a href="#">
108+
<b>Revision History</b>
109+
<span>12 versions of this post by 3 people.</span>
110+
</a>
111+
</li>
112+
<li class="nav-list-item">
113+
<a href="#">
114+
<b>Advanced Settings</b>
115+
<span>Convert to a page, mark as featured.</span>
116+
</a>
117+
</li>
118+
<li class="nav-list-item">
119+
<a href="#">
120+
<b>Meta Data</b>
121+
<span>Extra content for SEO and social media.</span>
122+
</a>
123+
</li>
124+
<li class="nav-list-item">
125+
<a href="#">
126+
<b>Custom App</b>
127+
<span>Registered an advanced setting panel.</span>
128+
</a>
129+
</li>
130+
</ul>
131+
132+
<button class="btn btn-red icon-trash">Delete This Post</button>
133+
134+
</div><!-- .post-settings-content -->
135+
</div><!-- .post-settings-menu -->
136+
137+
<div class="post-settings-menu outlet-pane outlet-pane-out-right">
138+
139+
<div class="post-settings-header subview">
140+
<button class="back icon-chevron-left post-settings-header-action"><span class="hidden">Back</span></button>
141+
<h4>Meta Data</h4>
142+
</div>
143+
144+
<div class="post-settings-content">
145+
<div class="form-group">
146+
<label for="blog-title">Meta Title</label>
147+
<input type="text" value="My Post is Super SEO Friendly" />
148+
<p>Recommended: <b>70</b> characters. You’ve used <b class="green">43</b></p>
149+
</div>
150+
151+
<div class="form-group">
152+
<label for="blog-title">Meta Description</label>
153+
<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>
154+
<p>Recommended: <b>156</b> characters. You’ve used <b class="green">133</b></p>
155+
</div>
156+
157+
<div class="form-group">
158+
<label>Search Engine Result Preview</label>
159+
<div class="seo-preview">
160+
<div class="seo-preview-title">My Post is Super SEO Friendly</div>
161+
<div class="seo-preview-link">myblog.com/this-is-my-post/</div>
162+
<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>
163+
</div>
164+
</div><!-- .post-settings-search-preview -->
165+
166+
</div><!-- .post-settings-content -->
167+
168+
</div><!-- .post-settings-menu -->
169+
170+
</div>
171+
172+
<script src="../../../bower_components/jquery/dist/jquery.js"></script>
173+
<script>
174+
$(function(){
175+
$(".post-settings, .post-settings-header-action.close").on("click", function(e){
176+
e.preventDefault();
177+
$(".viewport, .global-nav, .right-outlet, body").toggleClass("right-outlet-expanded");
178+
});
179+
180+
$(".nav-list-item a").on("click", function(e){
181+
e.preventDefault();
182+
$(".outlet-pane:nth-child(1)").addClass("outlet-pane-out-left").removeClass("outlet-pane-in");
183+
$(".outlet-pane:nth-child(2)").addClass("outlet-pane-in").removeClass("outlet-pane-hidden-left");
184+
});
185+
186+
187+
188+
189+
$(".post-settings-header-action.back").on("click", function(e){
190+
e.preventDefault();
191+
$(".outlet-pane:nth-child(1)").addClass("outlet-pane-in").removeClass("outlet-pane-out-left");
192+
$(".outlet-pane:nth-child(2)").addClass("outlet-pane-out-right").removeClass("outlet-pane-in");
193+
});
194+
195+
// This also needs to close the right outlet when clicking outside of it (like when clicking outside of popovers)
196+
// And... close outlet by hitting escape
197+
});
198+
</script>
199+
200+
201+
</body>
202+
</html>

0 commit comments

Comments
 (0)