mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-24 03:14:03 +03:00
Navigation UI Mockup
Refs #4537 Static mockup of the navigation UI - Includes hacky JS to simulate interactions (but not dragging, which is #4540 and no modal when deleting) - Delete & add icons have invisible padding to increase hit area - Drag handle has the `move` cursor - Switches into a single column at 600px and below
This commit is contained in:
Paul Adam Davis
parent
1d0945341d
commit
048e241750
@ -5,15 +5,16 @@
|
||||
// Styles for the content management page, which is where
|
||||
// the posts are listed.
|
||||
//
|
||||
// * Navigation
|
||||
// * Settings Navigation
|
||||
// * Content
|
||||
// * Headers
|
||||
// * Custom Permalinks
|
||||
// * Navigation
|
||||
// ------------------------------------------------------------
|
||||
|
||||
|
||||
//
|
||||
// Navigation
|
||||
// Settings Navigation
|
||||
// --------------------------------------------------
|
||||
|
||||
.settings-nav {
|
||||
@ -380,4 +381,102 @@
|
||||
margin-left: -5px;
|
||||
min-width: 320px;
|
||||
}
|
||||
}//.permalink-input-wrapper
|
||||
}//.permalink-input-wrapper
|
||||
|
||||
|
||||
//
|
||||
// Navigation
|
||||
// --------------------------------------------------
|
||||
|
||||
.settings-navigation {}
|
||||
|
||||
.navigation-item {
|
||||
display: flex;
|
||||
|
||||
@media (max-width: 600px) {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
@media (min-width: 601px) {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.navigation-item-drag-handle {
|
||||
padding-left: 10px;
|
||||
padding-right: 17px;
|
||||
width: 27px;
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
.navigation-inputs {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.navigation-item-label {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.navigation-item-label,
|
||||
.navigation-item-url {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 601px) {
|
||||
.navigation-inputs {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.navigation-item-label {
|
||||
flex-grow: 1;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.navigation-item-url {
|
||||
flex-grow: 3;
|
||||
}
|
||||
}
|
||||
|
||||
.navigation-item-action {
|
||||
padding-left: 10px;
|
||||
width: 40px;
|
||||
position: relative;
|
||||
|
||||
button {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
margin-top: -2px;
|
||||
}
|
||||
|
||||
.icon-trash {
|
||||
&:before {
|
||||
color: $midbrown;
|
||||
font-size: 16px;
|
||||
transition: color 0.1s linear;
|
||||
}
|
||||
|
||||
&:hover:before {
|
||||
color: $red;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-add {
|
||||
&:before {
|
||||
background: $green;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
padding: 3px;
|
||||
border-radius: 2px;
|
||||
transition: background 0.1s linear;
|
||||
}
|
||||
|
||||
&:hover:before {
|
||||
background: darken($green, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
199
ghost/admin/html/navigation.html
Normal file
199
ghost/admin/html/navigation.html
Normal file
@ -0,0 +1,199 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Navigation</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"><a href="#">General</a></li>
|
||||
<li class="settings-nav-users icon-users"><a href="#">Users</a></li>
|
||||
<li class="settings-nav-about icon-pacman"><a href="#">About</a></li>
|
||||
<li class="settings-nav-general icon-compass active"><a class="active" href="#">Navigation</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="#">Back</a>
|
||||
<h2 class="page-title">Navigation</h2>
|
||||
<section class="page-actions">
|
||||
<button type="button" class="btn btn-blue">Save</button>
|
||||
</section>
|
||||
</header>
|
||||
|
||||
<section class="content settings-navigation">
|
||||
<form id="settings-navigation" novalidate="novalidate">
|
||||
|
||||
<div class="navigation-item">
|
||||
<button type="button" class="navigation-item-drag-handle icon-grab">
|
||||
<span class="hidden">Reorder</span>
|
||||
</button>
|
||||
<div class="navigation-inputs">
|
||||
<span class="navigation-item-label">
|
||||
<input type="text" value="Home" placeholder="Label">
|
||||
</span>
|
||||
<span class="navigation-item-url">
|
||||
<input type="text" value="http://my-ghost-blog.com/" placeholder="http://my-ghost-blog.com/">
|
||||
</span>
|
||||
</div>
|
||||
<span class="navigation-item-action">
|
||||
<button type="button" class="js-navigation-delete icon-trash">
|
||||
<span class="hidden">Delete</span>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="navigation-item">
|
||||
<button type="button" class="navigation-item-drag-handle icon-grab">
|
||||
<span class="hidden">Reorder</span>
|
||||
</button>
|
||||
<div class="navigation-inputs">
|
||||
<span class="navigation-item-label">
|
||||
<input type="text" value="About" placeholder="Label">
|
||||
</span>
|
||||
<span class="navigation-item-url">
|
||||
<input type="text" value="http://my-ghost-blog.com/about" placeholder="http://my-ghost-blog.com/">
|
||||
</span>
|
||||
</div>
|
||||
<span class="navigation-item-action">
|
||||
<button type="button" class="js-navigation-delete icon-trash">
|
||||
<span class="hidden">Delete</span>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="navigation-item">
|
||||
<button type="button" class="navigation-item-drag-handle icon-grab">
|
||||
<span class="hidden">Reorder</span>
|
||||
</button>
|
||||
<div class="navigation-inputs">
|
||||
<span class="navigation-item-label">
|
||||
<input type="text" placeholder="Label">
|
||||
</span>
|
||||
<span class="navigation-item-url">
|
||||
<input type="text" placeholder="http://my-ghost-blog.com/">
|
||||
</span>
|
||||
</div>
|
||||
<span class="navigation-item-action">
|
||||
<button type="button" class="js-add-navigation-link icon-add">
|
||||
<span class="hidden">Add</span>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
<script src="../../../bower_components/jquery/dist/jquery.js"></script>
|
||||
<script>
|
||||
$(function() {
|
||||
|
||||
$('.navigation-item').on('click', '.js-add-navigation-link', function(e){
|
||||
e.preventDefault();
|
||||
|
||||
if ($('.navigation-item:last input').val() == '') {
|
||||
return;
|
||||
}
|
||||
|
||||
var blank_item = $('.navigation-item:last').clone(true);
|
||||
var delete_button = $('.navigation-item:first .js-navigation-delete').clone(true);
|
||||
|
||||
$('#settings-navigation').append(blank_item);
|
||||
$('.navigation-item:last input').val('');
|
||||
$('.navigation-item:last').prev('.navigation-item').find('.js-add-navigation-link').replaceWith(delete_button);
|
||||
});
|
||||
|
||||
$('.navigation-item').on('click', '.js-navigation-delete', function(e){
|
||||
e.preventDefault();
|
||||
$(this).parents('.navigation-item').remove();
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
Loading…
Reference in New Issue
Block a user