From 77b101f8778d774e63cef6f8a8cee3d76ee2b73e Mon Sep 17 00:00:00 2001
From: Alexey Yerin <yyp@disroot.org>
Date: Mon, 10 May 2021 16:48:35 +0300
Subject: [PATCH] Update layout to a more "traditional" form

Instead of using one column layout, it's now switched to two column
layout with source on one side and translation on the other side.

One column layout is still used on smaller screens.
---
 static/style.css     | 33 ++++++++++++++++-------
 templates/index.html | 63 +++++++++++++++++++++++---------------------
 2 files changed, 56 insertions(+), 40 deletions(-)

diff --git a/static/style.css b/static/style.css
index c96ea5e..ac2faa1 100644
--- a/static/style.css
+++ b/static/style.css
@@ -11,9 +11,9 @@ body {
   margin: 5px auto;
 }
 
-.form {
+.form__line {
   display: flex;
-  flex-direction: column;
+  width: 100%;
 }
 
 .form__field {
@@ -21,6 +21,7 @@ body {
   align-items: center;
 
   margin: 4px;
+  flex: 0.5;
 }
 
 .form__field .form__label {
@@ -28,7 +29,7 @@ body {
 }
 
 .form__input,
-.textarea {
+.form__textarea {
   font-size: 1rem;
   padding: 4px;
   border: 2px solid #888888;
@@ -40,17 +41,14 @@ body {
 }
 
 .form__input:focus,
-.textarea:focus,
+.form__textarea:focus,
 .form__button:focus {
   outline: 2px solid #5d94ff;
 }
 
-.translation {
-  font-size: 1rem;
-  padding: 4px;
-}
+.form__textarea {
+  box-sizing: border-box;
 
-.textarea {
   resize: vertical;
   height: 5rem;
 
@@ -58,6 +56,21 @@ body {
   width: 100%;
 }
 
+.form__translation {
+  resize: none;
+  height: 100%;
+}
+
+@media screen and (max-width: 560px) {
+  .form__line {
+    display: block;
+  }
+
+  .form__translation {
+    height: 10rem;
+  }
+}
+
 @media screen and (prefers-color-scheme: dark) {
   body {
     background-color: #212529;
@@ -66,7 +79,7 @@ body {
 
   .form__input,
   .form__button,
-  .textarea {
+  .form__textarea {
     background-color: #131618;
     border-color: #495057;
     color: #f8f9fa;
diff --git a/templates/index.html b/templates/index.html
index c9c028c..1fcf91a 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -12,44 +12,47 @@
 
     <section class="main-section">
       <form action="/" method="POST" class="form">
-        <div class="form__field">
-          <label for="from" class="item form__label">
-            Source language:
-          </label>
-          <select name="from" id="from" class="form__input">
-            {{range $code, $name := $.Languages}}
-            <option value="{{$code}}" {{if eq $code $.From}}selected{{end}}>
-              {{$name|title}}
-            </option>
-            {{end}}
-          </select>
-          <!-- <input id="from" name="from" class="form__input" placeholder="en,de" value="{{.From}}"> -->
+        <div class="form__line">
+          <div class="form__field">
+            <label for="from" class="item form__label">
+              From:
+            </label>
+            <select name="from" id="from" class="form__input">
+              {{range $code, $name := $.Languages}}
+              <option value="{{$code}}" {{if eq $code $.From}}selected{{end}}>
+                {{$name|title}}
+              </option>
+              {{end}}
+            </select>
+          </div>
+
+          <div class="form__field">
+            <label for="to" class="item form__label">
+              To:
+            </label>
+            <select name="to" id="to" class="form__input">
+              {{range $code, $name := $.Languages}}
+              <option value="{{$code}}" {{if eq $code $.To}}selected{{end}}>
+                {{$name|title}}
+              </option>
+              {{end}}
+            </select>
+          </div>
         </div>
 
-        <div class="form__field">
-          <label for="to" class="item form__label">
-            Translate to:
-          </label>
-          <select name="to" id="to" class="form__input">
-            {{range $code, $name := $.Languages}}
-            <option value="{{$code}}" {{if eq $code $.To}}selected{{end}}>
-              {{$name|title}}
-            </option>
-            {{end}}
-          </select>
-          <!-- <input id="to" name="to" class="form__input" placeholder="fr,ru" value="{{.To}}"> -->
-        </div>
-
-        <div class="form__field">
-          <textarea name="text" class="textarea" placeholder="Text to translate">{{.Text}}</textarea>
+        <div class="form__line">
+          <div class="form__field">
+            <textarea name="text" class="form__textarea" placeholder="Text to translate">{{.Text}}</textarea>
+          </div>
+          <div class="form__field">
+            <textarea class="form__textarea form__translation" readonly>{{.Translation}}</textarea>
+          </div>
         </div>
 
         <div class="form__field">
           <button type="submit" class="form__button">Translate!</button>
         </div>
       </form>
-
-      <pre class="translation">{{.Translation}}</pre>
     </section>
   </body>
 </html>