+
+
+
@@ -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;
+ }
}
diff --git a/public/css/style.css b/public/css/style.css
index b5a9df7b..f9556a51 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -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; */