This repository has been archived on 2024-03-13. You can view files and clone it, but cannot push or open issues or pull requests.
timekeeper/pages/index.vue

110 lines
2.5 KiB
Vue
Raw Normal View History

2022-01-03 23:53:38 +00:00
<template>
2022-01-06 10:18:46 +00:00
<div class="page grid container h-full w-full mx-auto bg-gray-300 px-4">
<header
class="text-3xl flex items-center justify-center font-bold bg-gray-600 text-gray-400"
>
Timekeeper
</header>
2022-01-07 01:17:26 +00:00
2022-01-06 10:18:46 +00:00
<main class="bg-gray-400 grid w-full">
2022-01-06 23:22:21 +00:00
<div class="units p-8 relative bg-gray-300">
2022-01-06 10:18:46 +00:00
<div class="units-background absolute top-8 left-0 right-0"></div>
</div>
2022-01-07 01:17:26 +00:00
2022-01-06 23:22:21 +00:00
<div class="tabs flex flex-row w-full bg-gray-400 text-gray-400">
2022-01-07 01:17:26 +00:00
<game-tab
v-for="(tab, index) in $store.state.tabs"
2022-01-06 10:18:46 +00:00
:key="index"
2022-01-07 01:17:26 +00:00
:index="index"
:tab-data="tab"
/>
</div>
<div
class="w-full text-2xl text-center py-1"
:class="$store.getters.activeTabColorClasses"
>
{{ $store.getters.activeTab.title }}
2022-01-06 10:18:46 +00:00
</div>
2022-01-07 01:17:26 +00:00
<div
class="tab-content p-8"
:class="$store.getters.activeTabColorClasses"
>
<template v-if="$store.state.activeTabIndex === 0">
Tab 1 content
</template>
<template v-else-if="$store.state.activeTabIndex === 1">
Tab 2 content
</template>
<template v-else-if="$store.state.activeTabIndex === 2">
Tab 3 content
</template>
<template v-else-if="$store.state.activeTabIndex === 3">
Tab 4 content
</template>
<template v-else-if="$store.state.activeTabIndex === 4">
Tab 5 content
</template>
<template v-else-if="$store.state.activeTabIndex === 5">
Tab 6 content
</template>
2022-01-06 10:18:46 +00:00
</div>
</main>
2022-01-07 01:17:26 +00:00
2022-01-06 10:18:46 +00:00
<footer class="text-lg flex items-center pt-4 pb-2 px-4 hidden md:block">
Created by GrapefruitChili, PK, TNNPe, Vice for New Years Incremental Game
Jam 2022.
</footer>
2022-01-04 22:41:36 +00:00
</div>
2022-01-03 23:53:38 +00:00
</template>
<script>
2022-01-07 01:17:26 +00:00
import GameTab from '~/components/GameTab.vue'
2022-01-03 23:53:38 +00:00
export default {
2022-01-07 01:17:26 +00:00
components: { GameTab },
2022-01-03 23:53:38 +00:00
name: 'IndexPage',
}
</script>
2022-01-04 22:41:36 +00:00
2022-01-06 10:18:46 +00:00
<style>
html,
body,
#__nuxt,
#__layout {
height: 100%; /* 100vh is broken on mobile. this is the fix. */
width: 100vw;
}
html {
background: #e5e7eb;
}
</style>
2022-01-04 22:41:36 +00:00
<style scoped>
2022-01-06 10:18:46 +00:00
.page {
grid-template-rows: 4rem 1fr auto;
2022-01-04 22:41:36 +00:00
}
2022-01-06 10:18:46 +00:00
main {
2022-01-07 01:17:26 +00:00
grid-template-rows: 1fr auto auto 2fr;
2022-01-04 22:41:36 +00:00
}
2022-01-06 10:18:46 +00:00
.units-background {
background: url('https://freesvg.org/img/johnny_automatic_hourglass.png');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
opacity: 0.4;
height: calc(100% - 4rem); /* 4rem = top padding + bottom padding */
2022-01-04 22:41:36 +00:00
}
2022-01-06 10:18:46 +00:00
.tabs {
2022-01-04 22:41:36 +00:00
}
</style>