mirror of
https://github.com/eugene-serb/wavelovers.git
synced 2023-09-09 23:41:16 +03:00
- added header and footer as vue-component.
- update html template. - update root app-component.
This commit is contained in:
Eugene Serb
parent
25b08c1eac
commit
02d17b3e55
@ -66,44 +66,7 @@
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header class="header">
|
||||
<div class="header-wrapper container">
|
||||
<div class="logo-wrapper">
|
||||
<span class="logo-wrapper__logo" translate="no">Wavelovers</span>
|
||||
</div>
|
||||
<nav class="menu-wrapper">
|
||||
<ul class="navigation">
|
||||
<li class="navigation__item">
|
||||
<a href="/" target="_self" class="navigation__link">Home</a>
|
||||
</li>
|
||||
<li class="navigation__item">
|
||||
<a href="/?faq" target="_self" class="navigation__link">FAQ</a>
|
||||
</li>
|
||||
<li class="navigation__item">
|
||||
<a href="/?about" target="_self" class="navigation__link">About</a>
|
||||
</li>
|
||||
<li class="navigation__item">
|
||||
<a href="/?donate" target="_self" class="navigation__link">Donate</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main id="app" v-cloak class="page container"></main>
|
||||
|
||||
<footer class="footer">
|
||||
<div class="footer-wrapper container">
|
||||
<div class="annotation">
|
||||
<span class="annotation__text">© 2022 Wavelovers. Content licensed under </span><a href="https://wavelovers.ru/LICENSE.md" target="_blank">GNU General Public License v3.0</a><br>
|
||||
<span class="annotation__text">This site is open source. </span><a href="https://github.com/eugene-serb/wavelovers/" target="_blank">Improve this page.</a>
|
||||
</div>
|
||||
<div class="annotation created-by">
|
||||
<span class="annotation__text">Created by</span><a href="https://eugene-serb.github.io/" target="_blank" translate="no">Eugene Serb</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<div id="app" v-cloak></div>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<noscript><div><img src="https://mc.yandex.ru/watch/89252711" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
|
||||
</body>
|
||||
|
||||
22
src/App.vue
22
src/App.vue
@ -1,16 +1,22 @@
|
||||
<template>
|
||||
<div class="wavelovers">
|
||||
<NavigationList />
|
||||
<router-view />
|
||||
<GamepadList v-if="gamepads.length > 0"
|
||||
:gamepads="gamepads" />
|
||||
<MessageItem v-else>Press any gamepad button or connect a new gamepad to vibrate.</MessageItem>
|
||||
</div>
|
||||
<HeaderItem />
|
||||
<main class="page container">
|
||||
<div class="wavelovers">
|
||||
<NavigationList />
|
||||
<router-view />
|
||||
<GamepadList v-if="gamepads.length > 0"
|
||||
:gamepads="gamepads" />
|
||||
<MessageItem v-else>Press any gamepad button or connect a new gamepad to vibrate.</MessageItem>
|
||||
</div>
|
||||
</main>
|
||||
<FooterItem />
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import store from '@/store/index';
|
||||
import HeaderItem from '@/components/HeaderItem.vue';
|
||||
import FooterItem from '@/components/FooterItem.vue';
|
||||
import NavigationList from '@/components/NavigationList.vue';
|
||||
import GamepadList from '@/components/GamepadList.vue';
|
||||
import MessageItem from '@/components/MessageItem.vue';
|
||||
@ -19,6 +25,8 @@
|
||||
export default defineComponent({
|
||||
name: 'App',
|
||||
components: {
|
||||
HeaderItem: HeaderItem,
|
||||
FooterItem: FooterItem,
|
||||
NavigationList: NavigationList,
|
||||
GamepadList: GamepadList,
|
||||
MessageItem: MessageItem,
|
||||
|
||||
24
src/components/FooterItem.vue
Normal file
24
src/components/FooterItem.vue
Normal file
@ -0,0 +1,24 @@
|
||||
<template>
|
||||
<footer class="footer">
|
||||
<div class="footer-wrapper container">
|
||||
<div class="annotation">
|
||||
<span class="annotation__text">© 2022 Wavelovers. Content licensed under </span><a href="https://wavelovers.ru/LICENSE.md" target="_blank">GNU General Public License v3.0</a><br>
|
||||
<span class="annotation__text">This site is open source. </span><a href="https://github.com/eugene-serb/wavelovers/" target="_blank">Improve this page.</a>
|
||||
</div>
|
||||
<div class="annotation created-by">
|
||||
<span class="annotation__text">Created by</span><a href="https://eugene-serb.github.io/" target="_blank" translate="no">Eugene Serb</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'FooterItem',
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss"></style>
|
||||
|
||||
36
src/components/HeaderItem.vue
Normal file
36
src/components/HeaderItem.vue
Normal file
@ -0,0 +1,36 @@
|
||||
<template>
|
||||
<header class="header">
|
||||
<div class="header-wrapper container">
|
||||
<div class="logo-wrapper">
|
||||
<span class="logo-wrapper__logo" translate="no">Wavelovers</span>
|
||||
</div>
|
||||
<nav class="menu-wrapper">
|
||||
<ul class="navigation">
|
||||
<li class="navigation__item">
|
||||
<a href="/" target="_self" class="navigation__link">Home</a>
|
||||
</li>
|
||||
<li class="navigation__item">
|
||||
<a href="/?faq" target="_self" class="navigation__link">FAQ</a>
|
||||
</li>
|
||||
<li class="navigation__item">
|
||||
<a href="/?about" target="_self" class="navigation__link">About</a>
|
||||
</li>
|
||||
<li class="navigation__item">
|
||||
<a href="/?donate" target="_self" class="navigation__link">Donate</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'HeaderItem',
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss"></style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user