changed styling (brooke will probably shoot me)

src/App.css

@@ -32,18 +32,25 @@
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
+  height: 100%;
 }
 
 .sp-col {
   display: block;
-  flex: 1;
-  /*height: calc(100% - 60px);*/
+  height: 80%;
   overflow-y: scroll;
+  border: 1px solid black;
+  margin-left: .2vw;
+  margin-right: .2vw;
+  padding: .2vw;
+}
+
+.sp-main-col{
+  flex: 1;
 }
 
 .sp-col-inner {
-  border: 1px solid black;
-  height: 90%;
+  height: 99%;
 }
 
 .sp-track {
@@ -97,3 +104,9 @@ html, body, #root {
 .sp-state-stopped {
   background-color: #db2c2c;
 }
+
+.mediaButtons button{
+  width: 33%;
+  height: 100%;
+}
+

src/App.tsx

@@ -18,6 +18,12 @@ const App: React.FC = () => {
     force();
   }
 
+  function enterKeyCont(key: string) {
+      if (key == 'Enter'){
+        cont()
+      }
+  }
+
   const q = qs.parse(window.location.search, { ignoreQueryPrefix: true });
   if ("timeslot_id" in q) {
     return (
@@ -34,6 +40,7 @@ const App: React.FC = () => {
           placeholder="enter a timeslot id"
           value={inputVal}
           onChange={e => setInputVal(e.target.value)}
+          onKeyPress={e=>enterKeyCont(e.key)}
         />
         <button onClick={cont}>Continue</button>
       </div>

src/showplanner/index.tsx

@@ -80,10 +80,11 @@ function Player({ id }: { id: number }) {
   const dispatch = useDispatch();
 
   return (
-    <div>
+    <div style={{height:"16%"}}>
       {playerState.loadedItem == null && (<div>No Media Selected</div>)}
-      {playerState.loadedItem !== null && (<div>{playerState.loadedItem.title}</div>)}
+      {(playerState.loadedItem !== null && playerState.loading == false) && (<div>{playerState.loadedItem.title}</div>)}
       {playerState.loading && <b>LOADING</b>}
+      <div className="mediaButtons" style={{height:"100%"}}>
       <button
         onClick={() => dispatch(PlayerState.play(id))}
         className={playerState.state === "playing" ? "sp-state-playing" : ""}
@@ -97,11 +98,13 @@ function Player({ id }: { id: number }) {
         className={playerState.state === "stopped" ? "sp-state-stopped" : ""}
       >s</button>
       </div>
+    </div>
   );
 }
 
 function Column({ id, data }: { id: number; data: PlanItem[] }) {
   return (
+    <div className="sp-main-col">
       <div className="sp-col">
         <Droppable droppableId={id.toString(10)}>
           {(provided, snapshot) => (
@@ -122,6 +125,7 @@ function Column({ id, data }: { id: number; data: PlanItem[] }) {
             </div>
           )}
         </Droppable>
+      </div>
       <Player id={id} />
     </div>
   );
@@ -170,7 +174,8 @@ function CentralMusicLibrary() {
 function LibraryColumn() {
   const [sauce, setSauce] = useState("None");
   return (
-    <div className="sp-col">
+    <div className="sp-main-col">
+      <div className="sp-col" style={{height:"98%"}}>
         <select
           style={{ width: "100%" }}
           value={sauce}
@@ -183,6 +188,7 @@ function LibraryColumn() {
         </select>
         {sauce === "CentralMusicLibrary" && <CentralMusicLibrary />}
       </div>
+    </div>
   );
 }