mirror of
https://github.com/stashapp/stash.git
synced 2025-12-15 04:44:28 +01:00
Fix video layout on touch enabled devices (#2501)
This commit is contained in:
parent
50e83a3555
commit
a7beeb32b0
3 changed files with 43 additions and 31 deletions
|
|
@ -18,6 +18,7 @@ import V0120 from "./versions/v0120.md";
|
|||
import V0130 from "./versions/v0130.md";
|
||||
import V0131 from "./versions/v0131.md";
|
||||
import V0140 from "./versions/v0140.md";
|
||||
import V0150 from "./versions/v0150.md";
|
||||
import { MarkdownPage } from "../Shared/MarkdownPage";
|
||||
|
||||
// to avoid use of explicit any
|
||||
|
|
@ -56,9 +57,9 @@ const Changelog: React.FC = () => {
|
|||
// after new release:
|
||||
// add entry to releases, using the current* fields
|
||||
// then update the current fields.
|
||||
const currentVersion = stashVersion || "v0.14.0";
|
||||
const currentVersion = stashVersion || "v0.15.0";
|
||||
const currentDate = buildDate;
|
||||
const currentPage = V0140;
|
||||
const currentPage = V0150;
|
||||
|
||||
const releases: IStashRelease[] = [
|
||||
{
|
||||
|
|
@ -67,6 +68,11 @@ const Changelog: React.FC = () => {
|
|||
page: currentPage,
|
||||
defaultOpen: true,
|
||||
},
|
||||
{
|
||||
version: "v0.14.0",
|
||||
date: "2022-04-11",
|
||||
page: V0140,
|
||||
},
|
||||
{
|
||||
version: "v0.13.1",
|
||||
date: "2022-03-16",
|
||||
|
|
|
|||
2
ui/v2.5/src/components/Changelog/versions/v0150.md
Normal file
2
ui/v2.5/src/components/Changelog/versions/v0150.md
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
### 🐛 Bug fixes
|
||||
* Fix incorrect video player positioning on touch-enabled devices. ([#2501](https://github.com/stashapp/stash/issues/2501))
|
||||
|
|
@ -57,40 +57,39 @@ $sceneTabWidth: 450px;
|
|||
}
|
||||
}
|
||||
|
||||
.vjs-touch-enabled {
|
||||
margin: 0 -15px;
|
||||
width: 100vw;
|
||||
@media (pointer: coarse) {
|
||||
.vjs-touch-enabled {
|
||||
&.vjs-has-started .vjs-big-button-group {
|
||||
display: flex;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
&.vjs-has-started .vjs-big-button-group {
|
||||
display: flex;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
&.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-big-button-group {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: visibility 1s, opacity 1s;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
&.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-big-button-group {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: visibility 1s, opacity 1s;
|
||||
visibility: visible;
|
||||
}
|
||||
.vjs-big-play-pause-button .vjs-icon-placeholder::before {
|
||||
content: "\f101";
|
||||
font-family: VideoJS;
|
||||
}
|
||||
|
||||
.vjs-big-play-pause-button .vjs-icon-placeholder::before {
|
||||
content: "\f101";
|
||||
font-family: VideoJS;
|
||||
}
|
||||
&.vjs-playing .vjs-big-play-pause-button .vjs-icon-placeholder::before {
|
||||
content: "\f103";
|
||||
}
|
||||
|
||||
&.vjs-playing .vjs-big-play-pause-button .vjs-icon-placeholder::before {
|
||||
content: "\f103";
|
||||
}
|
||||
// hide the regular play/pause button on touch screens
|
||||
.vjs-play-control {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// hide the regular play/pause button on touch screens
|
||||
.vjs-play-control {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// hide the regular seek buttons on touch screens
|
||||
.vjs-control-bar .vjs-seek-button {
|
||||
display: none;
|
||||
// hide the regular seek buttons on touch screens
|
||||
.vjs-control-bar .vjs-seek-button {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -216,6 +215,11 @@ $sceneTabWidth: 450px;
|
|||
.scene-tabs {
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
.scene-player-container {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
.scene-tabs {
|
||||
|
|
|
|||
Loading…
Reference in a new issue