he4et/elseifplayer
1
0
Fork 0
mirror of https://github.com/He4eT/elseifplayer.git synced 2026-05-05 01:17:22 +00:00
Code Issues Projects Releases Packages Wiki Activity

MenuButton: markup for small screens

Browse source
This commit is contained in:
He4eT 2023-06-04 01:43:36 +03:00
commit d65880ec82
6 changed files with 19 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

10
src/components/Player/InputBox/MenuButton/MenuButton.jsx
View file

@ -1,8 +1,8 @@
import { h } from 'preact'
import s from './MenuButton.module.scss'
import * as s from './MenuButton.module.scss'
export default MenuButton = ({ onClick }) => {
export default function MenuButton ({ onClick }) {
return (
<button
aria-label='Menu'
@ -14,9 +14,9 @@ export default MenuButton = ({ onClick }) => {
viewBox='0 0 28 32'
xmlns='http://www.w3.org/2000/svg'
>
<rect x='12' y='4' width='4' height='4'></rect>
<rect x='12' y='14' width='4' height='4'></rect>
<rect x='12' y='24' width='4' height='4'></rect>
<rect x='12' y='4' width='4' height='4' />
<rect x='12' y='14' width='4' height='4' />
<rect x='12' y='24' width='4' height='4' />
</svg>
</button>
)

10
src/components/Player/InputBox/MenuButton/MenuButton.module.scss
View file

@ -10,6 +10,11 @@
height: 100%;
padding: 0;
@media (max-width: 800px) {
padding: 0 calc(0.5 * var(--inner-padding));
overflow: hidden;
}
&:focus-visible {
outline-offset: -4px;
}
@ -19,5 +24,10 @@
fill: none;
stroke: currentColor;
stroke-width: 2px;
@media (max-width: 800px) {
transform: scaleX(2) scaleY(0.5);
fill: currentColor;
}
}
}

2
src/components/Player/OutputBox/GridBuffer.jsx
View file

@ -57,7 +57,7 @@ export default function GridBuffer ({ inbox, currentWindow }) {
const getGridStyle = ({style}) => {
if (['alert', 'normal'].includes(style)) return 'grid'
else return style || 'grid'
return style || 'grid'
}
const messages =

2
src/components/Player/Player.jsx
View file

@ -11,7 +11,7 @@ import Status from './Status/Status'
import {
Handlers,
unhandledRejectionHandler
unhandledRejectionHandler,
} from './common/playerHandlers'
import './player.css'

2
src/components/Player/player.css
View file

@ -29,7 +29,7 @@
border: var(--border-width) solid var(--main-color);
border-top: var(--separator-width) solid var(--main-color);
padding: var(--inner-padding);
padding-right: calc(3 * var(--inner-padding));
padding-right: calc(4 * var(--inner-padding));
margin: 0;
width: 100%;
}

2
src/views/PlayerView/PlayerView.jsx
View file

@ -34,7 +34,7 @@ export default function PlayerView ({
onFullscreenRequest,
menuOpen,
setMenuOpen,
}}/>
}} />
<UrlPlayer {...{
url: targetUrl,
onFullscreenRequest,