traxxx/assets/components/tags/tag.vue

<template>
    <div
        v-if="tag"
        class="content"
    >
        <FilterBar :fetch-releases="fetchReleases" />

        <div
            class="tag"
            :class="{ nomedia: !hasMedia }"
        >
            <div class="header">
                <h2 class="title">
                    <Icon icon="price-tag4" />
                    {{ tag.name }}
                </h2>
            </div>

            <div class="sidebar">
                <h2 class="title">
                    <Icon icon="price-tag4" />
                    {{ tag.name }}
                </h2>

                <div class="sidebar-content">
                    <p
                        v-if="description"
                        class="description"
                        v-html="description"
                    />

                    <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>
    </div>
</template>

<script>
/* eslint-disable no-v-html */
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() {
    await this.fetchReleases();
    this.pageTitle = this.tag.name;
}

export default {
    components: {
        FilterBar,
        Photos,
        Releases,
    },
    data() {
        return {
            tag: null,
            description: null,
            releases: null,
            pageTitle: null,
            hasMedia: false,
        };
    },
    mounted,
    methods: {
        fetchReleases,
    },
};
</script>

<style lang="scss">
@import 'theme';

.description a {
    color: $link;
    text-decoration: inherit;

    &:hover {
        color: $primary;
    }
}
</style>

<style lang="scss" scoped>
@import 'theme';

.tag {
    display: flex;
    flex-grow: 1;
    overflow: hidden;

    &.nomedia {
        flex-direction: column;

        .sidebar {
            display: none;
        }

        .header {
            display: flex;
        }
    }
}

.content-inner {
    padding: 0;
}

.header {
    background: $profile;
    color: $text-contrast;
    display: none;
    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;
    overflow: hidden;

    .title {
        padding: 1rem;
    }

    .description {
        padding: 0 1rem;
        margin: -1rem 0 0 0;
    }

    &.empty {
        display: none;
    }
}

.sidebar-content {
    overflow-y: auto;
}

.title {
    padding: 0;
    margin: 0;
    flex-shrink: 0;
    text-transform: capitalize;

    .icon {
        fill: $text-contrast;
        width: 1.25rem;
        height: 1.25rem;
    }
}

.description {
    margin: 0;
    line-height: 1.5;
}

.releases {
    padding: 1rem;
}

@media(max-width: $breakpoint3) {
    .tag {
        flex-direction: column;
    }

    .sidebar {
        display: none;
    }

    .header {
        display: flex;
    }

    .photos.compact {
        display: flex;
    }
}
</style>