responsive table data entry

bbailey27 · Dec 30, 2019 · ca6e69b · ca6e69b
1 parent b33dd3f
commit ca6e69b
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 3 deletions.
diff --git a/src/App.css b/src/App.css
@@ -81,13 +81,23 @@
 .table-list {
   padding-left: 0;
   margin: 0;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
 }
 
 .table-row {
   display: flex;
   flex-direction: row;
 }
 
+@media (max-width: 800px) {
+  .table-row {
+    flex-direction: column;
+    padding: 1.5rem 0;
+  }
+}
+
 .result-list-item {
   list-style: none;
 }
@@ -96,8 +106,14 @@
   margin: 1.5rem;
 }
 
+.remove-button {
+  background-color: #eb4034;
+  color: white;
+  font-weight: bolder;
+}
+
 .run-button {
-  background-color: lightblue;
+  background-color: rgb(140, 185, 253);
   height: 3rem;
   width: 7rem;
   font-size: medium;

diff --git a/src/Components/DataEntry.jsx b/src/Components/DataEntry.jsx
@@ -144,7 +144,7 @@ class DataEntry extends Component {
     this.setState({firstRun: false});
   }
 }
-
+// TODO change to across the top to have more room for table data entry
   render() {
     const {
       options,

diff --git a/src/Components/Tables.jsx b/src/Components/Tables.jsx
@@ -117,7 +117,7 @@ class Tables extends Component {
 
   render() {
     return (
-      <div className='tables'>
+      <div className='tables data-entry-section'>
         <h3>Tables</h3>
         <p style={{padding:'0 1rem', marginTop: 0}}>(Optional) Please enter a comma-separated list of games for each round</p>
         {this.renderTableRows()}