82 lines
1.3 KiB
Vue
82 lines
1.3 KiB
Vue
<template>
|
|
<div class="page">
|
|
<nav class="scopes">
|
|
<Link
|
|
href="/updates/latest"
|
|
class="scope nolink"
|
|
:active="scope === 'latest'"
|
|
>Latest</Link>
|
|
|
|
<Link
|
|
href="/updates/upcoming"
|
|
class="scope nolink"
|
|
:active="scope === 'upcoming'"
|
|
>Upcoming</Link>
|
|
|
|
<Link
|
|
href="/updates/new"
|
|
class="scope nolink"
|
|
:active="scope === 'new'"
|
|
>New</Link>
|
|
</nav>
|
|
|
|
<ul class="scenes nolist">
|
|
<li
|
|
v-for="scene in scenes"
|
|
:key="scene.id"
|
|
>
|
|
<Scene :scene="scene" />
|
|
</li>
|
|
</ul>
|
|
|
|
<Pagination />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { inject } from 'vue';
|
|
|
|
import Scene from './tile.vue';
|
|
import Pagination from '../pagination/pagination.vue';
|
|
|
|
const { routeParams } = inject('pageContext');
|
|
const { scope } = routeParams;
|
|
|
|
defineProps({
|
|
scenes: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.page {
|
|
background: var(--background-base-10);
|
|
}
|
|
|
|
.scenes {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
|
|
gap: .75rem .5rem;
|
|
padding: 1rem;
|
|
}
|
|
|
|
.scopes {
|
|
margin-left: 1rem;
|
|
}
|
|
|
|
.scope {
|
|
box-sizing: border-box;
|
|
padding: 1rem;
|
|
color: var(--shadow);
|
|
font-size: .9rem;
|
|
font-weight: bold;
|
|
|
|
&.active {
|
|
color: var(--primary);
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
</style>
|