diff --git a/assets/components/actors/tile.vue b/assets/components/actors/tile.vue
index 7caa7eff..7949141a 100755
--- a/assets/components/actors/tile.vue
+++ b/assets/components/actors/tile.vue
@@ -3,8 +3,7 @@
v-if="actor"
class="actor"
>
-
-
-
+
+
@@ -289,6 +303,7 @@ export default {
position: relative;
overflow: hidden;
background: var(--profile);
+ cursor: pointer;
}
.avatar {
diff --git a/assets/components/releases/release.vue b/assets/components/releases/release.vue
index 4fd9bf82..96c9a628 100755
--- a/assets/components/releases/release.vue
+++ b/assets/components/releases/release.vue
@@ -63,12 +63,19 @@
@@ -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() {
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';
}
+async function mounted() {
+ this.fetchRelease();
+}
+
export default {
components: {
Actor,
@@ -376,6 +410,8 @@ export default {
summary: null,
summaryCopied: false,
stashedBy: [],
+ actorsScrollStart: 0,
+ actorsHasScrolled: false,
hasClipboard: !!navigator?.clipboard?.writeText,
};
},
@@ -388,12 +424,15 @@ export default {
watch: {
$route: fetchRelease,
},
- mounted: fetchRelease,
+ mounted,
methods: {
copySummary,
+ endActorsScroll,
+ fetchRelease,
+ scrollActors,
selectSummary,
setSummary,
- fetchRelease,
+ startActorsScroll,
stashScene,
unstashScene,
},
@@ -504,11 +543,16 @@ export default {
}
.actors {
- display: grid;
- grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
- grid-gap: .5rem;
- flex-grow: 1;
- flex-wrap: wrap;
+ display: block;
+ padding-bottom: .25rem;
+ overflow-x: auto;
+ white-space: nowrap;
+
+ .actor {
+ width: 10rem;
+ margin-right: .25rem;
+ user-select: none;
+ }
}
.movies {
diff --git a/assets/css/_states.scss b/assets/css/_states.scss
index 33a290fe..68085faa 100755
--- a/assets/css/_states.scss
+++ b/assets/css/_states.scss
@@ -24,6 +24,46 @@
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 {
outline: none;
}