maciejpedzich/spotifyplaylistarchive.com
1
0
Fork 0
mirror of https://github.com/maciejpedzich/spotifyplaylistarchive.com.git synced 2024-09-19 18:16:19 +02:00
Code Issues Actions Packages Projects Releases Wiki Activity

Tweak data table's design responsiveness

Browse Source
This commit is contained in:
Maciej Pędzich 2022-07-07 08:46:53 +02:00
parent e9ed63ee24
commit d9cf8eaeb6
1 changed files with 12 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
pages/playlists/[playlistId]/snapshots/show/[commitSha].vue
View File

@ -36,11 +36,11 @@ const formatDate = (date: string) => dateFormatter.format(Date.parse(date));
</script>
<template>
<div>
<div class="w-full">
<p v-if="error">Something went wrong while fetching this snapshot</p>
<template v-else-if="snapshot">
<div class="text-lg text-center flex flex-column align-items-center">
<p class="mt-0 text-gray-300">
<p class="mt-0 px-3 text-gray-300">
{{ decodeHtmlEntities(snapshot.description) }}
</p>
<ul id="snapshot-meta" class="m-0 p-0">
@ -65,7 +65,7 @@ const formatDate = (date: string) => dateFormatter.format(Date.parse(date));
:rows-per-page-options="[10, 20, 50, 100]"
paginator-template="CurrentPageReport FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown"
current-page-report-template="Showing {first} to {last} of {totalRecords}"
responsive-layout="scroll"
responsive-layout="stack"
>
<Column field="name" header="Title" sortable>
<template #body="{ data: track }">
@ -114,6 +114,12 @@ const formatDate = (date: string) => dateFormatter.format(Date.parse(date));
list-style: disc;
}
:deep(div.p-datatable) {
width: 100%;
margin: 2rem 0 3rem 0;
padding: 0 1rem;
}
@media screen and (min-width: 768px) {
#snapshot-meta > li {
float: left;
@ -124,9 +130,9 @@ const formatDate = (date: string) => dateFormatter.format(Date.parse(date));
margin-left: 0;
list-style: none;
}
}
:deep(.p-datatable) {
margin: 2rem 0 3rem 0;
:deep(div.p-datatable) {
padding: 0 8rem;
}
}
</style>