Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-03-11 02:12:21 -05:00
Code Issues Activity

Introducing new mobile header and more mobile nav components

Browse source
This commit is contained in:
John O'Nolan 2014-07-29 12:10:20 +03:00
parent 5a1e3299f8
commit 12f78f22ce
9 changed files with 222 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
core/client/assets/sass/components/navigation.scss
View file

@ -8,6 +8,11 @@
@include position(fixed, 0px 0px auto 0px);
z-index: 9999;
background: $darkgrey;
.thing,
.thing2 {
display: none; // hide until mobile
}
}
// Wrapper for each item
@ -31,13 +36,13 @@
color: rgba(255,255,255,0.7);
text-transform: uppercase;
border-radius: 4px;
@include transition(all 0.5s);
@include transition(color 0.5s, background 0.5s);
}
.nav-item.active .nav-label,
.nav-item:hover .nav-label {
color: rgba(255,255,255,0.9);
background: darken($darkgrey, 7%);
@include transition(all 0.1s);
@include transition(color 0.1s, background 0.1s);
}
// Ghost branding
@ -114,6 +119,7 @@
}//.user-menu
//
// Mobile
// --------------------------------------------------
@ -128,6 +134,10 @@
bottom: 0;
left: 0;
overflow: auto;
.thing, .thing2 {
display: block;
}
}
.nav-item {
@ -153,6 +163,7 @@
height: auto;
padding: 15px;
@include position(absolute, auto 0px 0px 0px);
@include transition(color 0.5s, background 0.5s);
.nav-label {
padding: 0;
@ -180,7 +191,7 @@
&:hover {
color: rgba(255,255,255,0.9);
background: darken($darkgrey, 7%);
@include transition(all 0.1s);
@include transition(color 0.1s, background 0.1s);
}
&:hover .name {
background: transparent;

62
core/client/assets/sass/layouts/default.scss Normal file
View file

@ -0,0 +1,62 @@
//
// Main Layout
// --------------------------------------------------
// The <main> content wrapper
.viewport {
@include position(absolute, 0px 0px 0px 0px);
overflow: hidden;
// TODO: move this to .global-nav-expanded class
@media (max-width: 1025px) {
@include transform(translate3d(260px, 0px, 0px));
}
}
// The header bar, only visible below 1025px
.page-header {
position: relative;
height: 44px;
line-height: 44px;
text-align: center;
color: #fff;
background: $darkgrey;
overflow: hidden;
@media (min-width: 1025px) {
height: 60px;
line-height: 60px;
}
// Centered page heading
h2 {
display: block;
height: 44px;
line-height: 44px;
margin: 0;
padding: 0 15%;
font-size: 1.8rem;
font-weight: normal;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
@media (min-width: 1025px) {
height: 60px;
line-height: 60px;
}
}
}
// The burger to expand .global-nav menu
.menu-button {
@include icon($i-menu, 18px) { line-height: 44px; }
display: block;
position: absolute;
top: 0;
left: 0;
width: 44px;
height: 44px;
color: #fff;
}

27
core/client/assets/sass/patterns/global.scss
View file

@ -13,6 +13,33 @@ html {
body {
width: 100%;
-webkit-font-feature-settings: 'kern' 1;
-moz-font-feature-settings: 'kern' 1;
font-feature-settings: 'kern' 1;
}
::-moz-selection {
background: #D6EDFF;
}
::selection {
background: #D6EDFF;
}
h1, h2, h3,
h4, h5, h6 {
-webkit-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1;
-moz-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1;
font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1;
line-height: 1.15em;
margin: 0 0 0.3em 0;
}
p, ul, ol, dl {
-webkit-font-feature-settings: 'liga' 1, 'onum' 1, 'kern' 1;
-moz-font-feature-settings: 'liga' 1, 'onum' 1, 'kern' 1;
font-feature-settings: 'liga' 1, 'onum' 1, 'kern' 1;
margin: 0 0 1.7em 0;
}
a, a:active {

1
core/client/assets/sass/screen.scss
View file

@ -32,3 +32,4 @@
// Layouts - Individual application screens
// --------------------------------------------------
@import "layouts/default";

6
core/client/docs/_includes/nav/global.html
View file

@ -5,13 +5,13 @@
</a>
<a href="/" class="nav-item content active" href="#">
<div class="nav-label">Content</div>
<div class="nav-label"><i class="icon-content"></i> Content</div>
</a>
<a class="nav-item new-post" href="#">
<div class="nav-label">New Post</div>
<div class="nav-label"><i class="icon-add"></i> New Post</div>
</a>
<a class="nav-item settings" href="#">
<div class="nav-label">Settings</div>
<div class="nav-label"><i class="icon-settings2"></i> Settings</div>
</a>
<a class="nav-item thing" href="#">
<div class="nav-label">Thing</div>

2
core/client/docs/_layouts/default.html
View file

@ -11,7 +11,7 @@
{% include nav/global.html %}
<!-- Docs page -->
<main id="gh-main" role="main">
<main id="gh-main" class="viewport" role="main">
{{content}}
</main>

118
core/client/docs/dist/css/ghost-ui.css vendored
View file

@ -589,7 +589,30 @@ html {
-webkit-tap-highlight-color: transparent; }
body {
width: 100%; }
width: 100%;
-webkit-font-feature-settings: 'kern' 1;
-moz-font-feature-settings: 'kern' 1;
font-feature-settings: 'kern' 1; }
::-moz-selection {
background: #D6EDFF; }
::selection {
background: #D6EDFF; }
h1, h2, h3,
h4, h5, h6 {
-webkit-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1;
-moz-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1;
font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1;
line-height: 1.15em;
margin: 0 0 0.3em 0; }
p, ul, ol, dl {
-webkit-font-feature-settings: 'liga' 1, 'onum' 1, 'kern' 1;
-moz-font-feature-settings: 'liga' 1, 'onum' 1, 'kern' 1;
font-feature-settings: 'liga' 1, 'onum' 1, 'kern' 1;
margin: 0 0 1.7em 0; }
a, a:active {
text-decoration: none; }
@ -630,6 +653,9 @@ a, a:active {
left: 0px;
z-index: 9999;
background: #242628; }
.global-nav .thing,
.global-nav .thing2 {
display: none; }
.nav-item {
position: relative;
@ -649,17 +675,17 @@ a, a:active {
color: rgba(255, 255, 255, 0.7);
text-transform: uppercase;
border-radius: 4px;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s; }
-webkit-transition: color 0.5s, background 0.5s;
-moz-transition: color 0.5s, background 0.5s;
transition: color 0.5s, background 0.5s; }
.nav-item.active .nav-label,
.nav-item:hover .nav-label {
color: rgba(255, 255, 255, 0.9);
background: #131415;
-webkit-transition: all 0.1s;
-moz-transition: all 0.1s;
transition: all 0.1s; }
-webkit-transition: color 0.1s, background 0.1s;
-moz-transition: color 0.1s, background 0.1s;
transition: color 0.1s, background 0.1s; }
.ghost-logo {
display: inline-block;
@ -746,6 +772,8 @@ a, a:active {
bottom: 0;
left: 0;
overflow: auto; }
.global-nav .thing, .global-nav .thing2 {
display: block; }
.nav-item {
position: relative;
@ -769,7 +797,10 @@ a, a:active {
top: auto;
right: 0px;
bottom: 0px;
left: 0px; }
left: 0px;
-webkit-transition: color 0.5s, background 0.5s;
-moz-transition: color 0.5s, background 0.5s;
transition: color 0.5s, background 0.5s; }
.user-menu .nav-label {
padding: 0;
height: auto; }
@ -788,11 +819,76 @@ a, a:active {
.user-menu:hover {
color: rgba(255, 255, 255, 0.9);
background: #131415;
-webkit-transition: all 0.1s;
-moz-transition: all 0.1s;
transition: all 0.1s; }
-webkit-transition: color 0.1s, background 0.1s;
-moz-transition: color 0.1s, background 0.1s;
transition: color 0.1s, background 0.1s; }
.user-menu:hover .name {
background: transparent;
-webkit-transition: none;
-moz-transition: none;
transition: none; } }
.viewport {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
overflow: hidden; }
@media (max-width: 1025px) {
.viewport {
-webkit-transform: translate3d(260px, 0px, 0px);
-moz-transform: translate3d(260px, 0px, 0px);
-ms-transform: translate3d(260px, 0px, 0px);
-o-transform: translate3d(260px, 0px, 0px);
transform: translate3d(260px, 0px, 0px); } }
.page-header {
position: relative;
height: 44px;
line-height: 44px;
text-align: center;
color: #fff;
background: #242628;
overflow: hidden; }
@media (min-width: 1025px) {
.page-header {
height: 60px;
line-height: 60px; } }
.page-header h2 {
display: block;
height: 44px;
line-height: 44px;
margin: 0;
padding: 0 15%;
font-size: 1.8rem;
font-weight: normal;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden; }
@media (min-width: 1025px) {
.page-header h2 {
height: 60px;
line-height: 60px; } }
.menu-button {
display: block;
position: absolute;
top: 0;
left: 0;
width: 44px;
height: 44px;
color: #fff; }
.menu-button:before {
font-family: "GhostIcons";
font-weight: normal;
font-style: normal;
vertical-align: -7%;
text-transform: none;
speak: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
content: "\e005";
font-size: 18px;
line-height: 44px; }
.menu-button:hover {
text-decoration: none; }

4
core/client/docs/dist/css/ghost-ui.min.css vendored
View file

File diff suppressed because one or more lines are too long

5
core/client/docs/index.html
View file

@ -3,4 +3,7 @@ layout: default
title: Ghost UI &middot; Making publishing beautiful.
---
test
<header class="page-header">
<a class="menu-button" href="#"><span class="sr-only">Menu</span></a>
<h2>Home</h2>
</header>