makin look nice

This commit is contained in:
2025-12-11 11:16:07 +00:00
parent e301e0d7c1
commit 132a231b82
3 changed files with 9 additions and 3 deletions

View File

@@ -230,6 +230,7 @@ button {
.center-content { .center-content {
align-items: center; align-items: center;
text-align: center; text-align: center;
justify-content: center;
} }
.flex-row { .flex-row {

View File

@@ -47,7 +47,7 @@ onMounted(() => {
</script> </script>
<template> <template>
<div v-if="fetched"> <div v-if="fetched" class="center-content">
<h2>{{ post.title }}</h2> <h2>{{ post.title }}</h2>
<p>By: {{ post.author.username }}</p> <p>By: {{ post.author.username }}</p>
<div>{{ post.content }}</div> <div>{{ post.content }}</div>

View File

@@ -33,12 +33,17 @@ onMounted(() => {
<template> <template>
<Transition name="fade" mode="out-in"> <Transition name="fade" mode="out-in">
<div v-if="fetched" :key="song" v-on:click="nextSong" class="flex-row"> <div
v-if="fetched"
:key="song"
v-on:click="nextSong"
class="flex-row center-content"
>
<img :src="song.track.album.images[0].url" /> <img :src="song.track.album.images[0].url" />
<p><strong>Song:</strong> {{ song.track.name }}</p> <p><strong>Song:</strong> {{ song.track.name }}</p>
<p><strong>Artist:</strong> {{ song.track.artists[0].name }}</p> <p><strong>Artist:</strong> {{ song.track.artists[0].name }}</p>
</div> </div>
<div v-else class="flex-row"> <div v-else class="flex-row center-content">
<img src="/img/Untitled.png" /> <img src="/img/Untitled.png" />
<p>I ain't listenin to nofin rn :/</p> <p>I ain't listenin to nofin rn :/</p>
</div> </div>