show menu item in nav if desktop

zutrinken · Jan 23, 2021 · b0146e3 · b0146e3
1 parent 45a7964
commit b0146e3
Show file tree

Hide file tree

Showing 7 changed files with 154 additions and 142 deletions.
diff --git a/assets/css/style.css b/assets/css/style.css
diff --git a/assets/js/script.js b/assets/js/script.js
diff --git a/default.hbs b/default.hbs
@@ -18,43 +18,48 @@
 <body class="{{body_class}}">
 	<div id="wrapper">
 		<div id="ajax-container">
-			<nav id="nav" class="nav">
-				<div class="nav-logo">
-					<a href="{{@site.url}}">
-						{{#if @site.logo}}
-						<img src="{{@site.logo}}" alt="{{t "Logo" }}" />
-						{{/if}}
-						<span class="name">{{@site.title}}</span>
-						{{#if @site.description}}
-							<span class="description">{{@site.description}}</span>
+
+				<nav id="nav" class="nav">
+					<div class="nav-logo">
+						<a href="{{@site.url}}">
+							{{#if @site.logo}}
+							<img src="{{@site.logo}}" alt="{{t "Logo" }}" />
+							{{/if}}
+							<span class="name">{{@site.title}}</span>
+							{{#if @site.description}}
+								<span class="description">{{@site.description}}</span>
+							{{/if}}
+						</a>
+					</div>
+					<div class="nav-menu">
+						{{#if @site.navigation}}
+							{{navigation}}
+							<a class="nav-menu-open" data-action="menu" data-target="menu"><i class="icon-menu"></i></a>
 						{{/if}}
-					</a>
-				</div>
-				<div class="nav-menu">
-					{{#if @site.navigation}}
-					<a class="menu" data-action="menu" data-target="menu"><i class="icon-menu"></i></a>
-					{{/if}}
-				</div>
-			</nav>
+					</div>
+				</nav>
+
 			{{{body}}}
 			<div id="body-class" style="display: none;" class="{{body_class}}"></div>
-			<footer id="footer">
-				<section class="credits">
-					<span class="credits-theme">{{t "Theme" }} <a href="https://github.com/zutrinken/bleak" target="_blank" rel="nofollow">Bleak</a> {{t "by"}} <a href="https://github.com/zutrinken" target="_blank" rel="nofollow">zutrinken</a></span>
-					<span class="credits-links">
-						{{#if @site.twitter}}
-						<a class="twitter" href="{{twitter_url}}" title="{{@site.twitter}}"><i class="icon-twitter"></i></a>
-						{{/if}}
-						{{#if @site.facebook}}
-						<a class="facebook" href="{{facebook_url}}" title="{{@site.facebook}}"><i class="icon-facebook"></i></a>
-						{{/if}}
-						<a class="rss" href="{{@site.url}}/rss/"><i class="icon-rss"></i></a>
-					</span>
-					<span class="credits-software">{{t "Published with"}} <a href="http://ghost.org" target="_blank" rel="nofollow">Ghost</a></span>
-				</section>
-			</footer>
+
+				<footer id="footer">
+					<section class="credits">
+						<span class="credits-theme">{{t "Theme" }} <a href="https://github.com/zutrinken/bleak" target="_blank" rel="nofollow">Bleak</a> {{t "by"}} <a href="https://github.com/zutrinken" target="_blank" rel="nofollow">zutrinken</a></span>
+						<span class="credits-links">
+							{{#if @site.twitter}}
+							<a class="twitter" href="{{twitter_url}}" title="{{@site.twitter}}"><i class="icon-twitter"></i></a>
+							{{/if}}
+							{{#if @site.facebook}}
+							<a class="facebook" href="{{facebook_url}}" title="{{@site.facebook}}"><i class="icon-facebook"></i></a>
+							{{/if}}
+							<a class="rss" href="{{@site.url}}/rss/"><i class="icon-rss"></i></a>
+						</span>
+						<span class="credits-software">{{t "Published with"}} <a href="http://ghost.org" target="_blank" rel="nofollow">Ghost</a></span>
+					</section>
+				</footer>
+
 			{{#if @site.navigation}}
-			{{navigation}}
+			{{> navigation-modal}}
 			{{/if}}
 		</div>
 	</div>

diff --git a/partials/navigation-modal.hbs b/partials/navigation-modal.hbs
@@ -0,0 +1,21 @@
+<div id="menu" data-target="menu">
+	<div class="menu-header">
+		<span class="menu-label">{{t "Menu"}}</span>
+		<a class="menu-close" data-action="menu" data-target="menu"></a>
+	</div>
+	{{navigation}}
+	{{#if @labs.members}}
+		<div class="menu-members">
+			{{#if @member}}
+					<button class="members-account" data-portal="account">{{t "Account"}}</button>
+				{{#unless @member.paid}}
+						<button class="members-upgrade cta" data-portal="account/plans">{{t "Upgrade"}}</button>
+				{{/unless}}
+			{{else}}
+					<button class="members-login" data-portal="signin">{{t "Sign in"}}</button>
+					<button class="members-subscribe cta" data-portal="signup">{{t "Sign up"}}</button>
+			{{/if}}
+		</div>
+	{{/if}}
+</div>
+<div class="overlay"></div>
diff --git a/partials/navigation.hbs b/partials/navigation.hbs
@@ -1,34 +1,7 @@
-<div id="menu" data-target="menu">
-	<div class="menu-header">
-		<span class="menu-label">{{t "Menu"}}</span>
-		<a class="menu-close" data-action="menu" data-target="menu"></a>
-	</div>
-	<ul class="menu-list">
-		{{#foreach navigation}}
-		<li class="menu-list-item">
-			<a class="{{slug}}{{#if current}} current{{/if}}" href="{{url absolute="true"}}">{{label}}</a>
-		</li>
-		{{/foreach}}
-		{{#if @labs.members}}
-			<li class="menu-list-item menu-list-item-members">
-				{{#if @member}}
-
-						<button class="members-account" data-portal="account">{{t "Account"}}</button>
-
-					{{#unless @member.paid}}
-
-							<button class="members-upgrade cta" data-portal="account/plans">{{t "Upgrade"}}</button>
-
-					{{/unless}}
-				{{else}}
-
-						<button class="members-login" data-portal="signin">{{t "Sign in"}}</button>
-
-						<button class="members-subscribe cta" data-portal="signup">{{t "Sign up"}}</button>
-
-				{{/if}}
-			</li>
-		{{/if}}
-	</ul>
-</div>
-<div class="overlay"></div>
+<ul class="menu-list">
+	{{#foreach navigation}}
+	<li class="menu-list-item">
+		<a class="{{slug}}{{#if current}} current{{/if}}" href="{{url absolute="true"}}">{{label}}</a>
+	</li>
+	{{/foreach}}
+</ul>
diff --git a/src/js/script.js b/src/js/script.js
@@ -266,7 +266,7 @@ jQuery(function($) {
    	}
 	});
 
-	$('body').on('click', '#post-index .post .js-ajax-link', function() {
+	$('body').on('click', '.js-ajax-link:not(.post-nav-item)', function() {
 		html.addClass('post-loading');
 		var post = $(this).parents('.post');
 		post.addClass('initial');

diff --git a/src/sass/style.scss b/src/sass/style.scss
@@ -742,6 +742,11 @@ body {
 	padding-bottom: 4em;
 	border-radius: 2px;
 	overflow: hidden;
+  transform: scale(1) translate3d(0,0,0);
+	transform-style: preserve-3d;
+	transform-origin: 50% top;
+	opacity: 1;
+	transition: all ease-out .5s;
 
 	@media only screen and (max-width: $breakpoint-tablet) {
 		border-top: 1px solid $color-gray-90;
@@ -751,15 +756,8 @@ body {
 	}
 }
 
-.post-template .wrapper {
-	transform: scale(1) translate3d(0,0,0);
-	transform-style: preserve-3d;
-	transform-origin: 50% top;
-	opacity: 1;
-	transition: all ease-out .5s;
-}
-
-.post-loading .post-template .wrapper {
+.post-loading .post-template .wrapper,
+.post-loading .page-template .wrapper {
 	transform: scale(0.9) translate3d(0,2em,0);
 	opacity: 0;
 }
@@ -859,32 +857,21 @@ body {
 	position: relative;
 	width: 100%;
 	top: 0;
+  display: flex;
+  justify-content: space-between;
 	background: #fff;
 	z-index: 70;
 	transition: all ease-out 0.4s;
 	transform: translate3d(0,0,0);
 	transform-style: preserve-3d;
 	opacity: 1;
 
-	&:after {
-		clear: both;
-		content: '';
-		display: table;
-	}
-
 	.nav-logo {
 		max-width: 100%;
 		height: 4em;
 		padding: 1em;
-		padding-right: 5em;
 		box-sizing: border-box;
 
-		&:after {
-			clear: both;
-			content: '';
-			display: table;
-		}
-
 		a {
 			display: inline-flex;
 		}
@@ -925,18 +912,36 @@ body {
 	}
 
 	.nav-menu {
-		position: absolute;
-		right: 0;
-		top: 0;
+    display: flex;
 
-		&:after {
-			clear: both;
-			content: '';
-			display: table;
-		}
+    .menu-list {
+      display: flex;
+      list-style: none;
+      padding: 0;
+      margin: 0;
+      line-height: 2em;
 
-		a {
-			display: block;
+      @media only screen and (max-width: $breakpoint-tablet) {
+				display: none;
+			}
+
+      .menu-list-item {
+        padding: 1em;
+
+        a {
+          display: block;
+          white-space: nowrap;
+
+          &.current {
+  					font-weight: 700;
+  					color: $color-gray-25;
+  				}
+        }
+      }
+    }
+
+		.nav-menu-open {
+			display: none;
 			width: 1em;
 			height: 1em;
 			line-height: 1em;
@@ -945,6 +950,10 @@ body {
 			float: left;
 			cursor: pointer;
 
+      @media only screen and (max-width: $breakpoint-tablet) {
+				display: block;
+			}
+
 			&:hover,
 			&:focus {
 				background: $color-gray-90;
@@ -954,10 +963,6 @@ body {
 				margin: auto;
 			}
 		}
-
-		.rss {}
-
-		.menu {}
 	}
 }
 
@@ -976,7 +981,7 @@ body {
 	margin-left: -15em;
 	background: transparent;
 	box-sizing: border-box;
-	padding: 3em 0 0;
+	padding: 3em 0 5em;
 	overflow: hidden;
 	transition: all ease-out 0.3s;
 	transform: translate3d(0,2em,0);
@@ -1144,43 +1149,51 @@ body {
 					}
 				}
 			}
-
-			&.menu-list-item-members {
-				display: flex;
-				padding: 1em;
-				justify-content: space-around;
-				align-content: stretch;
-
-				button {
-					display: block;
-					margin: 0.5em;
-					padding: 1em;
-					flex: 1;
-					border: 0;
-					color: $color-gray-25;
-					background: $color-gray-90;
-					border-radius: 2px;
-					font-weight: 700;
-					cursor: pointer;
-
-					&:hover,
-					&:focus {
-						background: $color-gray-85;
-					}
-
-					&.cta {
-						color: #fff;
-						background: $color-primary-default;
-
-						&:hover,
-						&:focus {
-							background: $color-primary-active;
-						}
-					}
-				}
-			}
 		}
 	}
+
+  .menu-members {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    display: flex;
+    padding: 0.5em 1em;
+    box-sizing: border-box;
+    justify-content: space-around;
+    align-content: stretch;
+    z-index: 105;
+    background: #fff;
+    border-top: 1px solid $color-gray-90;
+
+    button {
+      display: block;
+      margin: 0.5em;
+      padding: 1em;
+      flex: 1;
+      border: 0;
+      color: $color-gray-25;
+      background: $color-gray-90;
+      border-radius: 2px;
+      font-weight: 700;
+      cursor: pointer;
+
+      &:hover,
+      &:focus {
+        background: $color-gray-85;
+      }
+
+      &.cta {
+        color: #fff;
+        background: $color-primary-default;
+
+        &:hover,
+        &:focus {
+          background: $color-primary-active;
+        }
+      }
+    }
+  }
 }
 
 .overlay {