fix: mobile swipecards based UI - more requested changes

common-voice · Nov 9, 2019 · 7c5607d · 7c5607d
1 parent 23ce694
commit 7c5607d
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 53 deletions.
diff --git a/web/css/review-form.css b/web/css/review-form.css
@@ -123,8 +123,8 @@
 .master-root {
  margin: 20px auto;
  position: relative;
- height: calc(6rem + 120px + 2em);
- width: calc(380px + 2em);
+ height: calc(6rem + 2em);
+ width: calc(250px + 2em);
  overflow: hidden;
  border: 1px solid #e5e5e5;
 }
@@ -135,7 +135,6 @@
  background: #F8F3F3;
  height: 6rem;
  width: 250px;
- margin: 0 auto;
  transition: box-shadow .3s;
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
  cursor: pointer;

diff --git a/web/src/components/review-form.jsx b/web/src/components/review-form.jsx
@@ -10,7 +10,7 @@ const PAGE_SIZE = 5;
 const DEFAULT_STATE = {
  page: 0,
 };
-let mobileUI = true;
+let mobileUI = false;
 
 export default class ReviewForm extends React.Component {
  constructor(props) {
@@ -102,48 +102,37 @@ export default class ReviewForm extends React.Component {
  const curSentences = this.props.sentences.slice(offset, offset + PAGE_SIZE);
 
  if (mobileUI) {
- let message = (<p>Swipe right to approve sentencee, swipe left to reject it.</p>);
+ let message = (<p>You have not reviewed any sentences yet!</p>);
  if (this.state.page !== 0) {
- message = (<p>You have succesfully reviewed your {this.state.page * PAGE_SIZE}th sentence!</p>)
+ message = (<p>You have successfully reviewed your {this.state.page * PAGE_SIZE}th sentence!</p>)
  }
 
  return (
  <form id="review-form" onSubmit={this.onSubmit}>
+ <p>Swipe right to approve sentence, swipe left to reject it.</p>
  {message}
- <Cards onEnd={() => {
- if (this.state.page === this.getLastPage()) {
- this.onSubmit({preventDefault: ()=>{}});
- } else {
- this.setPage(this.state.page + 1);
- this.cardsRef.current.setState({index: -1});//cardsRef.state.index modified due to Cards' inner card removal handling.
- }
- }} className="master-root" ref={this.cardsRef}>
- {curSentences.map((sentence, i) => (
- <Card
- key={offset + i}
- onSwipeLeft={() => this.reviewSentence(offset + i, false)}
- onSwipeRight={() => this.reviewSentence(offset + i, true)}
- >
- <div className="card-sentence-box">
- {sentence.sentence || sentence}
- </div>
- </Card>
- ))}
- </Cards>
- <section className="review-footer">
- <section id="confirm-buttons" className="divCenter">
- { this.state.pendingSentences ?
- <SpinnerButton></SpinnerButton> :
- <button type="submit">Finish Review</button>
+ <Cards onEnd={() => {
+ if (this.state.page === this.getLastPage()) {
+ this.onSubmit({preventDefault: ()=>{}});
+ } else {
+ this.setPage(this.state.page + 1);
+ this.cardsRef.current.setState({index: -1});//cardsRef.state.index modified due to Cards' inner card removal handling.
  }
-
- { this.state.pendingSentences && (
- <div>
- <p className="loadingText">Reviews are being uploaded. This can take several minutes depending on the number of sentences added.
- Please don't close this website.</p>
- </div>
- )}
- </section>
+ }} className="master-root" ref={this.cardsRef}>
+ {curSentences.map((sentence, i) => (
+ <Card
+ key={offset + i}
+ onSwipeLeft={() => this.reviewSentence(offset + i, false)}
+ onSwipeRight={() => this.reviewSentence(offset + i, true)}
+ >
+ <div className="card-sentence-box">
+ {sentence.sentence || sentence}
+ </div>
+ </Card>
+ ))}
+ </Cards>
+ <section className="review-footer">
+ <ConfirmButtons pendingSentences={this.state.pendingSentences}/>
  </section>
  </form>
  );
@@ -178,20 +167,7 @@ export default class ReviewForm extends React.Component {
  )) }
 
  <section className="review-footer">
- <section id="confirm-buttons" className="divCenter">
- { this.state.pendingSentences ?
- <SpinnerButton></SpinnerButton> :
- <button type="submit">Finish Review</button>
- }
-
- { this.state.pendingSentences && (
- <div>
- <p className="loadingText">Reviews are being uploaded. This can take several minutes depending on the number of sentences added.
- Please don't close this website.</p>
- </div>
- )}
- </section>
-
+ <ConfirmButtons pendingSentences={this.state.pendingSentences}/>
  <Pager page={this.state.page} lastPage={this.getLastPage()}
  onPage={this.setPage} />
  </section>
@@ -225,3 +201,19 @@ const Pager = (props) => (
  ))
  }</section>
 );
+
+const ConfirmButtons = (props) => (
+ <section id="confirm-buttons" className="divCenter">
+ { props.pendingSentences ?
+ <SpinnerButton></SpinnerButton> :
+ <button type="submit">Finish Review</button>
+ }
+
+ { props.pendingSentences && (
+ <div>
+ <p className="loadingText">Reviews are being uploaded. This can take several minutes depending on the number of sentences added.
+ Please don&apos;t close this website.</p>
+ </div>
+ )}
+ </section>
+);