MyFavMirrors/owntone-server
1
0
Fork 0
mirror of https://github.com/owntone/owntone-server.git synced 2025-04-03 03:10:44 -04:00
Code Issues Packages Projects Releases Wiki Activity

[web] Fix spacing of pages due to changes in the Now Playing Page

Browse Source 
The top and bottom spacing for all the pages have been streamlined. Moreover, CSS styles have been reduced.
This commit is contained in:
Alain Nussbaumer 2023-06-23 22:23:32 +02:00
parent 181a0f171d
commit 979e60630e
26 changed files with 518 additions and 503 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web-src/src/components/TabsSearch.vue
View File

@ -1,5 +1,5 @@
<template>
<section v-if="spotify_enabled" class="section pb-0">
<section v-if="spotify_enabled" class="section">
<div class="container">
<div class="columns is-centered">
<div class="column is-four-fifths">

21
web-src/src/mystyles.scss
View File

@ -72,14 +72,6 @@ a.navbar-item {
width: 100%;
}
section.fd-tabs-section + section.fd-content {
margin-top: 24px;
}
section.hero + section.fd-content {
padding-top: 0;
}
.fd-progress-bar {
top: 52px !important;
}
@ -103,19 +95,6 @@ section.hero + section.fd-content {
min-height: calc(100vh - 3.25rem - 3.25rem);
}
/* Now playing page */
.fd-is-fullheight {
height: calc(100vh - 3.25rem - 3.25rem);
display: flex;
flex-direction: column;
justify-content: center;
}
.fd-is-fullheight .fd-is-expanded {
padding: 1.5rem;
overflow: hidden;
}
.fd-cover {
align-items: center;
display: flex;

4
web-src/src/pages/PageAbout.vue
View File

@ -1,6 +1,6 @@
<template>
<div>
<section class="section fd-page">
<div class="fd-page">
<section class="section">
<div class="container">
<div class="columns is-centered">
<div class="column is-four-fifths has-text-centered-mobile">

14
web-src/src/pages/PageArtist.vue
View File

@ -1,4 +1,5 @@
<template>
<div class="fd-page">
<content-with-heading>
<template #options>
<div class="columns">
@ -24,7 +25,9 @@
class="button is-small is-light is-rounded"
@click="show_artist_details_modal = true"
>
<span class="icon"><mdicon name="dots-horizontal" size="16" /></span>
<span class="icon"
><mdicon name="dots-horizontal" size="16"
/></span>
</a>
<a class="button is-small is-dark is-rounded" @click="play">
<span class="icon"><mdicon name="shuffle" size="16" /></span>
@ -35,13 +38,17 @@
<template #content>
<p class="heading has-text-centered-mobile">
<span
v-text="$t('page.artist.album-count', { count: artist.album_count })"
v-text="
$t('page.artist.album-count', { count: artist.album_count })
"
/>
<span>&nbsp;|&nbsp;</span>
<a
class="has-text-link"
@click="open_tracks"
v-text="$t('page.artist.track-count', { count: artist.track_count })"
v-text="
$t('page.artist.track-count', { count: artist.track_count })
"
/>
</p>
<list-albums :albums="albums" :hide_group_title="true" />
@ -52,6 +59,7 @@
/>
</template>
</content-with-heading>
</div>
</template>
<script>

2
web-src/src/pages/PageArtistTracks.vue
View File

@ -1,5 +1,5 @@
<template>
<div>
<div class="fd-page">
<content-with-heading>
<template #options>
<index-button-list :index="tracks.indexList" />

6
web-src/src/pages/PageAudiobooksArtist.vue
View File

@ -1,4 +1,5 @@
<template>
<div class="fd-page">
<content-with-heading>
<template #heading-left>
<p class="title is-4" v-text="artist.name" />
@ -9,7 +10,9 @@
class="button is-small is-light is-rounded"
@click="show_artist_details_modal = true"
>
<span class="icon"><mdicon name="dots-horizontal" size="16" /></span>
<span class="icon"
><mdicon name="dots-horizontal" size="16"
/></span>
</a>
<a class="button is-small is-dark is-rounded" @click="play">
<span class="icon"><mdicon name="play" size="16" /></span>
@ -34,6 +37,7 @@
/>
</template>
</content-with-heading>
</div>
</template>
<script>

2
web-src/src/pages/PageComposer.vue
View File

@ -1,5 +1,5 @@
<template>
<div>
<div class="fd-page">
<content-with-heading>
<template #heading-left>
<p class="title is-4" v-text="composer.name" />

2
web-src/src/pages/PageComposerTracks.vue
View File

@ -1,5 +1,5 @@
<template>
<div>
<div class="fd-page">
<content-with-heading>
<template #options>
<index-button-list :index="tracks.indexList" />

2
web-src/src/pages/PageComposers.vue
View File

@ -1,5 +1,5 @@
<template>
<div>
<div class="fd-page-with-tabs">
<tabs-music />
<content-with-heading>
<template #options>

2
web-src/src/pages/PageFiles.vue
View File

@ -1,5 +1,5 @@
<template>
<div>
<div class="fd-page">
<content-with-heading>
<template #heading-left>
<p class="title is-4" v-text="$t('page.files.title')" />

2
web-src/src/pages/PageGenre.vue
View File

@ -1,5 +1,5 @@
<template>
<div>
<div class="fd-page">
<content-with-heading>
<template #options>
<index-button-list :index="albums_list.indexList" />

2
web-src/src/pages/PageGenreTracks.vue
View File

@ -1,5 +1,5 @@
<template>
<div>
<div class="fd-page">
<content-with-heading>
<template #options>
<index-button-list :index="tracks.indexList" />

6
web-src/src/pages/PagePlaylist.vue
View File

@ -1,4 +1,5 @@
<template>
<div class="fd-page">
<content-with-heading>
<template #heading-left>
<div class="title is-4" v-text="playlist.name" />
@ -9,7 +10,9 @@
class="button is-small is-light is-rounded"
@click="show_playlist_details_modal = true"
>
<span class="icon"><mdicon name="dots-horizontal" size="16" /></span>
<span class="icon"
><mdicon name="dots-horizontal" size="16"
/></span>
</a>
<a class="button is-small is-dark is-rounded" @click="play">
<span class="icon"><mdicon name="shuffle" size="16" /></span>
@ -31,6 +34,7 @@
/>
</template>
</content-with-heading>
</div>
</template>
<script>

2
web-src/src/pages/PagePlaylists.vue
View File

@ -1,4 +1,5 @@
<template>
<div class="fd-page">
<content-with-heading>
<template #heading-left>
<p class="title is-4" v-text="playlist.name" />
@ -11,6 +12,7 @@
<list-playlists :playlists="playlists" />
</template>
</content-with-heading>
</div>
</template>
<script>

6
web-src/src/pages/PagePodcast.vue
View File

@ -1,4 +1,5 @@
<template>
<div class="fd-page">
<content-with-heading>
<template #heading-left>
<div class="title is-4" v-text="album.name" />
@ -9,7 +10,9 @@
class="button is-small is-light is-rounded"
@click="show_details_modal = true"
>
<span class="icon"><mdicon name="dots-horizontal" size="16" /></span>
<span class="icon"
><mdicon name="dots-horizontal" size="16"
/></span>
</a>
<a class="button is-small is-dark is-rounded" @click="play">
<span class="icon"><mdicon name="play" size="16" /></span>
@ -53,6 +56,7 @@
</modal-dialog>
</template>
</content-with-heading>
</div>
</template>
<script>

2
web-src/src/pages/PagePodcasts.vue
View File

@ -1,5 +1,5 @@
<template>
<div>
<div class="fd-page">
<content-with-heading v-if="new_episodes.items.length > 0">
<template #heading-left>
<p class="title is-4" v-text="$t('page.podcasts.new-episodes')" />

2
web-src/src/pages/PageQueue.vue
View File

@ -1,4 +1,5 @@
<template>
<div class="fd-page">
<content-with-heading>
<template #heading-left>
<p class="title is-4" v-text="$t('page.queue.title')" />
@ -95,6 +96,7 @@
/>
</template>
</content-with-heading>
</div>
</template>
<script>

2
web-src/src/pages/PageRadioStreams.vue
View File

@ -1,5 +1,5 @@
<template>
<div>
<div class="fd-page">
<content-with-heading>
<template #heading-left>
<p class="title is-4" v-text="$t('page.radio.title')" />

8
web-src/src/pages/PageSearch.vue
View File

@ -1,7 +1,7 @@
<template>
<div>
<div class="fd-page">
<!-- Search field + recent searches -->
<section class="section fd-page pb-0">
<section class="section pb-0">
<div class="container">
<div class="columns is-centered">
<div class="column is-four-fifths">
@ -40,7 +40,7 @@
</section>
<tabs-search :query="search_query" />
<!-- Tracks -->
<content-with-heading v-if="show_tracks && tracks.total">
<content-with-heading v-if="show_tracks && tracks.total" class="pt-0">
<template #heading-left>
<p class="title is-4" v-text="$t('page.search.tracks')" />
</template>
@ -63,7 +63,7 @@
</nav>
</template>
</content-with-heading>
<content-text v-if="show_tracks && !tracks.total" class="mt-6">
<content-text v-if="show_tracks && !tracks.total" class="pt-0">
<template #content>
<p><i v-text="$t('page.search.no-tracks')" /></p>
</template>

6
web-src/src/pages/SpotifyPageAlbum.vue
View File

@ -1,4 +1,5 @@
<template>
<div class="fd-page">
<content-with-hero>
<template #heading-left>
<h1 class="title is-5" v-text="album.name" />
@ -18,7 +19,9 @@
class="button is-small is-light is-rounded"
@click="show_album_details_modal = true"
>
<span class="icon"><mdicon name="dots-horizontal" size="16" /></span>
<span class="icon"
><mdicon name="dots-horizontal" size="16"
/></span>
</a>
</div>
</template>
@ -66,6 +69,7 @@
/>
</template>
</content-with-hero>
</div>
</template>
<script>

6
web-src/src/pages/SpotifyPageArtist.vue
View File

@ -1,4 +1,5 @@
<template>
<div class="fd-page">
<content-with-heading>
<template #heading-left>
<p class="title is-4" v-text="artist.name" />
@ -9,7 +10,9 @@
class="button is-small is-light is-rounded"
@click="show_artist_details_modal = true"
>
<span class="icon"><mdicon name="dots-horizontal" size="16" /></span>
<span class="icon"
><mdicon name="dots-horizontal" size="16"
/></span>
</a>
<a class="button is-small is-dark is-rounded" @click="play">
<span class="icon"><mdicon name="shuffle" size="16" /></span>
@ -61,6 +64,7 @@
/>
</template>
</content-with-heading>
</div>
</template>
<script>

6
web-src/src/pages/SpotifyPagePlaylist.vue
View File

@ -1,4 +1,5 @@
<template>
<div class="fd-page">
<content-with-heading>
<template #heading-left>
<div class="title is-4" v-text="playlist.name" />
@ -9,7 +10,9 @@
class="button is-small is-light is-rounded"
@click="show_playlist_details_modal = true"
>
<span class="icon"><mdicon name="dots-horizontal" size="16" /></span>
<span class="icon"
><mdicon name="dots-horizontal" size="16"
/></span>
</a>
<a class="button is-small is-dark is-rounded" @click="play">
<span class="icon"><mdicon name="shuffle" size="16" /></span>
@ -55,6 +58,7 @@
/>
</template>
</content-with-heading>
</div>
</template>
<script>

8
web-src/src/pages/SpotifyPageSearch.vue
View File

@ -1,7 +1,7 @@
<template>
<div>
<div class="fd-page">
<!-- Search field + recent searches -->
<section class="section pb-0 fd-page">
<section class="section pb-0">
<div class="container">
<div class="columns is-centered">
<div class="column is-four-fifths">
@ -37,7 +37,7 @@
</section>
<tabs-search :query="search_query" />
<!-- Tracks -->
<content-with-heading v-if="show_tracks && tracks.total">
<content-with-heading v-if="show_tracks && tracks.total" class="pt-0">
<template #heading-left>
<p class="title is-4" v-text="$t('page.spotify.search.tracks')" />
</template>
@ -86,7 +86,7 @@
</nav>
</template>
</content-with-heading>
<content-text v-if="show_tracks && !tracks.total" class="mt-6">
<content-text v-if="show_tracks && !tracks.total" class="pt-0">
<template #content>
<p><i v-text="$t('page.spotify.search.no-tracks')" /></p>
</template>

2
web-src/src/templates/ContentText.vue
View File

@ -1,5 +1,5 @@
<template>
<section class="section fd-content py-3">
<section class="section py-3">
<div class="container">
<div class="columns is-centered">
<div class="column is-four-fifths">

2
web-src/src/templates/ContentWithHeading.vue
View File

@ -1,5 +1,5 @@
<template>
<section class="section fd-page fd-content">
<section class="section">
<div class="container">
<div class="columns is-centered">
<div class="column is-four-fifths">

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

@ -1,6 +1,6 @@
<template>
<div>
<section class="hero is-light is-bold fd-page fd-content">
<div class="fd-page">
<section class="hero is-light is-bold">
<div class="hero-body">
<div class="container">
<div class="columns is-centered">
@ -22,7 +22,7 @@
</div>
</div>
</section>
<section class="section fd-content">
<section class="section">
<div class="container">
<div class="columns is-centered">
<div class="column is-four-fifths">