Improved compact scene tile layout, added dark versions of entity favicons.

This commit is contained in:
DebaucheryLibrarian 2021-01-17 23:31:49 +01:00
parent dd5284c55a
commit 1dea94c0cf
185 changed files with 232 additions and 123 deletions

View File

@ -71,7 +71,7 @@ export default {
</script>
<style lang="scss" scoped>
@import 'theme';
@import 'breakpoints';
.heading {
padding: 0;
@ -111,15 +111,9 @@ export default {
font-weight: bold;
}
@media(max-width: $breakpoint3) {
@media(max-width: $breakpoint-kilo) {
.tiles {
grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
}
}
@media(max-width: $breakpoint2) {
.tiles {
grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
grid-gap: .5rem;
}
}
</style>

View File

@ -4,6 +4,7 @@
:class="{ new: release.isNew }"
class="tile"
>
<div class="tile-body">
<span class="poster">
<a
:href="`/scene/${release.id}/${release.slug || ''}`"
@ -41,11 +42,14 @@
class="thumbnail"
>No thumbnail available</div>
</a>
<Details :release="release" />
</span>
<div class="info">
<Details
:release="release"
class="details-wide"
/>
<a
:href="`/scene/${release.id}/${release.slug || ''}`"
target="_blank"
@ -121,6 +125,12 @@
</div>
</div>
</div>
<Details
:release="release"
class="details-compact"
/>
</div>
</template>
<script>
@ -147,7 +157,7 @@ export default {
</script>
<style lang="scss" scoped>
@import 'theme';
@import 'breakpoints';
.tile {
background: var(--background);
@ -172,9 +182,13 @@ export default {
}
}
.tile-body {
display: flex;
flex-direction: column;
}
.poster {
position: relative;
margin: 0 0 .6rem 0;
}
.covers {
@ -213,6 +227,7 @@ export default {
display: flex;
flex-direction: column;
flex-grow: 1;
overflow: hidden;
}
.link {
@ -298,4 +313,53 @@ export default {
color: var(--primary);
}
}
.details-wide {
margin: 0 0 .5rem 0;
}
.details-compact {
display: none;
}
@media(max-width: $breakpoint-kilo) {
.tile-body {
flex-direction: row;
}
.poster {
margin: 0;
}
.thumbnail {
width: 9rem;
height: 100%;
}
.info {
padding: .5rem .25rem 0 .25rem;
}
.row {
margin: 0 0 .15rem 0;
}
.title,
.actor-link {
font-size: .9rem;
}
.details-wide {
display: none;
}
.details-compact {
display: flex;
border-top: solid 1px var(--shadow-hint);
}
.shoot {
display: none;
}
}
</style>

View File

@ -12,10 +12,17 @@
:title="`Part of ${release.entity.parent.name}`"
:to="`/${release.entity.parent.type}/${release.entity.parent.slug}`"
class="site-link"
><img
:src="`/img/logos/${release.entity.parent.slug}/favicon.png`"
class="favicon"
></router-link>
>
<img
:src="`/img/logos/${release.entity.parent.slug}/favicon_light.png`"
class="favicon favicon-light"
>
<img
:src="`/img/logos/${release.entity.parent.slug}/favicon_dark.png`"
class="favicon favicon-dark"
>
</router-link>
<router-link
v-tooltip.bottom="`More from ${release.entity.name}`"
@ -29,10 +36,17 @@
v-else
:to="`/${release.entity.type}/${release.entity.slug}`"
class="site site-link"
><img
:src="`/img/logos/${release.entity.slug}/favicon.png`"
class="favicon"
>{{ release.entity.name }}</router-link>
>
<img
:src="`/img/logos/${release.entity.slug}/favicon_light.png`"
class="favicon favicon-light"
>
<img
:src="`/img/logos/${release.entity.slug}/favicon_dark.png`"
class="favicon favicon-dark"
>{{ release.entity.name }}
</router-link>
<a
v-if="release.date"
@ -68,6 +82,8 @@ export default {
</script>
<style lang="scss" scoped>
@import 'breakpoints';
.details {
width: 100%;
display: flex;
@ -79,8 +95,9 @@ export default {
box-shadow: 0 0 3px var(--darken);
.favicon {
width: 1rem;
margin: 0 .25rem 0 0;
height: 2rem;
box-sizing: border-box;
padding: .5rem;
}
/*
@ -115,9 +132,43 @@ export default {
}
}
.site {
padding: 0 .5rem 0 0;
}
.site-link {
display: flex;
color: var(--text-light);
text-decoration: none;
}
.favicon-dark {
display: none;
}
@media(max-width: $breakpoint-kilo) {
/* light details bar
.details {
background: var(--background);
box-shadow: none;
.favicon-dark {
display: inline-block;
}
.favicon-light {
display: none;
}
}
.site-link,
.date {
color: var(--text);
}
*/
.site {
padding: 0 .5rem 0 0;
}
}
</style>

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 832 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1018 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 923 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1006 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1012 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 988 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 931 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.4 KiB

Some files were not shown because too many files have changed in this diff Show More