Make a bit more tiny screen friendly.

This commit is contained in:
Matthew Stratford 2021-01-30 00:57:46 +00:00
parent 385bc83eb2
commit 4bc66c74cc
4 changed files with 62 additions and 48 deletions

View file

@ -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) {

View file

@ -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>
);

View file

@ -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 &amp; 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

View file

@ -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