Scrolling release actors, added custom scroll bars.

This commit is contained in:
DebaucheryLibrarian 2022-11-28 05:45:25 +01:00
parent 732fc98704
commit 00b54b414d
3 changed files with 116 additions and 17 deletions

View File

@ -3,8 +3,7 @@
v-if="actor" v-if="actor"
class="actor" class="actor"
> >
<RouterLink <div
:to="{ name: 'actor', params: { actorId: actor.id, actorSlug: actor.slug } }"
class="link" class="link"
> >
<span <span
@ -42,12 +41,16 @@
/> />
</span> </span>
<div class="avatar-container"> <a
class="avatar-container"
@click="goToActor"
>
<img <img
v-if="actor.avatar" v-if="actor.avatar"
:src="getPath(actor.avatar, 'thumbnail')" :src="getPath(actor.avatar, 'thumbnail')"
:style="{ 'background-image': getBgPath(actor.avatar, 'lazy') }" :style="{ 'background-image': getBgPath(actor.avatar, 'lazy') }"
loading="lazy" loading="lazy"
draggable="false"
class="avatar" class="avatar"
> >
@ -56,6 +59,7 @@
class="avatar" class="avatar"
><img ><img
:src="`/img/avatar_${actor.gender || 'female'}.svg`" :src="`/img/avatar_${actor.gender || 'female'}.svg`"
draggable="false"
class="avatar-fallback" class="avatar-fallback"
></span> ></span>
@ -80,9 +84,7 @@
@click.prevent.native="unstashActor" @click.prevent.native="unstashActor"
/> />
<span <span class="details">
class="details"
>
<span class="gender-age"> <span class="gender-age">
<Gender :gender="actor.gender" /> <Gender :gender="actor.gender" />
@ -128,14 +130,21 @@
class="country" class="country"
/> />
</span> </span>
</div> </a>
</RouterLink> </div>
</div> </div>
</template> </template>
<script> <script>
import Gender from './gender.vue'; import Gender from './gender.vue';
function goToActor() {
// can't seem to control behavior with RouterLink
if (!this.hasScrolled) {
this.$router.push({ name: 'actor', params: { actorId: this.actor.id, actorSlug: this.actor.slug } });
}
}
async function stashActor() { async function stashActor() {
this.favorited = true; this.favorited = true;
@ -189,6 +198,10 @@ export default {
type: Object, type: Object,
default: null, default: null,
}, },
hasScrolled: {
type: Boolean,
default: false,
},
}, },
emits: ['stash'], emits: ['stash'],
data() { data() {
@ -202,6 +215,7 @@ export default {
methods: { methods: {
stashActor, stashActor,
unstashActor, unstashActor,
goToActor,
}, },
}; };
</script> </script>
@ -289,6 +303,7 @@ export default {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
background: var(--profile); background: var(--profile);
cursor: pointer;
} }
.avatar { .avatar {

View File

@ -63,12 +63,19 @@
</div> </div>
<div class="row associations"> <div class="row associations">
<ul class="actors nolist"> <ul
ref="actors"
class="actors nolist noselect bar-inline"
@mousedown.prevent="startActorsScroll"
>
<li <li
v-for="actor in release.actors" v-for="actor in release.actors"
:key="actor.id" :key="actor.id"
> >
<Actor :actor="actor" /> <Actor
:actor="actor"
:has-scrolled="actorsHasScrolled"
/>
</li> </li>
</ul> </ul>
</div> </div>
@ -308,6 +315,29 @@ async function unstashScene(stashId) {
}); });
} }
function startActorsScroll(event) {
event.preventDefault();
this.$refs.actors.addEventListener('mousemove', this.scrollActors);
document.addEventListener('mouseup', this.endActorsScroll);
this.actorsScrollStart = { mouse: event.clientX, scroll: this.$refs.actors.scrollLeft };
this.actorsHasScrolled = false;
}
function scrollActors(event) {
this.$refs.actors.scrollLeft = this.actorsScrollStart.scroll + this.actorsScrollStart.mouse - event.clientX;
if (Math.abs(this.actorsScrollStart.mouse - event.clientX) > 10) {
this.actorsHasScrolled = true;
}
}
function endActorsScroll() {
this.$refs.actors.removeEventListener('mousemove', this.scrollActors);
document.removeEventListener('mouseup', this.endActorsScroll);
}
function me() { function me() {
return this.$store.state.auth.user; return this.$store.state.auth.user;
} }
@ -358,6 +388,10 @@ function showAlbum() {
return (this.release.photos?.length > 0 || this.release.scenesPhotos?.length > 0) && this.$route.hash === '#album'; return (this.release.photos?.length > 0 || this.release.scenesPhotos?.length > 0) && this.$route.hash === '#album';
} }
async function mounted() {
this.fetchRelease();
}
export default { export default {
components: { components: {
Actor, Actor,
@ -376,6 +410,8 @@ export default {
summary: null, summary: null,
summaryCopied: false, summaryCopied: false,
stashedBy: [], stashedBy: [],
actorsScrollStart: 0,
actorsHasScrolled: false,
hasClipboard: !!navigator?.clipboard?.writeText, hasClipboard: !!navigator?.clipboard?.writeText,
}; };
}, },
@ -388,12 +424,15 @@ export default {
watch: { watch: {
$route: fetchRelease, $route: fetchRelease,
}, },
mounted: fetchRelease, mounted,
methods: { methods: {
copySummary, copySummary,
endActorsScroll,
fetchRelease,
scrollActors,
selectSummary, selectSummary,
setSummary, setSummary,
fetchRelease, startActorsScroll,
stashScene, stashScene,
unstashScene, unstashScene,
}, },
@ -504,11 +543,16 @@ export default {
} }
.actors { .actors {
display: grid; display: block;
grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); padding-bottom: .25rem;
grid-gap: .5rem; overflow-x: auto;
flex-grow: 1; white-space: nowrap;
flex-wrap: wrap;
.actor {
width: 10rem;
margin-right: .25rem;
user-select: none;
}
} }
.movies { .movies {

View File

@ -24,6 +24,46 @@
text-decoration: none; text-decoration: none;
} }
.nobar {
scrollbar-width: none;
-mis-overflow-style: none;
&::-webkit-scrollbar {
background: transparent;
width: 0px;
height: 0px;
}
}
::-webkit-scrollbar {
width: 14px;
height: 14px;
}
::-webkit-scrollbar-thumb {
background-color: var(--shadow-weak);
border: none;
}
::-webkit-scrollbar-track {
box-shadow: inset 0 0 3px var(--shadow-hint);
border: solid 1px var(--shadow-hint);
background-color: var(--shadow-touch);
}
.bar-inline::-webkit-scrollbar {
width: 10px;
height: 10px;
}
.bar-inline::-webkit-scrollbar-thumb {
background-color: var(--shadow-hint);
}
.bar-strong::-webkit-scrollbar-thumb {
background-color: var(--primary);
}
:focus { :focus {
outline: none; outline: none;
} }