style(front): Section component on explore, small playbutton dropdown-only's

This commit is contained in:
ArneBo 2025-02-05 12:26:23 +01:00
parent ca1ccf5a49
commit bbc239b96c
5 changed files with 123 additions and 118 deletions

View File

@ -106,6 +106,7 @@ const isOpen = ref(false)
>
<OptionsButton
v-if="dropdownOnly"
v-bind="$attrs"
@click="isOpen = !isOpen"
:isGhost="discrete"
/>

View File

@ -17,6 +17,7 @@ import Section from '~/components/ui/Section.vue'
import Alert from '~/components/ui/Alert.vue'
import Spacer from '~/components/ui/Spacer.vue'
import Loader from '~/components/ui/Loader.vue'
import Heading from '~/components/ui/Heading.vue'
import useErrorHandler from '~/composables/useErrorHandler'
@ -108,7 +109,6 @@ watch(() => props.websocketHandlers.includes('Listen'), (to) => {
<template>
<!-- TODO: Use activity.vue -->
<div class="component-track-widget">
<h2 v-if="!!$slots.title">
<slot name="title" />
<span
@ -125,7 +125,7 @@ watch(() => props.websocketHandlers.includes('Listen'), (to) => {
{{ t('components.audio.track.Widget.empty.noResults') }}
<Loader v-if="isLoading" />
</Alert>
<Section
<template
v-if="count > 0"
medium-items
>
@ -157,14 +157,13 @@ watch(() => props.websocketHandlers.includes('Listen'), (to) => {
<!-- TODO: Add Playbutton overlay -->
</div>
<div class="activity-content">
<div class="track-title">
<router-link
class="funkwhale link artist"
:to="{name: 'library.tracks.detail', params: {id: object.track.id}}"
>
{{ object.track.title }}
<Heading :h3="object.track.title" title />
</router-link>
</div>
<Spacer :size="2"/>
<div
v-if="object.track.artist_credit"
class="funkwhale link artist"
@ -189,7 +188,7 @@ watch(() => props.websocketHandlers.includes('Listen'), (to) => {
:show-more="false"
:tags="object.track.tags"
/>
<Spacer :size="4"/>
<div
v-if="isActivity"
class="extra"
@ -207,9 +206,10 @@ watch(() => props.websocketHandlers.includes('Listen'), (to) => {
:account="object.actor"
:dropdown-only="true"
:track="object.track"
square-small
/>
</div>
</Section>
</template>
<Loader v-if="isLoading" />
<template v-if="nextPage">
<Spacer :size="16"/>
@ -220,15 +220,15 @@ watch(() => props.websocketHandlers.includes('Listen'), (to) => {
{{ t('components.audio.track.Widget.button.more') }}
</Button>
</template>
</div>
</template>
<style lang="scss" scoped>
.funkwhale {
&.activity {
padding: 12px 0;
padding-top: 14px;
border-top: 1px solid;
margin: -11px 0;
@include light-theme {
border-color: var(--fw-gray-300);
@ -259,7 +259,8 @@ watch(() => props.websocketHandlers.includes('Listen'), (to) => {
}
> i {
font-size: 36px;
font-size: 40px;
line-height: 36px;
}
> .play-button {

View File

@ -90,20 +90,22 @@ fetchData()
<Section
alignLeft
:h2="t('components.library.Home.header.recentlyListened')"
/>
>
<track-widget
:url="'history/listenings/'"
:filters="{ scope, ordering: '-creation_date', ...qualityFilters}"
:websocket-handlers="['Listen']"
/>
</Section>
<Section
alignLeft
:h2="t('components.library.Home.header.recentlyFavorited')"
/>
>
<track-widget
:url="'favorites/tracks/'"
:filters="{scope: scope, ordering: '-creation_date'}"
/>
</Section>
<Section
alignLeft
:h2="t('components.library.Home.header.recentlyAdded')"

View File

@ -8,7 +8,7 @@ const size = Object.entries(props).find(([key, value]) => value && key!==level)?
</script>
<template>
<component :is="level" :class="size" style="margin: 0; padding:0; line-height: 40px; vertical-align: baseline;">
<component :is="level" :class="size" style="margin: 0; padding: 0; vertical-align: baseline;">
{{ title }}
<slot />
</component>
@ -28,7 +28,7 @@ const size = Object.entries(props).find(([key, value]) => value && key!==level)?
.caption {font-size: 14px; font-weight: 600; letter-spacing: .25px; }
/* Tab title, Channel title, Card title, Activity title */
.title { font-size: 16px; font-weight: 700; }
.title { font-size: 16px; font-weight: 700; line-height: 18px; }
/* Primary radio title */
.radio { font-size: 28px; font-weight: 900; letter-spacing: -.5px; }

View File

@ -15,6 +15,7 @@ const props = withDefaults(defineProps<Props>(), {
<template>
<Button
icon="bi-three-dots-vertical"
v-bind="$attrs"
:class="['options-button', {'is-ghost': isGhost}]"
:secondary="!isGhost"
:ghost="isGhost"