OpenSourceArk/Ghost
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Implement autonav

Browse Source
This commit is contained in:
John O'Nolan 2015-05-20 16:37:06 +01:00 committed by Hannah Wolfe
parent 19ccc32b9a
commit ac24592855
9 changed files with 136 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

132
ghost/admin/app/styles/layouts/main.css
View File

@ -19,11 +19,6 @@
position: relative;
flex-grow: 1;
display: flex;
margin-left: 15px;
}
.open-nav .gh-main {
margin-left: 0;
}
@ -31,67 +26,20 @@
/* ---------------------------------------------------------- */
.gh-nav {
position: absolute;
top: 0;
left: -220px;
z-index: 10;
display: block;
width: 235px;
height: 100%;
border-right: #e1e1e1 1px solid;
background: #f6f6f6;
transition: transform 0.2s;
transform: translateX(0);
}
.gh-nav:hover {
transform: translateX(220px);
}
.open-nav .gh-nav {
position: static;
flex: 0 0 235px;
display: flex;
flex-direction: column;
width: auto;
height: auto;
border-right: #e1e1e1 1px solid;
background: #f6f6f6;
transform: translateX(0);
}
.gh-nav-toggle {
position: absolute;
top: 0;
right: 0;
z-index: 5;
width: 15px;
height: 100%;
text-align: center;
cursor: pointer;
}
.gh-nav-toggle:hover {
background-color: rgb(224, 238, 250);
}
.gh-nav-toggle:after {
content: ">";
position: absolute;
top: 50%;
left: 50%;
font-size: 14px;
opacity: 0.25;
transform: translateX(-50%) translateY(-50%);
}
.open-nav .gh-nav-toggle:after {
content: "<";
}
.gh-nav-menu {
flex-shrink: 0;
display: flex;
align-items: center;
padding: 15px 30px 15px 15px;
padding: 15px;
}
.gh-nav-menu i {
@ -147,7 +95,7 @@
.gh-nav-search {
position: relative;
margin: 0 30px 10px;
margin: 0 15px 10px;
}
.gh-nav-search-input {
@ -181,7 +129,7 @@
.gh-nav-list {
margin: 0;
padding: 0 30px 0 0;
padding: 0 15px 0 0;
list-style: none;
font-size: 1.3rem;
line-height: 1.5em;
@ -215,7 +163,7 @@
}
.gh-nav-list a:not(.active):hover {
background: color(var(--blue) lightness(+30%));
background: color(var(--blue) alpha(-80%));
color: var(--darkgrey);
}
@ -228,24 +176,20 @@
}
.gh-nav-footer {
position: absolute;
bottom: 0;
flex-shrink: 0;
display: flex;
align-items: center;
padding-right: 15px;
width: 100%;
height: 40px;
border-top: #e1e1e1 1px solid;
}
.gh-nav-footer-sitelink {
flex-grow: 1;
display: flex;
padding: 12px;
color: var(--midgrey);
text-align: center;
font-size: 1.3rem;
line-height: 1.2em;
line-height: 1;
}
.gh-nav-footer-sitelink i {
@ -258,6 +202,66 @@
}
/* Auto Nav - Opens and closes like OSX dock
/* ---------------------------------------------------------- */
.gh-autonav-toggle {
display: flex;
justify-content: center;
align-items: center;
padding: 5px 10px;
width: 45px;
height: 27px;
border-right: #e1e1e1 1px solid;
line-height: 1;
cursor: pointer;
}
.gh-autonav-toggle:hover {
cursor: pointer;
}
.gh-autonav-toggle i {
transition: all 0.2s ease;
}
.gh-autonav-toggle:hover i {
color: var(--blue);
}
/* Hide the nav */
.gh-autonav .gh-nav {
position: absolute;
top: 0;
left: -220px;
z-index: 1000;
width: 235px;
height: 100%;
transition: transform 0.15s;
transform: translateX(0);
}
/* THE FUTURE: Super sexy background blur for Webkit - http://cl.ly/b1rG */
@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
.gh-autonav .gh-nav {
background: rgba(246,246,246, 0.7);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
}
/* Bring it back on hover */
.gh-autonav .gh-nav.open {
transform: translateX(220px);
}
/* Move main content over for the closed-nav trigger bar */
.gh-autonav .gh-main {
margin-left: 15px;
}
/* Help (?) Menu
/* ---------------------------------------------------------- */

6
ghost/admin/app/styles/patterns/icons.css
View File

@ -232,3 +232,9 @@
.icon-signout:before {
content: "\e036";
}
.icon-minimise:before {
content: "\e03f";
}
.icon-maximise:before {
content: "\e040";
}

4
ghost/admin/app/templates/-nav-menu.hbs
View File

@ -40,6 +40,9 @@
</ul>
</section>
<footer class="gh-nav-footer">
<div class="gh-autonav-toggle">
<i class="icon-minimise"></i>
</div>
<a class="gh-nav-footer-sitelink" href="{{gh-path 'blog'}}" target="_blank">View blog <i class="icon-external"></i></a>
<div class="gh-help-menu">
{{#gh-dropdown-button dropdownName="help-menu" tagName="div"}}
@ -60,5 +63,4 @@
{{/gh-dropdown}}
</div>{{! .help-menu }}
</footer>
<section class="gh-nav-toggle"></section>
</nav>

79
ghost/admin/app/templates/application.hbs
View File

@ -1,50 +1,47 @@
<a class="sr-only sr-only-focusable" href="#gh-main">Skip to main content</a>
<!-- TODO: Rename gh-alerts, remove location attr -->
{{gh-notifications location="top" notify="topNotificationChange"}}
<!-- TODO: SHOULD RENDER LIKE
<aside id="ember754" class="gh-alerts">
<article class="gh-alert gh-alert-blue">
<div class="gh-alert-content">
<a href="https://ghost.org/download">Ghost 0.6.4</a> is available! Hot Damn. Please <a href="http://support.ghost.org/how-to-upgrade/" target="_blank">upgrade</a> now.
</div>
<button class="gh-alert-close icon-x" data-ember-action="779"><span class="hidden">Close</span></button>
</article>
</aside>
-->
<div class="gh-viewport">
<!-- TODO: Rename gh-alerts, remove location attr -->
{{gh-notifications location="top" notify="topNotificationChange"}}
{{#unless signedOut}}
{{partial "nav-menu"}}
{{/unless}}
<main id="gh-main" class="gh-main" role="main" data-notification-count={{topNotificationCount}}>
{{outlet}}
</main>
<!-- TODO: Remove location attr -->
{{gh-notifications location="bottom"}}
<!-- TODO: SHOULD RENDER LIKE
<aside id="ember754" class="gh-alerts">
<article class="gh-alert gh-alert-blue">
<div class="gh-alert-content">
<a href="https://ghost.org/download">Ghost 0.6.4</a> is available! Hot Damn. Please <a href="http://support.ghost.org/how-to-upgrade/" target="_blank">upgrade</a> now.
<aside id="ember721" class="ember-view gh-notifications">
<article class="gh-notification gh-notification-green">
<div class="gh-notification-content">
<strong>Hannah Wolfe</strong> just updated the post <em>12 Reasons Why You're Not Selling Anything</em>.
</div>
<button class="gh-alert-close icon-x" data-ember-action="779"><span class="hidden">Close</span></button>
<button class="gh-notification-close icon-x" data-ember-action="1077"><span class="hidden">Close</span></button>
</article>
<article class="gh-notification">
<div class="gh-notification-content">
<strong>Hannah Wolfe</strong> just updated the post <em>20 Reasons Why You're Not Selling Anything</em>.
</div>
<button class="gh-notification-close icon-x" data-ember-action="1077"><span class="hidden">Close</span></button>
</article>
</aside>
-->
{{outlet "modal"}}
{{outlet "settings-menu"}}
<div class="gh-viewport-container open-nav">
{{#unless signedOut}}
{{partial "nav-menu"}}
{{/unless}}
<main id="gh-main" class="gh-main" role="main" data-notification-count={{topNotificationCount}}>
{{outlet}}
<!-- TODO: Remove location attr -->
{{gh-notifications location="bottom"}}
<!-- TODO: SHOULD RENDER LIKE
<aside id="ember721" class="ember-view gh-notifications">
<article class="gh-notification gh-notification-green">
<div class="gh-notification-content">
<strong>Hannah Wolfe</strong> just updated the post <em>12 Reasons Why You're Not Selling Anything</em>.
</div>
<button class="gh-notification-close icon-x" data-ember-action="1077"><span class="hidden">Close</span></button>
</article>
<article class="gh-notification">
<div class="gh-notification-content">
<strong>Hannah Wolfe</strong> just updated the post <em>20 Reasons Why You're Not Selling Anything</em>.
</div>
<button class="gh-notification-close icon-x" data-ember-action="1077"><span class="hidden">Close</span></button>
</article>
</aside>
-->
</main>
{{outlet "modal"}}
{{outlet "settings-menu"}}
</div>{{!gh-viewport-container}}
</div>{{!gh-viewport}}
</div>{{!gh-viewport}}

19
ghost/admin/app/views/application.js
View File

@ -27,6 +27,25 @@ var ApplicationView = Ember.View.extend({
});
});
// TODO: ABOVE - All of this can be removed
// TODO: BELOW - John wrote this, reimplement in a not-shit way
// #### Toggle nav between fixed and auto
$('.gh-autonav-toggle').on('click tap', function () {
$('.gh-viewport').toggleClass('gh-autonav');
$('.gh-autonav-toggle i').toggleClass('icon-minimise').toggleClass('icon-maximise');
$('.gh-nav').removeClass('open');
});
// #### Open and close the nav on hover
$('.gh-nav').mouseenter(function() {
$('.gh-nav').addClass('open');
});
$('.gh-main').mouseenter(function() {
$('.gh-nav').removeClass('open');
});
mobileQuery.addListener(this.get('closeGlobalMobileNavOnDesktop'));
},

BIN
ghost/admin/public/assets/fonts/ghosticons.eot
View File

Binary file not shown.

2
ghost/admin/public/assets/fonts/ghosticons.svg
View File

@ -70,4 +70,6 @@
<glyph unicode="&#57405;" d="M286 256l220 220c8 8 8 21 0 30-9 8-22 8-30 0l-220-220-220 220c-8 8-21 8-30 0-8-9-8-22 0-30l220-220-220-220c-8-8-8-21 0-30 4-4 10-6 15-6 6 0 11 2 15 6l220 220 220-220c4-4 9-6 15-6 5 0 11 2 15 6 8 9 8 22 0 30z"/>
<glyph unicode="&#57406;" d="M19 512l260 0c10 0 19-9 19-19l0-65c0-11-9-20-19-20l-260 0c-10 0-19 9-19 20l0 65c0 10 9 19 19 19z m0-207l474 0c10 0 19-9 19-20l0-65c0-10-9-19-19-19l-474 0c-10 0-19 9-19 19l0 65c0 11 9 20 19 20z m408 207l65 0c10 0 19-9 19-19l0-65c0-11-9-20-19-20l-65 0c-11 0-20 9-20 20l0 65c0 10 9 19 20 19z m-408-408l162 0c11 0 20-9 20-20l0-65c0-10-9-19-20-19l-162 0c-10 0-19 9-19 19l0 65c0 11 9 20 19 20z m311 1l162 0c10 0 19-9 19-20l0-65c0-10-9-19-19-19l-162 0c-11 0-20 9-20 19l0 65c0 11 9 20 20 20z"/>
<glyph unicode="&#57398;" d="M288 127c0 0 0 0 0 0-6 0-10-4-10-10l-1-75-256 1 0 426 257 0 0-75c0-6 5-11 11-11 0 0 0 0 0 0 6 0 10 5 10 11l1 85c0 6-5 11-11 11l-278 1c0 0 0 0 0 0-3 0-6-1-8-3-2-2-3-5-3-8l0-448c0-6 5-11 11-11l277 0 0 0c6 0 11 5 11 10l0 86c0 6-5 10-11 10z m223 122c-1 2-2 4-4 5l-104 105c-4 4-11 4-15 0-4-4-4-11 0-15l87-88-357 0c-6 0-11-5-11-11 0-6 5-11 11-11l359 1-90-90c-4-4-4-10 0-15 2-2 5-3 8-3 3 0 5 1 7 3l107 107c2 2 3 5 3 7 0 2 0 4-1 5z"/>
<glyph unicode="&#57407;" d="M501 277l-337 0 68 67c4 5 4 11 0 16-5 4-11 4-16 0l-85-86c-1-1-2-2-2-3-1-3-1-6 0-8 0-2 1-3 2-4l85-85c3-2 5-3 8-3 3 0 5 1 8 3 4 4 4 11 0 15l-68 67 337 0c6 0 11 5 11 11 0 6-5 10-11 10z m-490 235c-6 0-11-5-11-11l0-490c0-6 5-11 11-11 6 0 10 5 10 11l0 490c0 6-4 11-10 11z"/>
<glyph unicode="&#57408;" d="M511 249c0 2-1 3-2 4l-85 85c-5 4-11 4-16 0-4-4-4-11 0-15l68-67-209 0c-6 0-11-5-11-11 0-6 5-10 11-10l209 0-68-67c-4-5-4-11 0-16 3-2 5-3 8-3 3 0 5 1 8 3l85 86c1 1 2 2 2 3 1 3 1 6 0 8z m-351 263l-149 0c-6 0-11-5-11-11l0-490c0-6 5-11 11-11l149 0c6 0 11 5 11 11l0 490c0 6-5 11-11 11z m-11-491l-128 0 0 470 128 0z"/>
</font></defs></svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 38 KiB

After

Width:  |  Height:  |  Size: 39 KiB

BIN
ghost/admin/public/assets/fonts/ghosticons.ttf
View File

Binary file not shown.

BIN
ghost/admin/public/assets/fonts/ghosticons.woff
View File

Binary file not shown.