[web-src] Tweak spacing in album page

This commit is contained in:
chme 2020-05-16 13:54:24 +02:00
parent e0e9d24830
commit 2019e88bb3
4 changed files with 15 additions and 7 deletions

View File

@ -1,6 +1,6 @@
{
"name": "forked-daapd-web",
"version": "0.7.1",
"version": "0.7.2",
"lockfileVersion": 1,
"requires": true,
"dependencies": {

View File

@ -103,6 +103,10 @@ section.fd-tabs-section + section.fd-content {
margin-top: 24px;
}
section.hero + section.fd-content {
padding-top: 0;
}
.fd-progress-bar {
top: 52px !important;
}
@ -268,8 +272,8 @@ hr.fd-navbar-divider {
.column {
&.fd-has-cover {
max-height: 256px;
max-width: 256px;
max-height: 150px;
max-width: 150px;
@include mobile {
margin: auto;
}
@ -284,4 +288,8 @@ hr.fd-navbar-divider {
z-index:25;
background-color: rgba(10, 10, 10, 0.2);
position: fixed;
}
.hero-body {
padding: 1.5rem !important;
}

View File

@ -1,9 +1,8 @@
<template>
<content-with-hero>
<template slot="heading-left">
<h1 class="title is-4 fd-has-margin-top">{{ album.name }}</h1>
<h2 class="subtitle is-4 has-text-link has-text-weight-normal"><a class="has-text-link" @click="open_artist">{{ album.artist }}</a></h2>
<p class="heading has-text-centered-mobile">{{ album.track_count }} tracks</p>
<h1 class="title is-5">{{ album.name }}</h1>
<h2 class="subtitle is-6 has-text-link has-text-weight-normal"><a class="has-text-link" @click="open_artist">{{ album.artist }}</a></h2>
<div class="buttons fd-is-centered-mobile fd-has-margin-top">
<a class="button is-small is-dark is-rounded" @click="play">
@ -23,6 +22,7 @@
</p>
</template>
<template slot="content">
<p class="heading is-7 has-text-centered-mobile fd-has-margin-top">{{ album.track_count }} tracks</p>
<list-item-track v-for="(track, index) in tracks" :key="track.id" :track="track" @click="play_track(index)">
<template slot="actions">
<a @click="open_dialog(track)">

View File

@ -10,7 +10,7 @@
<!-- Slot heading right -->
<slot name="heading-right"></slot>
</div>
<div class="column is-three-fifths has-text-centered-mobile">
<div class="column is-three-fifths has-text-centered-mobile" style="margin: auto 0;">
<!-- Slot heading left -->
<slot name="heading-left"></slot>
</div>