opdavies/oliverdavies.uk
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Fix navbar on page load

Browse source
This commit is contained in:
Oliver Davies 2018-09-05 21:32:11 +01:00
parent d86df73226
commit 8cd9782160
6 changed files with 32 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
assets/js/components/Navbar.vue
View file

@ -1,12 +1,10 @@
<template>
<div class="navbar border-bottom border-b border-grey-light mb-6" role="banner">
<div role="banner">
<header class="container mx-auto px-4">
<div class="sm:flex">
<div class="w-full sm:w-1/3 lg:w-1/4 flex items-center">
<div class="w-3/4 py-5">
<a href="/" title="Home" class="text-grey-darkest no-underline hover:underline">
{{ siteName }}
</a>
{{ siteName }}
</div>
<div class="w-1/4 text-right sm:hidden">

1
assets/sass/app.sass
View file

@ -5,6 +5,7 @@
@import 'base/base'
@import 'base/images'
@import 'base/vue'
@import 'components/blockquote'
@import 'components/button'

20
assets/sass/base/vue.sass Normal file
View file

@ -0,0 +1,20 @@
[v-cloak]
.v-cloak-block
display: block
.v-cloak-inline
display: inline
.v-cloak-inline-block
display: inline-block
.v-cloak-hidden
display: none
.v-cloak-invisible
visibility: hidden
.v-cloak-block,
.v-cloak-inline,
.v-cloak-inline-block
display: none

2
source/_layouts/app.html.twig
View file

@ -31,7 +31,7 @@
{% endfor %}
</head>
<body class="font-sans text-black text-sm leading-normal">
<div id="app">
<div id="app" v-cloak>
{% block body %}{% endblock %}
</div>

2
source/_layouts/default.html.twig
View file

@ -1,7 +1,7 @@
{% extends 'app' %}
{% block body %}
<navbar site-name="{{ site.title }}" page-url="{{ page.url }}"></navbar>
{% include 'layout/navbar' %}
<div class="container mx-auto px-4">
<div class="md:flex -mx-4">

7
source/_partials/layout/navbar.html.twig Normal file
View file

@ -0,0 +1,7 @@
<div class="border-bottom border-b border-grey-light mb-6">
<div class="container mx-auto v-cloak-block">
<div class="block py-5">{{ site.title }}</div>
</div>
<navbar site-name="{{ site.title }}" page-url="{{ page.url }}"></navbar>
</div>