DebaucheryLibrarian
/
traxxx
2
1
Fork 1
Code Issues 37 Pull Requests 1 Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
assets/components/networks/network.vue
View File

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

86
assets/components/tags/photos.vue Normal file
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>

156
assets/components/tags/tag.vue
View File

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

119
public/css/style.css
View File

@ -729,9 +729,9 @@
height: 3rem;
display: -webkit-box;
display: flex;
flex-shrink: 0;
-webkit-box-pack: center;
justify-content: center;
flex-shrink: 0;
border-bottom: solid 1px rgba(0, 0, 0, 0.1);
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; */
/* $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 {
@ -1182,27 +1215,68 @@
.tag[data-v-7f130e7f] {
display: -webkit-box;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
flex-direction: row;
-webkit-box-flex: 1;
flex-grow: 1;
-webkit-box-pack: stretch;
justify-content: stretch;
overflow: hidden;
}
.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] {
background: #222;
color: #fff;
display: -webkit-box;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
width: 25rem;
box-sizing: border-box;
padding: 1rem;
overflow: hidden;
}
.poster[data-v-7f130e7f] {
width: 100%;
.sidebar .title[data-v-7f130e7f] {
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] {
padding: 0;
margin: 1rem 0;
margin: 0;
flex-shrink: 0;
text-transform: capitalize;
}
.title .icon[data-v-7f130e7f] {
@ -1211,12 +1285,29 @@
height: 1.25rem;
}
.description[data-v-7f130e7f] {
padding: 0;
margin: 0 0 1rem 0;
margin: 0;
line-height: 1.5;
}
.photo[data-v-7f130e7f] {
width: 100%;
.releases[data-v-7f130e7f] {
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; */