From 53870fda890e5f0b4b7c0ce30f87ca272fe0ca9c Mon Sep 17 00:00:00 2001 From: Niels Simenon Date: Wed, 1 Jul 2020 00:25:27 +0200 Subject: [PATCH] Improved release detail bar behavior. --- assets/components/entities/children.vue | 8 + assets/components/entities/entity.vue | 62 ++-- assets/components/header/filter-bar.vue | 56 +--- assets/components/header/filters.vue | 6 + assets/components/releases/media.vue | 2 - assets/components/releases/release.vue | 158 +++++------ assets/components/releases/tile.vue | 2 +- assets/components/search/search.vue | 2 +- assets/components/tile/actor.vue | 282 ------------------ assets/components/tile/entity.vue | 74 ----- assets/components/tile/network.vue | 67 ----- assets/components/tile/release.vue | 361 ------------------------ assets/components/tile/site.vue | 67 ----- assets/components/tile/tag.vue | 105 ------- assets/css/_tooltip.scss | 4 + assets/js/entities/actions.js | 55 ++-- assets/js/router.js | 16 ++ src/store-releases.js | 4 +- 18 files changed, 195 insertions(+), 1136 deletions(-) delete mode 100644 assets/components/tile/actor.vue delete mode 100644 assets/components/tile/entity.vue delete mode 100644 assets/components/tile/network.vue delete mode 100644 assets/components/tile/release.vue delete mode 100644 assets/components/tile/site.vue delete mode 100644 assets/components/tile/tag.vue diff --git a/assets/components/entities/children.vue b/assets/components/entities/children.vue index 07efe26c..a681c7c9 100644 --- a/assets/components/entities/children.vue +++ b/assets/components/entities/children.vue @@ -25,6 +25,8 @@ export default { diff --git a/assets/components/entities/entity.vue b/assets/components/entities/entity.vue index fd3c258b..9b2a4ec9 100644 --- a/assets/components/entities/entity.vue +++ b/assets/components/entities/entity.vue @@ -4,35 +4,42 @@ class="entity content" >
- - -

{{ entity.name }}

+ class="name" + >{{ entity.name }} + New - - - - - - -
- -
- - +
@@ -141,17 +127,6 @@ export default { align-items: center; } -.filters-block { - display: inline-block; -} - -.filters-compact { - font-size: 1rem; - font-weight: bold; - display: none; - margin: 0 0 0 .5rem; -} - .range-button { color: var(--shadow); display: inline-block; @@ -187,23 +162,8 @@ export default { } } -.tags { +.filters { + display: inline-block; flex-shrink: 0; } - -@media(max-width: $breakpoint2) { - .pagination { - display: none; - } -} - -@media(max-width: $breakpoint) { - .filters-container { - display: none; - } - - .filters-compact { - display: inline-block; - } -} diff --git a/assets/components/header/filters.vue b/assets/components/header/filters.vue index 27e4e322..0801c441 100644 --- a/assets/components/header/filters.vue +++ b/assets/components/header/filters.vue @@ -151,4 +151,10 @@ export default { fill: var(--success); } } + +@media(max-width: $breakpoint0) { + .applied { + display: none; + } +} diff --git a/assets/components/releases/media.vue b/assets/components/releases/media.vue index 4020ba9a..0a7a40f5 100644 --- a/assets/components/releases/media.vue +++ b/assets/components/releases/media.vue @@ -139,7 +139,6 @@ export default { overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; - padding: .5rem; font-size: 0; &.expanded { @@ -197,7 +196,6 @@ export default { display: inline-flex; align-items: center; justify-content: center; - margin: 0 .5rem 0 0; box-shadow: 0 0 3px var(--shadow-weak); .warning { diff --git a/assets/components/releases/release.vue b/assets/components/releases/release.vue index 4a97d6b7..8f13d23f 100644 --- a/assets/components/releases/release.vue +++ b/assets/components/releases/release.vue @@ -3,45 +3,22 @@ v-if="release" class="content" > + + + + + +
-
- - - - - -
-
{{ formatDate(release.date, 'MMM D, YYYY') }} {{ formatDate(release.date, 'MMMM D, YYYY') }} + + +
+ +
+ + + +
- - - - - -

{{ release.title }}

@@ -152,9 +163,7 @@

- {{ release.description }} -

+ >{{ release.description }}

Studio @@ -162,13 +171,10 @@ v-if="release.studio" class="row" > - {{ release.studio.name }} + >{{ release.studio.name }}
Shoot # @@ -208,7 +214,7 @@ import Media from './media.vue'; import Actor from '../actors/tile.vue'; -import Release from '../tile/release.vue'; +import Release from './tile.vue'; import Releases from './releases.vue'; import Scroll from '../scroll/scroll.vue'; @@ -218,15 +224,6 @@ function pageTitle() { async function mounted() { this.release = await this.$store.dispatch('fetchReleaseById', this.$route.params.releaseId); - /* - this.filename = format(config.filename.pattern, { - ...this.release, - shootId: this.release.shootId || '', - date: this.formatDate(this.release.date, config.filename.date), - }, { - spreadSeparator: config.filename.separator, - }); - */ } export default { @@ -267,6 +264,7 @@ export default { cursor: default; .column { + height: 100%; display: flex; justify-content: space-between; align-items: center; @@ -280,6 +278,7 @@ export default { .tidbits { flex-shrink: 0; + height: 100%; } .tidbit { @@ -291,15 +290,15 @@ export default { border-right: solid 1px var(--lighten-hint); } - .icon { - fill: var(--lighten-weak); - margin: 0 .25rem 0 0; - } - &.date { flex-shrink: 0; - padding: 0 1rem; + padding: 0 2rem 0 0; font-weight: bold; + + .icon { + fill: var(--lighten); + margin: -.2rem 0 0 .5rem; + } } } @@ -315,7 +314,8 @@ export default { } .logo-site { - height: 3rem; + height: 2.5rem; + width: 100%; max-width: 15rem; margin: .25rem 0; object-fit: contain; @@ -400,10 +400,6 @@ export default { font-size: 1rem; } -.scroll { - border-bottom: solid 1px var(--shadow-hint); -} - .actors { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); @@ -421,7 +417,7 @@ export default { } .link { - display: inline-block; + display: inline-flex; color: var(--link); text-decoration: none; @@ -472,10 +468,6 @@ export default { display: inline-block; } - .logo-site { - max-width: 100%; - } - .actors { grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); } diff --git a/assets/components/releases/tile.vue b/assets/components/releases/tile.vue index 61d0cbc9..308e65b6 100644 --- a/assets/components/releases/tile.vue +++ b/assets/components/releases/tile.vue @@ -7,7 +7,7 @@ - - diff --git a/assets/components/tile/entity.vue b/assets/components/tile/entity.vue deleted file mode 100644 index f08c1d6e..00000000 --- a/assets/components/tile/entity.vue +++ /dev/null @@ -1,74 +0,0 @@ - - - - - diff --git a/assets/components/tile/network.vue b/assets/components/tile/network.vue deleted file mode 100644 index 4b1c2f3f..00000000 --- a/assets/components/tile/network.vue +++ /dev/null @@ -1,67 +0,0 @@ - - - - - diff --git a/assets/components/tile/release.vue b/assets/components/tile/release.vue deleted file mode 100644 index e6bcf8fb..00000000 --- a/assets/components/tile/release.vue +++ /dev/null @@ -1,361 +0,0 @@ - - - - - diff --git a/assets/components/tile/site.vue b/assets/components/tile/site.vue deleted file mode 100644 index 08ff0e8a..00000000 --- a/assets/components/tile/site.vue +++ /dev/null @@ -1,67 +0,0 @@ - - - - - diff --git a/assets/components/tile/tag.vue b/assets/components/tile/tag.vue deleted file mode 100644 index b0e7fb9c..00000000 --- a/assets/components/tile/tag.vue +++ /dev/null @@ -1,105 +0,0 @@ - - - - - diff --git a/assets/css/_tooltip.scss b/assets/css/_tooltip.scss index 0f481fcc..9a6cd573 100644 --- a/assets/css/_tooltip.scss +++ b/assets/css/_tooltip.scss @@ -9,6 +9,10 @@ border-radius: 16px; } + &:not(.popover) .tooltip-inner { + padding: .25rem .5rem; + } + .tooltip-arrow { width: 0; height: 0; diff --git a/assets/js/entities/actions.js b/assets/js/entities/actions.js index 7d9a5c67..c57c69d1 100644 --- a/assets/js/entities/actions.js +++ b/assets/js/entities/actions.js @@ -60,28 +60,43 @@ function initEntitiesActions(store, _router) { offset: $offset orderBy: $orderBy filter: { - entity: { - or: [ - { slug: { equalTo: $entitySlug } }, - { parent: { slug: { equalTo: $entitySlug } } }, - { parent: { parent: { slug: { equalTo: $entitySlug } } } } - ] - } - or: [ + and: [ { - date: { - lessThan: $before, - greaterThan: $after - } - }, + or: [ + { + entity: { + or: [ + { slug: { equalTo: $entitySlug } }, + { parent: { slug: { equalTo: $entitySlug } } }, + { parent: { parent: { slug: { equalTo: $entitySlug } } } } + ] + } + } + { + studio: { + slug: { equalTo: $entitySlug }, + } + } + ] + } { - date: { - isNull: true - }, - createdAt: { - lessThan: $beforeTime, - greaterThan: $afterTime, - } + or: [ + { + date: { + lessThan: $before, + greaterThan: $after + } + }, + { + date: { + isNull: true + }, + createdAt: { + lessThan: $beforeTime, + greaterThan: $afterTime, + } + } + ] } ] releasesTagsConnection: { diff --git a/assets/js/router.js b/assets/js/router.js index 0880d339..443535ea 100644 --- a/assets/js/router.js +++ b/assets/js/router.js @@ -102,6 +102,22 @@ const routes = [ component: Entity, name: 'network', }, + { + path: '/studio/:entitySlug', + redirect: from => ({ + name: 'studio', + params: { + ...from.params, + range: 'latest', + pageNumber: 1, + }, + }), + }, + { + path: '/studio/:entitySlug/:range/:pageNumber', + component: Entity, + name: 'studio', + }, { path: '/tag/:tagSlug', redirect: from => ({ diff --git a/src/store-releases.js b/src/store-releases.js index dacbb898..288294d0 100644 --- a/src/store-releases.js +++ b/src/store-releases.js @@ -51,7 +51,7 @@ async function attachChannelEntities(releases) { const channelEntities = await knex('entities') .select(knex.raw('entities.*, row_to_json(parents) as parent')) .whereIn('entities.slug', releasesWithoutEntity.map(release => release.channel)) - .where('entities.type', 2) + .where('entities.type', 'channel') .leftJoin('entities AS parents', 'parents.id', 'entities.parent_id'); const channelEntitiesBySlug = channelEntities.reduce((acc, entity) => ({ ...acc, [entity.slug]: entity }), {}); @@ -84,7 +84,7 @@ async function attachStudios(releases) { const studios = await knex('entities') .whereIn('slug', studioSlugs) - .where('type', 3); + .where('type', 'studio'); const studioBySlug = studios.reduce((acc, studio) => ({ ...acc, [studio.slug]: studio }), {});