fix: swipe tool design adjustments and use all sentences instead of p…

…agination / better messaging

web/css/review-form.css

@@ -4,16 +4,19 @@
  --validator-height: 10.5rem;
  }
 
- .sentence-box {
+ #review-form {
  --sentence-box-height: 10.25rem;
- --sentence-box-font-size: 1.5rem;
  }
 
  .validator .button-group button {
  --button-padding: 1.75rem;
  }
 }
 
+#review-form {
+ --sentence-box-height: 6rem;
+}
+
 .validator {
  --validator-height: 6.6rem;
  height: var(--validator-height);
@@ -25,7 +28,6 @@
 
 .sentence-box,
 .card-sentence-box {
- --sentence-box-font-size: var(--base-font-size);
  height: var(--sentence-box-height);
  border: 1px solid var(--grey-color);
  flex-basis: 100%;
@@ -34,11 +36,7 @@
  align-items: center;
  display: flex;
  flex-direction: column;
- font-size: var(--sentence-box-font-size)
-}
-
-.sentence-box {
- --sentence-box-height: 6rem;
+ font-size: 1rem;
 }
 
 .sentence-box small,
@@ -133,24 +131,32 @@
 }
 
 .main-root {
- margin: 20px auto;
+ margin: 50px auto;
  position: relative;
- height: calc(var(--sentence-box-height) + 2em);
- width: calc(250px + 2em);
+ height: calc(2 * var(--sentence-box-height));
+ width: 25vw;
  overflow: hidden;
- border: 1px solid #e5e5e5;
 }
 
 .card {
  background-size: cover;
  position: absolute;
  background: #F8F3F3;
- height: var(--sentence-box-height);
- width: 250px;
- transition: box-shadow .3s;
- box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
+ height: calc(2 * var(--sentence-box-height));
+ width: 25vw;
  cursor: pointer;
  padding: 1em;
+ transition: box-shadow .3s;
+ box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
+}
+
+.card-sentence-box {
+ padding: 1rem;
+}
+
+.card-source {
+ position: absolute;
+ bottom: 50px;
 }
 
 .animate {
@@ -162,8 +168,16 @@
  box-shadow: none;
 }
 
-@media screen and (max-width: 768px) {
+@media screen and (max-width: 1024px) {
  .review-footer {
  flex-direction: column-reverse;
  }
+
+ .main-root {
+ width: 100%;
+ }
+
+ .card {
+ width: 100%;
+ }
 }

web/src/components/review-form.js

@@ -36,6 +36,7 @@ function mapSentencesIntoCategories(sentences) {
 export default function ReviewForm({ message, useSwipeReview, sentences: initialSentences, onReviewed }) {
  const [page, setPage] = useState(0);
  const [sentences, setSentences] = useState(initialSentences);
+ const [reviewedSentencesCount, setReviewedCount] = useState(0);
 
  const cardsRef = React.createRef();
  const totalPages = Math.ceil(sentences.length / PAGE_SIZE);
@@ -58,6 +59,7 @@ export default function ReviewForm({ message, useSwipeReview, sentences: initial
  }
 
  setSentences(allSentences);
+ setReviewedCount((previousNumber) => previousNumber + 1);
  };
 
  if (!Array.isArray(sentences) || sentences.length < 1) {
@@ -67,34 +69,27 @@ export default function ReviewForm({ message, useSwipeReview, sentences: initial
  const currentSentences = sentences.slice(offset, offset + PAGE_SIZE);
 
  if (useSwipeReview) {
- let message = (<p>You have not reviewed any sentences yet!</p>);
- if (page !== 0) {
- message = (<p>You have successfully reviewed your {page * PAGE_SIZE}th sentence!</p>);
- }
-
  return (
  <form id="review-form" onSubmit={onSubmit}>
- <p>Swipe right to approve sentence, swipe left to reject it.</p>
+ <p>Swipe right to approve the sentence, swipe left to reject it.</p>
+ <p>You have reviewed {reviewedSentencesCount} sentences. Do not forget to submit your review!</p>
 
- {message}
+ { message && ( <p>{message}</p> ) }
 
  <Cards onEnd={() => {
  if (page === lastPage) {
  onSubmit({preventDefault: () => {}});
- } else {
- setPage(page + 1);
- cardsRef.current.setState({index: -1}); //cardsRef.state.index modified due to Cards' inner card removal handling.
  }
  }} className="main-root" ref={cardsRef}>
- { currentSentences.map((sentence, i) => (
+ { sentences.map((sentence, i) => (
  <Card
  key={offset + i}
  onSwipeLeft={() => reviewSentence(offset + i, false)}
  onSwipeRight={() => reviewSentence(offset + i, true)}
  >
  <div className="card-sentence-box">
  <p>{sentence.sentence || sentence}</p>
- <small>{sentence.source ? `Source: ${sentence.source}` : ''}</small>
+ <small className="card-source">{sentence.source ? `Source: ${sentence.source}` : ''}</small>
  </div>
  </Card>
  ))}