From 6fda37feb56bbac4520af4e9471d822c11f24ff4 Mon Sep 17 00:00:00 2001
From: He4eT <He4eTHb1u@gmail.com>
Date: Sun, 28 Feb 2021 03:31:58 +0500
Subject: [PATCH] Add basic styles

---
 src/components/player/Player.jsx |  4 +++-
 src/components/player/player.css | 26 ++++++++++++++++++++++++++
 src/style/base.css               | 14 ++++++++++++++
 src/views/PlayerView.jsx         |  5 +----
 4 files changed, 44 insertions(+), 5 deletions(-)
 create mode 100644 src/components/player/player.css

diff --git a/src/components/player/Player.jsx b/src/components/player/Player.jsx
index c8caa16..cb0501f 100644
--- a/src/components/player/Player.jsx
+++ b/src/components/player/Player.jsx
@@ -10,6 +10,8 @@ import CheapGlkOte from 'cheap-glkote'
 import TextBuffer from './TextBuffer'
 import InputBox from './InputBox'
 
+import './player.css'
+
 const INITIAL_STATUS = {
   stage: 'loading',
   details: 'Preparing...'
@@ -104,7 +106,7 @@ export default function ({ vmParts: { file, engine } }) {
   return status.stage !== 'ready'
     ? (<div>{status.details}</div>)
     : (
-      <section>
+      <section className='ifplayer'>
         <TextBuffer {...{
           inbox,
           currentWindow
diff --git a/src/components/player/player.css b/src/components/player/player.css
new file mode 100644
index 0000000..a10df37
--- /dev/null
+++ b/src/components/player/player.css
@@ -0,0 +1,26 @@
+.ifplayer {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+
+  padding: 8px;
+}
+
+.inputBox {
+  flex: 0 1 auto;
+
+  border: 2px solid #000;
+  padding: 8px;
+}
+
+.textBuffer {
+  flex: 2 1 auto;
+  overflow-y: scroll;
+  box-sizing: border-box;
+
+  border: 2px solid #000;
+  padding: 8px;
+  margin-bottom: 8px;
+}
+
diff --git a/src/style/base.css b/src/style/base.css
index 6e8a07a..7ae20a9 100644
--- a/src/style/base.css
+++ b/src/style/base.css
@@ -1,3 +1,17 @@
 html, body {
   margin: 0;
 }
+
+body {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+}
+
+#root {
+  height: 100%;
+}
+
+.app {
+  height: 100%;
+}
diff --git a/src/views/PlayerView.jsx b/src/views/PlayerView.jsx
index 7886df2..4c51a27 100644
--- a/src/views/PlayerView.jsx
+++ b/src/views/PlayerView.jsx
@@ -14,8 +14,5 @@ export default function ({ setTheme, theme, encodedUrl }) {
     setTargetUrl(decode(encodedUrl))
   }, [encodedUrl])
 
-  return (
-    <main>
-      <UrlPlayer url={targetUrl} />
-    </main>)
+  return (<UrlPlayer url={targetUrl} />)
 }