From 562192735c30af34fc0b800e74b0d76e0f25d80b Mon Sep 17 00:00:00 2001
From: Paul Adam Davis <pauladamdavis@gmail.com>
Date: Mon, 7 Jul 2014 14:42:49 +0100
Subject: [PATCH] Tag Management UI Markup

References #3926

Static markup for the Tag Management screen
---
 ghost/admin/assets/sass/layouts/tags.scss | 137 +++++++++++++
 ghost/admin/assets/sass/screen.scss       |   1 +
 ghost/admin/html/tags.html                | 232 ++++++++++++++++++++++
 3 files changed, 370 insertions(+)
 create mode 100644 ghost/admin/assets/sass/layouts/tags.scss
 create mode 100644 ghost/admin/html/tags.html

diff --git a/ghost/admin/assets/sass/layouts/tags.scss b/ghost/admin/assets/sass/layouts/tags.scss
new file mode 100644
index 0000000000..8419573760
--- /dev/null
+++ b/ghost/admin/assets/sass/layouts/tags.scss
@@ -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
\ No newline at end of file
diff --git a/ghost/admin/assets/sass/screen.scss b/ghost/admin/assets/sass/screen.scss
index 474e5cbdf8..1bd769f714 100644
--- a/ghost/admin/assets/sass/screen.scss
+++ b/ghost/admin/assets/sass/screen.scss
@@ -59,4 +59,5 @@
 @import "layouts/users";
 @import "layouts/user";
 @import "layouts/about";
+@import "layouts/tags";
 @import "layouts/error";
\ No newline at end of file
diff --git a/ghost/admin/html/tags.html b/ghost/admin/html/tags.html
new file mode 100644
index 0000000000..51df7d7dc0
--- /dev/null
+++ b/ghost/admin/html/tags.html
@@ -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 &amp; 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>