traxxx-web/pages/scene/revisions/+Page.vue

<template>
	<div class="content">
		<div class="revs-header">
			<h2 class="heading">Revisions for "{{ scene.title }}"</h2>

			<div class="revs-actions">
				<a
					:href="`/scene/edit/${scene.id}/${scene.slug}`"
					class="link"
				>Edit scene</a>

				<a
					:href="`/scene/${scene.id}/${scene.slug}`"
					target="_blank"
					class="link"
				>Go to scene</a>
			</div>
		</div>

		<Revisions context="scene" />
	</div>
</template>

<script setup>
import { inject } from 'vue';

import Revisions from '#/components/edit/revisions.vue';

const pageContext = inject('pageContext');
const scene = pageContext.pageProps.scene;
</script>

<style scoped>
.content {
	padding: 1rem;
	flex-grow: 1;
}

.revs-header {
	display: flex;
	justify-content: space-between;
	align-items: center;

	.heading {
		line-height: 1.5;
	}
}

.revs-actions {
	display: flex;
	gap: 2rem;
	flex-shrink: 0;
}

@media(--compact) {
	.revs-header {
		display: flex;
		flex-direction: column;
		margin-bottom: 1rem;
	}
}
</style>