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

Merge pull request #5333 from JohnONolan/packages2

Browse Source 
First pass on app management UI
This commit is contained in:
Hannah Wolfe 2015-05-25 17:52:30 +01:00
commit 5694608605
8 changed files with 528 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

263
core/client/app/html/apps.html Normal file
View File

@ -0,0 +1,263 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Apps</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-box"></i>Apps</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">Apps</h2>
<section class="view-actions">
<input id="blog-title" class="gh-input package-filter" type="text" name="general[title]" placeholder="Filter apps by name">
</section>
</header>
<section class="view-content">
<div class="package-grid">
<article class="package-card-app" data-href="/app/">
<div class="package-card-content">
<figure class="package-card-app-icon" style="background-image:url(https://pbs.twimg.com/profile_images/439941058404028416/3nRmjK6v.jpeg)"></figure>
<div class="package-card-meta">
<h3 class="package-card-app-title">Ghost</h3>
<div class="package-card-stats">
<div class="package-downloads">
<i class="icon-download"></i>
<span class="package-download-count">14,301</span>
</div>
</div>
<p class="package-card-app-desc">A UI theme that offers endless possibilities: one Atom, many Isotopes ;) Isotope adapts to match any syntax theme.</p>
</div>
</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-settings package-controls-button" href="#"><i class="icon-settings"></i>Settings</a>
<a class="package-uninstall package-controls-button" href="#"><i class="icon-trash"></i>Uninstall</a>
<a class="package-disable package-controls-button" href="#"><i class="icon-pause"></i>Disable</a>
</div>
</footer>
</article>
<article class="package-card-app" data-href="/app/">
<div class="package-card-content">
<figure class="package-card-app-icon" style="background-image:url(https://pbs.twimg.com/profile_images/439941058404028416/3nRmjK6v.jpeg)"></figure>
<div class="package-card-meta">
<h3 class="package-card-app-title">Ghost</h3>
<div class="package-card-stats">
<div class="package-downloads">
<i class="icon-download"></i>
<span class="package-download-count">14,301</span>
</div>
</div>
<p class="package-card-app-desc">A UI theme that offers endless possibilities: one Atom, many Isotopes ;) Isotope adapts to match any syntax theme.</p>
</div>
</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-settings package-controls-button" href="#"><i class="icon-settings"></i>Settings</a>
<a class="package-uninstall package-controls-button" href="#"><i class="icon-trash"></i>Uninstall</a>
<a class="package-enable package-controls-button" href="#"><i class="icon-play"></i>Enable</a>
</div>
</footer>
</article>
<article class="package-card-app" data-href="/app/">
<div class="package-card-content">
<figure class="package-card-app-icon" style="background-image:url(https://pbs.twimg.com/profile_images/439941058404028416/3nRmjK6v.jpeg)"></figure>
<div class="package-card-meta">
<h3 class="package-card-app-title">Ghost</h3>
<div class="package-card-stats">
<div class="package-downloads">
<i class="icon-download"></i>
<span class="package-download-count">14,301</span>
</div>
</div>
<p class="package-card-app-desc">A UI theme that offers endless possibilities: one Atom, many Isotopes ;) Isotope adapts to match any syntax theme.</p>
</div>
</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-settings package-controls-button" href="#"><i class="icon-settings"></i>Settings</a>
<a class="package-uninstall package-controls-button" href="#"><i class="icon-trash"></i>Uninstall</a>
<a class="package-disable package-controls-button" href="#"><i class="icon-pause"></i>Disable</a>
</div>
</footer>
</article>
<article class="package-card-app" data-href="/app/">
<div class="package-card-content">
<figure class="package-card-app-icon" style="background-image:url(https://pbs.twimg.com/profile_images/439941058404028416/3nRmjK6v.jpeg)"></figure>
<div class="package-card-meta">
<h3 class="package-card-app-title">Ghost</h3>
<div class="package-card-stats">
<div class="package-downloads">
<i class="icon-download"></i>
<span class="package-download-count">14,301</span>
</div>
</div>
<p class="package-card-app-desc">A UI theme that offers endless possibilities: one Atom, many Isotopes ;) Isotope adapts to match any syntax theme.</p>
</div>
</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-settings package-controls-button" href="#"><i class="icon-settings"></i>Settings</a>
<a class="package-uninstall package-controls-button" href="#"><i class="icon-trash"></i>Uninstall</a>
<a class="package-disable package-controls-button" href="#"><i class="icon-pause"></i>Disable</a>
</div>
</footer>
</article>
<article class="package-card-app" data-href="/app/">
<div class="package-card-content">
<figure class="package-card-app-icon" style="background-image:url(https://pbs.twimg.com/profile_images/439941058404028416/3nRmjK6v.jpeg)"></figure>
<div class="package-card-meta">
<h3 class="package-card-app-title">Ghost</h3>
<div class="package-card-stats">
<div class="package-downloads">
<i class="icon-download"></i>
<span class="package-download-count">14,301</span>
</div>
</div>
<p class="package-card-app-desc">A UI theme that offers endless possibilities: one Atom, many Isotopes ;) Isotope adapts to match any syntax theme.</p>
</div>
</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>
<a class="package-disable package-controls-button" href="#"><i class="icon-pause"></i>Disable</a>
</div>
</footer>
</article>
<article class="package-card-app" data-href="/app/">
<div class="package-card-content">
<figure class="package-card-app-icon" style="background-image:url(https://pbs.twimg.com/profile_images/439941058404028416/3nRmjK6v.jpeg)"></figure>
<div class="package-card-meta">
<h3 class="package-card-app-title">Ghost</h3>
<div class="package-card-stats">
<div class="package-downloads">
<i class="icon-download"></i>
<span class="package-download-count">14,301</span>
</div>
</div>
<p class="package-card-app-desc">A UI theme that offers endless possibilities: one Atom, many Isotopes ;) Isotope adapts to match any syntax theme.</p>
</div>
</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-settings package-controls-button" href="#"><i class="icon-settings"></i>Settings</a>
<a class="package-uninstall package-controls-button" href="#"><i class="icon-trash"></i>Uninstall</a>
<a class="package-disable package-controls-button" href="#"><i class="icon-pause"></i>Disable</a>
</div>
</footer>
</article>
</div>
</section>
</main>
<aside id="ember766" class="ember-view gh-notifications"><!----></aside>
<!---->
<!---->
</div></div>
</body>
</html>

1
core/client/app/styles/app.css
View File

@ -41,3 +41,4 @@
@import "layouts/about.css";
@import "layouts/tags.css";
@import "layouts/error.css";
@import "layouts/packages.css";

256
core/client/app/styles/layouts/packages.css Normal file
View File

@ -0,0 +1,256 @@
/* Packages - Themes / Apps
/* ---------------------------------------------------------- */
.package-filter {
border-radius: 5px;
}
@media (max-width: 1460px) {
.package-filter {
max-width: 700px;
}
}
/* Main Layout
/* ---------------------------------------------------------- */
.package-grid {
display: flex;
flex-flow: row wrap;
align-items: space-between;
margin: -10px -10px 4vw -10px;
max-width: 1200px;
}
/* Package Card
/* ---------------------------------------------------------- */
.package-card-app {
flex: 1 1 500px;
overflow: hidden;
margin: 10px;
padding: 20px;
max-width: 700px;
border: rgba(0,0,0,0.1) 1px solid;
border-radius: 5px;
transition: background 0.3s ease;
}
.package-card-app:hover {
background: rgba(0,20,60,0.03);
cursor: pointer;
transition: background 0.1s ease;
}
.package-card-content {
display: flex;
}
.package-card-app-icon {
flex: 0 0 60px;
margin: 0 15px 0 0;
width: 60px;
height: 60px;
background-position: center center;
background-size: cover;
border-radius: 15%;
}
.package-card-meta {
position: relative;
display: flex;
flex-direction: column;
}
.package-card-app-title {
overflow: hidden;
margin: 0 0 4px 0;
padding: 0 70px 0 0;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 1.9rem;
font-weight: normal;
}
.package-card-stats {
position: absolute;
top: -5px;
right: 0;
display: flex;
align-items: center;
}
.package-downloads {
display: flex;
align-items: center;
height: 26px;
border: transparent 1px solid;
color: var(--midgrey);
font-size: 13px;
line-height: 24px;
}
.package-downloads:hover {
cursor: default;
}
.package-downloads i {
margin-right: 5px;
font-size: 15px;
}
.package-download-count {
font-size: 13px;
}
.package-card-app-desc {
display: -webkit-box;
overflow: hidden;
margin: 0;
padding: 0;
max-height: 4.2rem;
height: 38px;
color: var(--midgrey);
text-overflow: ellipsis;
font-size: 1.4rem;
line-height: 1.3em;
font-weight: 200;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
@media (min-width: 600px) and (max-width: 1460px) {
.package-card-app-desc {
padding-right: 80px;
}
}
/* Package Card Footer
/* ---------------------------------------------------------- */
.package-card-footer {
display: flex;
justify-content: space-between;
align-items: center;
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;
align-items: center;
color: var(--midgrey);
}
.package-developer:hover {
color: var(--blue);
}
.package-developer img {
flex-shrink: 0;
margin-right: 6px;
width: 20px;
height: 20px;
border-radius: 100%;
}
.package-developer-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 1.4rem;
}
.package-controls {
flex-shrink: 0;
display: flex;
overflow: hidden;
border: rgba(0,0,0,0.1) 1px solid;
border-radius: 4px;
}
.package-controls-button {
display: flex;
align-items: center;
padding: 7px 12px;
border-left: rgba(0,0,0,0.1) 1px solid;
background: #fff;
color: var(--midgrey);
font-size: 1.3rem;
line-height: 1;
transition: none;
}
.package-controls-button:first-child {
border: none;
}
.package-controls-button:hover {
color: var(--darkgrey);
}
.package-controls-button i {
margin-right: 5px;
width: 11px;
height: 11px;
font-size: 11px;
}
.package-disable {
border-right: var(--green) 3px solid;
}
.package-enable {
border-right: var(--red) 3px solid;
}
/* Media Queries
/* ---------------------------------------------------------- */
@media (max-width: 800px) {
.package-grid {
overflow: hidden;
margin: 0 0 4vw 0;
border: #e1e1e1 1px solid;
border-radius: 5px;
}
.package-card-app {
margin: 0;
border: none;
border-top: #e1e1e1 1px solid;
border-radius: 0;
}
.package-card-app:first-of-type {
border-top: none;
}
}
@media (max-width: 760px) {
.package-developer {
display: none;
}
.package-card-footer {
justify-content: flex-end;
}
}
@media (max-width: 600px) {
.package-grid {
margin: -5px -20px 4vw -20px;
border: none;
}
}

6
core/client/app/styles/patterns/icons.css
View File

@ -253,3 +253,9 @@
.icon-add2:before {
content: "\e045";
}
.icon-pause:before {
content: "\e046";
}
.icon-play:before {
content: "\e047";
}

BIN
core/client/public/assets/fonts/ghosticons.eot
View File

Binary file not shown.

2
core/client/public/assets/fonts/ghosticons.svg
View File

@ -77,4 +77,6 @@
<glyph unicode="&#57411;" d="M355 338l-152-142-46 46c-4 4-11 4-15 0-4-4-4-11 0-15l53-53c2-2 5-3 8-3 2 0 5 1 7 3l160 149c4 4 4 11 0 15-4 4-10 4-15 0z m-99 174c-141 0-256-115-256-256 0-141 115-256 256-256 141 0 256 115 256 256 0 141-115 256-256 256z m0-491c-129 0-235 106-235 235 0 129 106 235 235 235 129 0 235-106 235-235 0-129-106-235-235-235z"/>
<glyph unicode="&#57412;" d="M146 73l73 0 0-73-73 0z m147 0l73 0 0-73-73 0z m-147 146l73 0 0-73-73 0z m147 0l73 0 0-73-73 0z m-147 147l73 0 0-73-73 0z m147 0l73 0 0-73-73 0z m-147 146l73 0 0-73-73 0z m147 0l73 0 0-73-73 0z"/>
<glyph unicode="&#57413;" d="M491 277l-213 0 0 214c0 11-10 21-21 21 0 0 0 0 0 0-12 0-22-10-22-21l0-214-214 0c-11 0-21-9-21-21 0-12 10-21 21-21l214 0 0-214c0-11 9-21 21-21l0 0c12 0 21 10 21 21l1 214 213 0c12 0 21 9 21 21 0 12-9 21-21 21z"/>
<glyph unicode="&#57414;" d="M224 512l-107 0c-6 0-10-5-10-11l0-490c0-6 4-11 10-11l107 0c6 0 11 5 11 11l0 490c0 6-5 11-11 11z m-11-491l-85 0 0 470 85 0z m182 491l-107 0c-6 0-11-5-11-11l0-490c0-6 5-11 11-11l107 0c6 0 10 5 10 11l0 490c0 6-4 11-10 11z m-11-491l-85 0 0 470 85 0z"/>
<glyph unicode="&#57415;" d="M506 266l-491 245c-3 2-7 1-10-1-3-2-5-5-5-9l0-490c0-4 2-7 5-9 2-1 4-2 6-2 1 0 3 0 4 1l491 245c4 2 6 6 6 10 0 4-2 8-6 10z m-485-238l0 456 456-228z"/>
</font></defs></svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 41 KiB

After

Width:  |  Height:  |  Size: 41 KiB

BIN
core/client/public/assets/fonts/ghosticons.ttf
View File

Binary file not shown.

BIN
core/client/public/assets/fonts/ghosticons.woff
View File

Binary file not shown.