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

refactor: clean up header code

This commit is contained in:
pskfyi 2022-01-10 02:15:23 -08:00 committed by pskfyi
parent 7154b8bafd
commit 57f1e64575
1 changed files with 29 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
components/TimeHeader.vue
View File

@ -1,36 +1,50 @@
<template> <template>
<header <header
class="grid flex-row font-semibold h-10 m-auto md:relative rounded-bl-full rounded-br-full px-4" class="grid grid-cols-3 w-full font-semibold h-10 m-auto md:relative rounded-bl-full rounded-br-full px-4"
:class="colorClasses" :class="colorClasses"
> >
<div class="text-center pt-2 pb-1 flex-grow border-r border-gray-600"> <div class="text-center pt-2 pb-1 border-r border-gray-600 select-none">
{{ $store.getters.gameMonth }} {{ $store.state.gameDate.year }} {{ $store.getters.gameMonth }} {{ $store.state.gameDate.year }}
</div> </div>
<div <div
class="text-center pt-2 pb-1 flex-grow border-r border-gray-600 relative" class="text-center pt-2 pb-1 border-r border-gray-600 relative select-none"
> >
<progress <progress
class="absolute top-0 left-0 right-0 h-1 w-full" class="absolute top-0 left-0 right-0 h-1 w-full"
:max=" :max="maxAgeValue"
$store.state.playerAgeMax.year * 12 + $store.state.playerAgeMax.month :value="ageValue"
"
:value="$store.state.playerAge.year * 12 + $store.state.playerAge.month"
/> />
{{ $store.state.playerAge.year }}y{{ $store.state.playerAge.month }}m {{ ageText }}
</div> </div>
<div class="text-center pt-2 pb-1 flex-grow"> <div class="text-center pt-2 pb-1 select-none" v-text="maxAgeText" />
{{ $store.state.playerAgeMax.year }}y{{
$store.state.playerAgeMax.month
}}m max
</div>
</header> </header>
</template> </template>
<script> <script>
export default { export default {
computed: { computed: {
ageText() {
const { year, month } = this.$store.state.playerAge
return `${year}y${month}m max`
},
ageValue() {
const { year, month } = this.$store.state.playerAge
return year * 12 + month
},
maxAgeText() {
const { year, month } = this.$store.state.playerAgeMax
return `${year}y${month}m max`
},
maxAgeValue() {
const { year, month } = this.$store.state.playerAgeMax
return year * 12 + month
},
colorClasses() { colorClasses() {
const { lightColor, darkColor } = this.$store.getters.activeTab const { lightColor, darkColor } = this.$store.getters.activeTab
@ -42,9 +56,7 @@ export default {
<style scoped> <style scoped>
header { header {
grid-template-columns: 1fr 1fr 1fr;
min-width: 18rem; min-width: 18rem;
width: 100%;
transition: background-color 2000ms, color 2000ms; transition: background-color 2000ms, color 2000ms;
} }
@media (min-width: 768px) { @media (min-width: 768px) {
@ -52,22 +64,19 @@ header {
width: 32rem; width: 32rem;
} }
} }
/* progress background for all browsers */ /* progress for all browsers */
progress::-webkit-progress-bar { progress::-webkit-progress-bar {
background-color: rgba(255, 255, 255, 0.1); background-color: rgba(255, 255, 255, 0.1);
width: 100%; width: 100%;
} }
progress { progress {
background-color: rgba(255, 255, 255, 0.1); background-color: rgba(255, 255, 255, 0.1);
color: currentColor;
} }
/* progress value for all browsers */
progress::-webkit-progress-value { progress::-webkit-progress-value {
background-color: currentColor; background-color: currentColor;
} }
progress::-moz-progress-bar { progress::-moz-progress-bar {
background-color: currentColor; background-color: currentColor;
} }
progress {
color: currentColor;
}
</style> </style>