buttons are now components

main
mwinter 1 year ago
parent 548733be82
commit ad4c66fc6a

@ -1,5 +1,5 @@
<template> <template>
<div> <div class="bg-white">
<NuxtLayout> <NuxtLayout>
<NuxtPage/> <NuxtPage/>
</NuxtLayout> </NuxtLayout>

@ -0,0 +1,17 @@
<template>
<div class="p-1">
<button
type="button"
v-show="visible"
class="inline-flex bg-black rounded-full text-xs p-1"
>
<Icon :name="icon" color="white" />
</button>
</div>
</template>
<script>
export default {
props: ['icon', 'work', 'visible']
}
</script>

@ -1,4 +1,7 @@
// https://nuxt.com/docs/api/configuration/nuxt-config // https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({ export default defineNuxtConfig({
modules: ['@nuxtjs/tailwindcss', '@nuxt/image', 'nuxt-icon'] modules: ['@nuxtjs/tailwindcss', '@nuxt/image', 'nuxt-icon'],
image: {
domains: ['unboundedpress.org']
}
}) })

@ -1,5 +1,5 @@
<template> <template>
<div class="grid grid-cols-3 gap-10 bg-white divide-x divide-solid divide-black p-4"> <div class="bg-gray-50 rounded-lg m-5 grid grid-cols-3 gap-10 bg-white divide-x divide-solid divide-black p-4">
<div class="px-5"> <div class="px-5">
<p class="text-lg">pieces</p> <p class="text-lg">pieces</p>
<div class="py-2 ml-3" v-for="item in works"> <div class="py-2 ml-3" v-for="item in works">
@ -8,41 +8,15 @@
<div class="grid grid-cols-[70%,30%] gap-1 font-thin"> <div class="grid grid-cols-[70%,30%] gap-1 font-thin">
<p class="italic text-sm">{{ work.title }}</p> <p class="italic text-sm">{{ work.title }}</p>
<div class="grid grid-cols-4"> <div class="grid grid-cols-4">
<div class="p-1">
<button
type="button"
class="inline-flex bg-black rounded-full text-xs p-1"
>
<Icon name="ion:book-outline" color="white" />
</button>
</div>
<div class="p-1"> <Button :visible="work.score" icon="ion:book-outline" :work="work"></Button>
<button
type="button"
class="inline-flex bg-black rounded-full text-xs p-1"
>
<Icon name="wpf:speaker" color="white" />
</button>
</div>
<div class="p-1"> <Button :visible="work.soundcloud_trackid" icon="wpf:speaker" :work="work"></Button>
<button
type="button" <Button :visible="work.vimeo_trackid" icon="fluent:video-48-filled" :work="work"></Button>
class="inline-flex bg-black rounded-full text-xs p-1"
> <Button :visible="work.images" icon="mdi:camera" :work="work"></Button>
<Icon name="fluent:video-48-filled" color="white" />
</button>
</div>
<div class="p-1">
<button
type="button"
class="inline-flex bg-black rounded-full text-xs p-1"
>
<Icon name="mdi:camera" color="white" />
</button>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -51,14 +25,17 @@
<div class="px-5"> <div class="px-5">
<p class="text-lg">writings</p> <p class="text-lg">writings</p>
<div class="leading-tight py-2 ml-3 text-sm" v-for="item in pubs">{{ item.entryTags.title }}</div> <div class="leading-tight py-2 ml-3 text-sm" v-for="item in pubs">
{{ item.entryTags.title }}
</div>
</div> </div>
<div class="px-5"> <div class="px-5">
<p class="text-lg">releases</p> <p class="text-lg">releases</p>
<div class="leading-tight py-2 ml-3 text-sm" v-for="item in releases"> <div class="leading-tight py-4 ml-3 text-sm" v-for="item in releases">
{{ item.title }} <p class="text-center leading-tight py-2">{{ item.title }}</p>
<nuxt-img :src="'https://unboundedpress.org/api/album_art.files/' + item.album_art_id + '/binary'" /> <nuxt-img :src="'https://unboundedpress.org/api/album_art.files/' + item.album_art_id + '/binary'"
quality="50"/>
</div> </div>
</div> </div>
</div> </div>

Loading…
Cancel
Save