boiii/traxxx
1
0
Fork 0
forked from DebaucheryLibrarian/traxxx
Code Issues Pull Requests Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
ThePendulum
2019-11-15 05:10:59 +01:00
parent a612045ee0
commit 5620dfcb65
18 changed files with 180 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
assets/components/actor/actor.vue
View File

@@ -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>

3
assets/components/release/banner.vue
View File

@@ -96,8 +96,7 @@ export default {
}
.item {
height: 100%;
max-height: 18rem;
height: 18rem;
vertical-align: middle;
}
</style>

39
assets/components/release/release.vue
View File

@@ -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%;

17
assets/components/site/site.vue
View File

@@ -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>

17
assets/components/tag/tag.vue
View File

@@ -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>

25
assets/components/tile/release.vue
View File

@@ -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;
}