From d979ffb55f7a96116831905d783589a0ae4d7b69 Mon Sep 17 00:00:00 2001
From: John O'Nolan <john@ghost.org>
Date: Fri, 29 May 2015 13:01:28 +0100
Subject: [PATCH] First pass theme management page

---
 core/client/app/html/apps.html              |   2 +-
 core/client/app/html/themes.html            | 223 ++++++++++++++++++++
 core/client/app/styles/layouts/packages.css | 109 ++++++++--
 3 files changed, 320 insertions(+), 14 deletions(-)
 create mode 100644 core/client/app/html/themes.html
diff --git a/core/client/app/html/apps.html b/core/client/app/html/apps.html
index 99f5939b27..ce3981d623 100644
--- a/core/client/app/html/apps.html
+++ b/core/client/app/html/apps.html
@@ -85,7 +85,7 @@
 
     <section class="view-content">
 
-            <div class="package-grid">
+            <div class="package-grid package-grid-apps">
 
             <article class="package-card-app" data-href="/app/">
                 <div class="package-card-content">
diff --git a/core/client/app/html/themes.html b/core/client/app/html/themes.html
new file mode 100644
index 0000000000..72dc64bd83
--- /dev/null
+++ b/core/client/app/html/themes.html
@@ -0,0 +1,223 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <title>Themes</title>
+    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans:400,300,700" />
+    <link rel="stylesheet" href="file:///Users/John/Sites/Ghost/core/built/assets/vendor.css" />
+    <link rel="stylesheet" href="file:///Users/John/Sites/Ghost/core/built/assets/ghost.css" />
+</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="ember725" class="ember-view gh-app"><a class="sr-only sr-only-focusable" href="#gh-main">Skip to main content</a>
+
+    <aside id="ember749" class="ember-view gh-alerts"><!----></aside>
+
+    <div class="gh-viewport">
+
+            <nav class="gh-nav">
+    <header id="ember783" class="ember-view gh-nav-menu closed" role="button">        <div class="gh-nav-menu-icon" style="background-image: url(https://s3.amazonaws.com/f.cl.ly/items/3I0g431b2b3q00253K1V/d16dc430c9c4f5c09d6ca09be3e5c72fdb21c1ac.png)"></div>
+            <div class="gh-nav-menu-details">
+                <div class="gh-nav-menu-details-blog">Ghost</div>
+                <div class="gh-nav-menu-details-user">John Thing</div>
+            </div>
+            <i class="icon-arrow"></i>
+    </header><div id="ember792" class="ember-view ghost-dropdown dropdown closed fade-out">        <ul class="dropdown-menu dropdown-triangle-top js-user-menu-dropdown-menu" role="menu" style="right:-50%;left:auto;margin-right:40px">
+                <li role="presentation"><a id="ember810" class="ember-view gh-nav-menu-about dropdown-item js-nav-item" href="/ghost/settings/about/" tabindex="-1"><i class="icon-gh"></i> About Ghost</a></li>
+                <li class="divider"></li>
+                <li role="presentation"><a id="ember811" class="ember-view dropdown-item user-menu-profile js-nav-item" href="/ghost/settings/users/john/" tabindex="-1"><i class="icon-user"></i> Your Profile</a></li>
+                <li class="divider"></li>
+                <li role="presentation"><a id="ember812" class="ember-view dropdown-item user-menu-signout" href="/ghost/signout/" tabindex="-1"><i class="icon-signout"></i> Sign Out</a></li>
+            </ul>
+    </div>    <section class="gh-nav-body">
+            <section class="gh-nav-search">
+                <input class="gh-nav-search-input gh-input" type="text" placeholder="Search">
+                <button class="gh-nav-search-button"><i class="icon-search"></i><span class="sr-only">Search</span></button>
+            </section>
+            <ul class="gh-nav-list gh-nav-main">
+                <li><a id="ember796" class="ember-view gh-nav-main-editor" href="/ghost/editor/"><i class="icon-pen"></i>New Post</a></li>
+                <li><a id="ember797" class="ember-view gh-nav-main-content" href="/ghost/"><i class="icon-content"></i>Content</a></li>
+                <li><a id="ember798" class="ember-view gh-nav-main-users" href="/ghost/settings/users/"><i class="icon-team"></i>Team</a></li>
+            </ul>
+            <ul class="gh-nav-list gh-nav-settings">
+                <li class="gh-nav-list-h">Settings</li>
+                <li><a id="ember799" class="ember-view gh-nav-settings-general" href="/ghost/settings/general/"><i class="icon-settings"></i>General</a></li>
+                <li><a id="ember800" class="ember-view gh-nav-settings-navigation" href="/ghost/settings/navigation/"><i class="icon-compass"></i>Navigation</a></li>
+                <li><a id="ember801" class="ember-view gh-nav-settings-tags" href="/ghost/settings/tags/"><i class="icon-tag"></i>Tags</a></li>
+                <li><a id="ember802" class="ember-view gh-nav-settings-code-injection" href="/ghost/settings/code-injection/"><i class="icon-code"></i>Code Injection</a></li>
+                <li><a id="ember803" class="ember-view gh-nav-settings-labs" href="/ghost/settings/labs/"><i class="icon-apps"></i>Labs</a></li>
+                <li><a id="ember804" class="ember-view gh-nav-settings-apps active" href="/ghost/settings/apps/"><i class="icon-design"></i>Themes</a></li>
+            </ul>
+        </section>
+        <footer class="gh-nav-footer">
+            <div class="gh-autonav-toggle">
+                <i class="icon-minimise"></i>
+            </div>
+            <a class="gh-nav-footer-sitelink" target="_blank" href="http://localhost:2368/">View blog <i class="icon-external"></i></a>
+            <div class="gh-help-menu">
+    <div id="ember804" class="ember-view closed" role="button">                <div class="gh-help-button">
+                        <i class="icon-question"><span class="hidden">Help</span></i>
+                    </div>
+    </div><div id="ember805" class="ember-view ghost-dropdown dropdown closed fade-out">                <ul class="dropdown-menu dropdown-triangle-bottom" role="menu">
+                        <li role="presentation"><a class="dropdown-item help-menu-support" role="menuitem" tabindex="-1" href="http://support.ghost.org/" target="_blank"><i class="icon-ambulance"></i> Support Center</a></li>
+                        <li role="presentation"><a class="dropdown-item help-menu-tweet" role="menuitem" tabindex="-1" href="https://twitter.com/intent/tweet?text=%40TryGhost+Hi%21+Can+you+help+me+with+&amp;related=TryGhost" target="_blank" onclick="window.open(this.href, 'twitter-share', 'width=550,height=235');return false;"><i class="icon-twitter"></i> Tweet @TryGhost!</a></li>
+                        <li class="divider"></li>
+                        <li role="presentation"><a class="dropdown-item help-menu-how-to" role="menuitem" tabindex="-1" href="http://support.ghost.org/how-to-use-ghost/" target="_blank"><i class="icon-book"></i> How to Use Ghost</a></li>
+                        <li role="presentation"><a class="dropdown-item help-menu-markdown" role="menuitem" tabindex="-1" href="" data-ember-action="1036"><i class="icon-markdown"></i> Markdown Help</a></li>
+                        <li class="divider"></li>
+                        <li role="presentation"><a class="dropdown-item help-menu-wishlist" role="menuitem" tabindex="-1" href="http://ideas.ghost.org/" target="_blank"><i class="icon-idea"></i> Wishlist</a></li>
+                    </ul>
+    </div>        </div>
+        </footer>
+    </nav>
+
+
+        <main id="gh-main" class="gh-main" role="main" data-notification-count="0">
+            <section id="ember1308" class="ember-view gh-view js-settings-content"><header class="view-header">
+        <h2 class="view-title">Themes</h2>
+        <section class="view-actions">
+            <input id="blog-title" class="gh-input package-filter" type="text" name="general[title]" placeholder="Filter themes by name">
+
+        </section>
+    </header>
+
+    <section class="view-content">
+
+        <div class="package-grid package-grid-themes">
+
+            <article class="package-card-theme">
+                <div class="package-card-content">
+                    <a class="package-card-theme-image" href="/theme/">
+                        <img src="http://cl.ly/b4FN/casper2.jpg" alt="theme" />
+                        <div class="package-card-theme-overlay">
+                            <h3 class="package-card-theme-title">Casper and a Really Long Name</h3>
+                        </div>
+                    </a>
+                </div>
+                <footer class="package-card-footer">
+                    <a class="package-developer" href="#" target="_blank">
+                        <img src="https://pbs.twimg.com/profile_images/439941058404028416/3nRmjK6v.jpeg" alt="developer" />
+                        <span class="package-developer-name">GhostFoundation1</span>
+                    </a>
+                    <div class="package-controls">
+                        <a class="package-uninstall package-controls-button" href="#"><i class="icon-trash"></i>Uninstall</a>
+                    </div>
+                </footer>
+            </article>
+
+            <article class="package-card-theme">
+                <div class="package-card-content">
+                    <a class="package-card-theme-image" href="/theme/">
+                        <img src="http://cl.ly/b4FN/casper2.jpg" alt="theme" />
+                        <div class="package-card-theme-overlay">
+                            <h3 class="package-card-theme-title">Casper and a Really Long Name</h3>
+                        </div>
+                    </a>
+                </div>
+                <footer class="package-card-footer">
+                    <a class="package-developer" href="#" target="_blank">
+                        <img src="https://pbs.twimg.com/profile_images/439941058404028416/3nRmjK6v.jpeg" alt="developer" />
+                        <span class="package-developer-name">GhostFoundation1</span>
+                    </a>
+                    <div class="package-controls">
+                        <a class="package-uninstall package-controls-button" href="#"><i class="icon-trash"></i>Uninstall</a>
+                    </div>
+                </footer>
+            </article>
+
+            <article class="package-card-theme">
+                <div class="package-card-content">
+                    <a class="package-card-theme-image" href="/theme/">
+                        <img src="http://cl.ly/b4FN/casper2.jpg" alt="theme" />
+                        <div class="package-card-theme-overlay">
+                            <h3 class="package-card-theme-title">Casper and a Really Long Name</h3>
+                        </div>
+                    </a>
+                </div>
+                <footer class="package-card-footer">
+                    <a class="package-developer" href="#" target="_blank">
+                        <img src="https://pbs.twimg.com/profile_images/439941058404028416/3nRmjK6v.jpeg" alt="developer" />
+                        <span class="package-developer-name">GhostFoundation1</span>
+                    </a>
+                    <div class="package-controls">
+                        <a class="package-uninstall package-controls-button" href="#"><i class="icon-trash"></i>Uninstall</a>
+                    </div>
+                </footer>
+            </article>
+
+            <article class="package-card-theme">
+                <div class="package-card-content">
+                    <a class="package-card-theme-image" href="/theme/">
+                        <img src="http://cl.ly/b4FN/casper2.jpg" alt="theme" />
+                        <div class="package-card-theme-overlay">
+                            <h3 class="package-card-theme-title">Casper and a Really Long Name</h3>
+                        </div>
+                    </a>
+                </div>
+                <footer class="package-card-footer">
+                    <a class="package-developer" href="#" target="_blank">
+                        <img src="https://pbs.twimg.com/profile_images/439941058404028416/3nRmjK6v.jpeg" alt="developer" />
+                        <span class="package-developer-name">GhostFoundation1</span>
+                    </a>
+                    <div class="package-controls">
+                        <a class="package-uninstall package-controls-button" href="#"><i class="icon-trash"></i>Uninstall</a>
+                    </div>
+                </footer>
+            </article>
+
+            <article class="package-card-theme">
+                <div class="package-card-content">
+                    <a class="package-card-theme-image" href="/theme/">
+                        <img src="http://cl.ly/b4FN/casper2.jpg" alt="theme" />
+                        <div class="package-card-theme-overlay">
+                            <h3 class="package-card-theme-title">Casper and a Really Long Name</h3>
+                        </div>
+                    </a>
+                </div>
+                <footer class="package-card-footer">
+                    <a class="package-developer" href="#" target="_blank">
+                        <img src="https://pbs.twimg.com/profile_images/439941058404028416/3nRmjK6v.jpeg" alt="developer" />
+                        <span class="package-developer-name">GhostFoundation1</span>
+                    </a>
+                    <div class="package-controls">
+                        <a class="package-uninstall package-controls-button" href="#"><i class="icon-trash"></i>Uninstall</a>
+                    </div>
+                </footer>
+            </article>
+
+            <article class="package-card-theme">
+                <div class="package-card-content">
+                    <a class="package-card-theme-image" href="/theme/">
+                        <img src="http://cl.ly/b4FN/casper2.jpg" alt="theme" />
+                        <div class="package-card-theme-overlay">
+                            <h3 class="package-card-theme-title">Casper and a Really Long Name</h3>
+                        </div>
+                    </a>
+                </div>
+                <footer class="package-card-footer">
+                    <a class="package-developer" href="#" target="_blank">
+                        <img src="https://pbs.twimg.com/profile_images/439941058404028416/3nRmjK6v.jpeg" alt="developer" />
+                        <span class="package-developer-name">GhostFoundation1</span>
+                    </a>
+                    <div class="package-controls">
+                        <a class="package-uninstall package-controls-button" href="#"><i class="icon-trash"></i>Uninstall</a>
+                    </div>
+                </footer>
+            </article>
+
+        </div>
+
+    </section>
+        </main>
+
+        <aside id="ember766" class="ember-view gh-notifications"><!----></aside>
+
+        <!---->
+        <!---->
+
+    </div></div>
+
+</body>
+</html>
diff --git a/core/client/app/styles/layouts/packages.css b/core/client/app/styles/layouts/packages.css
index 1ddeaceac2..108f9f9580 100644
--- a/core/client/app/styles/layouts/packages.css
+++ b/core/client/app/styles/layouts/packages.css
@@ -23,7 +23,75 @@
 }
 
 
-/* Package Card
+/* Package Card Theme
+/* ---------------------------------------------------------- */
+
+.package-card-theme {
+    flex: 1 1 290px;
+    overflow: hidden;
+    margin: 10px;
+    max-width: 440px;
+    border: rgba(0,0,0,0.1) 1px solid;
+    border-radius: 5px;
+}
+
+.package-index .package-card-theme,
+.package-featured .package-card-theme {
+    flex: 1 1 240px;
+}
+
+.package-card-theme-image {
+    position: relative;
+    display: block;
+}
+
+.package-card-theme-image:hover img {
+    filter: grayscale(0.5) blur(1px);
+
+    -webkit-filter: grayscale(0.5) blur(1px);
+}
+
+.package-card-theme-image:hover .package-card-theme-overlay {
+    opacity: 1;
+    transition: all 0.2s ease;
+}
+
+.package-card-theme-image img {
+    display: block;
+    max-width: 100%;
+    line-height: 0;
+}
+
+.package-card-theme-overlay {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 10%;
+    background: rgba(0,20,40,0.2);
+    text-align: center;
+    opacity: 0;
+    transition: opacity 0.4s ease;
+}
+
+.package-card-theme-title {
+    color: #fff;
+    font-size: 2rem;
+    line-height: 1.15em;
+    font-weight: 100;
+}
+
+.package-card-theme .package-card-footer {
+    margin: 0;
+    padding: 16px 20px;
+    border-top: rgba(0,0,0,0.1) 1px solid;
+}
+
+/* Package Card App
 /* ---------------------------------------------------------- */
 
 .package-card-app {
@@ -73,6 +141,10 @@
     font-weight: normal;
 }
 
+
+/* Package Card Meta
+/* ---------------------------------------------------------- */
+
 .package-card-stats {
     position: absolute;
     top: -5px;
@@ -138,15 +210,6 @@
     margin-top: 15px;
     width: 100%;
 }
-@media (max-width: 540px) {
-    .package-card-footer {
-        flex-direction: column;
-        align-items: flex-start;
-    }
-    .package-card-footer .package-developer {
-        display: none;
-    }
-}
 
 .package-developer {
     display: flex;
@@ -221,7 +284,7 @@
 /* ---------------------------------------------------------- */
 
 @media (max-width: 800px) {
-    .package-grid {
+    .package-grid-apps {
         overflow: hidden;
         margin: 0 0 4vw 0;
         border: #e1e1e1 1px solid;
@@ -240,12 +303,19 @@
 }
 
 @media (max-width: 760px) {
-    .package-developer {
+    .package-card-app {
+        padding: 15px;
+    }
+    .package-card-app .package-developer {
         display: none;
     }
-    .package-card-footer {
+    .package-card-app .package-card-footer {
         justify-content: flex-end;
     }
+    .package-card-theme .package-card-footer {
+        margin: 0;
+        padding: 15px;
+    }
 }
 
 @media (max-width: 600px) {
@@ -254,3 +324,16 @@
         border: none;
     }
 }
+
+@media (max-width: 540px) {
+    .package-card-footer {
+        justify-content: flex-end;
+    }
+    .package-card-app .package-card-footer {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+    .package-card-footer .package-developer {
+        display: none;
+    }
+}
