TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-12-01 05:50:35 +03:00
Code Issues Projects Releases Wiki Activity

Merge pull request #5362 from JohnONolan/thememgmt

Browse Source 
First pass theme management page
This commit is contained in:
Hannah Wolfe 2015-05-29 13:16:22 +01:00
commit e7a078a541
3 changed files with 320 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
core/client/app/html/apps.html
View File

@ -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">

223
core/client/app/html/themes.html Normal file
View File

@ -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>

109
core/client/app/styles/layouts/packages.css
View File

@ -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;
}
}