Skip to content
Snippets Groups Projects
Commit 94aef1cd authored by xaralis's avatar xaralis
Browse files

Footer now JS active

parent 08690ddb
No related branches found
No related tags found
No related merge requests found
<footer class="footer bg-grey-700 text-white"> <footer class="footer bg-grey-700 text-white __js-root" data-app="Footer">
<ui-footer inline-template>
<div>
<div class="footer__main py-4 lg:py-16 container container--default"> <div class="footer__main py-4 lg:py-16 container container--default">
<section class="footer__brand"> <section class="footer__brand">
<img <img
...@@ -13,7 +15,7 @@ ...@@ -13,7 +15,7 @@
</section> </section>
<section class="footer__main-links bg-grey-700 text-white lg:grid grid-cols-3 gap-4"> <section class="footer__main-links bg-grey-700 text-white lg:grid grid-cols-3 gap-4">
<div class="pt-8 pb-4 lg:py-0"> <div class="pt-8 pb-4 lg:py-0">
<span class="text-xl uppercase text-white">Nová sekce</span> <ui-footer-collapsible label="Nová sekce">
<ul class="mt-6 space-y-2 text-grey-200"> <ul class="mt-6 space-y-2 text-grey-200">
<li> <li>
<a href="#">Lorem ipsum</a> <a href="#">Lorem ipsum</a>
...@@ -25,9 +27,10 @@ ...@@ -25,9 +27,10 @@
<a href="#">Lorem ipsum</a> <a href="#">Lorem ipsum</a>
</li> </li>
</ul> </ul>
</ui-footer-collapsible>
</div> </div>
<div class="py-4 lg:py-0 border-t border-grey-400 lg:border-t-0"> <div class="py-4 lg:py-0 border-t border-grey-400 lg:border-t-0">
<span class="text-xl uppercase text-white">Nová sekce</span> <ui-footer-collapsible label="Nová sekce">
<ul class="mt-6 space-y-2 text-grey-200"> <ul class="mt-6 space-y-2 text-grey-200">
<li> <li>
<a href="#">Lorem ipsum</a> <a href="#">Lorem ipsum</a>
...@@ -39,9 +42,10 @@ ...@@ -39,9 +42,10 @@
<a href="#">Lorem ipsum</a> <a href="#">Lorem ipsum</a>
</li> </li>
</ul> </ul>
</ui-footer-collapsible>
</div> </div>
<div class="pt-4 lg:py-0 border-t border-grey-400 lg:border-t-0"> <div class="pt-4 lg:py-0 border-t border-grey-400 lg:border-t-0">
<span class="text-xl uppercase text-white">Nová sekce</span> <ui-footer-collapsible label="Nová sekce">
<ul class="mt-6 space-y-2 text-grey-200"> <ul class="mt-6 space-y-2 text-grey-200">
<li> <li>
<a href="#">Lorem ipsum</a> <a href="#">Lorem ipsum</a>
...@@ -53,6 +57,7 @@ ...@@ -53,6 +57,7 @@
<a href="#">Lorem ipsum</a> <a href="#">Lorem ipsum</a>
</li> </li>
</ul> </ul>
</ui-footer-collapsible>
</div> </div>
</section> </section>
<section class="footer__social lg:text-right"> <section class="footer__social lg:text-right">
...@@ -68,9 +73,8 @@ ...@@ -68,9 +73,8 @@
</div> </div>
<section class="footer__sub-links lg:border-t border-grey-400"> <section class="footer__sub-links lg:border-t border-grey-400">
<div class="container container--default"> <div class="container container--default">
<div class="flex flex-col lg:flex-row lg:space-x-4 lg:items-center py-4 lg:py-8 border-t border-grey-400 lg:border-t-0"> <ui-footer-collapsible label="Otevřenost" labelClass="lg:w-1/4" wrapperClass="flex flex-col lg:flex-row lg:space-x-4 lg:items-center py-4 lg:py-8 border-t border-grey-400 lg:border-t-0" slotWrapperclass="lg:w-2/4">
<span class="lg:w-1/4 text-xl uppercase text-white">Otevřenost</span> <ul class="lg:w-full lg:pr-8 grid grid-cols-1 lg:grid-cols-3 lg:gap-4 items-center mt-6 space-y-2 lg:mt-0 lg:space-y-0 text-grey-200">
<ul class="lg:w-2/4 lg:pr-8 grid grid-cols-1 lg:grid-cols-3 lg:gap-4 items-center mt-6 space-y-2 lg:mt-0 lg:space-y-0 text-grey-200">
<li class="w-full"> <li class="w-full">
<a href="#">Transparentní účet</a> <a href="#">Transparentní účet</a>
</li> </li>
...@@ -81,7 +85,7 @@ ...@@ -81,7 +85,7 @@
<a href="#">Otevřené účetnictví</a> <a href="#">Otevřené účetnictví</a>
</li> </li>
</ul> </ul>
</div> </ui-footer-collapsible>
</div> </div>
</section> </section>
<section class="bg-black py-4 lg:py-12"> <section class="bg-black py-4 lg:py-12">
...@@ -96,4 +100,6 @@ ...@@ -96,4 +100,6 @@
</div> </div>
</div> </div>
</section> </section>
</div>
</ui-footer>
</footer> </footer>
<nav class="navbar __js-root" data-app="Navbar"> <nav class="navbar __js-root" data-app="Navbar">
<navbar inline-template> <ui-navbar inline-template>
<div> <div>
<div class="container container--wide navbar__content" :class="{'navbar__content--initialized': true}"> <div class="container container--wide navbar__content" :class="{'navbar__content--initialized': true}">
<div class="navbar__brand my-4 lg:pr-8 lg:my-0"> <div class="navbar__brand my-4 lg:pr-8 lg:my-0">
...@@ -29,19 +29,19 @@ ...@@ -29,19 +29,19 @@
<a href="{{ link.templates-people }}" class="navbar-menu__link">Lidé</a> <a href="{{ link.templates-people }}" class="navbar-menu__link">Lidé</a>
</li> </li>
<li class="navbar-menu__item"> <li class="navbar-menu__item">
<navbar-subitem label="Aktuality" href="{{ link.templates-article-listing }}"> <ui-navbar-subitem label="Aktuality" href="{{ link.templates-article-listing }}">
<ul class="navbar-menu__submenu"> <ul class="navbar-menu__submenu">
<li><a href="{{ link.templates-article-detail }}" class="navbar-menu__link">Detail aktuality</a></li> <li><a href="{{ link.templates-article-detail }}" class="navbar-menu__link">Detail aktuality</a></li>
</ul> </ul>
</navbar-subtitem> </ui-navbar-subtitem>
</li> </li>
<li class="navbar-menu__item"> <li class="navbar-menu__item">
<navbar-subitem label="Volby"> <ui-navbar-subitem label="Volby">
<ul class="navbar-menu__submenu"> <ul class="navbar-menu__submenu">
<li><a href="{{ link.templates-elections-candidates }}" class="navbar-menu__link">Kandidáti</a></li> <li><a href="{{ link.templates-elections-candidates }}" class="navbar-menu__link">Kandidáti</a></li>
<li><a href="{{ link.templates-elections-program }}" class="navbar-menu__link">Program</a></li> <li><a href="{{ link.templates-elections-program }}" class="navbar-menu__link">Program</a></li>
</ul> </ul>
</navbar-subtitem> </ui-navbar-subtitem>
</li> </li>
<li class="navbar-menu__item"> <li class="navbar-menu__item">
<a href="{{ link.templates-elections-candidates }}" class="navbar-menu__link">Kandidáti</a> <a href="{{ link.templates-elections-candidates }}" class="navbar-menu__link">Kandidáti</a>
...@@ -60,5 +60,5 @@ ...@@ -60,5 +60,5 @@
</div> </div>
</div> </div>
</div> </div>
</navbar> </ui-navbar>
</nav> </nav>
...@@ -38,3 +38,28 @@ ...@@ -38,3 +38,28 @@
grid-template-columns: 1fr 1fr 1fr auto; grid-template-columns: 1fr 1fr 1fr auto;
} }
} }
.footer-collapsible__toggle {
@apply flex items-center cursor-pointer;
&:after {
/* Compensate for font specifics, align to center. */
margin-bottom: -0.125rem;
content: "\f078";
font-family: "Font Awesome 5 Pro";
@apply ml-auto font-light text-sm transition duration-200;
}
&.footer-collapsible__toggle--open:after {
transform: rotate(-180deg);
}
@screen lg {
@apply cursor-auto;
&:after {
@apply hidden;
}
}
}
Source diff could not be displayed: it is too large. Options to address this: view the blob.
import FlipClock from './apps/flip-clock'; import FlipClock from './apps/flip-clock';
import Navbar from './apps/navbar'; import Navbar from './apps/navbar';
import Footer from './apps/footer';
export default { export default {
FlipClock, FlipClock,
Navbar Navbar,
Footer
}; };
<script>
import UiFooterCollapsible from "./FooterCollapsible";
export default {
components: {
UiFooterCollapsible,
},
}
</script>
<template>
<div :class="[wrapperclass, 'footer-collapsible']">
<span class="text-xl uppercase text-white footer-collapsible__toggle" :class="[labelclass, show ? 'footer-collapsible__toggle--open' : '']" @click="handleClick">{{ label }}</span>
<div v-show="show || isLgScreenSize" :class="[slotwrapperclass]">
<slot>
</slot>
</div>
</div>
</template>
<script>
import tailwindConfig from "../../../../tailwind.config";
const lgScreenSize = parseInt(tailwindConfig.theme.screens.lg.replace("px", ""), 10);
export default {
data() {
return {
isLgScreenSize: this.getWindowWidth() >= lgScreenSize,
show: false,
resizeHandler: () => {
this.$data.isLgScreenSize = this.getWindowWidth() >= lgScreenSize;
},
};
},
props: {
href: {
type: String,
},
label: {
type: String,
},
labelclass: {
type: String,
},
wrapperclass: {
type: String,
default: "",
},
slotwrapperclass: {
type: String,
default: "",
}
},
methods: {
getWindowWidth() {
return Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
},
handleClick() {
if (this.$props.href) {
window.location = this.$props.href;
}
this.$data.show = !this.$data.show;
}
},
mounted() {
this.$nextTick(() => {
window.addEventListener("resize", this.$data.resizeHandler);
});
},
beforeDestroy() {
window.removeEventListener("resize", this.$data.resizeHandler);
}
}
</script>
import Vue from 'vue';
import UiFooter from './Footer.vue';
const appFactory = (el, attrs) => {
// Bootstrap Vue.js.
new Vue({el, components: { UiFooter }});
};
export default appFactory;
<script> <script>
import NavbarSubitem from "./NavbarSubitem"; import UiNavbarSubitem from "./NavbarSubitem";
import tailwindConfig from "../../../../tailwind.config"; import tailwindConfig from "../../../../tailwind.config";
const lgScreenSize = parseInt(tailwindConfig.theme.screens.lg.replace("px", ""), 10); const lgScreenSize = parseInt(tailwindConfig.theme.screens.lg.replace("px", ""), 10);
export default { export default {
components: { components: {
NavbarSubitem UiNavbarSubitem
}, },
data() { data() {
return { return {
......
import Vue from 'vue'; import Vue from 'vue';
import Navbar from './Navbar.vue'; import UiNavbar from './Navbar.vue';
const appFactory = (el, attrs) => { const appFactory = (el, attrs) => {
// Bootstrap Vue.js. // Bootstrap Vue.js.
new Vue({el, components: { Navbar }}); new Vue({el, components: { UiNavbar }});
}; };
export default appFactory; export default appFactory;
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment