MyFavMirrors/owntone-server
1
0
Fork 0
mirror of https://github.com/owntone/owntone-server.git synced 2025-02-27 13:29:17 -05:00
Code Issues Packages Projects Releases Wiki Activity

[web] Fix spacing of elements in the pages with hero content

Browse Source 
Spacing is now identical to the former spacing.
This commit is contained in:
Alain Nussbaumer 2023-06-24 10:56:00 +02:00
parent aef1c5aa3b
commit 892ce26f44
3 changed files with 120 additions and 114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
web-src/src/pages/PageAlbum.vue
View File

@ -1,45 +1,49 @@
<template> <template>
<content-with-hero> <div class="fd-page">
<template #heading-left> <content-with-hero>
<h1 class="title is-5" v-text="album.name" /> <template #heading-left>
<h2 class="subtitle is-6 has-text-link has-text-weight-normal"> <h1 class="title is-5" v-text="album.name" />
<a class="has-text-link" @click="open_artist" v-text="album.artist" /> <h2 class="subtitle is-6 has-text-link has-text-weight-normal">
</h2> <a class="has-text-link" @click="open_artist" v-text="album.artist" />
<div class="buttons fd-is-centered-mobile fd-has-margin-top"> </h2>
<a class="button is-small is-dark is-rounded" @click="play"> <div class="buttons fd-is-centered-mobile fd-has-margin-top">
<span class="icon"><mdicon name="shuffle" size="16" /></span> <a class="button is-small is-dark is-rounded" @click="play">
<span v-text="$t('page.album.shuffle')" /> <span class="icon"><mdicon name="shuffle" size="16" /></span>
</a> <span v-text="$t('page.album.shuffle')" />
<a </a>
class="button is-small is-light is-rounded" <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" @click="show_album_details_modal = true"
> />
<span class="icon"><mdicon name="dots-horizontal" size="16" /></span> </template>
</a> <template #content>
</div> <p
</template> class="heading is-7 has-text-centered-mobile fd-has-margin-top"
<template #heading-right> v-text="$t('page.album.track-count', { count: album.track_count })"
<cover-artwork />
:artwork_url="album.artwork_url" <list-tracks :tracks="tracks" :uris="album.uri" />
:artist="album.artist" <modal-dialog-album
:album="album.name" :show="show_album_details_modal"
class="is-clickable fd-has-shadow fd-cover fd-cover-medium-image" :album="album"
@click="show_album_details_modal = true" @close="show_album_details_modal = false"
/> />
</template> </template>
<template #content> </content-with-hero>
<p </div>
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>
<script> <script>

92
web-src/src/pages/PageAudiobooksAlbum.vue
View File

@ -1,48 +1,54 @@
<template> <template>
<content-with-hero> <div class="fd-page">
<template #heading-left> <content-with-hero>
<h1 class="title is-5" v-text="album.name" /> <template #heading-left>
<h2 class="subtitle is-6 has-text-link has-text-weight-normal"> <h1 class="title is-5" v-text="album.name" />
<a class="has-text-link" @click="open_artist" v-text="album.artist" /> <h2 class="subtitle is-6 has-text-link has-text-weight-normal">
</h2> <a class="has-text-link" @click="open_artist" v-text="album.artist" />
<div class="buttons fd-is-centered-mobile fd-has-margin-top"> </h2>
<a class="button is-small is-dark is-rounded" @click="play"> <div class="buttons fd-is-centered-mobile fd-has-margin-top">
<span class="icon"><mdicon name="play" size="16" /></span> <a class="button is-small is-dark is-rounded" @click="play">
<span v-text="$t('page.audiobooks.album.play')" /> <span class="icon"><mdicon name="play" size="16" /></span>
</a> <span v-text="$t('page.audiobooks.album.play')" />
<a </a>
class="button is-small is-light is-rounded" <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" @click="show_album_details_modal = true"
> />
<span class="icon"><mdicon name="dots-horizontal" size="16" /></span> </template>
</a> <template #content>
</div> <p
</template> class="heading is-7 has-text-centered-mobile fd-has-margin-top"
<template #heading-right> v-text="
<cover-artwork $t('page.audiobooks.album.track-count', {
:artwork_url="album.artwork_url" count: album.track_count
:artist="album.artist" })
:album="album.name" "
class="is-clickable fd-has-shadow fd-cover fd-cover-medium-image" />
@click="show_album_details_modal = true" <list-tracks :tracks="tracks" :uris="album.uri" />
/> <modal-dialog-album
</template> :show="show_album_details_modal"
<template #content> :album="album"
<p :media_kind="'audiobook'"
class="heading is-7 has-text-centered-mobile fd-has-margin-top" @close="show_album_details_modal = false"
v-text=" />
$t('page.audiobooks.album.track-count', { count: album.track_count }) </template>
" </content-with-hero>
/> </div>
<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>
<script> <script>

58
web-src/src/templates/ContentWithHero.vue
View File

@ -1,42 +1,38 @@
<template> <template>
<div class="fd-page"> <section class="hero is-light is-bold">
<section class="hero is-light is-bold"> <div class="hero-body">
<div class="hero-body"> <div class="container">
<div class="container"> <div class="columns is-centered">
<div class="columns is-centered"> <div class="column is-four-fifths">
<div class="column is-four-fifths"> <div class="columns" style="flex-direction: row-reverse">
<div class="columns" style="flex-direction: row-reverse"> <div class="column fd-has-cover">
<div class="column fd-has-cover"> <!-- Slot heading right -->
<!-- Slot heading right --> <slot name="heading-right" />
<slot name="heading-right" /> </div>
</div> <div
<div class="column m-auto is-three-fifths has-text-centered-mobile"
class="column m-auto is-three-fifths has-text-centered-mobile" >
> <!-- Slot heading left -->
<!-- Slot heading left --> <slot name="heading-left" />
<slot name="heading-left" />
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</section> </div>
<section class="section"> </section>
<div class="container"> <section class="section pt-0">
<div class="columns is-centered"> <div class="container">
<div class="column is-four-fifths"> <div class="columns is-centered">
<!-- Slot content --> <div class="column is-four-fifths">
<slot name="content" /> <!-- Slot content -->
<div style="margin-top: 16px"> <slot name="content" />
<!-- Slot footer --> <!-- Slot footer -->
<slot name="footer" /> <slot name="footer" />
</div>
</div>
</div> </div>
</div> </div>
</section> </div>
</div> </section>
</template> </template>
<script></script> <script></script>