From 4bc66c74cc97c1dc9b1ff0988e47eb18cb69f388 Mon Sep 17 00:00:00 2001
From: Matthew Stratford <hi@mstratford.net>
Date: Sat, 30 Jan 2021 00:57:46 +0000
Subject: [PATCH] Make a bit more tiny screen friendly.

---
 src/App.scss                  | 34 +++++++++++-------
 src/showplanner/Player.tsx    |  5 ++-
 src/showplanner/libraries.tsx | 67 ++++++++++++++++++-----------------
 src/showplanner/sidebar.tsx   |  4 +--
 4 files changed, 62 insertions(+), 48 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index 18ae0b8..3d15c3a 100644
--- a/src/App.scss
+++ b/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) {
diff --git a/src/showplanner/Player.tsx b/src/showplanner/Player.tsx
index 7ca95b5..1706035 100644
--- a/src/showplanner/Player.tsx
+++ b/src/showplanner/Player.tsx
@@ -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>
   );
diff --git a/src/showplanner/libraries.tsx b/src/showplanner/libraries.tsx
index 3aa118b..802b7f1 100644
--- a/src/showplanner/libraries.tsx
+++ b/src/showplanner/libraries.tsx
@@ -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
diff --git a/src/showplanner/sidebar.tsx b/src/showplanner/sidebar.tsx
index 4f65495..1f525f5 100644
--- a/src/showplanner/sidebar.tsx
+++ b/src/showplanner/sidebar.tsx
@@ -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