chore: rename tabs, declare routes, use icons for tabs; layout updates
This commit is contained in:
parent
f5d689117a
commit
484f773e8a
|
@ -4,10 +4,12 @@
|
||||||
:class="[colorClasses, index < 5 && 'mr-px']"
|
:class="[colorClasses, index < 5 && 'mr-px']"
|
||||||
@click="$store.commit('setActiveTab', index)"
|
@click="$store.commit('setActiveTab', index)"
|
||||||
>
|
>
|
||||||
<template v-if="!tabData.locked">{{ tabData.label }}</template>
|
<template v-if="!tabData.locked">
|
||||||
<template v-if="tabData.locked"
|
<span :class="tabData.label" />
|
||||||
><i class="fa fa-lock" aria-hidden="true"></i
|
</template>
|
||||||
></template>
|
<template v-if="tabData.locked">
|
||||||
|
<span class="fas fa-lock" />
|
||||||
|
</template>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
|
@ -10,7 +10,7 @@
|
||||||
|
|
||||||
<main class="bg-gray-400 grid w-full h-full overflow-auto relative">
|
<main class="bg-gray-400 grid w-full h-full overflow-auto relative">
|
||||||
<div
|
<div
|
||||||
class="flex flex-row bg-gray-300 border border-gray-600 font-semibold"
|
class="flex flex-row bg-gray-300 border border-gray-600 font-semibold h-10"
|
||||||
>
|
>
|
||||||
<div class="text-center pt-2 pb-1 flex-grow border-r border-gray-600">
|
<div class="text-center pt-2 pb-1 flex-grow border-r border-gray-600">
|
||||||
Dec. 1990
|
Dec. 1990
|
||||||
|
@ -44,7 +44,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="tabs flex flex-row w-full bg-gray-400 text-gray-400">
|
<div class="tabs flex flex-row w-full bg-gray-400 text-gray-400 h-10">
|
||||||
<game-tab
|
<game-tab
|
||||||
v-for="(tab, index) in $store.state.tabs"
|
v-for="(tab, index) in $store.state.tabs"
|
||||||
:key="index"
|
:key="index"
|
||||||
|
@ -131,11 +131,11 @@ html {
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.page {
|
.page {
|
||||||
grid-template-rows: 4rem 1fr auto;
|
grid-template-rows: 0rem 1fr auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
main {
|
main {
|
||||||
grid-template-rows: auto minmax(0, 1fr) auto auto minmax(0, 2fr);
|
grid-template-rows: auto minmax(0, 2fr) auto auto minmax(0, 3fr);
|
||||||
}
|
}
|
||||||
|
|
||||||
.units-background {
|
.units-background {
|
||||||
|
|
|
@ -5,52 +5,52 @@ export const state = () => ({
|
||||||
activeTabIndex: 0,
|
activeTabIndex: 0,
|
||||||
tabs: [
|
tabs: [
|
||||||
{
|
{
|
||||||
id: 'instruments',
|
route: '/',
|
||||||
label: '1',
|
label: 'fas fa-clock',
|
||||||
title: 'Instruments',
|
title: 'Timekeeping Instruments',
|
||||||
darkColor: 'yellow-600',
|
darkColor: 'yellow-600',
|
||||||
lightColor: 'yellow-200',
|
lightColor: 'yellow-200',
|
||||||
locked: false,
|
locked: false,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 'upgrades',
|
route: '/apprentices',
|
||||||
label: '2',
|
label: 'fas fa-user-friends',
|
||||||
title: 'Upgrades',
|
title: 'Apprentices',
|
||||||
darkColor: 'blue-600',
|
darkColor: 'blue-600',
|
||||||
lightColor: 'blue-200',
|
lightColor: 'blue-200',
|
||||||
locked: false,
|
locked: false,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 'missions',
|
route: '/missions',
|
||||||
label: '3',
|
label: 'fas fa-th-list',
|
||||||
title: 'Missions',
|
title: 'Missions',
|
||||||
darkColor: 'violet-600',
|
darkColor: 'violet-600',
|
||||||
lightColor: 'violet-200',
|
lightColor: 'violet-200',
|
||||||
locked: true,
|
locked: false,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 'timemachine',
|
route: '/timemachine',
|
||||||
label: '4',
|
label: 'fas fa-fast-forward',
|
||||||
title: 'Time Machine',
|
title: 'Time Machine',
|
||||||
darkColor: 'lime-600',
|
darkColor: 'lime-600',
|
||||||
lightColor: 'lime-200',
|
lightColor: 'lime-200',
|
||||||
locked: true,
|
locked: false,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 'achievements',
|
route: '/timemagic',
|
||||||
label: '5',
|
label: 'fas fa-eye',
|
||||||
title: 'Time Magic',
|
title: 'Time Magic',
|
||||||
darkColor: 'orange-600',
|
darkColor: 'orange-600',
|
||||||
lightColor: 'orange-200',
|
lightColor: 'orange-200',
|
||||||
locked: true,
|
locked: false,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 'prestige',
|
route: '/wisdom',
|
||||||
label: '6',
|
label: 'fas fa-book-open',
|
||||||
title: 'Etc.',
|
title: 'Wisdom',
|
||||||
darkColor: 'teal-600',
|
darkColor: 'teal-600',
|
||||||
lightColor: 'teal-200',
|
lightColor: 'teal-200',
|
||||||
locked: true,
|
locked: false,
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
currency: new Decimal(0),
|
currency: new Decimal(0),
|
||||||
|
|
Reference in New Issue