Make a bit more tiny screen friendly.
This commit is contained in:
parent
385bc83eb2
commit
4bc66c74cc
4 changed files with 62 additions and 48 deletions
34
src/App.scss
34
src/App.scss
|
@ -24,24 +24,32 @@ $number-of-channels: 3;
|
|||
}
|
||||
|
||||
.hover-menu {
|
||||
.hover-label {
|
||||
.hover-label:not(.always-show) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-height: 900px) {
|
||||
.hide-low-height {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-height: 900px) {
|
||||
.hover-label {
|
||||
font-size: 10px;
|
||||
margin-top: -5px;
|
||||
display: block;
|
||||
width: 100%;
|
||||
.item {
|
||||
font-size: 0.92em;
|
||||
}
|
||||
|
||||
.hover-menu {
|
||||
.btn {
|
||||
padding-top: 0.1em;
|
||||
padding-bottom: 0.1em;
|
||||
font-size: 0.75em;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
height: 100%;
|
||||
|
||||
.hover-label-hide {
|
||||
display: none;
|
||||
}
|
||||
.hover-label {
|
||||
font-size: 10px;
|
||||
margin-top: -2px;
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&:not(:hover) {
|
||||
|
|
|
@ -488,7 +488,10 @@ export function Player({ id, pfl }: { id: number; pfl: boolean }) {
|
|||
|
||||
export function PflPlayer() {
|
||||
return (
|
||||
<div id="pfl-player">
|
||||
<div id="pfl-player" className="hover-menu">
|
||||
<span className="mx-1 hover-label always-show">
|
||||
Preview Player (Headphones Only)
|
||||
</span>
|
||||
<Player id={PLAYER_ID_PREVIEW} pfl={true} />
|
||||
</div>
|
||||
);
|
||||
|
|
|
@ -73,40 +73,43 @@ export function LibraryColumn() {
|
|||
/>
|
||||
<div className="library-column">
|
||||
<div className="mx-2 mb-2">
|
||||
<h2>
|
||||
<FaBookOpen className="mx-2" size={28} />
|
||||
<h2 className="h3 hide-low-height">
|
||||
<FaBookOpen className="mx-2" size={25} />
|
||||
Libraries
|
||||
</h2>
|
||||
<Button
|
||||
className="mr-1"
|
||||
color="primary"
|
||||
title="Auto Playout"
|
||||
size="sm"
|
||||
outline={true}
|
||||
onClick={() => setAutoPlayoutModal(true)}
|
||||
>
|
||||
<FaPlayCircle /> Auto Playout
|
||||
</Button>
|
||||
<Button
|
||||
className="mr-1"
|
||||
color="primary"
|
||||
title="Import From Showplan"
|
||||
size="sm"
|
||||
outline={true}
|
||||
onClick={() => setShowImporterModal(true)}
|
||||
>
|
||||
<FaFileImport /> Import
|
||||
</Button>
|
||||
<Button
|
||||
className="mr-1"
|
||||
color="primary"
|
||||
title="Upload to Library"
|
||||
size="sm"
|
||||
outline={true}
|
||||
onClick={() => setShowLibraryModal(true)}
|
||||
>
|
||||
<FaUpload /> Upload
|
||||
</Button>
|
||||
<div className="row m-0 p-1 card-header hover-menu">
|
||||
<span className="hover-label">Hover for Import & Tools</span>
|
||||
<Button
|
||||
className="mr-1"
|
||||
color="primary"
|
||||
title="Import From Showplan"
|
||||
size="sm"
|
||||
outline={true}
|
||||
onClick={() => setShowImporterModal(true)}
|
||||
>
|
||||
<FaFileImport /> Import
|
||||
</Button>
|
||||
<Button
|
||||
className="mr-1"
|
||||
color="primary"
|
||||
title="Upload to Library"
|
||||
size="sm"
|
||||
outline={true}
|
||||
onClick={() => setShowLibraryModal(true)}
|
||||
>
|
||||
<FaUpload /> Upload
|
||||
</Button>
|
||||
<Button
|
||||
className="mr-1"
|
||||
color="primary"
|
||||
title="Auto Playout"
|
||||
size="sm"
|
||||
outline={true}
|
||||
onClick={() => setAutoPlayoutModal(true)}
|
||||
>
|
||||
<FaPlayCircle /> Auto Playout
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="px-2">
|
||||
<select
|
||||
|
|
|
@ -43,8 +43,8 @@ function MicControl() {
|
|||
return (
|
||||
<div className="mic-control">
|
||||
<div data-toggle="collapse" data-target="#mic-control-menu">
|
||||
<h2>
|
||||
<FaMicrophone className="mx-1" size={28} />
|
||||
<h2 className="h3">
|
||||
<FaMicrophone className="mx-1" size={25} />
|
||||
Microphone
|
||||
</h2>
|
||||
<FaBars
|
||||
|
|
Loading…
Reference in a new issue