john
/
timekeeper
Archived
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

feat: page transitions trigger color animated changes

This commit is contained in:
pskfyi 2022-01-09 22:08:59 -08:00 committed by pskfyi
parent 5a05e52ed9
commit 094866afbb
2 changed files with 13 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
layouts/default.vue
View File

@ -1,16 +1,19 @@
<template> <template>
<div class="page container max-h-full h-full w-full mx-auto bg-gray-400 px-4"> <div class="page container max-h-full h-full w-full mx-auto bg-gray-400 px-4">
<main class="grid w-full h-full overflow-auto relative bg-gray-300"> <main
class="grid w-full h-full overflow-auto relative"
:class="`bg-${$store.getters.activeTab.color}`"
>
<time-header /> <time-header />
<div class="units p-8 relative bg-gray-300"> <div class="units p-8 relative">
<div class="units-background absolute top-8 left-0 right-0"></div> <div class="units-background absolute top-8 left-0 right-0"></div>
<div <div
class="absolute top-0 bottom-0 left-0 right-0 flex items-center justify-center" class="absolute top-0 bottom-0 left-0 right-0 flex items-center justify-center"
@click="$store.commit('addCurrency', 1)" @click="$store.commit('addCurrency', 1)"
> >
<span <span
class="spare-time flex flex-row items-center font-bold rounded-2xl" class="spare-time flex flex-row items-center font-bold rounded-2xl p-2"
:class="`text-${$store.getters.activeTab.darkColor}`" :class="`text-${$store.getters.activeTab.darkColor}`"
> >
<span class="text-3xl md:text-5xl" v-text="$store.state.currency" /> <span class="text-3xl md:text-5xl" v-text="$store.state.currency" />
@ -108,6 +111,7 @@ html {
main { main {
grid-template-rows: auto minmax(0, 2fr) auto auto minmax(0, 3fr); grid-template-rows: auto minmax(0, 2fr) auto auto minmax(0, 3fr);
transition: background-color 2000ms;
} }
.tabs { .tabs {

6
store/index.js
View File

@ -8,6 +8,7 @@ export const state = () => ({
label: 'fas fa-clock', label: 'fas fa-clock',
title: 'Timekeeping Instruments', title: 'Timekeeping Instruments',
darkColor: 'amber-900', darkColor: 'amber-900',
color: 'amber-400',
lightColor: 'amber-200', lightColor: 'amber-200',
locked: false, locked: false,
}, },
@ -16,6 +17,7 @@ export const state = () => ({
label: 'fas fa-user-friends', label: 'fas fa-user-friends',
title: 'Apprentices', title: 'Apprentices',
darkColor: 'rose-900', darkColor: 'rose-900',
color: 'rose-400',
lightColor: 'rose-200', lightColor: 'rose-200',
locked: false, locked: false,
}, },
@ -24,6 +26,7 @@ export const state = () => ({
label: 'fas fa-th-list', label: 'fas fa-th-list',
title: 'Missions', title: 'Missions',
darkColor: 'sky-900', darkColor: 'sky-900',
color: 'sky-400',
lightColor: 'sky-200', lightColor: 'sky-200',
locked: false, locked: false,
}, },
@ -32,6 +35,7 @@ export const state = () => ({
label: 'fas fa-fast-forward', label: 'fas fa-fast-forward',
title: 'Time Machine', title: 'Time Machine',
darkColor: 'lime-900', darkColor: 'lime-900',
color: 'lime-400',
lightColor: 'lime-200', lightColor: 'lime-200',
locked: false, locked: false,
}, },
@ -40,6 +44,7 @@ export const state = () => ({
label: 'fas fa-eye', label: 'fas fa-eye',
title: 'Time Magic', title: 'Time Magic',
darkColor: 'violet-900', darkColor: 'violet-900',
color: 'violet-400',
lightColor: 'violet-200', lightColor: 'violet-200',
locked: false, locked: false,
}, },
@ -48,6 +53,7 @@ export const state = () => ({
label: 'fas fa-book-open', label: 'fas fa-book-open',
title: 'Wisdom', title: 'Wisdom',
darkColor: 'teal-900', darkColor: 'teal-900',
color: 'teal-400',
lightColor: 'teal-100', lightColor: 'teal-100',
locked: false, locked: false,
}, },