Skip to content

Commit bd7324c

Browse files
jake11112jake11112
committed
added full width alt layout
1 parent 88be48d commit bd7324c

File tree

9 files changed

+222
-3
lines changed

9 files changed

+222
-3
lines changed

‎assets/grid.css

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,11 @@
99
padding: 10px
1010
}
1111

12+
.full-item {
13+
grid-column: span 12;
14+
padding: 10px;
15+
}
16+
1217
[class*="c-"] {
1318
grid-column: span 12;
1419
padding: 10px

‎components/FullGrid.vue

Lines changed: 191 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,191 @@
1+
<template>
2+
<div class="xs-text-6 md-text-5">
3+
<div v-if="items2[0]" class="r browse full-height" :style="`margin-top:${navbarheight}px;`">
4+
5+
<div v-if="items2[pi]" v-for="(p,pi) in items2" :key="p.pi" class="xs-border xs-p2 full-item" :style="`height:calc(100vh - ${navbarheight}px);`">
6+
<div v-if="p.thumbnail" class="item xs-block xs-full-height xs-flex xs-relative xs-flex-align-start xs-flex-justify-end xs-text-left">
7+
<div class="xs-text-left xs-flex xs-full-height xs-flex-justify-end xs-flex-align-end xs-width-auto">
8+
<nuxt-link class="full-bg-link" :to="p._path">
9+
{{p.title}}
10+
</nuxt-link>
11+
</div>
12+
<nuxt-link :to="p._path">
13+
<img v-lazy="p.thumbnail" :key="p.thumbnail" class="full-bg-image">
14+
15+
<div v-if="!p.thumbnail" class="full-bg-color"></div>
16+
</nuxt-link>
17+
18+
19+
</div>
20+
<div v-else class="item item-txt xs-block xs-full-height xs-flex xs-relative xs-flex-align-center xs-flex-justify-center xs-text-center">
21+
<nuxt-link class="nobg-link" :to="p._path">
22+
{{p.title}}
23+
</nuxt-link>
24+
25+
26+
27+
</div>
28+
</div>
29+
30+
</div>
31+
<div v-else class="r full-height browse">
32+
<div class="xs-p2 c-100 xs-flex xs-flex-align-center xs-flex-justify-center xs-text-center" :style="`height:calc(100vh - ${navbarheight}px);margin-top:${navbarheight}px`">
33+
34+
35+
<div v-if="total < 1 && !busy">No Results.</div>
36+
</div>
37+
38+
</div>
39+
</div>
40+
</template>
41+
42+
<script>
43+
44+
export default {
45+
props: ["items", "allitems"],
46+
data() {
47+
return {
48+
currentPage: null,
49+
pageNumbers: [],
50+
pageNumberCount: 0,
51+
items2: [],
52+
query: 1,
53+
busy: false,
54+
count: 0
55+
};
56+
},
57+
methods: {
58+
pageCheck() {
59+
if (this.allitems.length > 12) {
60+
this.$store.commit("paginateOn", true);
61+
this.$store.commit("resultsLength", this.allitems.length);
62+
} else if (this.allitems.length < 12) {
63+
this.$store.commit("paginateOff", false);
64+
} else {
65+
this.$store.commit("paginateOff", false);
66+
}
67+
},
68+
69+
loadMore() {
70+
this.count = this.offset;
71+
if (this.total > this.count && this.busy == false) {
72+
this.busy = true;
73+
74+
75+
this.items2.splice(0);
76+
for (var i = 0, j = 12; i < j; i++) {
77+
let api = this.allitems[this.count];
78+
79+
this.items2.push(api);
80+
this.count++;
81+
}
82+
83+
this.busy = false;
84+
85+
}
86+
},
87+
88+
onResize(event) {
89+
this.navHeight();
90+
},
91+
92+
navHeight() {
93+
if (process.browser) {
94+
var height = document.getElementById("navbar").clientHeight;
95+
96+
this.$store.commit("SET_NAVHEIGHT", height - 1);
97+
}
98+
}
99+
},
100+
watch: {
101+
// whenever question changes, this function will run
102+
$route({ params, query }) {
103+
if (this.$route.query.page > 1) {
104+
this.loadMore();
105+
this.navHeight();
106+
this.pageCheck();
107+
} else if (this.$route.query.page == null) {
108+
this.$route.query.page = 1;
109+
this.loadMore();
110+
this.navHeight();
111+
this.pageCheck();
112+
} else {
113+
this.loadMore();
114+
this.navHeight();
115+
this.pageCheck();
116+
}
117+
},
118+
queryParam: function() {
119+
this.loadMore();
120+
}
121+
},
122+
computed: {
123+
124+
offset() {
125+
if (this.queryParam > 1) {
126+
return Number(this.queryParam - 1) * 11;
127+
} else {
128+
return 0;
129+
}
130+
},
131+
prevpage() {
132+
var prev = Number(this.queryParam) - 1;
133+
return prev;
134+
},
135+
nextpage() {
136+
var next = Number(this.queryParam) + 1;
137+
return next;
138+
},
139+
navbarheight() {
140+
return this.$store.state.navheight;
141+
},
142+
total() {
143+
return this.allitems.length;
144+
},
145+
146+
queryParam() {
147+
if (this.$route.query.page == null) {
148+
return 1;
149+
} else {
150+
return Number(this.$route.query.page);
151+
}
152+
}
153+
},
154+
155+
updated() {
156+
this.$nextTick(() => {
157+
this.pageCheck();
158+
this.navHeight();
159+
this.$store.commit("SET_GRIDOFFSET", this.offset);
160+
});
161+
},
162+
mounted() {
163+
if (process.browser) {
164+
this.loadMore();
165+
166+
this.$nextTick(() => {
167+
this.navHeight();
168+
this.pageCheck();
169+
window.addEventListener("resize", this.onResize);
170+
});
171+
}
172+
},
173+
beforeDestroy() {
174+
// Unregister the event listener before destroying this Vue instance
175+
window.removeEventListener("resize", this.onResize);
176+
}
177+
};
178+
</script>
179+
180+
<style>
181+
img[lazy='loading'] {opacity:0;transition: .8s all;transition-delay:.8s;}
182+
img[lazy='loaded'] {opacity:1;transition: .8s all;transition-delay:.8s;}
183+
.nobg-link {font-size: calc(1.4rem + 2vw);}
184+
.full-bg-link {z-index:2;padding:1.2rem;transition: .8s all;}
185+
.item-txt {border: 1px solid rgba(0,0,0,.2); background: rgb(255,255,255);
186+
background: radial-gradient(circle, rgba(255,255,255,1) 19%, rgba(247,247,247,1) 100%);}
187+
.full-bg-image {position:absolute;top:0;left:0;right:0;bottom:0;object-fit:cover;object-position:50% 50%;width:100%;height:100%;transition: .4s all;border: 1px solid rgba(0,0,0,.2);}
188+
.item:hover .full-bg-image,.item:hover .full-bg-color {opacity:.8;transition: .4s all;}
189+
.item .full-bg-link {background: #fff;transition: .8s all;border-top: 1px solid rgba(0,0,0,.2);border-right: 1px solid rgba(0,0,0,.2);}
190+
.full-bg-link h2 {margin:0;}
191+
</style>

‎content/setup/info.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
"siteicon": "/images/uploads/icon.png",
55
"showmenu": true,
66
"emailsignup": true,
7+
"altlayout": true,
78
"menu": [
89
{
910
"name": "jake101",

‎nuxt.config.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,6 @@ env: {
6060
lang: 'en'
6161
},
6262
workbox: {
63-
fetch: true,
6463
runtimeCaching: [
6564
{
6665
urlPattern: '/images/uploads/.*',
@@ -91,6 +90,9 @@ middleware: ['title']
9190
plugins: ['~/plugins/vuefuse',{
9291
src: "~/plugins/moment",
9392
ssr: false
93+
},{
94+
src: "~/plugins/lazyload",
95+
ssr: false
9496
}],
9597
/*
9698
** Build configuration

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@
2525
"node-sass": "^4.9.2",
2626
"nuxt": "^2.0.0",
2727
"sass-loader": "^7.0.3",
28+
"vue-lazyload": "^1.2.6",
2829
"vue-moment": "^4.0.0"
2930
},
3031
"devDependencies": {

‎pages/index.vue

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
<template>
22

3-
<BaelGrid :allitems="allBlogPosts"></BaelGrid>
3+
<component :is="getLayout" :allitems="allBlogPosts"></component>
44
</template>
55

66
<script>
77
import BaelGrid from "~/components/BaelGrid";
8+
import FullGrid from "~/components/FullGrid";
89
export default {
910
watchQuery: ['page'],
1011
@@ -14,7 +15,7 @@ export default {
1415
return +to.query.page > +from.query.page ? 'slide-right' : 'slide-left'
1516
},
1617
name: "Index",
17-
components: { BaelGrid },
18+
components: { BaelGrid,FullGrid },
1819
data() {
1920
return {};
2021
},
@@ -23,6 +24,14 @@ export default {
2324
computed: {
2425
allBlogPosts() {
2526
return this.$store.state.blogPosts;
27+
},
28+
getLayout() {
29+
if (this.$store.state.siteInfo.altlayout == false ) {
30+
return 'BaelGrid'
31+
} else if (this.$store.state.siteInfo.altlayout == true ) {
32+
return 'FullGrid'
33+
}
34+
2635
}
2736
}
2837
};

‎plugins/lazyload.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import Vue from 'vue'
2+
import VueLazyload from 'vue-lazyload'
3+
4+
Vue.use(VueLazyload)

‎static/admin/config.yml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@ collections:
4343
- {label: Site Icon (Must be 512x512 or larger square PNG), name: siteicon, widget: image,default: "/icon.png"}
4444
- {label: Show Icon in Menu, name: showmenu, widget: boolean}
4545
- {label: Email Newsletter Signup, name: emailsignup, widget: boolean}
46+
- {label: Full Page Alt Layout, name: altlayout, widget: boolean}
4647
- label: Menu Links
4748
name: menu
4849
widget: list

‎yarn.lock

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8724,6 +8724,11 @@ vue-hot-reload-api@^2.3.0:
87248724
resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.3.tgz#2756f46cb3258054c5f4723de8ae7e87302a1ccf"
87258725
integrity sha512-KmvZVtmM26BQOMK1rwUZsrqxEGeKiYSZGA7SNWE6uExx8UX/cj9hq2MRV/wWC3Cq6AoeDGk57rL9YMFRel/q+g==
87268726

8727+
vue-lazyload@^1.2.6:
8728+
version "1.2.6"
8729+
resolved "https://registry.yarnpkg.com/vue-lazyload/-/vue-lazyload-1.2.6.tgz#baa04c172d52a812608eb12c7a6bfb14f5c91079"
8730+
integrity sha512-6a61+pzwcfowhLRQiPdmRuJ40n/4fL/sEynu8KQZoCf5RVA0NH0X68vplLY0+lUM8mKNScYomaepV+hdjgnZhg==
8731+
87278732
vue-loader@^15.7.0:
87288733
version "15.7.0"
87298734
resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-15.7.0.tgz#27275aa5a3ef4958c5379c006dd1436ad04b25b3"

0 commit comments

Comments
 (0)