Implement further design tweaks

This commit is contained in:
Maciej Pędzich 2022-07-21 11:13:23 +02:00
parent 764f968b2f
commit 36e538a7be
3 changed files with 10 additions and 12 deletions

View File

@ -40,7 +40,7 @@ const formatRetentionText = (retention: number) => {
const datatablePropsToEnable = computed(() => const datatablePropsToEnable = computed(() =>
props.page === 'snapshot' props.page === 'snapshot'
? { scrollable: true, scrollHeight: '500px' } ? {}
: { : {
paginator: true, paginator: true,
paginatorTemplate: paginatorTemplate:

View File

@ -82,8 +82,8 @@ const openSnapshotsCalendar = async ({
<template> <template>
<NuxtLayout name="centered-content"> <NuxtLayout name="centered-content">
<h1 class="m-0 md:text-5xl text-4xl">Spotify Playlist Archive</h1> <h1 class="m-0 md:text-5xl text-4xl">Spotify Playlist Archive</h1>
<div class="flex flex-column justify-content-center text-center"> <div class="md:p-0 p-2 flex flex-column justify-content-center text-center">
<p class="text-xl text-gray-300"> <p class="md:mt-3 mt-2 text-lg text-gray-300">
Browse past versions of thousands of playlists saved over time Browse past versions of thousands of playlists saved over time
</p> </p>
<div class="w-full md:px-0 px-3"> <div class="w-full md:px-0 px-3">

View File

@ -16,13 +16,13 @@ const tabItems = [
label: 'Show statistics', label: 'Show statistics',
icon: 'pi pi-chart-bar', icon: 'pi pi-chart-bar',
to: `/playlists/${playlistId}/stats` to: `/playlists/${playlistId}/stats`
},
{
label: 'Compare snapshots (SOON)',
icon: 'pi pi-sort-alt',
to: `/playlists/${playlistId}/snapshots/compare`,
disabled: true
} }
// {
// label: 'Compare snapshots (SOON)',
// icon: 'pi pi-sort-alt',
// to: `/playlists/${playlistId}/snapshots/compare`,
// disabled: true
// }
]; ];
const { error, data: playlist } = await useFetch<Snapshot>( const { error, data: playlist } = await useFetch<Snapshot>(
@ -61,7 +61,7 @@ const isNotFoundError = computed(
{{ playlist.owner?.name }} {{ playlist.owner?.name }}
</NuxtLink> </NuxtLink>
</h1> </h1>
<TabMenu class="w-full mb-4" :model="tabItems" /> <TabMenu class="md:w-10 w-full mb-4" :model="tabItems" />
<NuxtPage /> <NuxtPage />
</template> </template>
</div> </div>
@ -69,8 +69,6 @@ const isNotFoundError = computed(
<style scoped> <style scoped>
:deep(ul.p-tabmenu-nav) { :deep(ul.p-tabmenu-nav) {
margin-left: 5rem;
margin-right: 5rem;
justify-content: center; justify-content: center;
} }