Skip to content

Commit

Permalink
Aligned spacing of different list-item-types
Browse files Browse the repository at this point in the history
  • Loading branch information
@SimonSimCity
SimonSimCity committed Jan 24, 2024
1 parent e8aa272 commit 8ab0f2d
Show file tree
Hide file tree
Showing 3 changed files with 48 additions and 32 deletions.
15 changes: 9 additions & 6 deletions components/contributor/ContributorListItem.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,11 @@ defineProps<{
</script>

<template>
<li class="group col-span-5 relative mr-3 cursor-pointer py-3">
<li
class="group grid col-span-5 relative grid-cols-subgrid cursor-pointer gap-3 py-3"
>

Check warning on line 12 in components/contributor/ContributorListItem.vue

View check run for this annotation

Codecov / codecov/patch

components/contributor/ContributorListItem.vue#L10-L12 

Added lines #L10 - L12 were not covered by tests
<NuxtLink
class="grid col-span-5 grid-cols-subgrid"

Check warning on line 14 in components/contributor/ContributorListItem.vue

View check run for this annotation

Codecov / codecov/patch

components/contributor/ContributorListItem.vue#L14 

Added line #L14 was not covered by tests
:to="{
name: 'playlist-contributor-id',
params: { id: contributor.id },
Expand All @@ -17,25 +20,25 @@ defineProps<{
<div
class="absolute -inset-x-4 -inset-y-0 rounded-xl bg-background-2 opacity-0 group-hover:opacity-100"
></div>
<div class="relative flex items-center justify-between gap-3">
<div class="w-10">
<div class="relative grid col-span-5 grid-cols-subgrid">
<div>

Check warning on line 24 in components/contributor/ContributorListItem.vue

View check run for this annotation

Codecov / codecov/patch

components/contributor/ContributorListItem.vue#L23-L24 

Added lines #L23 - L24 were not covered by tests
<ProtectedImage
v-if="contributor.cover"

Check warning on line 26 in components/contributor/ContributorListItem.vue

View check run for this annotation

Codecov / codecov/patch

components/contributor/ContributorListItem.vue#L26 

Added line #L26 was not covered by tests
:src="contributor.cover"
alt=""
class="aspect-square w-10 rounded-xl bg-background-2"
/>
</div>
<div class="mr-auto w-1/3">
<div class="col-span-3 flex items-center">

Check warning on line 32 in components/contributor/ContributorListItem.vue

View check run for this annotation

Codecov / codecov/patch

components/contributor/ContributorListItem.vue#L32 

Added line #L32 was not covered by tests
<h4
class="overflow-hidden text-ellipsis whitespace-nowrap font-semibold"
:title="contributor.name || ''"
>
{{ contributor.name }}
</h4>
</div>
<div class="ml-auto flex items-center justify-center gap-1">
<button class="focus:bg-lime-400 rounded-lg px-2 py-0">
<div class="flex justify-end">
<button class="px-2">

Check warning on line 41 in components/contributor/ContributorListItem.vue

View check run for this annotation

Codecov / codecov/patch

components/contributor/ContributorListItem.vue#L40-L41 

Added lines #L40 - L41 were not covered by tests
<NuxtIcon name="icon.chevron.right" class="text-2xl" />
</button>
</div>
Expand Down
16 changes: 10 additions & 6 deletions components/podcast/PodcastItem.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,11 @@ defineProps<{
</script>

<template>
<li class="group col-span-5 relative mr-3 cursor-pointer py-3">
<li
class="group grid col-span-5 relative grid-cols-subgrid cursor-pointer gap-3 py-3"
>

Check warning on line 12 in components/podcast/PodcastItem.vue

View check run for this annotation

Codecov / codecov/patch

components/podcast/PodcastItem.vue#L10-L12 

Added lines #L10 - L12 were not covered by tests
<NuxtLink
class="grid col-span-5 grid-cols-subgrid"

Check warning on line 14 in components/podcast/PodcastItem.vue

View check run for this annotation

Codecov / codecov/patch

components/podcast/PodcastItem.vue#L14 

Added line #L14 was not covered by tests
:to="{
name: 'playlist-podcast-id',
params: { id: podcast.id },
Expand All @@ -17,24 +20,25 @@ defineProps<{
<div
class="absolute -inset-x-4 -inset-y-0 rounded-xl bg-background-2 opacity-0 group-hover:opacity-100"
></div>
<div class="relative flex items-center justify-between gap-3">
<div v-if="podcast.cover" class="w-10">
<div class="relative grid col-span-5 grid-cols-subgrid">
<div>

Check warning on line 24 in components/podcast/PodcastItem.vue

View check run for this annotation

Codecov / codecov/patch

components/podcast/PodcastItem.vue#L23-L24 

Added lines #L23 - L24 were not covered by tests
<ProtectedImage
v-if="podcast.cover"

Check warning on line 26 in components/podcast/PodcastItem.vue

View check run for this annotation

Codecov / codecov/patch

components/podcast/PodcastItem.vue#L26 

Added line #L26 was not covered by tests
:src="podcast.cover"
alt=""
class="aspect-square w-10 rounded-xl bg-background-2"
/>
</div>
<div class="mr-auto w-1/3">
<div class="col-span-3 flex items-center">

Check warning on line 32 in components/podcast/PodcastItem.vue

View check run for this annotation

Codecov / codecov/patch

components/podcast/PodcastItem.vue#L32 

Added line #L32 was not covered by tests
<h4
class="overflow-hidden text-ellipsis whitespace-nowrap font-semibold"
:title="podcast.title || ''"
>
{{ podcast.title }}
</h4>
</div>
<div class="ml-auto flex items-center justify-center gap-1">
<button class="focus:bg-lime-400 rounded-lg px-2 py-0">
<div class="flex justify-end">
<button class="px-2">

Check warning on line 41 in components/podcast/PodcastItem.vue

View check run for this annotation

Codecov / codecov/patch

components/podcast/PodcastItem.vue#L40-L41 

Added lines #L40 - L41 were not covered by tests
<NuxtIcon name="icon.chevron.right" class="text-2xl" />
</button>
</div>
Expand Down
49 changes: 29 additions & 20 deletions components/track/TrackItem.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,32 +89,41 @@ function secondsToTime(totalSeconds: number | undefined) {

<template>
<li
class="w-full cursor-pointer grid grid-flow-col col-span-5 grid-cols-subgrid"
class="group grid col-span-5 relative grid-cols-subgrid cursor-pointer gap-3 py-3"
@click.stop="playTrack"
>

Check warning on line 94 in components/track/TrackItem.vue

View check run for this annotation

Codecov / codecov/patch

components/track/TrackItem.vue#L91-L94 

Added lines #L91 - L94 were not covered by tests
<div class="grid grid-flow-col col-span-5 grid-cols-subgrid">
<div v-if="track.meta?.attachedPicture && showThumbnail" class="relative">
<ProtectedImage
:src="track.meta?.attachedPicture"
alt=""
class="aspect-square w-10 rounded-md bg-background-2"
/>
<div class="absolute inset-0 opacity-0 group-hover:opacity-100">
<div
class="absolute inset-0 h-full w-full rounded-md bg-black-1 opacity-50 dark:bg-white-1"
></div>
<NuxtIcon
name="play"
class="absolute inset-0 flex items-center justify-center text-2xl text-white-1 dark:text-black-1"
<div
class="absolute -inset-x-4 -inset-y-0 rounded-xl bg-background-2 opacity-0 group-hover:opacity-100"
></div>

<div class="relative grid col-span-5 grid-cols-subgrid">

Check warning on line 99 in components/track/TrackItem.vue

View check run for this annotation

Codecov / codecov/patch

components/track/TrackItem.vue#L98-L99 

Added lines #L98 - L99 were not covered by tests
<div
v-if="track.meta?.attachedPicture && showThumbnail"
class="flex items-center"

Check warning on line 102 in components/track/TrackItem.vue

View check run for this annotation

Codecov / codecov/patch

components/track/TrackItem.vue#L102 

Added line #L102 was not covered by tests
>
<div class="relative">
<ProtectedImage
:src="track.meta?.attachedPicture"
alt=""
class="aspect-square w-10 rounded-md bg-background-2"

Check warning on line 108 in components/track/TrackItem.vue

View check run for this annotation

Codecov / codecov/patch

components/track/TrackItem.vue#L104-L108 

Added lines #L104 - L108 were not covered by tests
/>
<div class="absolute inset-0 opacity-0 group-hover:opacity-100">
<div
class="absolute inset-0 h-full w-full rounded-md bg-black-1 opacity-50 dark:bg-white-1"
></div>
<NuxtIcon
name="play"
class="absolute inset-0 flex items-center justify-center text-2xl text-white-1 dark:text-black-1"
/>
</div>

Check warning on line 118 in components/track/TrackItem.vue

View check run for this annotation

Codecov / codecov/patch

components/track/TrackItem.vue#L110-L118 

Added lines #L110 - L118 were not covered by tests
</div>
</div>

<div
v-if="!(track.meta?.attachedPicture && showThumbnail)"
class="relative"
></div>
<div class="mr-auto">
<div class="flex flex-col justify-center">

Check warning on line 126 in components/track/TrackItem.vue

View check run for this annotation

Codecov / codecov/patch

components/track/TrackItem.vue#L121-L126 

Added lines #L121 - L126 were not covered by tests
<h4
class="block overflow-hidden text-ellipsis font-semibold"

Check warning on line 128 in components/track/TrackItem.vue

View check run for this annotation

Codecov / codecov/patch

components/track/TrackItem.vue#L128 

Added line #L128 was not covered by tests
:title="track.meta?.title || ''"
Expand All @@ -129,18 +138,18 @@ function secondsToTime(totalSeconds: number | undefined) {
{{ track.meta?.artist }}
</span>
</div>
<div v-if="!isTrackTypeKnown">
<div v-if="!isTrackTypeKnown" class="flex items-center">

Check warning on line 141 in components/track/TrackItem.vue

View check run for this annotation

Codecov / codecov/patch

components/track/TrackItem.vue#L141 

Added line #L141 was not covered by tests
<span class="text-label-2">{{ track.subtype }}</span>
</div>
<div v-if="isTrackTypeKnown">
<div v-if="isTrackTypeKnown" class="flex items-center">

Check warning on line 144 in components/track/TrackItem.vue

View check run for this annotation

Codecov / codecov/patch

components/track/TrackItem.vue#L144 

Added line #L144 was not covered by tests
<span class="text-label-2">{{ track.meta?.album }}</span>
</div>
<div class="ml-auto">
<div class="flex items-center">

Check warning on line 147 in components/track/TrackItem.vue

View check run for this annotation

Codecov / codecov/patch

components/track/TrackItem.vue#L147 

Added line #L147 was not covered by tests
<span class="text-label-2">{{
secondsToTime(track.media?.[0]?.files?.[0]?.duration)
}}</span>
</div>
<div class="ml-auto flex items-center justify-center gap-1">
<div class="flex items-center gap-1">

Check warning on line 152 in components/track/TrackItem.vue

View check run for this annotation

Codecov / codecov/patch

components/track/TrackItem.vue#L152 

Added line #L152 was not covered by tests
<button
class="px-2 py-0 opacity-0 hover:bg-[red] hover:opacity-100 focus:opacity-100 group-hover:opacity-100 group-focus:opacity-100"
:aria-label="t('track.a11y.download')"
Expand Down

0 comments on commit 8ab0f2d

Please sign in to comment.