forks/peertube
1
0
Fork 0
Code Releases Activity

Improve player on small screen

Browse source
This commit is contained in:
Chocobozzz 2017-12-20 09:43:51 +01:00
parent e203f2e0e1
commit 86f278cb4c
No known key found for this signature in database
GPG key ID: 583A612D890159BE
2 changed files with 64 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
client/src/sass/video-js-custom.scss
View file

@ -102,7 +102,7 @@ $control-bar-height: 34px;
padding: 0; padding: 0;
.vjs-current-time-display { .vjs-current-time-display {
line-height: $control-bar-height; line-height: calc(#{$control-bar-height} + 1px);
&::after { &::after {
content: "/"; content: "/";
@ -117,7 +117,7 @@ $control-bar-height: 34px;
padding: 0; padding: 0;
.vjs-duration-display { .vjs-duration-display {
line-height: $control-bar-height; line-height: calc(#{$control-bar-height} + 1px);
} }
} }
@ -271,18 +271,19 @@ $control-bar-height: 34px;
.vjs-menu-button-popup { .vjs-menu-button-popup {
font-size: 13px; font-size: 13px;
font-weight: $font-semibold; font-weight: $font-semibold;
width: 42px; width: 50px;
// Thanks: https://github.com/kmoskwiak/videojs-resolution-switcher/pull/92/files // Thanks: https://github.com/kmoskwiak/videojs-resolution-switcher/pull/92/files
.vjs-resolution-button-label { .vjs-resolution-button-label {
line-height: $control-bar-height; line-height: $control-bar-height;
position: absolute; position: absolute;
top: 0; top: 0;
left: -1px; left: 4px;
width: 100%; width: 100%;
height: 100%; height: 100%;
text-align: center; text-align: center;
box-sizing: inherit; box-sizing: inherit;
text-align: center;
} }
.vjs-resolution-button { .vjs-resolution-button {
@ -293,9 +294,9 @@ $control-bar-height: 34px;
top: 20px; top: 20px;
.vjs-menu-content { .vjs-menu-content {
width: 4em; width: 50px;
left: 50%; /* Center the menu, in it's parent */ left: 50%; /* Center the menu, in it's parent */
margin-left: -2em; /* half of width, to center */ margin-left: -21px;
} }
li { li {
@ -306,13 +307,28 @@ $control-bar-height: 34px;
} }
} }
@media screen and (max-width: 450px) { @media screen and (max-width: 550px) {
.vjs-webtorrent {
padding: 0 !important;
.vjs-webtorrent-displayed { .vjs-webtorrent-displayed {
display: none !important; display: none !important;
} }
} }
} }
@media screen and (max-width: 300px) {
.vjs-volume-control {
display: none !important;
}
.vjs-volume-panel {
width: 26px !important;
margin-right: 83px !important;
}
}
}
// Thanks: https://projects.lukehaas.me/css-loaders/ // Thanks: https://projects.lukehaas.me/css-loaders/
.vjs-loading-spinner { .vjs-loading-spinner {
left: 50%; left: 50%;

13
client/src/standalone/videos/embed.scss
View file

@ -14,11 +14,12 @@ html, body {
margin: 0; margin: 0;
} }
.video-js {
.video-js.vjs-peertube-skin {
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
}
.vjs-poster { .vjs-poster {
background-size: 100% auto; background-size: 100% auto;
@ -32,6 +33,7 @@ html, body {
transition: all .4s; transition: all .4s;
font-weight: $font-semibold; font-weight: $font-semibold;
margin-right: 3px; margin-right: 3px;
padding: 0 5px;
} }
.vjs-peertube-link:hover { .vjs-peertube-link:hover {
@ -40,7 +42,7 @@ html, body {
// Fix volume panel because we added a new component (PeerTube link) // Fix volume panel because we added a new component (PeerTube link)
.vjs-volume-panel { .vjs-volume-panel {
margin-right: 121px !important; margin-right: 137px !important;
} }
@media screen and (max-width: 350px) { @media screen and (max-width: 350px) {
@ -57,4 +59,9 @@ html, body {
width: 26px !important; width: 26px !important;
margin-right: 140px !important; margin-right: 140px !important;
} }
.vjs-peertube-link {
padding: 0;
}
}
} }