Merge pull request #251 from alejandroclose/master

fix: mobile ui sidebar and sentence review
common-voice · Sep 30, 2019 · ddb89f3 · ddb89f3
2 parents 3ca5d0f + f644506
commit ddb89f3
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 7 deletions.
diff --git a/web/css/review-form.css b/web/css/review-form.css
@@ -1,3 +1,19 @@
+/* media query */
+@media screen and (max-width: 1024px) {
+  .validator {
+    --validator-height: 10.5rem;
+   }
+
+  .sentence-box {
+    --sentence-box-height: 10.25rem;
+    --sentence-box-font-size: 1.5rem;
+  }
+
+   .validator .button-group button {
+    --button-padding: 1.75rem;
+  }
+ }
+
 .validator {
   --validator-height: 6.6rem;
   height: var(--validator-height);
@@ -8,13 +24,16 @@
 }
 
 .sentence-box {
-  height: 6rem;
+  --sentence-box-height: 6rem;
+  --sentence-box-font-size: var(--base-font-size);
+  height: var(--sentence-box-height);
   border: 1px solid var(--grey-color);
   flex-basis: 100%;
   line-height: 1rem;
   justify-content: center;
   align-items: center;
   display: flex;
+  font-size: var(--sentence-box-font-size)
 }
 
 .validator li {
@@ -31,9 +50,11 @@
 }
 
 .validator .button-group button {
+  --button-padding: .7rem 1.3rem;
   border: 1px solid var(--grey-color);
   font-size: 1.3em;
   margin: 0.2em;
+  padding: var(--button-padding);
 }
 
 .validator .button-group button.secondary.yes {

diff --git a/web/css/root.css b/web/css/root.css
@@ -220,7 +220,7 @@ form input[type="checkbox"] {
   bottom: 1px;
 }
 
-form input[type="password"], 
+form input[type="password"],
 form input[type="text"] {
   width: 100%;
   margin-bottom: 0.5rem;

diff --git a/web/src/components/header-btn.jsx b/web/src/components/header-btn.jsx
@@ -1,11 +1,10 @@
 import React from 'react';
 
 export default class HeaderBtn extends React.Component {
-
   render() {
       return (
         <button className={this.props.isOpen ? "header-btn header-btn-open" : "header-btn header-btn-closed"} onClick={this.props.handleClick.bind(this)}>
-          <div className={this.props.arrow}></div>
+          <div className={this.props.isOpen ? "header-btn-arrow" : "header-btn-arrow header-btn-arrow-right"}></div>
         </button>
       )
     }

diff --git a/web/src/components/page.jsx b/web/src/components/page.jsx
@@ -3,7 +3,7 @@ import React from 'react';
 import Header from '../containers/header';
 import HeaderBtn from './header-btn';
 
-let DEFAULT_STATE = {
+const DEFAULT_STATE = {
   headerIsOpen: true,
 }
 
@@ -25,7 +25,7 @@ export default class Page extends React.Component {
       return [
         <Header key="header" />,
         <div id="page" key="page">
-          <HeaderBtn arrow="header-btn-arrow" isOpen={this.state.headerIsOpen} handleClick={this.handleClick} />
+          <HeaderBtn  isOpen={this.state.headerIsOpen} handleClick={this.handleClick} />
           <main key="main">
             {this.props.children}
           </main>
@@ -35,7 +35,7 @@ export default class Page extends React.Component {
     } else {
       return [
         <div id="page" key="page">
-          <HeaderBtn arrow="header-btn-arrow header-btn-arrow-right" handleClick={this.handleClick} />
+          <HeaderBtn handleClick={this.handleClick} />
           <main key="main">
             {this.props.children}
           </main>