From d999ce555d86253db6a6f37a816b76ecb534f690 Mon Sep 17 00:00:00 2001 From: Paul Adam Davis <pauladamdavis@gmail.com> Date: Tue, 30 Sep 2014 16:24:21 +0100 Subject: [PATCH] Custom permalink UI References #3920 --- core/client/assets/sass/layouts/settings.scss | 93 ++++++++ core/client/assets/sass/patterns/forms.scss | 1 + core/client/html/permalinks.html | 214 ++++++++++++++++++ 3 files changed, 308 insertions(+) create mode 100644 core/client/html/permalinks.html diff --git a/core/client/assets/sass/layouts/settings.scss b/core/client/assets/sass/layouts/settings.scss index 627adf91f3..83c45ce960 100644 --- a/core/client/assets/sass/layouts/settings.scss +++ b/core/client/assets/sass/layouts/settings.scss @@ -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 \ No newline at end of file diff --git a/core/client/assets/sass/patterns/forms.scss b/core/client/assets/sass/patterns/forms.scss index aada4e7c6e..0c5ff86044 100644 --- a/core/client/assets/sass/patterns/forms.scss +++ b/core/client/assets/sass/patterns/forms.scss @@ -135,6 +135,7 @@ legend { // Input, textarea & select +.input, input[type="email"], input[type="number"], input[type="password"], diff --git a/core/client/html/permalinks.html b/core/client/html/permalinks.html new file mode 100644 index 0000000000..20d50f2a68 --- /dev/null +++ b/core/client/html/permalinks.html @@ -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> \ No newline at end of file