mirror of
https://github.com/owntone/owntone-server.git
synced 2025-02-27 05:19:18 -05:00
[web] Fix spacing of elements in the pages with hero content
Spacing is now identical to the former spacing.
This commit is contained in:
Alain Nussbaumer
parent
aef1c5aa3b
commit
892ce26f44
@ -1,45 +1,49 @@
|
||||
<template>
|
||||
<content-with-hero>
|
||||
<template #heading-left>
|
||||
<h1 class="title is-5" v-text="album.name" />
|
||||
<h2 class="subtitle is-6 has-text-link has-text-weight-normal">
|
||||
<a class="has-text-link" @click="open_artist" v-text="album.artist" />
|
||||
</h2>
|
||||
<div class="buttons fd-is-centered-mobile fd-has-margin-top">
|
||||
<a class="button is-small is-dark is-rounded" @click="play">
|
||||
<span class="icon"><mdicon name="shuffle" size="16" /></span>
|
||||
<span v-text="$t('page.album.shuffle')" />
|
||||
</a>
|
||||
<a
|
||||
class="button is-small is-light is-rounded"
|
||||
<div class="fd-page">
|
||||
<content-with-hero>
|
||||
<template #heading-left>
|
||||
<h1 class="title is-5" v-text="album.name" />
|
||||
<h2 class="subtitle is-6 has-text-link has-text-weight-normal">
|
||||
<a class="has-text-link" @click="open_artist" v-text="album.artist" />
|
||||
</h2>
|
||||
<div class="buttons fd-is-centered-mobile fd-has-margin-top">
|
||||
<a class="button is-small is-dark is-rounded" @click="play">
|
||||
<span class="icon"><mdicon name="shuffle" size="16" /></span>
|
||||
<span v-text="$t('page.album.shuffle')" />
|
||||
</a>
|
||||
<a
|
||||
class="button is-small is-light is-rounded"
|
||||
@click="show_album_details_modal = true"
|
||||
>
|
||||
<span class="icon"
|
||||
><mdicon name="dots-horizontal" size="16"
|
||||
/></span>
|
||||
</a>
|
||||
</div>
|
||||
</template>
|
||||
<template #heading-right>
|
||||
<cover-artwork
|
||||
:artwork_url="album.artwork_url"
|
||||
:artist="album.artist"
|
||||
:album="album.name"
|
||||
class="is-clickable fd-has-shadow fd-cover fd-cover-medium-image"
|
||||
@click="show_album_details_modal = true"
|
||||
>
|
||||
<span class="icon"><mdicon name="dots-horizontal" size="16" /></span>
|
||||
</a>
|
||||
</div>
|
||||
</template>
|
||||
<template #heading-right>
|
||||
<cover-artwork
|
||||
:artwork_url="album.artwork_url"
|
||||
:artist="album.artist"
|
||||
:album="album.name"
|
||||
class="is-clickable fd-has-shadow fd-cover fd-cover-medium-image"
|
||||
@click="show_album_details_modal = true"
|
||||
/>
|
||||
</template>
|
||||
<template #content>
|
||||
<p
|
||||
class="heading is-7 has-text-centered-mobile fd-has-margin-top"
|
||||
v-text="$t('page.album.track-count', { count: album.track_count })"
|
||||
/>
|
||||
<list-tracks :tracks="tracks" :uris="album.uri" />
|
||||
<modal-dialog-album
|
||||
:show="show_album_details_modal"
|
||||
:album="album"
|
||||
@close="show_album_details_modal = false"
|
||||
/>
|
||||
</template>
|
||||
</content-with-hero>
|
||||
/>
|
||||
</template>
|
||||
<template #content>
|
||||
<p
|
||||
class="heading is-7 has-text-centered-mobile fd-has-margin-top"
|
||||
v-text="$t('page.album.track-count', { count: album.track_count })"
|
||||
/>
|
||||
<list-tracks :tracks="tracks" :uris="album.uri" />
|
||||
<modal-dialog-album
|
||||
:show="show_album_details_modal"
|
||||
:album="album"
|
||||
@close="show_album_details_modal = false"
|
||||
/>
|
||||
</template>
|
||||
</content-with-hero>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -1,48 +1,54 @@
|
||||
<template>
|
||||
<content-with-hero>
|
||||
<template #heading-left>
|
||||
<h1 class="title is-5" v-text="album.name" />
|
||||
<h2 class="subtitle is-6 has-text-link has-text-weight-normal">
|
||||
<a class="has-text-link" @click="open_artist" v-text="album.artist" />
|
||||
</h2>
|
||||
<div class="buttons fd-is-centered-mobile fd-has-margin-top">
|
||||
<a class="button is-small is-dark is-rounded" @click="play">
|
||||
<span class="icon"><mdicon name="play" size="16" /></span>
|
||||
<span v-text="$t('page.audiobooks.album.play')" />
|
||||
</a>
|
||||
<a
|
||||
class="button is-small is-light is-rounded"
|
||||
<div class="fd-page">
|
||||
<content-with-hero>
|
||||
<template #heading-left>
|
||||
<h1 class="title is-5" v-text="album.name" />
|
||||
<h2 class="subtitle is-6 has-text-link has-text-weight-normal">
|
||||
<a class="has-text-link" @click="open_artist" v-text="album.artist" />
|
||||
</h2>
|
||||
<div class="buttons fd-is-centered-mobile fd-has-margin-top">
|
||||
<a class="button is-small is-dark is-rounded" @click="play">
|
||||
<span class="icon"><mdicon name="play" size="16" /></span>
|
||||
<span v-text="$t('page.audiobooks.album.play')" />
|
||||
</a>
|
||||
<a
|
||||
class="button is-small is-light is-rounded"
|
||||
@click="show_album_details_modal = true"
|
||||
>
|
||||
<span class="icon"
|
||||
><mdicon name="dots-horizontal" size="16"
|
||||
/></span>
|
||||
</a>
|
||||
</div>
|
||||
</template>
|
||||
<template #heading-right>
|
||||
<cover-artwork
|
||||
:artwork_url="album.artwork_url"
|
||||
:artist="album.artist"
|
||||
:album="album.name"
|
||||
class="is-clickable fd-has-shadow fd-cover fd-cover-medium-image"
|
||||
@click="show_album_details_modal = true"
|
||||
>
|
||||
<span class="icon"><mdicon name="dots-horizontal" size="16" /></span>
|
||||
</a>
|
||||
</div>
|
||||
</template>
|
||||
<template #heading-right>
|
||||
<cover-artwork
|
||||
:artwork_url="album.artwork_url"
|
||||
:artist="album.artist"
|
||||
:album="album.name"
|
||||
class="is-clickable fd-has-shadow fd-cover fd-cover-medium-image"
|
||||
@click="show_album_details_modal = true"
|
||||
/>
|
||||
</template>
|
||||
<template #content>
|
||||
<p
|
||||
class="heading is-7 has-text-centered-mobile fd-has-margin-top"
|
||||
v-text="
|
||||
$t('page.audiobooks.album.track-count', { count: album.track_count })
|
||||
"
|
||||
/>
|
||||
<list-tracks :tracks="tracks" :uris="album.uri" />
|
||||
<modal-dialog-album
|
||||
:show="show_album_details_modal"
|
||||
:album="album"
|
||||
:media_kind="'audiobook'"
|
||||
@close="show_album_details_modal = false"
|
||||
/>
|
||||
</template>
|
||||
</content-with-hero>
|
||||
/>
|
||||
</template>
|
||||
<template #content>
|
||||
<p
|
||||
class="heading is-7 has-text-centered-mobile fd-has-margin-top"
|
||||
v-text="
|
||||
$t('page.audiobooks.album.track-count', {
|
||||
count: album.track_count
|
||||
})
|
||||
"
|
||||
/>
|
||||
<list-tracks :tracks="tracks" :uris="album.uri" />
|
||||
<modal-dialog-album
|
||||
:show="show_album_details_modal"
|
||||
:album="album"
|
||||
:media_kind="'audiobook'"
|
||||
@close="show_album_details_modal = false"
|
||||
/>
|
||||
</template>
|
||||
</content-with-hero>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -1,42 +1,38 @@
|
||||
<template>
|
||||
<div class="fd-page">
|
||||
<section class="hero is-light is-bold">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<div class="columns is-centered">
|
||||
<div class="column is-four-fifths">
|
||||
<div class="columns" style="flex-direction: row-reverse">
|
||||
<div class="column fd-has-cover">
|
||||
<!-- Slot heading right -->
|
||||
<slot name="heading-right" />
|
||||
</div>
|
||||
<div
|
||||
class="column m-auto is-three-fifths has-text-centered-mobile"
|
||||
>
|
||||
<!-- Slot heading left -->
|
||||
<slot name="heading-left" />
|
||||
</div>
|
||||
<section class="hero is-light is-bold">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<div class="columns is-centered">
|
||||
<div class="column is-four-fifths">
|
||||
<div class="columns" style="flex-direction: row-reverse">
|
||||
<div class="column fd-has-cover">
|
||||
<!-- Slot heading right -->
|
||||
<slot name="heading-right" />
|
||||
</div>
|
||||
<div
|
||||
class="column m-auto is-three-fifths has-text-centered-mobile"
|
||||
>
|
||||
<!-- Slot heading left -->
|
||||
<slot name="heading-left" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="columns is-centered">
|
||||
<div class="column is-four-fifths">
|
||||
<!-- Slot content -->
|
||||
<slot name="content" />
|
||||
<div style="margin-top: 16px">
|
||||
<!-- Slot footer -->
|
||||
<slot name="footer" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="section pt-0">
|
||||
<div class="container">
|
||||
<div class="columns is-centered">
|
||||
<div class="column is-four-fifths">
|
||||
<!-- Slot content -->
|
||||
<slot name="content" />
|
||||
<!-- Slot footer -->
|
||||
<slot name="footer" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script></script>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user