Implement secondary menu

This commit is contained in:
Eduardo Gomez 2020-04-28 00:01:48 +02:00
parent 200321c914
commit a8c8729245
24 changed files with 227 additions and 110 deletions

View file

@ -35,6 +35,7 @@ To get the latest version please head over the [releases page](https://github.co
* Subscription form [more info here](https://github.com/eddiesigner/liebling/wiki/How-to-enable-subscribers)
* Multiple authors
* Logo support
* Secondary menu
* Featured posts and pages
* Post, Page, Tag, Authors, pages
* Koenig editor

File diff suppressed because one or more lines are too long

Binary file not shown.

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 49 KiB

After

Width:  |  Height:  |  Size: 49 KiB

Binary file not shown.

Binary file not shown.

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -15,11 +15,11 @@
/* This font-face is here to make icons work if the Ghost instance is installed in a subdirectory */
@font-face {
font-family: 'icomoon';
src: url("{{asset 'fonts/icomoon.eot?o5zacw'}}");
src: url("{{asset 'fonts/icomoon.eot?o5zacw#iefix'}}") format('embedded-opentype'),
url("{{asset 'fonts/icomoon.ttf?o5zacw'}}") format('truetype'),
url("{{asset 'fonts/icomoon.woff?o5zacw'}}") format('woff'),
url("{{asset 'fonts/icomoon.svg?o5zacw#icomoon'}}") format('svg');
src: url("{{asset 'fonts/icomoon.eot?vukg2s'}}");
src: url("{{asset 'fonts/icomoon.eot?vukg2s#iefix'}}") format('embedded-opentype'),
url("{{asset 'fonts/icomoon.ttf?vukg2s'}}") format('truetype'),
url("{{asset 'fonts/icomoon.woff?vukg2s'}}") format('woff'),
url("{{asset 'fonts/icomoon.svg?vukg2s#icomoon'}}") format('svg');
font-weight: normal;
font-style: normal;
font-display: swap;

View file

@ -14,6 +14,7 @@
"Great! Next, complete checkout for full access.": "Great! Next, complete checkout for full access.",
"Great! You've successfully subscribed.": "Great! You've successfully subscribed.",
"JavaScript license information": "JavaScript license information",
"More": "More",
"No posts": "No posts",
"No posts found": "No posts found",
"No recent articles found :(": "No recent articles found :(",

View file

@ -14,6 +14,7 @@
"Great! Next, complete checkout for full access.": "¡Genial! Ahora, completa el checkout para tener acceso completo.",
"Great! You've successfully subscribed.": "¡Genial! Te has suscrito con éxito.",
"JavaScript license information": "Información de licencia JavaScript",
"More": "Más",
"No posts": "No hay artículos",
"No posts found": "No se encontraron artículos",
"No recent articles found :(": "No se han encontrado artículos recientes :(",

View file

@ -54,5 +54,5 @@
"desktop": "assets/screenshot-desktop.jpg",
"mobile": "assets/screenshot-mobile.jpg"
},
"version": "0.6.9"
"version": "0.7.0"
}

View file

@ -46,6 +46,14 @@ This header template is shared across all the pages.
{{#if @site.navigation}}
{{navigation}}
{{/if}}
{{#if @site.secondary_navigation}}
<li class="more" role="menuitem">
<a href="javascript:void(0);" class="js-open-secondary-menu">
{{t "More"}}
<span class="icon-chevron-down"></span>
</a>
</li>
{{/if}}
<li role="menuitem" class="js-submenu-option">
<button class="m-icon-button in-menu-main more js-toggle-submenu" aria-label="Toggle submenu">
<span class="icon-more"></span>
@ -110,4 +118,10 @@ This header template is shared across all the pages.
</div>
</div>
</div>
{{#if @site.secondary_navigation}}
<div id="secondary-navigation-template" style="display: none;">
{{navigation type="secondary"}}
</div>
{{/if}}
</header>

View file

@ -3,8 +3,18 @@ This navigation template is shared across all the pages.
Also it includes the big submenu.
--}}
{{#if isSecondary}}
<ul class="m-secondary-menu" role="menu">
{{#foreach navigation}}
<li class="nav-{{slug}}{{#if current}} nav-current{{/if}}">
<li class="nav-{{slug}}{{#if current}} nav-current{{/if}}" role="menuitem">
<a href="{{url absolute="true"}}">{{label}}</a>
</li>
{{/foreach}}
</ul>
{{else}}
{{#foreach navigation}}
<li class="nav-{{slug}}{{#if current}} nav-current{{/if}}" role="menuitem">
<a href="{{url absolute="true"}}">{{label}}</a>
</li>
{{/foreach}}
{{/if}}

View file

@ -11,6 +11,7 @@ import {
isRTL,
formatDate,
isDarkMode,
isMobile,
getParameterByName
} from './helpers'
@ -30,6 +31,7 @@ $(document).ready(() => {
const $submenuOption = $('.js-submenu-option')[0]
const $submenu = $('.js-submenu')
const $recentArticles = $('.js-recent-articles')
const $openSecondaryMenu = $('.js-open-secondary-menu')
const $openSearch = $('.js-open-search')
const $closeSearch = $('.js-close-search')
const $search = $('.js-search')
@ -42,6 +44,7 @@ $(document).ready(() => {
let fuse = null
let submenuIsOpen = false
let secondaryMenuTippy = null
function showSubmenu() {
$header.addClass('submenu-is-active')
@ -257,7 +260,19 @@ $(document).ready(() => {
down: 10,
up: 20
},
offset: 15
offset: 15,
onUnpin: () => {
if (!isMobile() && secondaryMenuTippy) {
console.log(secondaryMenuTippy)
const desktopSecondaryMenuTippy = secondaryMenuTippy[0]
if (
desktopSecondaryMenuTippy && desktopSecondaryMenuTippy.state.isVisible
) {
desktopSecondaryMenuTippy.hide()
}
}
}
})
headroom.init()
}
@ -293,6 +308,17 @@ $(document).ready(() => {
})
observer.observe()
if ($openSecondaryMenu.length > 0) {
const template = document.getElementById('secondary-navigation-template')
secondaryMenuTippy = tippy('.js-open-secondary-menu', {
content: template.innerHTML,
arrow: true,
trigger: 'click',
interactive: true
})
}
tippy('.js-tooltip')
shave('.js-article-card-title', 100)

View file

@ -29,6 +29,7 @@
@import "components/header/site-name";
@import "components/header/nav";
@import "components/header/menu";
@import "components/header/secondary-menu";
@import "components/header/submenu";
@import "components/header/submenu-title";
@import "components/header/recent-articles";

View file

@ -14,83 +14,66 @@
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-letterboxd:before {
content: "\e91f";
}
.icon-star:before {
.icon-chevron-down:before {
content: "\e900";
}
.icon-arrow-left:before {
.icon-star:before {
content: "\e901";
}
.icon-arrow-right:before {
.icon-arrow-left:before {
content: "\e902";
}
.icon-arrow-top:before {
.icon-arrow-right:before {
content: "\e903";
}
.icon-close:before {
.icon-arrow-top:before {
content: "\e904";
}
.icon-comments:before {
.icon-close:before {
content: "\e905";
}
.icon-facebook:before {
.icon-comments:before {
content: "\e906";
}
.icon-globe:before {
.icon-facebook:before {
content: "\e907";
}
.icon-menu:before {
.icon-globe:before {
content: "\e908";
}
.icon-more:before {
.icon-menu:before {
content: "\e909";
}
.icon-search:before {
.icon-more:before {
content: "\e90a";
}
.icon-twitter:before {
.icon-search:before {
content: "\e90b";
}
.icon-behance:before {
content: "\e951";
}
.icon-deviantart:before {
content: "\e928";
}
.icon-discord:before {
content: "\e929";
}
.icon-flickr:before {
content: "\e91e";
}
.icon-github:before {
content: "\e930";
}
.icon-gitlab:before {
content: "\e92d";
}
.icon-imdb:before {
.icon-twitter:before {
content: "\e90c";
}
.icon-instagram:before {
content: "\e92a";
.icon-imdb:before {
content: "\e90d";
}
.icon-linkedin:before {
content: "\e92b";
.icon-vk:before {
content: "\e90e";
}
.icon-mixcloud:before {
content: "\e925";
.icon-steam:before {
content: "\e914";
}
.icon-mixer:before {
content: "\e926";
.icon-twitch:before {
content: "\e915";
}
.icon-odnoklassniki:before {
content: "\e920";
.icon-youtube:before {
content: "\e916";
}
.icon-pinterest:before {
content: "\e921";
.icon-vimeo:before {
content: "\e917";
}
.icon-whatsapp:before {
content: "\e918";
}
.icon-reddit:before {
content: "\e919";
@ -98,20 +81,26 @@
.icon-rss:before {
content: "\e91a";
}
.icon-snapchat:before {
content: "\e92c";
.icon-spotify:before {
content: "\e91b";
}
.icon-telegram:before {
content: "\e91c";
}
.icon-soundcloud:before {
content: "\e91d";
}
.icon-spotify:before {
content: "\e91b";
.icon-flickr:before {
content: "\e91e";
}
.icon-steam:before {
content: "\e914";
.icon-letterboxd:before {
content: "\e91f";
}
.icon-telegram:before {
content: "\e91c";
.icon-odnoklassniki:before {
content: "\e920";
}
.icon-pinterest:before {
content: "\e921";
}
.icon-tiktok:before {
content: "\e922";
@ -119,24 +108,39 @@
.icon-tumblr:before {
content: "\e923";
}
.icon-twitch:before {
content: "\e915";
.icon-xing:before {
content: "\e924";
}
.icon-vimeo:before {
content: "\e917";
.icon-mixcloud:before {
content: "\e925";
}
.icon-vk:before {
content: "\e90d";
.icon-mixer:before {
content: "\e926";
}
.icon-wechat:before {
content: "\e927";
}
.icon-whatsapp:before {
content: "\e918";
.icon-deviantart:before {
content: "\e928";
}
.icon-xing:before {
content: "\e924";
.icon-discord:before {
content: "\e929";
}
.icon-youtube:before {
content: "\e916";
.icon-instagram:before {
content: "\e92a";
}
.icon-linkedin:before {
content: "\e92b";
}
.icon-snapchat:before {
content: "\e92c";
}
.icon-gitlab:before {
content: "\e92d";
}
.icon-github:before {
content: "\e930";
}
.icon-behance:before {
content: "\e951";
}

View file

@ -22,7 +22,6 @@
.m-author__content {
@include respond-to('medium') {
display: flex;
width: 100%;
max-width: 820px;
}
}

View file

@ -49,6 +49,25 @@
a {
color: inherit;
}
&.more {
a {
display: inline-flex;
align-items: center;
@include respond-to('medium') {
display: flex;
}
span {
display: inline-block;
color: inherit;
font-size: 0.375rem;
margin-left: 8px;
@include transform(translateY(1px));
}
}
}
}
}
}

View file

@ -0,0 +1,39 @@
.m-secondary-menu {
padding: 0;
margin: 0;
list-style-type: none;
li {
font-size: 1rem;
&.nav-current {
a {
font-weight: 600;
}
}
a {
display: block;
padding: 6px 10px;
border-radius: 4px;
@include transition(background-color linear 0.1s);
@include respond-to('medium') {
padding: 8px 10px;
}
&:hover {
background-color: rgba(0, 0, 0, 0.1);
}
}
}
}
.rtl {
.m-secondary-menu {
.li,
.li a {
text-align: right !important;
}
}
}

Binary file not shown.

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 49 KiB

After

Width:  |  Height:  |  Size: 49 KiB

Binary file not shown.

Binary file not shown.