Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-01-27 22:49:56 -05:00
Code Issues Activity

Optimise mobile navigation

Browse source 
Make everything a little bit larger on small screens
This commit is contained in:
John O'Nolan 2015-08-25 18:01:26 +02:00
parent f1a17d57a2
commit 4855fcc330
5 changed files with 67 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
core/client/app/styles/components/dropdowns.css
View file

@ -66,6 +66,17 @@
line-height: 1em;
}
@media (max-width: 500px) {
.dropdown-menu > li > a,
.dropdown-menu > li > button {
padding: 7px 8px;
font-size: 1.5rem;
}
.dropdown-menu i {
font-size: 16px;
}
}
/* States
/* ---------------------------------------------------------- */

5
core/client/app/styles/components/settings-menu.css
View file

@ -174,8 +174,3 @@
.mobile-menu-expanded .content-cover {
transform: translate3d(235px, 0px, 0px);
}
@media (max-width: 500px) {
.mobile-menu-expanded .content-cover {
transform: translate3d(75vw, 0, 0);
}
}

3
core/client/app/styles/layouts/auth.css
View file

@ -41,8 +41,7 @@
border-radius: 0;
text-transform: none;
letter-spacing: 0;
/* Needs white BG to hide browser-extension password tools like
lastpass and safari-password manager */
/* Needs white BG to hide ugly lastpass icon */
}
.forgotten-link:hover {

62
core/client/app/styles/layouts/main.css
View file

@ -13,6 +13,7 @@
.gh-viewport {
flex-grow: 1;
display: flex;
overflow: hidden;
max-height: 100vh;
}
@ -218,11 +219,15 @@
}
@media (max-width: 800px) {
.view-header {
padding-left: 0 !important;
}
.gh-mobilemenu-button {
flex-shrink: 0;
display: block;
margin: 0 5px 0 -10px;
padding: 10px;
margin: 0;
padding: 24px;
font-size: 18px;
line-height: 18px;
}
@ -236,24 +241,52 @@
position: absolute;
top: 0;
left: 0;
width: 235px;
width: 270px;
height: 100%;
transition: transform 0.4s cubic-bezier(0.1, 0.7, 0.1, 1);
transform: translate3d(-235px, 0px, 0px);
transform: translate3d(-270px, 0px, 0px);
}
.mobile-menu-expanded .gh-nav {
transform: translate3d(0,0,0);
}
.gh-nav-list a {
padding: 7px 10px 7px 15px;
border-radius: 0 4px 4px 0;
}
}
@media (max-width: 500px) {
.gh-mobilemenu-button {
padding: 24px 15px 24px 16px;
}
.gh-nav {
width: 75vw;
transform: translate3d(-75vw, 0px, 0px);
width: 80vw;
transform: translate3d(-80vw, 0px, 0px);
}
.mobile-menu-expanded .gh-nav {
transform: translate3d(0,0,0);
}
.mobile-menu-expanded .content-cover {
transform: translate3d(80vw, 0, 0);
}
.gh-nav-list {
font-size: 1.5rem;
}
.gh-nav-list-h {
font-size: 1.4rem;
}
.gh-nav-list i {
margin-right: 8px;
width: 17px;
height: 17px;
text-align: center;
font-size: 17px;
}
}
@ -344,8 +377,8 @@
}
.gh-help-menu .dropdown {
right: 112px;
bottom: 215px;
left: -180px;
}
.gh-help-menu .dropdown .dropdown-menu {
@ -382,7 +415,7 @@
.view-title {
display: flex;
align-items: baseline;
align-items: center;
overflow: hidden;
margin: 0;
padding: 0;
@ -434,3 +467,16 @@
.view-content p * {
user-select: text;
}
@media (max-width: 400px) {
.view-header {
padding: 0 7px;
height: 50px;
}
.view-title {
font-size: 1.8rem;
}
.view-content {
padding: 15px;
}
}

2
core/client/app/templates/components/gh-nav-menu.hbs
View file

@ -7,7 +7,7 @@
<i class="icon-arrow"></i>
{{/gh-dropdown-button}}
{{#gh-dropdown tagName="div" name="user-menu" closeOnClick="true"}}
<ul class="dropdown-menu dropdown-triangle-top js-user-menu-dropdown-menu" role="menu" style="right:-50%;left:auto;margin-right:40px">
<ul class="dropdown-menu dropdown-triangle-top js-user-menu-dropdown-menu" role="menu" style="right:-20px;left:auto;">
<li role="presentation">{{#link-to "about" classNames="gh-nav-menu-about dropdown-item js-nav-item" role="menuitem" tabindex="-1"}}<i class="icon-shop"></i> About Ghost{{/link-to}}</li>
<li class="divider"></li>
<li role="presentation">{{#link-to "team.user" session.user.slug classNames="dropdown-item user-menu-profile js-nav-item" role="menuitem" tabindex="-1"}}<i class="icon-user"></i> Your Profile{{/link-to}}</li>