mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-01-05 18:34:39 +03:00
Merge pull request #4171 from PaulAdamDavis/tag-management
Tag Management UI Markup
This commit is contained in:
John O'Nolan
commit
319470ddd8
137
core/client/assets/sass/layouts/tags.scss
Normal file
137
core/client/assets/sass/layouts/tags.scss
Normal file
@ -0,0 +1,137 @@
|
||||
//
|
||||
// Tag Management
|
||||
// --------------------------------------------------
|
||||
// Slug: /ghost/settings/tags
|
||||
// --------------------------------------------------
|
||||
|
||||
// Tags search
|
||||
.tags-search {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin-left: 7px;
|
||||
|
||||
.btn {
|
||||
position: relative;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
transition: padding 0.3s ease-in-out;
|
||||
|
||||
.icon-search:before {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
&.active {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.tags-search-input {
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
left: 1px;
|
||||
width: 0;
|
||||
margin: 0;
|
||||
padding: 7px 10px;
|
||||
border: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
transition: all 0.3s ease-in-out;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&.opened {
|
||||
|
||||
.tags-search-input {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
@media (max-width: 400px) {
|
||||
.btn {
|
||||
padding-left: 120px;
|
||||
}
|
||||
.tags-search-input {
|
||||
width: 110px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 401px) {
|
||||
.btn {
|
||||
padding-left: 140px;
|
||||
}
|
||||
.tags-search-input {
|
||||
width: 130px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}//.tags-search
|
||||
|
||||
.settings-tag {
|
||||
position: relative;
|
||||
padding: 20px 35px 20px 0;
|
||||
display: block;
|
||||
border-bottom: 1px solid $lightbrown;
|
||||
|
||||
// Permalink/labels
|
||||
.label {
|
||||
margin-left: 2px;
|
||||
position: relative;
|
||||
top: -2px;
|
||||
}
|
||||
.label-alt {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.tag-title {
|
||||
font-size: 16px;
|
||||
color: $darkgrey;
|
||||
font-weight: normal;
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
color: $blue;
|
||||
}
|
||||
}
|
||||
|
||||
.tag-description {
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
color: $midbrown;
|
||||
}
|
||||
|
||||
.tags-count {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 2px;
|
||||
font-size: 16px;
|
||||
color: $midbrown;
|
||||
}
|
||||
}//.settings-tag
|
||||
|
||||
// Tags with a parent get the arrow, and slightly different padding/margin
|
||||
.settings-tag .settings-tag {
|
||||
margin-left: 36px;
|
||||
padding-bottom: 0;
|
||||
border-bottom: 0;
|
||||
margin-right: -35px;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
content: '';
|
||||
background: $lightbrown;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
&:before {
|
||||
width: 1px;
|
||||
height: 16px;
|
||||
top: 16px;
|
||||
left: -34px;
|
||||
}
|
||||
&:after {
|
||||
width: 16px;
|
||||
height: 1px;
|
||||
top: 32px;
|
||||
left: -34px;
|
||||
}
|
||||
}//.settings-tag .settings-tag
|
||||
@ -59,4 +59,5 @@
|
||||
@import "layouts/users";
|
||||
@import "layouts/user";
|
||||
@import "layouts/about";
|
||||
@import "layouts/tags";
|
||||
@import "layouts/error";
|
||||
232
core/client/html/tags.html
Normal file
232
core/client/html/tags.html
Normal file
@ -0,0 +1,232 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Tags</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-menu {
|
||||
top: 0;
|
||||
left: -100%;
|
||||
}
|
||||
.settings-content {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<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" 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-label">
|
||||
<div class="image"><img src="../../../core/shared/img/user-image.png"></div>
|
||||
<div class="name">
|
||||
Paul Davis <i class="icon-chevron-down"></i>
|
||||
<small>Profile & Settings</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<main id="gh-main" class="viewport" role="main">
|
||||
<aside class=" notifications top"></aside>
|
||||
<aside class="notifications bottom"></aside>
|
||||
<div>
|
||||
<header class="page-header">
|
||||
<a class="menu-button" href="#"><span class="sr-only">Menu</span></a>
|
||||
<h2 class="page-title">Tags</h2>
|
||||
</header>
|
||||
<div class="page-content">
|
||||
<nav class="settings-menu">
|
||||
<ul>
|
||||
<li class="settings-menu-general icon-settings"><a href="#">General</a></li>
|
||||
<li class="settings-menu-users icon-users"><a href="#">Users</a></li>
|
||||
<li class="settings-menu-about icon-pacman"><a href="#">About</a></li>
|
||||
<li class="settings-menu-tags icon-tag active"><a class="active" href="#">Tags</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<section class="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">Tags</h2>
|
||||
<section class="page-actions">
|
||||
<button type="button" class="btn btn-green">New Tag</button>
|
||||
<span class="tags-search">
|
||||
<button href="#" class="btn btn-default">
|
||||
<i class="icon-search"></i>
|
||||
<span class="hidden">Search Tags</span>
|
||||
</button>
|
||||
<input type="text" class="tags-search-input">
|
||||
</span>
|
||||
</section>
|
||||
</header>
|
||||
|
||||
|
||||
<section class="content settings-tags">
|
||||
|
||||
<div class="settings-tag">
|
||||
<a href="#" class="tag-title">News</a>
|
||||
<span class="label label-default">/news</span>
|
||||
<p class="tag-description">The latest news, reviews and information from around the world</p>
|
||||
<span class="tags-count">20</span>
|
||||
|
||||
<div class="settings-tag">
|
||||
<a href="#" class="tag-title">General</a>
|
||||
<span class="label label-default">/news/general</span>
|
||||
<p class="tag-description">My go-to category when I’m not really sure what else to file news</p>
|
||||
<span class="tags-count">7</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="settings-tag">
|
||||
<a href="#" class="tag-title">Image</a>
|
||||
<span class="label label-alt">Private</span>
|
||||
<p class="tag-description">All posts with the “image” post format</p>
|
||||
<span class="tags-count">12</span>
|
||||
</div>
|
||||
|
||||
<div class="settings-tag">
|
||||
<a href="#" class="tag-title">Kittens</a>
|
||||
<span class="label label-default">/kittens</span>
|
||||
<p class="tag-description">My sordid past and wrongdoings</p>
|
||||
<span class="tags-count">9</span>
|
||||
|
||||
<div class="settings-tag">
|
||||
<a href="#" class="tag-title">A Short History of Nearly Everything</a>
|
||||
<span class="label label-default">/kittens/a-short-history</span>
|
||||
<span class="tags-count">4</span>
|
||||
|
||||
<div class="settings-tag">
|
||||
<a href="#" class="tag-title">In Parts</a>
|
||||
<span class="label label-default">/kittens/a-short-history/in-parts</span>
|
||||
<p class="tag-description">Lorem ipsum kittens innit</p>
|
||||
<span class="tags-count">2</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="settings-tag">
|
||||
<a href="#" class="tag-title">Video</a>
|
||||
<span class="label label-default">Private</span>
|
||||
<p class="tag-description">All posts containing a YouTube video link</p>
|
||||
<span class="tags-count">6</span>
|
||||
</div>
|
||||
|
||||
<div class="settings-tag">
|
||||
<a href="#" class="tag-title">The End</a>
|
||||
<span class="label label-default">/the-end</span>
|
||||
<p class="tag-description">The final frontier</p>
|
||||
<span class="tags-count">1</span>
|
||||
</div>
|
||||
|
||||
</section><!-- .content.settings-tags -->
|
||||
|
||||
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<div class="right-outlet">
|
||||
|
||||
<div class="post-settings-menu outlet-pane outlet-pane-in">
|
||||
<div class="post-settings-header">
|
||||
<h4>Edit Tag</h4>
|
||||
<button class="close icon-x post-settings-header-action"><span class="hidden">Close</span></button>
|
||||
</div>
|
||||
<div class="post-settings-content">
|
||||
|
||||
<section class="image-uploader">
|
||||
<span class="media">
|
||||
<span class="hidden">Image Upload</span>
|
||||
</span>
|
||||
<img class="js-upload-target" style="display: none;" src="">
|
||||
<div class="description">Add cover image</div>
|
||||
</section>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Tag Name</label>
|
||||
<!-- <span class="input-icon icon-link"> -->
|
||||
<input type="text" value="News" />
|
||||
<!-- </span> -->
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>URL</label>
|
||||
<!-- <span class="input-icon icon-link"> -->
|
||||
<input type="text" value="yourblog.com/tag/news" />
|
||||
<!-- </span> -->
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Description</label>
|
||||
<!-- <span class="input-icon icon-link"> -->
|
||||
<textarea>The latest news, reviews and information from around the world</textarea>
|
||||
<!-- </span> -->
|
||||
</div>
|
||||
|
||||
<div class="form-group for-select">
|
||||
<label for="activeTheme">Visibility</label>
|
||||
<!-- <span class="input-icon icon-user"> -->
|
||||
<span class="gh-select">
|
||||
<select>
|
||||
<option>Public</option>
|
||||
<option>Private</option>
|
||||
</select>
|
||||
</span>
|
||||
<!-- </span> -->
|
||||
</div>
|
||||
|
||||
<div class="form-group for-select">
|
||||
<label for="activeTheme">Parent Tag</label>
|
||||
<!-- <span class="input-icon icon-user"> -->
|
||||
<span class="gh-select">
|
||||
<select>
|
||||
<option>-</option>
|
||||
<option>News</option>
|
||||
<option>- News - Local</option>
|
||||
</select>
|
||||
</span>
|
||||
<!-- </span> -->
|
||||
</div>
|
||||
|
||||
<button class="btn btn-red icon-trash">Delete Tag</button>
|
||||
|
||||
</div><!-- .post-settings-content -->
|
||||
</div><!-- .post-settings-menu -->
|
||||
|
||||
</div><!-- .right-outlet -->
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<script src="../../../bower_components/jquery/dist/jquery.js"></script>
|
||||
<script>
|
||||
$(function(){
|
||||
|
||||
$(".tags-search .btn").on("click", function(e){
|
||||
e.preventDefault();
|
||||
$(".tags-search").toggleClass("opened");
|
||||
$(this).toggleClass("active");
|
||||
});
|
||||
|
||||
$(".tag-title, .post-settings-header-action.close").on("click", function(e){
|
||||
e.preventDefault();
|
||||
$("body").toggleClass("right-outlet-expanded");
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user