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

refactor: componentize key art section; move title to tab area

This commit is contained in:
pskfyi 2022-01-09 23:11:55 -08:00 committed by pskfyi
parent 5ab549d441
commit 60a31b659c
2 changed files with 42 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
components/KeyArtStage.vue Normal file
View File

@ -0,0 +1,35 @@
<template>
<div class="key-art-stage p-8 relative">
<div class="key-art absolute top-8 left-0 right-0" />
<div
class="absolute top-0 bottom-0 left-0 right-0 flex items-center justify-center"
@click="$store.commit('addCurrency', 1)"
>
<span
class="spare-time flex flex-row items-center font-bold rounded-2xl p-2"
:class="`text-${$store.getters.activeTab.darkColor}`"
>
<span class="text-3xl md:text-5xl" v-text="$store.state.currency" />
<span
class="fas fa-hourglass-half text-xl pt-1 pl-2 md:text-3xl md:pt-2"
/>
</span>
</div>
</div>
</template>
<style scoped>
.key-art {
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 */
}
.spare-time {
background: rgba(2555, 255, 255, 0.6);
box-shadow: 0px 0px 21px 3px #fff;
transition: color 2000ms;
}
</style>

46
layouts/default.vue
View File

@ -6,23 +6,7 @@
> >
<time-header /> <time-header />
<div class="units p-8 relative"> <key-art-stage />
<div class="units-background absolute top-8 left-0 right-0"></div>
<div
class="absolute top-0 bottom-0 left-0 right-0 flex items-center justify-center"
@click="$store.commit('addCurrency', 1)"
>
<span
class="spare-time flex flex-row items-center font-bold rounded-2xl p-2"
:class="`text-${$store.getters.activeTab.darkColor}`"
>
<span class="text-3xl md:text-5xl" v-text="$store.state.currency" />
<span
class="fas fa-hourglass-half text-xl pt-1 pl-2 md:text-3xl md:pt-2"
/>
</span>
</div>
</div>
<div class="tabs grid w-full text-gray-400 h-10 relative"> <div class="tabs grid w-full text-gray-400 h-10 relative">
<game-tab <game-tab
@ -34,16 +18,14 @@
</div> </div>
<div <div
class="w-full text-2xl text-center pt-1 pb-2 relative" class="tab-content px-4 w-full relative overflow-y-scroll"
:class="activeTabColorClasses" :class="activeTabColorClasses"
> >
{{ $store.getters.activeTab.title }}
</div>
<div <div
class="tab-content px-4 w-full overflow-y-scroll" class="w-full text-2xl text-center pt-1 pb-2"
:class="activeTabColorClasses" v-text="$store.getters.activeTab.title"
> />
<nuxt /> <nuxt />
</div> </div>
</main> </main>
@ -110,7 +92,7 @@ html {
} }
main { main {
grid-template-rows: auto minmax(0, 2fr) auto auto minmax(0, 3fr); grid-template-rows: auto minmax(0, 2fr) auto minmax(0, 3fr);
transition: background-color 2000ms; transition: background-color 2000ms;
} }
@ -118,18 +100,4 @@ main {
grid-template-columns: repeat(6, 1fr); grid-template-columns: repeat(6, 1fr);
grid-gap: 0.25rem; grid-gap: 0.25rem;
} }
.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 */
}
.spare-time {
background: rgba(2555, 255, 255, 0.6);
box-shadow: 0px 0px 21px 3px #fff;
transition: color 2000ms;
}
</style> </style>