From 83b7993ff331636c9ef77eed50bc2c744294721b Mon Sep 17 00:00:00 2001
From: John O'Nolan <john@ghost.org>
Date: Sat, 30 May 2015 23:12:40 +0100
Subject: [PATCH] Add theme selector, update package mgmt styles

---
 core/client/app/html/themes.html            | 36 +++++++++++++++++++++
 core/client/app/styles/layouts/packages.css |  5 ++-
 core/client/app/styles/patterns/forms.css   |  3 +-
 3 files changed, 42 insertions(+), 2 deletions(-)

diff --git a/core/client/app/html/themes.html b/core/client/app/html/themes.html
index 72dc64bd83..e6cfe2e422 100644
--- a/core/client/app/html/themes.html
+++ b/core/client/app/html/themes.html
@@ -85,6 +85,22 @@
 
     <section class="view-content">
 
+        <form>
+            <div class="form-group for-select">
+                <label for="activeTheme">Active Theme</label>
+                <span class="gh-select" tabindex="0" data-select-text="CodingHorror - 1.0.0">
+                   <select id="activeTheme" class="ember-view ember-select" name="general[activeTheme]"><!---->
+                       <option id="ember1360" class="ember-view" value="Casper-master">CasperPR - 1.0.1</option>
+                       <option id="ember1363" class="ember-view" value="blogdotghost">Blog - 1.0</option>
+                       <option id="ember1366" class="ember-view" value="casper">Casper - 1.2.4</option><option id="ember1369" class="ember-view" value="codinghorror">CodingHorror - 1.0.0</option>
+                       <option id="ember1372" class="ember-view" value="codinghorror.zip">codinghorror.zip</option>
+                       <option id="ember1375" class="ember-view" value="john">john</option>
+                    </select>
+               </span>
+                <p>Select a theme for your blog</p>
+            </div>
+        </form>
+
         <div class="package-grid package-grid-themes">
 
             <article class="package-card-theme">
@@ -207,6 +223,26 @@
                 </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>
diff --git a/core/client/app/styles/layouts/packages.css b/core/client/app/styles/layouts/packages.css
index 108f9f9580..f22fcb61ab 100644
--- a/core/client/app/styles/layouts/packages.css
+++ b/core/client/app/styles/layouts/packages.css
@@ -320,9 +320,12 @@
 
 @media (max-width: 600px) {
     .package-grid {
-        margin: -5px -20px 4vw -20px;
+        margin: -10px -10px 4vw -10px;
         border: none;
     }
+    .package-grid-apps {
+        margin: -10px -20px 4vw -20px;
+    }
 }
 
 @media (max-width: 540px) {
diff --git a/core/client/app/styles/patterns/forms.css b/core/client/app/styles/patterns/forms.css
index 5a95aaf32d..2757c77e5c 100644
--- a/core/client/app/styles/patterns/forms.css
+++ b/core/client/app/styles/patterns/forms.css
@@ -272,10 +272,11 @@ textarea {
     content: "\e00f";
     position: absolute;
     top: 50%;
-    right: 0.8em;
+    right: 1.2rem;
     margin-top: -0.5em;
     text-transform: none !important;
     font-family: "ghosticons" !important;
+    font-size: 1rem;
     line-height: 1;
     font-weight: normal !important;
     font-style: normal !important;