Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-03-11 17:15:48 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Merge pull request #269 from Stremio/mobile

Browse source 
Adapt layout to mobile
This commit is contained in:
Nikola Hristov 2022-06-13 18:59:56 +03:00 committed by GitHub
commit b3e7b4a31a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
40 changed files with 14815 additions and 151 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13978
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

1
package.json
View file

@ -19,6 +19,7 @@
"@stremio/stremio-icons": "3.0.5",
"@stremio/stremio-video": "0.0.20-rc.4",
"a-color-picker": "1.2.1",
"bowser": "2.11.0",
"buffer": "6.0.3",
"classnames": "2.3.1",
"eventemitter3": "4.0.7",

7
src/App/styles.less
View file

@ -135,4 +135,11 @@ html {
html {
font-size: 14px;
}
}
@media only screen and (max-width: @xsmall) {
html {
min-width: inherit;
min-height: inherit;
}
}

1
src/common/ColorInput/ColorPicker/styles.less
View file

@ -2,6 +2,7 @@
.color-picker-container {
overflow: visible;
text-align: center;
* {
overflow: visible;

15
src/common/MainNavBars/styles.less
View file

@ -1,5 +1,7 @@
// Copyright (C) 2017-2022 Smart code 203358507
@import (reference) '~stremio/common/screen-sizes.less';
.main-nav-bars-container {
position: relative;
z-index: 0;
@ -28,4 +30,17 @@
left: var(--vertical-nav-bar-size);
z-index: 0;
}
}
@media only screen and (max-width: @minimum) {
.main-nav-bars-container {
.nav-content-container {
left: 0;
bottom: var(--vertical-nav-bar-size);
}
.vertical-nav-bar {
top: initial;
}
}
}

11
src/common/MetaItem/styles.less
View file

@ -1,6 +1,7 @@
// Copyright (C) 2017-2022 Smart code 203358507
@import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
@import (reference) '~stremio/common/screen-sizes.less';
:import('~stremio/common/Popup/styles.less') {
popup-menu-container: menu-container;
@ -175,4 +176,14 @@
}
}
}
}
@media only screen and (max-width: @minimum) {
.meta-item-container {
padding: 0.5rem;
.title-bar-container {
margin-top: 0.5rem;
}
}
}

26
src/common/MetaPreview/ActionButton/styles.less
View file

@ -1,6 +1,7 @@
// Copyright (C) 2017-2022 Smart code 203358507
@import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
@import (reference) '~stremio/common/screen-sizes.less';
.action-button-container {
display: flex;
@ -45,4 +46,29 @@
color: @color-surface-light5-90;
}
}
}
@media only screen and (max-width: @minimum) {
.action-button-container {
flex-direction: row;
padding: 0 1rem;
.icon-container {
flex: none;
align-self: center;
height: 2rem;
width: 2rem;
padding-top: 0;
margin-right: 0.5rem;
&:only-child {
padding: 0;
margin-right: 0;
}
}
.label-container {
flex: 1;
}
}
}

2
src/common/MetaPreview/MetaPreview.js
View file

@ -116,7 +116,7 @@ const MetaPreview = ({ className, compact, name, logo, background, runtime, rele
renderFallback={renderLogoFallback}
/>
:
null
renderLogoFallback()
}
{
(typeof releaseInfo === 'string' && releaseInfo.length > 0) || (released instanceof Date && !isNaN(released.getTime())) || (typeof runtime === 'string' && runtime.length > 0) || linksGroups.has(CONSTANTS.IMDB_LINK_CATEGORY) ?

39
src/common/MetaPreview/styles.less
View file

@ -1,6 +1,7 @@
// Copyright (C) 2017-2022 Smart code 203358507
@import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
@import (reference) '~stremio/common/screen-sizes.less';
.meta-preview-container {
position: relative;
@ -196,4 +197,42 @@
.share-prompt {
width: 24rem;
}
@media only screen and (max-width: @minimum) {
.meta-preview-container {
.meta-info-container {
padding: 0 1.5rem;
.logo {
margin: 1em 0;
}
}
.action-buttons-container {
flex-wrap: nowrap;
padding: 0 1.5rem;
overflow-x: visible;
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
.action-button {
width: auto;
height: 4rem;
max-width: 60%;
margin: 1rem 0;
&:not(:last-child) {
margin-right: 1rem;
}
}
}
}
.share-prompt {
width: 100%;
}
}

20
src/common/MetaRow/MetaRowPlaceholder/styles.less
View file

@ -1,5 +1,7 @@
// Copyright (C) 2017-2022 Smart code 203358507
@import (reference) '~stremio/common/screen-sizes.less';
.meta-row-placeholder-container {
.header-container {
display: flex;
@ -85,4 +87,22 @@
}
}
}
}
@media only screen and (max-width: @minimum) {
.meta-row-placeholder-container {
.meta-items-container {
.meta-item {
margin: 0.5rem;
&:not(:first-child) {
margin-left: 0.5rem;
}
.title-bar-container {
margin-top: 0.5rem;
}
}
}
}
}

25
src/common/MetaRow/styles.less
View file

@ -1,6 +1,7 @@
// Copyright (C) 2017-2022 Smart code 203358507
@import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
@import (reference) '~stremio/common/screen-sizes.less';
.meta-row-container {
overflow: visible;
@ -75,8 +76,6 @@
overflow: visible;
.meta-item {
padding: 1rem;
&:not(:first-child) {
margin-left: 0.5rem;
}
@ -94,4 +93,26 @@
}
}
}
}
@media only screen and (max-width: @minimum) {
.meta-row-container {
.header-container {
padding: 0 0.5rem;
.title-container {
margin-right: 0.5rem;
white-space: nowrap;
text-overflow: ellipsis;
}
}
.meta-items-container {
.meta-item {
&:not(:first-child) {
margin-left: 0;
}
}
}
}
}

42
src/common/ModalDialog/styles.less
View file

@ -1,6 +1,7 @@
// Copyright (C) 2017-2022 Smart code 203358507
@import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
@import (reference) '~stremio/common/screen-sizes.less';
.modal-container {
display: flex;
@ -117,4 +118,45 @@
text-align: center;
color: @color-surface-light5-90;
}
}
@media only screen and (max-width: @minimum) {
.modal-container {
.modal-dialog-container {
position: relative;
width: 90%;
max-width: initial;
z-index: 0;
.close-button-container {
position: absolute;
top: 0;
right: 0;
margin: 0.75rem 0.75rem 0 0;
padding: 0.25rem;
}
.title-container {
max-height: 4.8em;
margin: 1rem 3rem 1rem 1.5rem;
}
.modal-dialog-content {
margin: 0 0.5rem;
padding: 0 0.5rem;
&:last-child {
margin-bottom: 1rem;
}
}
.buttons-container {
margin: 1rem 1rem 0;
&:last-child {
margin-bottom: 1rem;
}
}
}
}
}

1
src/common/Multiselect/styles.less
View file

@ -1,6 +1,7 @@
// Copyright (C) 2017-2022 Smart code 203358507
@import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
@import (reference) '~stremio/common/screen-sizes.less';
:import('~stremio/common/Popup/styles.less') {
popup-menu-container: menu-container;

2
src/common/NavBar/HorizontalNavBar/HorizontalNavBar.js
View file

@ -17,7 +17,7 @@ const HorizontalNavBar = React.memo(({ className, route, query, title, backButto
}, []);
const [fullscreen, requestFullscreen, exitFullscreen] = useFullscreen();
const renderNavMenuLabel = React.useCallback(({ ref, className, onClick, children, }) => (
<Button ref={ref} className={classnames(className, styles['button-container'])} tabIndex={-1} onClick={onClick}>
<Button ref={ref} className={classnames(className, styles['button-container'], styles['menu-button-container'])} tabIndex={-1} onClick={onClick}>
<Icon className={styles['icon']} icon={'ic_more'} />
{children}
</Button>

7
src/common/NavBar/HorizontalNavBar/NavMenu/styles.less
View file

@ -1,6 +1,7 @@
// Copyright (C) 2017-2022 Smart code 203358507
@import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
@import (reference) '~stremio/common/screen-sizes.less';
.nav-menu-container {
width: 20rem;
@ -100,4 +101,10 @@
}
}
}
}
@media only screen and (max-width: @minimum) {
.nav-menu-container {
max-height: calc(100vh - var(--horizontal-nav-bar-size) - var(--vertical-nav-bar-size) - 1rem);
}
}

24
src/common/NavBar/HorizontalNavBar/styles.less
View file

@ -1,6 +1,7 @@
// Copyright (C) 2017-2022 Smart code 203358507
@import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
@import (reference) '~stremio/common/screen-sizes.less';
.horizontal-nav-bar-container {
display: flex;
@ -90,4 +91,27 @@
fill: @color-secondaryvariant2-light1-90;
}
}
}
@media only screen and (max-width: @minimum) {
.horizontal-nav-bar-container {
justify-content: space-between;
padding-right: 0;
.logo-container {
width: var(--horizontal-nav-bar-size);
}
.search-bar {
margin: 0 0.5rem;
}
.spacing {
display: none;
}
.button-container:not(.back-button-container):not(.menu-button-container) {
display: none;
}
}
}

25
src/common/NavBar/VerticalNavBar/styles.less
View file

@ -1,6 +1,7 @@
// Copyright (C) 2017-2022 Smart code 203358507
@import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
@import (reference) '~stremio/common/screen-sizes.less';
.vertical-nav-bar-container {
width: var(--vertical-nav-bar-size);
@ -24,4 +25,28 @@
margin-bottom: 1rem;
}
}
}
@media only screen and (max-width: @minimum) {
.vertical-nav-bar-container {
display: flex;
flex-direction: row;
justify-content: space-between;
height: var(--vertical-nav-bar-size);
width: 100%;
overflow-y: hidden;
overflow-x: auto;
.nav-tab-button {
flex: none;
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
}
}
}
}

2
src/common/Popup/Popup.js
View file

@ -104,7 +104,7 @@ const Popup = ({ open, direction, renderLabel, renderMenu, dataset, onCloseReque
ref: labelRef,
className: classnames(styles['label-container'], props.className, { 'active': open }),
children: open ?
<FocusLock ref={menuRef} className={classnames(styles['menu-container'], styles[`menu-direction-${autoDirection}`], styles[`menu-direction-${direction}`])} autoFocus={false} lockProps={{ onMouseDown: menuOnMouseDown }}>
<FocusLock ref={menuRef} className={classnames(styles['menu-container'], { [styles[`menu-direction-${autoDirection}`]]: !direction }, { [styles[`menu-direction-${direction}`]]: direction })} autoFocus={false} lockProps={{ onMouseDown: menuOnMouseDown }}>
{renderMenu()}
</FocusLock>
:

6
src/index.js
View file

@ -5,6 +5,12 @@ if (typeof process.env.SENTRY_DSN === 'string') {
Sentry.init({ dsn: process.env.SENTRY_DSN });
}
const Bowser = require('bowser');
const browser = Bowser.parse(window.navigator?.userAgent || '');
if (browser?.platform?.type === 'desktop') {
document.querySelector('meta[name="viewport"]')?.setAttribute('content', '');
}
const React = require('react');
const ReactDOM = require('react-dom');
const App = require('./App');

43
src/routes/Addons/Addon/styles.less
View file

@ -1,6 +1,7 @@
// Copyright (C) 2017-2022 Smart code 203358507
@import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
@import (reference) '~stremio/common/screen-sizes.less';
.addon-container {
display: flex;
@ -166,4 +167,46 @@
}
}
}
}
@media only screen and (max-width: @minimum) {
.addon-container {
flex-wrap: wrap;
.info-container {
margin-left: 0.5rem;
padding: 0;
}
.buttons-container {
flex: 0 1 100%;
width: auto;
margin-top: 1rem;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
.install-button-container, .uninstall-button-container, .share-button-container {
&:not(:first-child) {
margin-top: 0;
}
}
.share-button-container {
.icon {
margin-right: 0;
}
.label {
display: none;
}
}
.install-button-container, .uninstall-button-container {
flex-basis: 100%;
margin-right: 1rem;
}
}
}
}

18
src/routes/Addons/Addons.js
View file

@ -16,6 +16,7 @@ const Addons = ({ urlParams, queryParams }) => {
const remoteAddons = useRemoteAddons(urlParams);
const [addonDetailsTransportUrl, setAddonDetailsTransportUrl] = useAddonDetailsTransportUrl(urlParams, queryParams);
const selectInputs = useSelectableInputs(installedAddons, remoteAddons);
const [filtersModalOpen, openFiltersModal, closeFiltersModal] = useBinaryState(false);
const [addAddonModalOpen, openAddAddonModal, closeAddAddonModal] = useBinaryState(false);
const addAddonUrlInputRef = React.useRef(null);
const addAddonOnSubmit = React.useCallback(() => {
@ -94,6 +95,9 @@ const Addons = ({ urlParams, queryParams }) => {
value={search}
onChange={searchInputOnChange}
/>
<Button className={styles['filter-button']} title={'All filters'} onClick={openFiltersModal}>
<Icon className={styles['filter-icon']} icon={'ic_filter'} />
</Button>
</div>
{
installedAddons.selected !== null ?
@ -169,6 +173,20 @@ const Addons = ({ urlParams, queryParams }) => {
</div>
}
</div>
{
filtersModalOpen ?
<ModalDialog title={'Addons filters'} className={styles['filters-modal']} onCloseRequest={closeFiltersModal}>
{selectInputs.map((selectInput, index) => (
<Multiselect
{...selectInput}
key={index}
className={styles['select-input-container']}
/>
))}
</ModalDialog>
:
null
}
{
addAddonModalOpen ?
<ModalDialog

98
src/routes/Addons/styles.less
View file

@ -1,16 +1,26 @@
// Copyright (C) 2017-2022 Smart code 203358507
@import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
@import (reference) '~stremio/common/screen-sizes.less';
:import('~stremio/common/Multiselect/styles.less') {
multiselect-menu-container: menu-container;
}
:import('~stremio/common/ModalDialog/styles.less') {
share-modal-content: modal-dialog-content;
}
:import('~stremio/common/ModalDialog/styles.less') {
addon-modal-content: modal-dialog-content;
cancel-button-label: label;
}
:import('~stremio/common/ModalDialog/styles.less') {
filters-modal-container: modal-dialog-container;
filters-modal-content: modal-dialog-content;
}
.addons-container {
width: 100%;
height: 100%;
@ -92,6 +102,23 @@
flex-shrink: 1;
flex-basis: 18rem;
}
.filter-button {
flex: none;
display: none;
align-items: center;
justify-content: center;
width: 3.5rem;
height: 3.5rem;
background-color: @color-background;
.filter-icon {
flex: none;
width: 1.4rem;
height: 1.4rem;
fill: @color-secondaryvariant1-90;
}
}
}
.message-container {
@ -115,6 +142,26 @@
}
}
.filters-modal {
.filters-modal-container {
overflow: visible;
.filters-modal-content {
display: flex;
flex-direction: column;
overflow: visible;
.select-input-container {
height: 3.5rem;
&:not(:last-child) {
margin-bottom: 1rem;
}
}
}
}
}
.add-addon-modal-container {
.addon-modal-content {
width: 30rem;
@ -160,7 +207,7 @@
}
.share-modal-container {
.addon-modal-content {
.share-modal-content {
width: 30rem;
.title-container {
@ -217,4 +264,53 @@
margin-top: 1rem;
}
}
}
@media only screen and (max-width: @minimum) {
.addons-container {
.addons-content {
.selectable-inputs-container {
.add-button-container {
position: fixed;
right: 0;
bottom: calc(3rem + var(--horizontal-nav-bar-size));
box-shadow: 0 1.35rem 2.7rem @color-background-dark5-40,
0 1.1rem 0.85rem @color-background-dark5-20;
}
.select-input-container {
display: none;
}
.spacing {
display: none;
}
.search-bar {
flex-basis: 100%;
margin-right: 1rem;
}
.filter-button {
display: flex;
}
}
}
}
.share-modal-container {
.share-modal-content {
width: auto;
}
}
.add-addon-modal-container {
.addon-modal-content {
width: auto;
.notice {
margin-bottom: 1rem;
}
}
}
}

47
src/routes/Board/styles.less
View file

@ -181,4 +181,51 @@
}
}
}
}
@media only screen and (max-width: @minimum) {
.board-container {
position: relative;
z-index: 0;
.board-content-container {
&:only-child {
.board-content {
height: 100%;
}
}
.board-content {
height: calc(100% - 4rem);
.board-row {
margin: 2rem 1rem;
}
.board-row-poster, .board-row-square, .continue-watching-row {
.meta-item, .meta-item-placeholder {
&:nth-child(n+4) {
display: none;
}
}
}
.board-row-landscape {
.meta-item, .meta-item-placeholder {
&:nth-child(n+3) {
display: none;
}
}
}
}
}
.board-warning-container {
position: absolute;
left: 0;
right: 0;
bottom: var(--vertical-nav-bar-size);
height: 4rem;
}
}
}

28
src/routes/Discover/Discover.js
View file

@ -185,23 +185,17 @@ const Discover = ({ urlParams, queryParams }) => {
</div>
{
inputsModalOpen && discover.defaultRequest ?
<ModalDialog title={'Catalog filters'} className={styles['selectable-inputs-modal-container']} onCloseRequest={closeInputsModal}>
{selectInputs.map(({ title, isRequired, options, selected, renderLabelText, onSelect }, index) => (
<div key={index} className={styles['selectable-input-container']}>
<div className={styles['select-input-label']} title={title}>
{title}
{isRequired ? '*' : null}
</div>
<Multiselect
className={styles['select-input']}
mode={'modal'}
title={title}
options={options}
selected={selected}
renderLabelText={renderLabelText}
onSelect={onSelect}
/>
</div>
<ModalDialog title={'Catalog filters'} className={styles['selectable-inputs-modal']} onCloseRequest={closeInputsModal}>
{selectInputs.map(({ title, options, selected, renderLabelText, onSelect }, index) => (
<Multiselect
key={index}
className={styles['select-input']}
title={title}
options={options}
selected={selected}
renderLabelText={renderLabelText}
onSelect={onSelect}
/>
))}
</ModalDialog>
:

88
src/routes/Discover/styles.less
View file

@ -18,6 +18,11 @@
pagination-label: label;
}
:import('~stremio/common/ModalDialog/styles.less') {
selectable-inputs-modal-container: modal-dialog-container;
selectable-inputs-modal-content: modal-dialog-content;
}
.discover-container {
width: 100%;
height: 100%;
@ -235,46 +240,24 @@
}
}
.selectable-inputs-modal-container {
.selectable-input-container {
display: flex;
flex-direction: row;
align-items: center;
.selectable-inputs-modal {
.selectable-inputs-modal-container {
overflow: visible;
&:not(:last-child) {
margin-bottom: 1rem;
}
.selectable-inputs-modal-content {
overflow: visible;
.select-input-label {
flex: none;
width: 10rem;
max-height: 2.4em;
margin-right: 1.5rem;
font-size: 1.1rem;
color: @color-background-dark2-90;
}
.select-input {
height: 3.5rem;
.select-input {
flex: none;
width: 15rem;
height: 3.5rem;
background-color: @color-surface-light2;
&:not(:last-child) {
margin-bottom: 1rem;
}
&:hover, &:focus {
background-color: @color-surface-light3;
}
&:focus {
outline-color: @color-background-dark2;
}
.multiselect-label {
font-weight: normal;
color: @color-background-dark2-90;
}
.multiselect-icon {
fill: @color-background-dark2-90;
.multiselect-menu-container {
max-height: calc(3.2rem * 4);
overflow: auto;
}
}
}
}
@ -437,4 +420,37 @@
}
}
}
}
@media only screen and (max-width: @minimum) {
.discover-container {
.discover-content {
.catalog-container {
.selectable-inputs-container {
flex-direction: row-reverse;
justify-content: space-between;
.select-input {
display: none;
}
.filter-container {
display: flex;
}
.spacing {
display: none;
}
.pagination-input {
margin-left: 0;
}
}
.meta-items-container {
grid-template-columns: repeat(3, 1fr);
}
}
}
}
}

9
src/routes/Intro/PasswordResetModal/styles.less
View file

@ -1,6 +1,7 @@
// Copyright (C) 2017-2022 Smart code 203358507
@import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
@import (reference) '~stremio/common/screen-sizes.less';
:import('~stremio/common/ModalDialog/styles.less') {
password-reset-modal-content: modal-dialog-content;
@ -50,4 +51,12 @@
color: @color-surface-dark4-90;
}
}
}
@media only screen and (max-width: @minimum) {
.password-reset-modal-container {
.password-reset-modal-content {
width: auto;
}
}
}

12
src/routes/Intro/styles.less
View file

@ -1,10 +1,12 @@
// Copyright (C) 2017-2022 Smart code 203358507
@import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
@import (reference) '~stremio/common/screen-sizes.less';
.intro-container {
display: flex;
flex-direction: row;
justify-content: center;
width: 100%;
height: 100%;
background:
@ -234,4 +236,14 @@
animation: 1s linear infinite alternate flash;
}
}
}
@media only screen and (max-width: @minimum) {
.intro-container {
.form-container {
flex: 0 1 auto;
width: 100%;
padding: 2rem 1.5rem;
}
}
}

16
src/routes/Library/Library.js
View file

@ -3,8 +3,9 @@
const React = require('react');
const PropTypes = require('prop-types');
const classnames = require('classnames');
const Icon = require('@stremio/stremio-icons/dom');
const NotFound = require('stremio/routes/NotFound');
const { Button, Multiselect, MainNavBars, LibItem, Image, PaginationInput, useProfile, routesRegexp } = require('stremio/common');
const { Button, Multiselect, MainNavBars, LibItem, Image, ModalDialog, PaginationInput, useProfile, routesRegexp, useBinaryState } = require('stremio/common');
const useLibrary = require('./useLibrary');
const useSelectableInputs = require('./useSelectableInputs');
const styles = require('./styles');
@ -46,6 +47,7 @@ const Library = ({ model, urlParams, queryParams }) => {
const profile = useProfile();
const library = useLibrary(model, urlParams, queryParams);
const [typeSelect, sortSelect, paginationInput] = useSelectableInputs(library);
const [inputsModalOpen, openInputsModal, closeInputsModal] = useBinaryState(false);
return (
<MainNavBars className={styles['library-container']} route={model}>
<div className={styles['library-content']}>
@ -61,6 +63,9 @@ const Library = ({ model, urlParams, queryParams }) => {
:
<PaginationInput label={'1'} className={classnames(styles['pagination-input'], styles['pagination-input-placeholder'])} />
}
<Button className={styles['filter-container']} title={'All filters'} onClick={openInputsModal}>
<Icon className={styles['filter-icon']} icon={'ic_filter'} />
</Button>
</div>
:
null
@ -106,6 +111,15 @@ const Library = ({ model, urlParams, queryParams }) => {
</div>
}
</div>
{
inputsModalOpen ?
<ModalDialog title={'Library filters'} className={styles['selectable-inputs-modal']} onCloseRequest={closeInputsModal}>
<Multiselect {...typeSelect} className={styles['select-input-container']} />
<Multiselect {...sortSelect} className={styles['select-input-container']} />
</ModalDialog>
:
null
}
</MainNavBars>
);
};

70
src/routes/Library/styles.less
View file

@ -14,6 +14,11 @@
pagination-label: label;
}
:import('~stremio/common/ModalDialog/styles.less') {
selectable-inputs-modal-container: modal-dialog-container;
selectable-inputs-modal-content: modal-dialog-content;
}
.library-container {
width: 100%;
height: 100%;
@ -49,6 +54,23 @@
}
}
.filter-container {
flex: none;
display: none;
align-items: center;
justify-content: center;
width: 3.5rem;
height: 3.5rem;
background-color: @color-background;
.filter-icon {
flex: none;
width: 1.4rem;
height: 1.4rem;
fill: @color-secondaryvariant1-90;
}
}
.spacing {
flex: 1;
}
@ -162,6 +184,24 @@
}
}
.selectable-inputs-modal {
.selectable-inputs-modal-container {
overflow: visible;
.selectable-inputs-modal-content {
overflow: visible;
.select-input-container {
height: 3.5rem;
&:not(:last-child) {
margin-bottom: 1rem;
}
}
}
}
}
@media only screen and (min-width: @large) {
.library-container {
.library-content {
@ -230,4 +270,34 @@
}
}
}
}
@media only screen and (max-width: @minimum) {
.library-container {
.library-content {
.selectable-inputs-container {
justify-content: space-between;
.select-input-container {
display: none;
}
.spacing {
display: none;
}
.pagination-input {
margin-left: 0;
}
.filter-container {
display: flex;
}
}
.meta-items-container {
grid-template-columns: repeat(3, 1fr);
}
}
}
}

21
src/routes/MetaDetails/StreamsList/Stream/styles.less
View file

@ -1,6 +1,7 @@
// Copyright (C) 2017-2022 Smart code 203358507
@import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
@import (reference) '~stremio/common/screen-sizes.less';
:import('~stremio/common/PlayIconCircleCentered/styles.less') {
play-icon-circle-centered-background: background;
@ -90,4 +91,24 @@
background-color: @color-primaryvariant1;
}
}
}
@media only screen and (max-width: @minimum) {
.stream-container {
&:hover, &focus {
background-color: @color-surface-light5-20;
}
.thumbnail-container, .addon-name-container {
.addon-name {
font-weight: 500;
}
}
.play-icon {
.play-icon-circle-centered-icon {
fill: @color-surface-light5-90;
}
}
}
}

20
src/routes/MetaDetails/StreamsList/styles.less
View file

@ -1,6 +1,7 @@
// Copyright (C) 2017-2022 Smart code 203358507
@import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
@import (reference) '~stremio/common/screen-sizes.less';
.streams-list-container {
display: flex;
@ -73,4 +74,23 @@
color: @color-surface-light5-90;
}
}
}
@media only screen and (max-width: @minimum) {
.streams-list-container {
overflow: visible;
.streams-container {
margin-top: 0;
scrollbar-color: @color-surface-light5-20 transparent;
&::-webkit-scrollbar-thumb {
background-color: @color-surface-light5-20;
}
&::-webkit-scrollbar-track {
background-color: transparent;
}
}
}
}

1
src/routes/MetaDetails/VideosList/SeasonsBar/SeasonsBar.js
View file

@ -54,6 +54,7 @@ const SeasonsBar = ({ className, seasons, season, onSelect }) => {
<Multiselect
className={styles['seasons-popup-label-container']}
title={season > 0 ? `Season ${season}` : 'Specials'}
direction={'bottom-left'}
options={options}
selected={selected}
onSelect={seasonOnSelect}

13
src/routes/MetaDetails/VideosList/SeasonsBar/styles.less
View file

@ -1,6 +1,7 @@
// Copyright (C) 2017-2022 Smart code 203358507
@import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
@import (reference) '~stremio/common/screen-sizes.less';
:import('~stremio/common/Multiselect/styles.less') {
multiselect-menu-container: menu-container;
@ -80,4 +81,16 @@
overflow: auto;
}
}
}
@media only screen and (max-width: @minimum) {
.seasons-bar-container {
padding-top: 0;
.seasons-popup-label-container {
.multiselect-menu-container {
max-height: calc(3.2rem * 3);
}
}
}
}

67
src/routes/MetaDetails/VideosList/Video/styles.less
View file

@ -1,6 +1,7 @@
// Copyright (C) 2017-2022 Smart code 203358507
@import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
@import (reference) '~stremio/common/screen-sizes.less';
:import('~stremio/common/Popup/styles.less') {
context-menu-container: menu-container;
@ -128,44 +129,52 @@
background-color: @color-primaryvariant1;
}
}
}
.context-menu-container {
max-width: calc(90% - 1.5rem);
&.menu-direction-top-left, &.menu-direction-bottom-left {
right: 1.5rem;
@media only screen and (max-width: @minimum) {
.video-container {
&:hover, &:focus, &:global(.active) {
background-color: @color-surface-light5-20;
}
&.menu-direction-top-right, &.menu-direction-bottom-right {
left: 1.5rem;
}
.context-menu-container {
max-width: calc(90% - 1.5rem);
&.menu-direction-top-left, &.menu-direction-top-right {
bottom: 90%;
}
&.menu-direction-top-left, &.menu-direction-bottom-left {
right: 1.5rem;
}
&.menu-direction-bottom-left, &.menu-direction-bottom-right {
top: 90%;
}
&.menu-direction-top-right, &.menu-direction-bottom-right {
left: 1.5rem;
}
.context-menu-content {
--spatial-navigation-contain: contain;
background-color: @color-background-dark1;
&.menu-direction-top-left, &.menu-direction-top-right {
bottom: 90%;
}
.context-menu-option-container {
display: flex;
flex-direction: row;
align-items: center;
padding: 0.5rem 1rem;
&.menu-direction-bottom-left, &.menu-direction-bottom-right {
top: 90%;
}
&:hover, &:focus {
background-color: @color-background;
}
.context-menu-content {
--spatial-navigation-contain: contain;
background-color: @color-background-dark1;
.context-menu-option-label {
font-size: 1rem;
max-height: 2.4em;
color: @color-surface-light5-90;
.context-menu-option-container {
display: flex;
flex-direction: row;
align-items: center;
padding: 0.5rem 1rem;
&:hover, &:focus {
background-color: @color-background;
}
.context-menu-option-label {
font-size: 1rem;
max-height: 2.4em;
color: @color-surface-light5-90;
}
}
}
}

7
src/routes/MetaDetails/VideosList/styles.less
View file

@ -1,6 +1,7 @@
// Copyright (C) 2017-2022 Smart code 203358507
@import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
@import (reference) '~stremio/common/screen-sizes.less';
.videos-list-container {
display: flex;
@ -54,4 +55,10 @@
align-self: stretch;
overflow-y: auto;
}
}
@media only screen and (max-width: @minimum) {
.videos-list-container {
overflow: visible;
}
}

26
src/routes/MetaDetails/styles.less
View file

@ -125,4 +125,30 @@
height: 100%;
}
}
}
@media only screen and (max-width: @minimum) {
.metadetails-container {
position: relative;
z-index: 0;
.metadetails-content {
display: block;
position: static;
z-index: initial;
overflow-y: auto;
.spacing {
display: none;
}
.background-image-layer {
top: var(--horizontal-nav-bar-size);
}
.videos-list, .streams-list {
background-color: transparent;
}
}
}
}

35
src/routes/Player/ControlBar/ControlBar.js
View file

@ -9,6 +9,7 @@ const { useServices } = require('stremio/services');
const SeekBar = require('./SeekBar');
const VolumeSlider = require('./VolumeSlider');
const styles = require('./styles');
const { useBinaryState } = require('stremio/common');
const ControlBar = ({
className,
@ -32,6 +33,7 @@ const ControlBar = ({
}) => {
const { chromecast } = useServices();
const [chromecastServiceActive, setChromecastServiceActive] = React.useState(() => chromecast.active);
const [buttonsMenuOpen, , , toogleButtonsMenu] = useBinaryState(false);
const onSubtitlesButtonMouseDown = React.useCallback((event) => {
event.nativeEvent.subtitlesMenuClosePrevented = true;
}, []);
@ -112,21 +114,26 @@ const ControlBar = ({
onVolumeChangeRequested={onVolumeChangeRequested}
/>
<div className={styles['spacing']} />
<Button className={classnames(styles['control-bar-button'], 'disabled')} tabIndex={-1}>
<Icon className={styles['icon']} icon={'ic_network'} />
</Button>
<Button className={classnames(styles['control-bar-button'], { 'disabled': metaItem === null || metaItem.type !== 'Ready' })} tabIndex={-1} onMouseDown={onInfoButtonMouseDown} onClick={onInfoButtonClick}>
<Icon className={styles['icon']} icon={'ic_info'} />
</Button>
<Button className={classnames(styles['control-bar-button'], { 'disabled': !chromecastServiceActive })} tabIndex={-1} onClick={onChromecastButtonClick}>
<Icon className={styles['icon']} icon={'ic_cast'} />
</Button>
<Button className={classnames(styles['control-bar-button'], { 'disabled': (!Array.isArray(subtitlesTracks) || subtitlesTracks.length === 0) && (!Array.isArray(audioTracks) || audioTracks.length === 0) })} tabIndex={-1} onMouseDown={onSubtitlesButtonMouseDown} onClick={onSubtitlesButtonClick}>
<Icon className={styles['icon']} icon={'ic_sub'} />
</Button>
<Button className={classnames(styles['control-bar-button'], 'disabled')} tabIndex={-1}>
<Icon className={styles['icon']} icon={'ic_videos'} />
<Button className={styles['control-bar-buttons-menu-button']} onClick={toogleButtonsMenu}>
<Icon className={styles['icon']} icon={'ic_more'} />
</Button>
<div className={classnames(styles['control-bar-buttons-menu-container'], { 'open': buttonsMenuOpen })}>
<Button className={classnames(styles['control-bar-button'], 'disabled')} tabIndex={-1}>
<Icon className={styles['icon']} icon={'ic_network'} />
</Button>
<Button className={classnames(styles['control-bar-button'], { 'disabled': metaItem === null || metaItem.type !== 'Ready' })} tabIndex={-1} onMouseDown={onInfoButtonMouseDown} onClick={onInfoButtonClick}>
<Icon className={styles['icon']} icon={'ic_info'} />
</Button>
<Button className={classnames(styles['control-bar-button'], { 'disabled': !chromecastServiceActive })} tabIndex={-1} onClick={onChromecastButtonClick}>
<Icon className={styles['icon']} icon={'ic_cast'} />
</Button>
<Button className={classnames(styles['control-bar-button'], { 'disabled': (!Array.isArray(subtitlesTracks) || subtitlesTracks.length === 0) && (!Array.isArray(audioTracks) || audioTracks.length === 0) })} tabIndex={-1} onMouseDown={onSubtitlesButtonMouseDown} onClick={onSubtitlesButtonClick}>
<Icon className={styles['icon']} icon={'ic_sub'} />
</Button>
<Button className={classnames(styles['control-bar-button'], 'disabled')} tabIndex={-1}>
<Icon className={styles['icon']} icon={'ic_videos'} />
</Button>
</div>
</div>
</div>
);

58
src/routes/Player/ControlBar/styles.less
View file

@ -1,6 +1,7 @@
// Copyright (C) 2017-2022 Smart code 203358507
@import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
@import (reference) '~stremio/common/screen-sizes.less';
.control-bar-container {
padding: 0 1.5rem;
@ -52,5 +53,62 @@
.spacing {
flex: 1;
}
.control-bar-buttons-menu-button {
flex: none;
width: 4rem;
height: 4rem;
display: none;
justify-content: center;
align-items: center;
.icon {
flex: none;
width: 3rem;
height: 2rem;
fill: @color-surface-light5;
}
}
.control-bar-buttons-menu-container {
flex: none;
display: flex;
flex-direction: row;
}
}
}
@media only screen and (max-width: @minimum) {
.control-bar-container {
padding: 0;
.seek-bar {
margin: 0 1.5rem;
}
.control-bar-buttons-container {
position: relative;
padding: 0 0.5rem;
overflow: visible;
.control-bar-buttons-menu-button {
display: flex;
}
.control-bar-buttons-menu-container {
position: absolute;
right: 0.15rem;
bottom: 4.5rem;
flex-direction: column;
padding: 0.5rem;
background-color: @color-background-dark1;
box-shadow: 0 1.35rem 2.7rem @color-background-dark5-40,
0 1.1rem 0.85rem @color-background-dark5-20;
&:not(:global(.open)) {
display: none;
}
}
}
}
}

26
src/routes/Search/styles.less
View file

@ -218,4 +218,30 @@
}
}
}
}
@media only screen and (max-width: @minimum) {
.search-container {
.search-content {
.search-row {
margin: 2rem 1rem;
}
.search-row-poster, .search-row-square {
.meta-item, .meta-item-placeholder {
&:nth-child(n+4) {
display: none;
}
}
}
.search-hints-container {
padding: 4rem 2rem;
.search-hint-container {
padding: 0 1.5rem;
}
}
}
}
}

29
src/routes/Settings/styles.less
View file

@ -1,6 +1,7 @@
// Copyright (C) 2017-2022 Smart code 203358507
@import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
@import (reference) '~stremio/common/screen-sizes.less';
:import('~stremio/common/Checkbox/styles.less') {
checkbox-icon: icon;
@ -357,4 +358,32 @@
color: @color-surface-dark2;
}
}
}
@media only screen and (max-width: @minimum) {
.settings-container {
.settings-content {
flex-direction: column-reverse;
.side-menu-container {
width: 100%;
padding: 0 1rem;
.side-menu-button {
display: none;
}
.version-info-label {
width: 100%;
text-align: end;
}
}
}
}
.configure-server-url-modal-container {
.configure-server-url-modal-content {
width: auto;
}
}
}