mirror/wavelovers
1
0
Fork 0
mirror of https://github.com/eugene-serb/wavelovers.git synced 2023-09-09 23:41:16 +03:00
Code Issues Projects Releases Wiki Activity

- added header and footer as vue-component.

Browse Source 
- update html template.
- update root app-component.
This commit is contained in:
Eugene Serb 2022-08-12 14:48:54 +03:00
parent 25b08c1eac
commit 02d17b3e55
4 changed files with 76 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
public/index.html
View File

@ -66,44 +66,7 @@
</style> </style>
</head> </head>
<body> <body>
<header class="header"> <div id="app" v-cloak></div>
<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>
<noscript>You need to enable JavaScript to run this app.</noscript> <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> <noscript><div><img src="https://mc.yandex.ru/watch/89252711" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
</body> </body>

22
src/App.vue
View File

@ -1,16 +1,22 @@
<template> <template>
<div class="wavelovers"> <HeaderItem />
<NavigationList /> <main class="page container">
<router-view /> <div class="wavelovers">
<GamepadList v-if="gamepads.length > 0" <NavigationList />
:gamepads="gamepads" /> <router-view />
<MessageItem v-else>Press any gamepad button or connect a new gamepad to vibrate.</MessageItem> <GamepadList v-if="gamepads.length > 0"
</div> :gamepads="gamepads" />
<MessageItem v-else>Press any gamepad button or connect a new gamepad to vibrate.</MessageItem>
</div>
</main>
<FooterItem />
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import store from '@/store/index'; import store from '@/store/index';
import HeaderItem from '@/components/HeaderItem.vue';
import FooterItem from '@/components/FooterItem.vue';
import NavigationList from '@/components/NavigationList.vue'; import NavigationList from '@/components/NavigationList.vue';
import GamepadList from '@/components/GamepadList.vue'; import GamepadList from '@/components/GamepadList.vue';
import MessageItem from '@/components/MessageItem.vue'; import MessageItem from '@/components/MessageItem.vue';
@ -19,6 +25,8 @@
export default defineComponent({ export default defineComponent({
name: 'App', name: 'App',
components: { components: {
HeaderItem: HeaderItem,
FooterItem: FooterItem,
NavigationList: NavigationList, NavigationList: NavigationList,
GamepadList: GamepadList, GamepadList: GamepadList,
MessageItem: MessageItem, MessageItem: MessageItem,

24
src/components/FooterItem.vue Normal file
View 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
View 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>