mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-11-28 22:43:30 +03:00
Merge pull request #4217 from PaulAdamDavis/permalinks-ui
[WIP] Custom Permalink UI
This commit is contained in:
John O'Nolan
commit
16e9098906
@ -335,3 +335,96 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Custom permalink
|
||||
.permalink-input-wrapper {
|
||||
position: relative;
|
||||
outline: 0; // Kills the blue outline we get by adding tabindex="0"
|
||||
padding-top: 6px;
|
||||
padding-bottom: 6px;
|
||||
|
||||
&:focus,
|
||||
&.focus {
|
||||
border-color: $brown;
|
||||
|
||||
// The button-looking thing that opens a popover
|
||||
.permalink-help {
|
||||
border-color: $brown;
|
||||
}
|
||||
}
|
||||
|
||||
// A div that _looks_ like an input, but is a div
|
||||
.permalink-fake-input {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-right: 26px;
|
||||
}
|
||||
|
||||
.permalink-domain {
|
||||
padding-right: 3px;
|
||||
color: #7E878B;
|
||||
}
|
||||
|
||||
// A collection of labels showing the URL structure
|
||||
.permalink-structure {
|
||||
|
||||
.permalink-parameter {
|
||||
position: relative;
|
||||
top: -2px;
|
||||
margin-left: 6px;
|
||||
|
||||
// The slash before each parameter
|
||||
&:before {
|
||||
content: "/";
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: -8px;
|
||||
font-size: 1.4rem;
|
||||
color: #7E878B;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// The actual input, which resets some styles inherited from the global input style
|
||||
.permalink-input {
|
||||
flex: 1 0;
|
||||
margin: -6px 0 -6px -2px;
|
||||
padding: 0 4px;
|
||||
background: transparent;
|
||||
min-width: 60px;
|
||||
min-height: 30px;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
// Shove the popover button and its container over to the right
|
||||
.popover,
|
||||
.permalink-help {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 36px;
|
||||
}
|
||||
|
||||
// Simple styles for the popover button-looking thing
|
||||
.permalink-help {
|
||||
border-left: 1px solid #E0DFD7;
|
||||
transition: border-color 0.15s linear;
|
||||
|
||||
&:before {
|
||||
color: #E0DFD7;
|
||||
transition: color 0.15s linear;
|
||||
}
|
||||
|
||||
&:hover:before {
|
||||
color: $brown;
|
||||
}
|
||||
}
|
||||
|
||||
// Shift the popover (than opens over the top of everything) to the left a bit
|
||||
.popover-item {
|
||||
margin-left: -5px;
|
||||
}
|
||||
}//.permalink-input-wrapper
|
||||
@ -135,6 +135,7 @@ legend {
|
||||
|
||||
|
||||
// Input, textarea & select
|
||||
.input,
|
||||
input[type="email"],
|
||||
input[type="number"],
|
||||
input[type="password"],
|
||||
|
||||
214
core/client/html/permalinks.html
Normal file
214
core/client/html/permalinks.html
Normal file
@ -0,0 +1,214 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Permalinks</title>
|
||||
<link rel="stylesheet" href="../assets/css/ghost.min.css">
|
||||
|
||||
<!-- Styles not needed for this. Just to get around various bits that Ember handles for us. -->
|
||||
<style>
|
||||
@media (max-width: 900px) {
|
||||
.settings-nav {
|
||||
top: 0;
|
||||
left: -100%;
|
||||
}
|
||||
.settings-content {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="ember-application settings settings-view-general" data-apps="false" data-filestorage="true" data-blogurl="http://127.0.0.1:2368">
|
||||
|
||||
<div id="container"><a class="sr-only sr-only-focusable" href="#gh-main">Skip to main content</a>
|
||||
|
||||
<nav class="global-nav" role="navigation">
|
||||
|
||||
<a class="nav-item ghost-logo" href="/" title="/">
|
||||
<div class="nav-label"><i class="icon-ghost"></i>
|
||||
<span>Visit blog</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="nav-item nav-content js-nav-item" href="/ghost/">
|
||||
<div class="nav-label"><i class="icon-content"></i> Content</div>
|
||||
</a>
|
||||
|
||||
<a class="nav-item nav-new js-nav-item" href="/ghost/editor/">
|
||||
<div class="nav-label"><i class="icon-add"></i> New Post</div>
|
||||
</a>
|
||||
|
||||
|
||||
<a class="nav-item nav-settings js-nav-item active" href="/ghost/settings/">
|
||||
<div class="nav-label"><i class="icon-settings2"></i> Settings</div>
|
||||
</a>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="nav-item user-menu" data-href="#">
|
||||
<div class=" nav-label">
|
||||
<div class="image">
|
||||
<img src="../../../core/shared/img/user-image.png" alt="Paul Davis's profile picture">
|
||||
</div>
|
||||
<div class="name">
|
||||
Paul Davis <i class="icon-chevron-down"></i>
|
||||
<small>Profile & Settings</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
||||
<div class="nav-cover js-nav-cover"></div>
|
||||
|
||||
<main id="gh-main" class="viewport" role="main" data-notification-count="0" data-bindattr-448="448">
|
||||
<aside class="notifications top">
|
||||
</aside>
|
||||
<aside class="notifications bottom">
|
||||
</aside>
|
||||
<div>
|
||||
<header class="page-header">
|
||||
<button class="menu-button js-menu-button" data-ember-action="1221">
|
||||
<span class="sr-only">Menu</span>
|
||||
</button>
|
||||
<h2 class="page-title">Settings</h2>
|
||||
</header>
|
||||
|
||||
<div class="page-content">
|
||||
<nav class="settings-nav js-settings-nav">
|
||||
<ul>
|
||||
<li class="settings-nav-general icon-settings active"><a class="active" href="/ghost/settings/general/">General</a>
|
||||
</li>
|
||||
<li class="settings-nav-users icon-users"><a href="/ghost/settings/users/">Users</a>
|
||||
</li>
|
||||
<li class="settings-nav-about icon-pacman"><a href="/ghost/settings/about/">About</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<section class="settings-content js-settings-content fade-in">
|
||||
|
||||
<header class="settings-view-header">
|
||||
<a class="btn btn-default btn-back active" href="/ghost/settings/">Back</a>
|
||||
<h2 class="page-title">General</h2>
|
||||
<section class="page-actions">
|
||||
<button type="button" class="btn btn-blue" data-ember-action="1271">Save</button>
|
||||
</section>
|
||||
</header>
|
||||
|
||||
<section class="content settings-general">
|
||||
<form id="settings-general" novalidate="novalidate">
|
||||
|
||||
<div class="form-group">
|
||||
<label for="blog-title">Blog Title</label>
|
||||
<input id="blog-title" class="" type="text" name="general[title]" value="Paul Davis">
|
||||
<p>The name of your blog</p>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="blog-logo">Blog Logo</label>
|
||||
<button type="button" class="btn btn-green js-modal-logo" data-ember-action="1277">Upload Image</button>
|
||||
<p>Display a sexy logo for your publication</p>
|
||||
</div>
|
||||
|
||||
<fieldset>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="postsPerPage">Posts per page</label>
|
||||
<input id="postsPerPage" class="" type="number" name="general[postsPerPage]" min="1" max="1000" value="5">
|
||||
<p>How many posts should be displayed on each page</p>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="blog-permalinks">Permalinks</label>
|
||||
<label class="permalink-input-wrapper input" tabindex="0">
|
||||
|
||||
<div class="permalink-fake-input">
|
||||
<span class="permalink-domain">http://myblog.ghost.io</span>
|
||||
<span class="permalink-structure">
|
||||
<span class="permalink-parameter label label-default">journal</span>
|
||||
<span class="permalink-parameter label label-default">year</span>
|
||||
<span class="permalink-parameter label label-default">month</span>
|
||||
<span class="permalink-parameter label label-default">day</span>
|
||||
<span class="permalink-parameter label label-default">title</span>
|
||||
</span>
|
||||
<input id="blog-permalinks" class="permalink-input" type="text" name="general[permalinks]">
|
||||
</div>
|
||||
|
||||
<div class="popover">
|
||||
<button class="permalink-help button icon-question hover-me">
|
||||
<span class="hidden">URL Structure Formatting</span>
|
||||
</button>
|
||||
<div class="popover-item closed popover-triangle-bottom">
|
||||
<div class="popover-title">URL Structure Formatting</div>
|
||||
<div class="popover-desc">You can use dynamic variables in this field.</div>
|
||||
<div class="popover-body">
|
||||
<p>
|
||||
<b>%t</b> - The title of your post (or page)<br>
|
||||
<b>%c</b> - The tag which your post is categorised in<br>
|
||||
<b>%y</b> - The year your post was published<br>
|
||||
<b>%m</b> - The month your post was published<br>
|
||||
<b>%d</b> - The day your post was published
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</label>
|
||||
<p>The default URL structure for your blog</p>
|
||||
</div>
|
||||
|
||||
<div class="form-group for-select">
|
||||
<label for="activeTheme">Theme</label>
|
||||
<span class="gh-select" data-bindattr-1286="1286" tabindex="0" data-select-text="Casper - 1.1.0">
|
||||
<select id="activeTheme" class="ember-select" name="general[activeTheme]">
|
||||
<option value="casper">Casper - 1.1.0</option>
|
||||
<option value="hayleybrowne">HJB - 0.5</option>
|
||||
<option value="mono">Mono - 0.1.0</option>
|
||||
<option value="pad-gs">PAD-GS - 0.8</option>
|
||||
<option value="pauladamdavis">PAD - 0.8</option>
|
||||
</select>
|
||||
</span>
|
||||
<p>Select a theme for your blog</p>
|
||||
</div>
|
||||
</fieldset>
|
||||
</form>
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<script src="../../../bower_components/jquery/dist/jquery.js"></script>
|
||||
<script>
|
||||
$(function(){
|
||||
|
||||
$("#blog-permalinks").on("focus", function(){
|
||||
$(".permalink-input-wrapper").addClass("focus");
|
||||
$("#blog-permalinks").focus();
|
||||
});
|
||||
$("#blog-permalinks").on("blur", function(){
|
||||
$(".permalink-input-wrapper").removeClass("focus");
|
||||
});
|
||||
|
||||
$(".hover-me").hover(function(){
|
||||
$(this).next(".popover-item").addClass("open fade-in").removeClass("closed fade-out");
|
||||
}, function(){
|
||||
$(this).next(".popover-item").removeClass("fade-in").addClass("fade-out");
|
||||
$(this).next(".popover-item").on('animationend webkitAnimationEnd oanimationend MSAnimationEnd', function (event) {
|
||||
if (event.originalEvent.animationName === 'fade-out') {
|
||||
$(this).removeClass("open fade-out").addClass("closed");
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
Loading…
Reference in New Issue
Block a user