ourworld_web/www_threefold_io
23
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix footer

Browse Source
This commit is contained in:
samaradel
2020-11-22 18:14:20 +02:00
parent 29ae3c816a
commit eb97a7e67b
5 changed files with 78 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
src/layouts/Default.vue
View File

@@ -1,8 +1,16 @@
<template>
<div id="app" dark class="min-h-screen flex flex-col font-sans">
<HeaderPartial v-if="hideHeader!=true" @setTheme="setTheme" :theme="this.theme"></HeaderPartial>
<slot/>
<NavbarPartial :disableScroll="disableScroll" @setTheme="setTheme" :theme="this.theme"></NavbarPartial>
<div id="app" dark class="flex flex-col font-sans">
<HeaderPartial
v-if="hideHeader != true"
@setTheme="setTheme"
:theme="this.theme"
></HeaderPartial>
<NavbarPartial
:disableScroll="disableScroll"
@setTheme="setTheme"
:theme="this.theme"
></NavbarPartial>
<slot />
<FooterPartial></FooterPartial>
</div>
</template>
@@ -16,41 +24,41 @@ query {
</static-query>
<script>
import HeaderPartial from '~/layouts/partials/HeaderWithNavbar.vue'
import NavbarPartial from '~/layouts/partials/Navbar.vue'
import FooterPartial from '~/layouts/partials/Footer.vue'
import HeaderPartial from "~/layouts/partials/HeaderWithNavbar.vue";
import NavbarPartial from "~/layouts/partials/Navbar.vue";
import FooterPartial from "~/layouts/partials/Footer.vue";
export default {
props: {
hideHeader: {
type: Boolean,
default: true
default: true,
},
disableScroll: {
type: Boolean,
default: true
}
default: true,
},
},
data: function() {
data: function () {
return {
theme: 'light'
theme: "light",
};
},
methods: {
setTheme(mode) {
this.theme = mode
}
this.theme = mode;
},
},
components: {
HeaderPartial,
NavbarPartial,
FooterPartial
FooterPartial,
},
metaInfo: {
bodyAttrs: {
class: "m-0 pt-12"
}
}
}
class: "m-0 pt-12",
},
},
};
</script>

6
src/layouts/partials/Navbar.vue
View File

@@ -200,7 +200,7 @@ export default {
headerHeight: 0,
isOpen: false,
search: "",
open: false
open: false,
};
},
@@ -248,4 +248,8 @@ input:focus,
button:focus {
outline: 0;
}
.inset-0 {
z-index: 999;
}
</style>

29
src/pages/Index.vue
View File

@@ -1,16 +1,16 @@
<template>
<Layout :hideHeader="true" :disableScroll="true">
<div class="container sm:pxi-0 mx-auto overflow-x-hidden">
<VacationCard img="" imgAlt="" eyebrow="" title="" pricing="" url="" />
<div class="flex flex-col">
<img class="py-20" src="/img/new_home.png" alt="" />
<div class="center py-10">
<!-- <h2 class="text-center">CO-CREATING BETTER FUTURES TOGETHER</h2> -->
<!-- <p class="text-center py-1">The ThreeFold Foundation is not ThreeFold — rather, it is sparking a movement to bring the world <br> a truly peer-to-peer internet. We acknowledge and support the many people and organizations around the world <br> who bring crucial support to the growth and adoption of the ThreeFold Grid.</p> -->
</div>
<div class="container sm:pxi-0 mx-auto overflow-hidden">
<!-- <VacationCard img="" imgAlt="" eyebrow="" title="" pricing="" url="" /> -->
<div class="flex flex-col" :style="{ height: contentHeight + 'px' }">
<img src="/img/new_home.png" alt="" />
<!-- <div class="center py-10"> -->
<!-- <h2 class="text-center">CO-CREATING BETTER FUTURES TOGETHER</h2> -->
<!-- <p class="text-center py-1">The ThreeFold Foundation is not ThreeFold — rather, it is sparking a movement to bring the world <br> a truly peer-to-peer internet. We acknowledge and support the many people and organizations around the world <br> who bring crucial support to the growth and adoption of the ThreeFold Grid.</p> -->
<!-- </div> -->
</div>
<vue-markdown> </vue-markdown>
<!-- <vue-markdown> </vue-markdown> -->
</div>
</Layout>
</template>
@@ -22,17 +22,16 @@ export default {
metaInfo: {
title: "Home",
},
computed: {
contentHeight() {
return window.innerHeight - 128;
},
},
components: {
VueMarkdown,
},
};
</script>
<style scoped>
/* h2 {
padding-bottom: 8rem;
} */
</style> >

36
src/pages/News.vue
View File

@@ -1,7 +1,10 @@
<template>
<Layout>
<div class="container sm:pxi-0 mx-auto overflow-x-hidden">
<div class="flex flex-wrap with-large pt-8 pb-8 mx-4 sm:-mx-4 h-screen">
<div
class="container sm:pxi-0 mx-auto overflow-hidden"
:style="{ height: contentHeight + 'px' }"
>
<div class="flex flex-wrap with-large pt-8 pb-8 mx-4 sm:-mx-4">
<PostListItem
v-for="edge in $page.entries.edges"
:key="edge.node.id"
@@ -9,15 +12,15 @@
/>
</div>
</div>
<div class="pagination flex justify-center mb-8">
<Pagination
:baseUrl="baseurl"
:currentPage="$page.entries.pageInfo.currentPage"
:totalPages="$page.entries.pageInfo.totalPages"
:maxVisibleButtons="5"
v-if="$page.entries.pageInfo.totalPages > 1"
/>
</div>
<div class="pagination flex justify-center mb-8">
<Pagination
:baseUrl="baseurl"
:currentPage="$page.entries.pageInfo.currentPage"
:totalPages="$page.entries.pageInfo.totalPages"
:maxVisibleButtons="5"
v-if="$page.entries.pageInfo.totalPages > 1"
/>
</div>
</Layout>
</template>
@@ -62,12 +65,15 @@ export default {
},
components: {
PostListItem,
Pagination
Pagination,
},
computed: {
baseurl: function() {
return ""
}
baseurl: function () {
return "";
},
contentHeight() {
return window.innerHeight - 160;
},
},
};
</script>

14
src/templates/Search.vue
View File

@@ -1,6 +1,9 @@
<template>
<Layout>
<div class="container sm:pxi-0 mx-auto">
<div
class="container sm:pxi-0 mx-auto"
:style="{ height: contentHeight + 'px' }"
>
<img
v-if="loading"
class="m-auto"
@@ -18,8 +21,8 @@
/>
</div>
<div v-else class="flex flex-col with-large my-auto text-center">
<h1 class="py-1">No results</h1>
<p class="pb-5">OOPS! Something went wrong here</p>
<h1>404</h1>
<p>OOPS! Something went wrong here</p>
</div>
</div>
</Layout>
@@ -131,6 +134,9 @@ export default {
}
return result;
},
contentHeight() {
return window.innerHeight - 128;
},
},
mounted() {
this.q = new URL(location.href).searchParams.get("query");
@@ -159,6 +165,6 @@ export default {
<style scoped>
h1 {
font-size: 3rem;
font-size: 13rem;
}
</style>