Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-01-13 22:41:32 -05:00
Code Issues Activity

Merge pull request #4480 from PaulAdamDavis/update-tags-markup

Browse source 
Update Tags Management Markup
This commit is contained in:
Matt Enlow 2014-11-19 09:30:42 -07:00
commit 409fff285e
1 changed files with 123 additions and 91 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

106
core/client/html/tags.html
View file

@ -1,4 +1,3 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
@ -24,13 +23,25 @@
<div id="container"> <div id="container">
<a class="sr-only sr-only-focusable" href="#gh-main">Skip to main content</a> <a class="sr-only sr-only-focusable" href="#gh-main">Skip to main content</a>
<nav class="global-nav" role="navigation"> <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 ghost-logo" href="/" title="/">
<a class="nav-item nav-content" href="/ghost/"><div class="nav-label"><i class="icon-content"></i> Content</div></a> <div class="nav-label"><i class="icon-ghost"></i>
<a class="nav-item nav-new" href="/ghost/editor/"><div class="nav-label"><i class="icon-add"></i> New Post</div></a> <span>Visit blog</span>
<a class="nav-item nav-settings active" href="/ghost/settings/"><div class="nav-label"><i class="icon-settings2"></i> Settings</div></a> </div>
</a>
<a class="nav-item nav-content" href="/ghost/">
<div class="nav-label"><i class="icon-content"></i> Content</div>
</a>
<a class="nav-item nav-new" href="/ghost/editor/">
<div class="nav-label"><i class="icon-add"></i> New Post</div>
</a>
<a class="nav-item nav-settings 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-item user-menu" data-href="#">
<div class="nav-label"> <div class="nav-label">
<div class="image"><img src="../../../core/shared/img/user-image.png"></div> <div class="image">
<img src="../../../core/shared/img/user-image.png">
</div>
<div class="name"> <div class="name">
Paul Davis <i class="icon-chevron-down"></i> Paul Davis <i class="icon-chevron-down"></i>
<small>Profile &amp; Settings</small> <small>Profile &amp; Settings</small>
@ -43,16 +54,18 @@
<aside class="notifications bottom"></aside> <aside class="notifications bottom"></aside>
<div> <div>
<header class="page-header"> <header class="page-header">
<a class="menu-button" href="#"><span class="sr-only">Menu</span></a> <a class="menu-button" href="#">
<span class="sr-only">Menu</span>
</a>
<h2 class="page-title">Tags</h2> <h2 class="page-title">Tags</h2>
</header> </header>
<div class="page-content"> <div class="page-content">
<nav class="settings-menu"> <nav class="settings-nav">
<ul> <ul>
<li class="settings-menu-general icon-settings"><a href="#">General</a></li> <li class="settings-nav-general icon-settings"><a href="#">General</a></li>
<li class="settings-menu-users icon-users"><a href="#">Users</a></li> <li class="settings-nav-users icon-users"><a href="#">Users</a></li>
<li class="settings-menu-about icon-pacman"><a href="#">About</a></li> <li class="settings-nav-about icon-pacman"><a href="#">About</a></li>
<li class="settings-menu-tags icon-tag active"><a class="active" href="#">Tags</a></li> <li class="settings-nav-tags icon-tag active"><a class="active" href="#">Tags</a></li>
</ul> </ul>
</nav> </nav>
<section class="settings-content fade-in"> <section class="settings-content fade-in">
@ -60,7 +73,7 @@
<a class="btn btn-default btn-back active" href="/ghost/settings/">Back</a> <a class="btn btn-default btn-back active" href="/ghost/settings/">Back</a>
<h2 class="page-title">Tags</h2> <h2 class="page-title">Tags</h2>
<section class="page-actions"> <section class="page-actions">
<button type="button" class="btn btn-green">New Tag</button> <button type="button" class="js-new-tag btn btn-green">New Tag</button>
<span class="tags-search"> <span class="tags-search">
<button href="#" class="btn btn-default"> <button href="#" class="btn btn-default">
<i class="icon-search"></i> <i class="icon-search"></i>
@ -129,23 +142,24 @@
<span class="tags-count">1</span> <span class="tags-count">1</span>
</div> </div>
</section><!-- .content.settings-tags --> </section>
<!-- .content.settings-tags -->
</section> </section>
</div> </div>
</div> </div>
</main> </main>
<div class="right-outlet"> <div class="settings-menu-container">
<div class="settings-menu settings-menu-pane settings-menu-pane-in">
<div class="post-settings-menu outlet-pane outlet-pane-in"> <div class="settings-menu-header">
<div class="post-settings-header"> <h4>Tag Settings</h4>
<h4>Edit Tag</h4> <button class="close icon-x settings-menu-header-action">
<button class="close icon-x post-settings-header-action"><span class="hidden">Close</span></button> <span class="hidden">Close</span>
</button>
</div> </div>
<div class="post-settings-content"> <div class="settings-menu-content">
<form>
<section class="image-uploader"> <section class="image-uploader">
<span class="media"> <span class="media">
<span class="hidden">Image Upload</span> <span class="hidden">Image Upload</span>
@ -157,21 +171,21 @@
<div class="form-group"> <div class="form-group">
<label>Tag Name</label> <label>Tag Name</label>
<!-- <span class="input-icon icon-link"> --> <!-- <span class="input-icon icon-link"> -->
<input type="text" value="News" /> <input class="js-tag-name" type="text" />
<!-- </span> --> <!-- </span> -->
</div> </div>
<div class="form-group"> <div class="form-group">
<label>URL</label> <label>URL</label>
<!-- <span class="input-icon icon-link"> --> <!-- <span class="input-icon icon-link"> -->
<input type="text" value="yourblog.com/tag/news" /> <input class="js-tag-url" type="text" />
<!-- </span> --> <!-- </span> -->
</div> </div>
<div class="form-group"> <div class="form-group">
<label>Description</label> <label>Description</label>
<!-- <span class="input-icon icon-link"> --> <!-- <span class="input-icon icon-link"> -->
<textarea>The latest news, reviews and information from around the world</textarea> <textarea class="js-tag-desc"></textarea>
<!-- </span> --> <!-- </span> -->
</div> </div>
@ -201,28 +215,46 @@
</div> </div>
<button class="btn btn-red icon-trash">Delete Tag</button> <button class="btn btn-red icon-trash">Delete Tag</button>
<button class="btn btn-green tag-save-button">Add Tag</button>
</div><!-- .post-settings-content --> </form>
</div><!-- .post-settings-menu --> </div>
</div>
</div><!-- .right-outlet --> </div>
</div> </div>
<div class="content-cover" data-ember-action="1397"></div>
<script src="../../../bower_components/jquery/dist/jquery.js"></script> <script src="../../../bower_components/jquery/dist/jquery.js"></script>
<script> <script>
$(function(){ $(function() {
$(".tags-search .btn").on("click", function(e){ $('.tags-search .btn').on('click', function(e) {
e.preventDefault(); e.preventDefault();
$(".tags-search").toggleClass("opened"); $('.tags-search').toggleClass('opened');
$(this).toggleClass("active"); $(this).toggleClass('active');
}); });
$(".tag-title, .post-settings-header-action.close").on("click", function(e){ $(".tag-title, .settings-menu-header-action.close, .content-cover").on("click", function(e) {
e.preventDefault(); e.preventDefault();
$("body").toggleClass("right-outlet-expanded"); $('body').toggleClass('settings-menu-expanded');
$('.settings-menu-header h4').text('Tag Settings');
$('.settings-menu .icon-trash').show();
$('.settings-menu .tag-save-button').hide();
$('.js-tag-name').val('News');
$('.js-tag-url').val('yourblog.com/tag/news');
$('.js-tag-desc').html('The latest news, reviews and information from around the world');
});
$('.js-new-tag').on('click', function(e){
e.preventDefault();
$('body').toggleClass('settings-menu-expanded');
$('.settings-menu-header h4').text('New Tag');
$('.settings-menu .icon-trash').hide();
$('.settings-menu .tag-save-button').show();
$('.js-tag-name').val('');
$('.js-tag-url').val('');
$('.js-tag-desc').html('');
}); });
}); });