Added filter bar to all pages. Added 'upcoming' marker. Improved date tidbit.

2019-11-15 05:10:59 +01:00
parent a612045ee0
commit 5620dfcb65
18 changed files with 180 additions and 55 deletions
--- a/assets/components/actor/actor.vue
+++ b/assets/components/actor/actor.vue
@@ -3,6 +3,8 @@
        v-if="actor"
        class="content actor"
    >
+        <FilterBar :fetch-releases="fetchReleases" />
+
        <div class="header">
            <h2 class="title">{{ actor.name }}</h2>
        </div>
@@ -61,17 +63,25 @@
 </template>

 <script>
+import FilterBar from '../header/filter-bar.vue';
 import ReleaseTile from '../tile/release.vue';

-async function mounted() {
-    [this.actor] = await this.$store.dispatch('fetchActors', this.$route.params.actorSlug);
+async function fetchReleases() {
    this.releases = await this.$store.dispatch('fetchActorReleases', this.$route.params.actorSlug);
+}
+
+async function mounted() {
+    [[this.actor]] = await Promise.all([
+        this.$store.dispatch('fetchActors', this.$route.params.actorSlug),
+        this.fetchReleases(),
+    ]);

    this.pageTitle = this.actor.name;
 }

 export default {
    components: {
+        FilterBar,
        ReleaseTile,
    },
    data() {
@@ -82,6 +92,9 @@ export default {
        };
    },
    mounted,
+    methods: {
+        fetchReleases,
+    },
 };
 </script>

--- a/assets/components/release/banner.vue
+++ b/assets/components/release/banner.vue
@@ -96,8 +96,7 @@ export default {
 }

 .item {
-    height: 100%;
-    max-height: 18rem;
+    height: 18rem;
    vertical-align: middle;
 }
 </style>
--- a/assets/components/release/release.vue
+++ b/assets/components/release/release.vue
@@ -9,28 +9,27 @@
            <div class="column">
                <a
                    v-if="release.date"
-                    v-tooltip.bottom="`View scene on ${release.site.name}`"
-                    :title="`View scene on ${release.site.name}`"
+                    v-tooltip.bottom="release.url && `View scene on ${release.site.name}`"
+                    :title="release.url && `View scene on ${release.site.name}`"
                    :href="release.url"
+                    :class="{ link: release.url }"
                    target="_blank"
                    rel="noopener noreferrer"
-                    class="tidbit date link hideable"
+                    class="tidbit date"
                >
-                    <Icon icon="calendar2" />
-                    {{ formatDate(release.date, 'MMMM D, YYYY') }}
-                </a>
+                    <Icon
+                        v-if="isAfter(new Date(), release.date)"
+                        icon="calendar2"
+                    />

-                <a
-                    v-if="release.date"
-                    v-tooltip.bottom="`View scene on ${release.site.name}`"
-                    :title="`View scene on ${release.site.name}`"
-                    :href="release.url"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    class="tidbit date link showable"
-                >
-                    <Icon icon="calendar2" />
-                    {{ formatDate(release.date, 'MMM D, YYYY') }}
+                    <Icon
+                        v-else
+                        v-tooltip.bottom="'To be released'"
+                        icon="sun3"
+                    />
+
+                    <span class="showable">{{ formatDate(release.date, 'MMM D, YYYY') }}</span>
+                    <span class="hideable">{{ formatDate(release.date, 'MMMM D, YYYY') }}</span>
                </a>

                <span
@@ -379,10 +378,14 @@ export default {
        display: none;
    }

-    .showable {
+    .row .showable {
        display: block;
    }

+    .tidbit .showable {
+        display: inline-block;
+    }
+
    .logo-site {
        width: 15rem;
        max-width: 100%;
--- a/assets/components/site/site.vue
+++ b/assets/components/site/site.vue
@@ -3,6 +3,8 @@
        v-if="site"
        class="content site"
    >
+        <FilterBar :fetch-releases="fetchReleases" />
+
        <div class="content-inner">
            <div class="header">
                <a
@@ -60,17 +62,25 @@
 </template>

 <script>
+import FilterBar from '../header/filter-bar.vue';
 import ReleaseTile from '../tile/release.vue';

-async function mounted() {
-    [this.site] = await this.$store.dispatch('fetchSites', this.$route.params.siteSlug);
+async function fetchReleases() {
    this.releases = await this.$store.dispatch('fetchSiteReleases', this.$route.params.siteSlug);
+}
+
+async function mounted() {
+    [[this.site]] = await Promise.all([
+        this.$store.dispatch('fetchSites', this.$route.params.siteSlug),
+        this.fetchReleases(),
+    ]);

    this.pageTitle = this.site.name;
 }

 export default {
    components: {
+        FilterBar,
        ReleaseTile,
    },
    data() {
@@ -81,6 +91,9 @@ export default {
        };
    },
    mounted,
+    methods: {
+        fetchReleases,
+    },
 };
 </script>

--- a/assets/components/tag/tag.vue
+++ b/assets/components/tag/tag.vue
@@ -3,6 +3,8 @@
        v-if="tag"
        class="content tag"
    >
+        <FilterBar :fetch-releases="fetchReleases" />
+
        <div class="header">
            <span>
                <h2 class="title">
@@ -30,17 +32,25 @@
 </template>

 <script>
+import FilterBar from '../header/filter-bar.vue';
 import ReleaseTile from '../tile/release.vue';

-async function mounted() {
-    [this.tag] = await this.$store.dispatch('fetchTags', this.$route.params.tagSlug);
+async function fetchReleases() {
    this.releases = await this.$store.dispatch('fetchTagReleases', this.$route.params.tagSlug);
+}
+
+async function mounted() {
+    [[this.tag]] = await Promise.all([
+        this.$store.dispatch('fetchTags', this.$route.params.tagSlug),
+        this.fetchReleases(),
+    ]);

    this.pageTitle = this.tag.name;
 }

 export default {
    components: {
+        FilterBar,
        ReleaseTile,
    },
    data() {
@@ -51,6 +61,9 @@ export default {
        };
    },
    mounted,
+    methods: {
+        fetchReleases,
+    },
 };
 </script>

--- a/assets/components/tile/release.vue
+++ b/assets/components/tile/release.vue
@@ -18,9 +18,10 @@

                <a
                    v-if="release.date"
-                    v-tooltip.bottom="`View scene on ${release.site.name}`"
-                    :title="`View scene on ${release.site.name}`"
+                    v-tooltip.bottom="release.url && `View scene on ${release.site.name}`"
+                    :title="release.url && `View scene on ${release.site.name}`"
                    :href="release.url"
+                    :class="{ upcoming: isAfter(release.date, new Date()) }"
                    target="_blank"
                    rel="noopener noreferrer"
                    class="date"
@@ -29,6 +30,7 @@
                <a
                    v-else
                    :href="release.url"
+                    :class="{ upcoming: isAfter(release.date, new Date()) }"
                    title="Scene date N/A, showing date added"
                    target="_blank"
                    rel="noopener noreferrer"
@@ -166,17 +168,34 @@ export default {
    align-items: center;
    justify-content: space-between;
    position: absolute;
+    font-size: 0;
 }

 .site,
 .date {
    color: #fff;
-    background: rgba(0, 0, 0, .5);
+    background: $shadow;
+    position: relative;
    font-size: .8rem;
    padding: .25rem;
    text-decoration: none;
 }

+.date.upcoming:before {
+    content: '';
+    color: $text-contrast;
+    background: $primary;
+    width: .25rem;
+    display: inline-block;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: -.75rem;
+    padding: .25rem;
+    font-size: .8rem;
+    font-weight: bold;
+}
+
 .site {
    font-weight: bold;
 }
--- a/assets/img/female.svg
+++ b/assets/img/female.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>female</title>
+<path d="M9 9.9c2.282-0.463 4-2.481 4-4.9 0-2.761-2.239-5-5-5s-5 2.239-5 5c0 2.419 1.718 4.437 4 4.9v2.1h-3v2h3v2h2v-2h3v-2h-3v-2.1zM4.7 5c0-1.823 1.477-3.3 3.3-3.3s3.3 1.478 3.3 3.3c0 1.822-1.477 3.3-3.3 3.3s-3.3-1.478-3.3-3.3z"></path>
+</svg>
--- a/assets/img/male.svg
+++ b/assets/img/male.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>male</title>
+<path d="M10 0v2h2.586l-3.829 3.829c-0.79-0.524-1.738-0.829-2.757-0.829-2.761 0-5 2.239-5 5s2.239 5 5 5 5-2.239 5-5c0-1.019-0.305-1.967-0.829-2.757l3.829-3.829v2.586h2v-6h-6zM6 13.3c-1.823 0-3.3-1.477-3.3-3.3s1.477-3.3 3.3-3.3c1.822 0 3.3 1.477 3.3 3.3s-1.477 3.3-3.3 3.3z"></path>
+</svg>
--- a/assets/img/sun3.svg
+++ b/assets/img/sun3.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>sun3</title>
+<path d="M14.374 8l1.425-1.78-2.056-0.986 0.512-2.222-2.28 0.004-0.503-2.224-2.053 0.993-1.418-1.786-1.418 1.786-2.053-0.993-0.503 2.224-2.28-0.004 0.512 2.222-2.056 0.986 1.425 1.78-1.425 1.78 2.056 0.986-0.512 2.222 2.28-0.004 0.503 2.224 2.053-0.993 1.418 1.786 1.418-1.786 2.053 0.993 0.503-2.224 2.28 0.004-0.512-2.222 2.056-0.986-1.425-1.78zM8 13.141c-2.743 0-4.966-2.302-4.966-5.141s2.223-5.141 4.966-5.141c2.743 0 4.966 2.302 4.966 5.141s-2.223 5.141-4.966 5.141zM4 8c0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.209-1.791 4-4 4s-4-1.791-4-4z"></path>
+</svg>
--- a/assets/js/actors/actions.js
+++ b/assets/js/actors/actions.js
@@ -1,6 +1,6 @@
 import { get } from '../api';

-function initActorActions(_store, _router) {
+function initActorActions(store, _router) {
    async function fetchActors({ _commit }, actorId) {
        const networks = await get(`/actors/${actorId || ''}`);

@@ -8,7 +8,11 @@ function initActorActions(_store, _router) {
    }

    async function fetchActorReleases({ _commit }, actorId) {
-        const releases = await get(`/actors/${actorId}/releases`);
+        const releases = await get(`/actors/${actorId}/releases`, {
+            filter: store.state.ui.filter,
+            after: store.getters.after,
+            before: store.getters.before,
+        });

        return releases;
    }
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -29,6 +29,8 @@ function init() {
        },
        methods: {
            formatDate: (date, format) => dayjs(date).format(format),
+            isAfter: (dateA, dateB) => dayjs(dateA).isAfter(dateB),
+            isBefore: (dateA, dateB) => dayjs(dateA).isBefore(dateB),
        },
    });

--- a/assets/js/sites/actions.js
+++ b/assets/js/sites/actions.js
@@ -1,6 +1,6 @@
 import { get } from '../api';

-function initSitesActions(_store, _router) {
+function initSitesActions(store, _router) {
    async function fetchSites({ _commit }, siteId) {
        const sites = await get(`/sites/${siteId || ''}`);

@@ -8,7 +8,11 @@ function initSitesActions(_store, _router) {
    }

    async function fetchSiteReleases({ _commit }, siteId) {
-        const releases = await get(`/sites/${siteId}/releases`);
+        const releases = await get(`/sites/${siteId}/releases`, {
+            filter: store.state.ui.filter,
+            after: store.getters.after,
+            before: store.getters.before,
+        });

        return releases;
    }
--- a/assets/js/tags/actions.js
+++ b/assets/js/tags/actions.js
@@ -1,6 +1,6 @@
 import { get } from '../api';

-function initTagsActions(_store, _router) {
+function initTagsActions(store, _router) {
    async function fetchTags({ _commit }, tagId) {
        const tags = await get(`/tags/${tagId || ''}`);

@@ -8,7 +8,11 @@ function initTagsActions(_store, _router) {
    }

    async function fetchTagReleases({ _commit }, tagId) {
-        const releases = await get(`/tags/${tagId}/releases`);
+        const releases = await get(`/tags/${tagId}/releases`, {
+            filter: store.state.ui.filter,
+            after: store.getters.after,
+            before: store.getters.before,
+        });

        return releases;
    }