Flexbox. Yay flexbox!

colinmorris · Mar 7, 2017 · 3199d60 · 3199d60
1 parent 3485649
commit 3199d60
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 16 deletions.
diff --git a/src/LyricsPane.css b/src/LyricsPane.css
@@ -4,21 +4,6 @@
     text-align: center;
 }
 
-@media (max-width: 800px) {
-    div.words {
-        column-count: 1;
-    }
-    .lyricsPane {
-        width: 300px;
-    }
-}
-
-@media (min-width: 800px) {
-    div.words {
-        column-count: 2;
-    }
-}
-
 textarea {
     width: 90%;
 }
@@ -28,4 +13,5 @@ textarea {
     border-style: solid;
     border-color: rgb(240, 240, 255);
     min-height: 25vh;
+    column-width: 15em;
 }
diff --git a/src/LyricsPane.js b/src/LyricsPane.js
@@ -5,6 +5,8 @@ import './LyricsPane.css';
 import Word from './Word.js';
 import { NOINDEX } from './constants.js';
 
+/** Shows the entire current verse in a big multi-column block. Not responsible
+ * for the editing view. */
 class LyricsPane extends Component {
 
   renderWord = (word) => {

diff --git a/src/Songsim.css b/src/Songsim.css
@@ -1,8 +1,14 @@
 .mainContainer {
     display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
     margin: 10px;
 }
 
+.matrixPane {
+    flex: none;
+}
+
 .mainContainerMobile {
 
 }
@@ -15,4 +21,5 @@
 }
 
 .lyricsPane {
+    flex: 1 1 auto;
 }
diff --git a/src/Songsim.js b/src/Songsim.js
@@ -388,7 +388,9 @@ class Songsim extends Component {
     return (
       <div>
         <div className="container-fluid mainContainer">
-          {matrix}
+          <div className="matrixPane">
+            {matrix}
+          </div>
           <div className="lyricsPane">
               <SongSelector
                 selected={this.state.verse && this.state.verse.id}