Skip to content

Commit 3495a53

Browse files
jbratcherjbratcher
committed
feature: added breakpoint plugin to fix condition class loss on refresh (vuetify issue #6737) refactor: adding consistent spacing for nav and blog pages
1 parent e2cabef commit 3495a53

File tree

8 files changed

+107
-72
lines changed

8 files changed

+107
-72
lines changed

‎README.md

-4
Original file line numberDiff line numberDiff line change
@@ -69,11 +69,7 @@ This project comes with Netlify CMS ready to rumble, and a basic blog configurat
6969

7070
#### To change netlify deploy url, run localStorage.removeItem("netlifySiteURL") in the browser console.
7171

72-
<<<<<<< HEAD
7372
### Use Netlify CMS Dashboard
74-
=======
75-
### Netlify CMS Dashboard
76-
>>>>>>> master
7773

7874
1. In your browser, navigate to `localhost:3000/admin`.
7975
2. Login

‎layouts/blog.vue

+19-49
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,9 @@
1111
shrink-on-scroll
1212
tile
1313
>
14-
<v-toolbar-title class="align-self-center pb-0">{{ appTitle }}</v-toolbar-title>
14+
<v-toolbar-title
15+
:class="{'align-self-center pl-5 pb-0': $breakpoint.mdAndUp, 'align-self-center pl-0 pb-0': $breakpoint.smAndDown }"
16+
>{{ appTitle }}</v-toolbar-title>
1517
<v-spacer />
1618
<v-app-bar-nav-icon class="hidden-md-and-up" @click.stop="drawer = !drawer" x-large />
1719
<MenuLinks :general-links="generalLinks" list-class="hidden-sm-and-down" />
@@ -25,14 +27,20 @@
2527
<nuxt />
2628
</v-content>
2729
<!-- Footer Area -->
28-
<v-footer class="py-6">
29-
<h2>{{ appTitle }}</h2>
30-
<p>{{ appDescription }}</p>
31-
<ul>
32-
<li v-for="(link, i) in footerLinks" :key="i + link.title">
33-
<v-btn text rounded>{{ link.title }}</v-btn>
34-
</li>
35-
</ul>
30+
<v-footer class="d-flex flex-column align-center py-6">
31+
<h2
32+
:class="{'display-1 mb-3': $breakpoint.mdAndUp, 'headline mb-3': $breakpoint.smAndDown}"
33+
>{{ appTitle }}</h2>
34+
<p
35+
:class="{'headline': $breakpoint.mdAndUp, 'subtitle-1': $breakpoint.smAndDown}"
36+
>{{ appDescription }}</p>
37+
<nav>
38+
<ul class="d-flex flex-wrap py-3">
39+
<li v-for="(link, i) in footerLinks" :key="i + link.title">
40+
<v-btn text rounded>{{ link.title }}</v-btn>
41+
</li>
42+
</ul>
43+
</nav>
3644
<v-container>
3745
{{ new Date().getFullYear() }}&nbsp;-&nbsp;
3846
<strong>{{ appTitle }}</strong>
@@ -107,7 +115,7 @@ export default {
107115
},
108116
navHeight() {
109117
let height = '100px'
110-
switch (this.$vuetify.breakpoint.name) {
118+
switch (this.$breakpoint.name) {
111119
case 'xs':
112120
height = '80px'
113121
break
@@ -168,53 +176,15 @@ body {
168176
.v-toolbar--prominent {
169177
.v-toolbar__content {
170178
align-items: center;
179+
padding: 0.25rem 0.75rem;
171180
}
172181
}
173182
174-
// .v-toolbar__content {
175-
// .v-toolbar__title {
176-
// font-size: 2rem;
177-
// font-weight: 900;
178-
// margin-left: 2rem;
179-
// }
180-
181-
// .v-list {
182-
// background: none;
183-
// display: flex;
184-
// align-items: center;
185-
// margin-right: 2rem;
186-
187-
// .v-list-item {
188-
// flex: 0;
189-
// margin: 0 0.5rem;
190-
// padding: 0 1.5rem;
191-
192-
// .v-list-item__title {
193-
// font-size: 1.33rem;
194-
// font-weight: 400;
195-
// }
196-
// }
197-
// }
198-
// }
199-
200183
// footer
201184
202185
.v-footer {
203-
display: flex;
204-
flex-direction: column;
205-
align-items: center;
206-
207186
ul {
208-
display: flex;
209-
justify-content: center;
210187
list-style-type: none;
211-
padding: 1rem 0;
212-
}
213-
214-
.container {
215-
display: flex;
216-
justify-content: center;
217-
padding: 1rem 0;
218188
}
219189
}
220190

‎layouts/default.vue

+7-4
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,9 @@
1212
shrink-on-scroll
1313
tile
1414
>
15-
<v-toolbar-title class="align-self-center pb-0">{{ appTitle }}</v-toolbar-title>
15+
<v-toolbar-title
16+
:class="{'align-self-center pl-5 pb-0': $breakpoint.mdAndUp, 'align-self-center pl-0 pb-0': $breakpoint.smAndDown }"
17+
>{{ appTitle }}</v-toolbar-title>
1618
<v-spacer />
1719
<v-app-bar-nav-icon class="hidden-md-and-up" @click.stop="drawer = !drawer" x-large />
1820
<MenuLinks :general-links="generalLinks" list-class="hidden-sm-and-down" />
@@ -35,10 +37,10 @@
3537
<!-- Footer Area -->
3638
<v-footer class="d-flex flex-column align-center py-6">
3739
<h2
38-
:class="{'display-1 mb-3': $vuetify.breakpoint.mdAndUp, 'headline mb-3': $vuetify.breakpoint.smAndDown}"
40+
:class="{'display-1 mb-3': $breakpoint.mdAndUp, 'headline mb-3': $breakpoint.smAndDown}"
3941
>{{ appTitle }}</h2>
4042
<p
41-
:class="{'headline': $vuetify.breakpoint.mdAndUp, 'subtitle-1': $vuetify.breakpoint.smAndDown}"
43+
:class="{'headline': $breakpoint.mdAndUp, 'subtitle-1': $breakpoint.smAndDown}"
4244
>{{ appDescription }}</p>
4345
<nav>
4446
<ul class="d-flex flex-wrap py-3">
@@ -121,7 +123,7 @@ export default {
121123
},
122124
navHeight() {
123125
let height = '100px'
124-
switch (this.$vuetify.breakpoint.name) {
126+
switch (this.$breakpoint.name) {
125127
case 'xs':
126128
height = '80px'
127129
break
@@ -182,6 +184,7 @@ body {
182184
.v-toolbar--prominent {
183185
.v-toolbar__content {
184186
align-items: center;
187+
padding: 0.25rem 0.75rem;
185188
}
186189
}
187190

‎nuxt.config.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ export default {
7373
/*
7474
** Plugins to load before mounting the App
7575
*/
76-
plugins: [],
76+
plugins: ["~/plugins/breakpoint"],
7777
/*
7878
** Nuxt.js dev-modules
7979
*/

‎pages/blog/_blog.vue

+15-6
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,29 @@
11
<template>
22
<v-row>
33
<v-col class="pa-0">
4-
<v-sheet class="ma-0" color="primary" dark tile>
5-
<h1 class="headline pl-6 py-2">Blog > {{ blogPost.title }}</h1>
4+
<v-sheet color="primary" dark tile>
5+
<h1
6+
:class="{'headline pl-12 py-2': $breakpoint.mdAndUp, 'title pl-6 py-2': $breakpoint.smAndDown}"
7+
>Blog > {{ blogPost.title }}</h1>
68
</v-sheet>
79
<article>
8-
<v-card class="d-flex flex-column align-center mx-auto" tile>
10+
<v-card tile>
911
<v-img
1012
src="https://picsum.photos/1280/920"
1113
lazy-src="https://picsum.photos/1280/920"
1214
width="1280"
1315
max-height="300"
1416
/>
15-
<v-card-title class="display-2 mb-3">{{blogPost.title}}</v-card-title>
16-
<v-card-subtitle class="headline">{{blogPost.description}}</v-card-subtitle>
17-
<v-card-text class="container" v-html="$md.render(blogPost.body)"></v-card-text>
17+
<v-card-title
18+
:class="{'display-2 mb-3 px-12': $breakpoint.mdAndUp, 'display-1 mb-3 px-6': $breakpoint.smAndDown}"
19+
>{{blogPost.title}}</v-card-title>
20+
<v-card-subtitle
21+
:class="{'headline px-12': $breakpoint.mdAndUp, 'subtitle-1 px-6': $breakpoint.smAndDown}"
22+
>{{blogPost.description}}</v-card-subtitle>
23+
<v-card-text
24+
:class="{'body-1 px-12': $breakpoint.mdAndUp, 'body-1 px-6': $breakpoint.smAndDown}"
25+
v-html="$md.render(blogPost.body)"
26+
></v-card-text>
1827
</v-card>
1928
</article>
2029
</v-col>

‎pages/blog/index.vue

+4-4
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<v-col class="pa-0">
44
<v-sheet color="primary" dark tile>
55
<h1
6-
:class="{'headline pl-6 py-2': $vuetify.breakpoint.mdAndUp, 'title pl-6 py-2': $vuetify.breakpoint.smAndDown}"
6+
:class="{'headline pl-6 py-2': $breakpoint.mdAndUp, 'title pl-6 py-2': $breakpoint.smAndDown}"
77
>Blog ></h1>
88
</v-sheet>
99
<v-container>
@@ -13,7 +13,7 @@
1313
:key="index"
1414
cols="12"
1515
sm="6"
16-
:class="{'px-9': $vuetify.breakpoint.smAndDown}"
16+
:class="{'px-9': $breakpoint.smAndDown}"
1717
>
1818
<v-card height="100%">
1919
<v-img
@@ -22,10 +22,10 @@
2222
max-height="200px"
2323
/>
2424
<v-card-title
25-
:class="{'display-1': $vuetify.breakpoint.mdAndUp, 'headline': $vuetify.breakpoint.smAndDown}"
25+
:class="{'display-1': $breakpoint.mdAndUp, 'headline': $breakpoint.smAndDown}"
2626
>{{blogPost.title.substring(0, 70)}}</v-card-title>
2727
<v-card-subtitle
28-
:class="{'subtitle-1': $vuetify.breakpoint.mdAndUp, 'body-2': $vuetify.breakpoint.smAndDown}"
28+
:class="{'subtitle-1': $breakpoint.mdAndUp, 'body-2': $breakpoint.smAndDown}"
2929
>{{blogPost.description.substring(0, 80)}}</v-card-subtitle>
3030
<v-card-text class="body-1">{{blogPost.body.substring(0, 144) + '...'}}</v-card-text>
3131
<v-btn

‎pages/index.vue

+4-4
Original file line numberDiff line numberDiff line change
@@ -15,16 +15,16 @@
1515
<v-row align="center" justify="center">
1616
<v-col class="text-center px-6" cols="12">
1717
<h1
18-
:class="{'display-2 mb-6': $vuetify.breakpoint.mdAndUp, 'display-1 mb-2': $vuetify.breakpoint.smAndDown}"
18+
:class="{'display-2 mb-6': $breakpoint.mdAndUp, 'display-1 mb-2': $breakpoint.smAndDown}"
1919
>Nuxt Netlify CMS Starter Kit</h1>
2020
<p
21-
:class="{'headline mb-12': $vuetify.breakpoint.mdAndUp, 'subtitle-1 mb-12': $vuetify.breakpoint.smAndDown}"
21+
:class="{'headline mb-12': $breakpoint.mdAndUp, 'subtitle-1 mb-12': $breakpoint.smAndDown}"
2222
>Quickly spin up a static site using Nuxt with Netlify CMS. Push to deploy on Netlify.</p>
2323
<v-btn
2424
dark
2525
outlined
26-
:x-large="$vuetify.breakpoint.mdAndUp"
27-
:large="$vuetify.breakpoint.smAndDown"
26+
:x-large="$breakpoint.mdAndUp"
27+
:large="$breakpoint.smAndDown"
2828
>Get Started</v-btn>
2929
</v-col>
3030
</v-row>

‎plugins/breakpoint.js

+57
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import Vue from "vue"
2+
3+
//the properties of breakpoint that we want to mirror
4+
const defaults = {
5+
xs: true,
6+
xsOnly: true,
7+
sm: false,
8+
smOnly: true,
9+
smAndDown: true,
10+
smAndUp: false,
11+
md: false,
12+
mdOnly: false,
13+
mdAndDown: true,
14+
mdAndUp: false,
15+
lg: false,
16+
lgOnly: false,
17+
lgAndDown: true,
18+
lgAndUp: false,
19+
xl: false,
20+
xlOnly: false
21+
}
22+
23+
//create a property on the prototype of all instances that holds the breakpoint state
24+
Vue.prototype.$breakpoint = new Vue({
25+
data: () => ({
26+
...defaults
27+
})
28+
})
29+
30+
export default async function ({
31+
app
32+
}) {
33+
//init mixins and the watchers if they don't exist yet
34+
app.mixins = app.mixins || []
35+
app.watch = app.watch || {}
36+
37+
//create a watcher for each breakpoint
38+
for (const prop in defaults) {
39+
//the watcher sets the breakpoint prop to cause an update
40+
app.watch[`$vuetify.breakpoint.${prop}`] = function (value) {
41+
//update our mirrored value properly
42+
this.$breakpoint[prop] = value
43+
}
44+
}
45+
46+
//add a mixin that does the client prop setting
47+
app.mixins.push({
48+
//here is the magic, if we set the state with the correct value on client init it works
49+
mounted() {
50+
//for all props that we are processing
51+
for (const prop in defaults) {
52+
//set the initial value from vuetify
53+
this.$breakpoint[prop] = this.$vuetify.breakpoint[prop]
54+
}
55+
}
56+
})
57+
}

0 commit comments

Comments
 (0)