Improved tag view for mobile.

This commit is contained in:
ThePendulum 2020-01-09 01:59:30 +01:00
parent a0db2677ed
commit 01c98d7008
4 changed files with 299 additions and 64 deletions

View File

@ -173,8 +173,8 @@ export default {
width: 100%; width: 100%;
height: 3rem; height: 3rem;
display: flex; display: flex;
flex-shrink: 0;
justify-content: center; justify-content: center;
flex-shrink: 0;
border-bottom: solid 1px $shadow-hint; border-bottom: solid 1px $shadow-hint;
background: $profile; background: $profile;

View File

@ -0,0 +1,86 @@
<template>
<div class="photos">
<ul class="nolist photos-inner">
<li>
<a
v-if="tag.poster"
:href="`/img/${tag.poster.path}`"
:title="tag.poster.comment"
target="_blank"
rel="noopener noreferrer"
>
<img
:src="`/img/${tag.poster.thumbnail}`"
:alt="tag.poster.comment"
class="poster"
>
</a>
</li>
<li
v-for="photo in tag.photos"
:key="`photo-${photo.id}`"
>
<a
:title="photo.comment"
:href="`/img/${photo.path}`"
target="_blank"
rel="noopener noreferrer"
>
<img
:src="`/img/${photo.thumbnail}`"
:alt="photo.comment"
class="photo"
>
</a>
</li>
</ul>
</div>
</template>
<script>
export default {
props: {
tag: {
type: Object,
default: null,
},
},
};
</script>
<style lang="scss" scoped>
@import 'theme';
.photos {
background: $profile;
display: flex;
justify-content: center;
padding: 0 1rem;
overflow: hidden;
&.compact {
display: none;
padding: 0 1rem 1rem 1rem;
overflow-x: auto;
.photos-inner {
max-width: 100%;
display: inline-flex;
}
.poster,
.photo {
height: 10rem;
width: auto;
margin: 0 1rem 0 0;
}
}
}
.poster,
.photo {
width: 100%;
margin: 0 0 .5rem 0;
}
</style>

View File

@ -5,53 +5,43 @@
> >
<FilterBar :fetch-releases="fetchReleases" /> <FilterBar :fetch-releases="fetchReleases" />
<div class="tag"> <div
class="tag"
:class="{ nomedia: !hasMedia }"
>
<div class="header">
<h2 class="title">
<Icon icon="price-tag4" />
{{ tag.name }}
</h2>
</div>
<div class="sidebar"> <div class="sidebar">
<a <h2 class="title">
v-if="tag.poster" <Icon icon="price-tag4" />
:href="`/img/${tag.poster.path}`" {{ tag.name }}
:title="tag.poster.comment" </h2>
target="_blank"
rel="noopener noreferrer"
>
<img
:src="`/img/${tag.poster.thumbnail}`"
:alt="tag.poster.comment"
class="poster"
>
</a>
<span>
<h2 class="title">
<Icon icon="price-tag4" />
{{ tag.name }}
</h2>
<div class="sidebar-content">
<p <p
class="description" class="description"
v-html="description" v-html="description"
/> />
</span>
<div class="photos"> <Photos
<a v-if="hasMedia"
v-for="photo in tag.photos" :tag="tag"
:key="`photo-${photo.id}`" />
:title="photo.comment"
:href="`/img/${photo.path}`"
target="_blank"
rel="noopener noreferrer"
>
<img
:src="`/img/${photo.thumbnail}`"
:alt="photo.comment"
class="photo"
>
</a>
</div> </div>
</div> </div>
<div class="content-inner"> <div class="content-inner">
<Photos
v-if="hasMedia"
:tag="tag"
class="compact"
/>
<Releases :releases="tag.releases" /> <Releases :releases="tag.releases" />
</div> </div>
</div> </div>
@ -65,24 +55,27 @@ import { Converter } from 'showdown';
import escapeHtml from '../../../src/utils/escape-html'; import escapeHtml from '../../../src/utils/escape-html';
import FilterBar from '../header/filter-bar.vue'; import FilterBar from '../header/filter-bar.vue';
import Photos from './photos.vue';
import Releases from '../releases/releases.vue'; import Releases from '../releases/releases.vue';
const converter = new Converter(); const converter = new Converter();
async function fetchReleases() { async function fetchReleases() {
this.tag = await this.$store.dispatch('fetchTags', { tagSlug: this.$route.params.tagSlug }); this.tag = await this.$store.dispatch('fetchTags', { tagSlug: this.$route.params.tagSlug });
this.hasMedia = this.tag.poster || this.tag.photos.length > 0;
this.description = this.tag.description && converter.makeHtml(escapeHtml(this.tag.description));
} }
async function mounted() { async function mounted() {
this.tag = await this.$store.dispatch('fetchTags', { tagSlug: this.$route.params.tagSlug }); await this.fetchReleases();
this.description = this.tag.description && converter.makeHtml(escapeHtml(this.tag.description));
this.pageTitle = this.tag.name; this.pageTitle = this.tag.name;
} }
export default { export default {
components: { components: {
FilterBar, FilterBar,
Photos,
Releases, Releases,
}, },
data() { data() {
@ -91,6 +84,7 @@ export default {
description: null, description: null,
releases: null, releases: null,
pageTitle: null, pageTitle: null,
hasMedia: false,
}; };
}, },
mounted, mounted,
@ -118,26 +112,73 @@ export default {
.tag { .tag {
display: flex; display: flex;
flex-direction: row;
flex-grow: 1; flex-grow: 1;
justify-content: stretch; overflow: hidden;
&.nomedia {
flex-direction: column;
.sidebar {
display: none;
}
.header {
display: flex;
}
}
}
.content-inner {
padding: 0;
}
.header {
background: $profile;
color: $text-contrast;
display: none;
justify-content: center;
padding: .5rem 1rem;
.title {
margin: 0 2rem 0 0;
}
.description {
padding: 0;
}
} }
.sidebar { .sidebar {
background: $profile; background: $profile;
color: $text-contrast; color: $text-contrast;
display: flex;
flex-direction: column;
width: 25rem; width: 25rem;
box-sizing: border-box; box-sizing: border-box;
padding: 1rem; overflow: hidden;
.title {
padding: 1rem;
}
.description {
padding: 0 1rem;
margin: -1rem 0 0 0;
}
&.empty {
display: none;
}
} }
.poster { .sidebar-content {
width: 100%; overflow-y: auto;
} }
.title { .title {
padding: 0; padding: 0;
margin: 1rem 0; margin: 0;
flex-shrink: 0;
text-transform: capitalize; text-transform: capitalize;
.icon { .icon {
@ -148,12 +189,29 @@ export default {
} }
.description { .description {
padding: 0; margin: 0;
margin: 0 0 1rem 0;
line-height: 1.5; line-height: 1.5;
} }
.photo { .releases {
width: 100%; padding: 1rem;
}
@media(max-width: $breakpoint3) {
.tag {
flex-direction: column;
}
.sidebar {
display: none;
}
.header {
display: flex;
}
.photos.compact {
display: flex;
}
} }
</style> </style>

View File

@ -729,9 +729,9 @@
height: 3rem; height: 3rem;
display: -webkit-box; display: -webkit-box;
display: flex; display: flex;
flex-shrink: 0;
-webkit-box-pack: center; -webkit-box-pack: center;
justify-content: center; justify-content: center;
flex-shrink: 0;
border-bottom: solid 1px rgba(0, 0, 0, 0.1); border-bottom: solid 1px rgba(0, 0, 0, 0.1);
background: #222; background: #222;
} }
@ -1167,6 +1167,39 @@
} }
} }
/* $primary: #ff886c; */
/* $logo-highlight: drop-shadow(1px 0 0 $highlight-weak) drop-shadow(-1px 0 0 $highlight-weak) drop-shadow(0 1px 0 $highlight-weak) drop-shadow(0 -1px 0 $highlight-weak); */
.photos[data-v-9d950ba8] {
background: #222;
display: -webkit-box;
display: flex;
-webkit-box-pack: center;
justify-content: center;
padding: 0 1rem;
overflow: hidden;
}
.photos.compact[data-v-9d950ba8] {
display: none;
padding: 0 1rem 1rem 1rem;
overflow-x: auto;
}
.photos.compact .photos-inner[data-v-9d950ba8] {
max-width: 100%;
display: -webkit-inline-box;
display: inline-flex;
}
.photos.compact .poster[data-v-9d950ba8],
.photos.compact .photo[data-v-9d950ba8] {
height: 10rem;
width: auto;
margin: 0 1rem 0 0;
}
.poster[data-v-9d950ba8],
.photo[data-v-9d950ba8] {
width: 100%;
margin: 0 0 .5rem 0;
}
/* $primary: #ff886c; */ /* $primary: #ff886c; */
/* $logo-highlight: drop-shadow(1px 0 0 $highlight-weak) drop-shadow(-1px 0 0 $highlight-weak) drop-shadow(0 1px 0 $highlight-weak) drop-shadow(0 -1px 0 $highlight-weak); */ /* $logo-highlight: drop-shadow(1px 0 0 $highlight-weak) drop-shadow(-1px 0 0 $highlight-weak) drop-shadow(0 1px 0 $highlight-weak) drop-shadow(0 -1px 0 $highlight-weak); */
.description a { .description a {
@ -1182,27 +1215,68 @@
.tag[data-v-7f130e7f] { .tag[data-v-7f130e7f] {
display: -webkit-box; display: -webkit-box;
display: flex; display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
flex-direction: row;
-webkit-box-flex: 1; -webkit-box-flex: 1;
flex-grow: 1; flex-grow: 1;
-webkit-box-pack: stretch; overflow: hidden;
justify-content: stretch; }
.tag.nomedia[data-v-7f130e7f] {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
}
.tag.nomedia .sidebar[data-v-7f130e7f] {
display: none;
}
.tag.nomedia .header[data-v-7f130e7f] {
display: -webkit-box;
display: flex;
}
.content-inner[data-v-7f130e7f] {
padding: 0;
}
.header[data-v-7f130e7f] {
background: #222;
color: #fff;
display: none;
-webkit-box-pack: center;
justify-content: center;
padding: .5rem 1rem;
}
.header .title[data-v-7f130e7f] {
margin: 0 2rem 0 0;
}
.header .description[data-v-7f130e7f] {
padding: 0;
} }
.sidebar[data-v-7f130e7f] { .sidebar[data-v-7f130e7f] {
background: #222; background: #222;
color: #fff; color: #fff;
display: -webkit-box;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
width: 25rem; width: 25rem;
box-sizing: border-box; box-sizing: border-box;
padding: 1rem; overflow: hidden;
} }
.poster[data-v-7f130e7f] { .sidebar .title[data-v-7f130e7f] {
width: 100%; padding: 1rem;
}
.sidebar .description[data-v-7f130e7f] {
padding: 0 1rem;
margin: -1rem 0 0 0;
}
.sidebar.empty[data-v-7f130e7f] {
display: none;
}
.sidebar-content[data-v-7f130e7f] {
overflow-y: auto;
} }
.title[data-v-7f130e7f] { .title[data-v-7f130e7f] {
padding: 0; padding: 0;
margin: 1rem 0; margin: 0;
flex-shrink: 0;
text-transform: capitalize; text-transform: capitalize;
} }
.title .icon[data-v-7f130e7f] { .title .icon[data-v-7f130e7f] {
@ -1211,12 +1285,29 @@
height: 1.25rem; height: 1.25rem;
} }
.description[data-v-7f130e7f] { .description[data-v-7f130e7f] {
padding: 0; margin: 0;
margin: 0 0 1rem 0;
line-height: 1.5; line-height: 1.5;
} }
.photo[data-v-7f130e7f] { .releases[data-v-7f130e7f] {
width: 100%; padding: 1rem;
}
@media (max-width: 1200px) {
.tag[data-v-7f130e7f] {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
}
.sidebar[data-v-7f130e7f] {
display: none;
}
.header[data-v-7f130e7f] {
display: -webkit-box;
display: flex;
}
.photos.compact[data-v-7f130e7f] {
display: -webkit-box;
display: flex;
}
} }
/* $primary: #ff886c; */ /* $primary: #ff886c; */