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.
This commit is contained in:
Alexey Yerin 2021-05-10 16:48:35 +03:00
parent ee4749e670
commit 77b101f877
2 changed files with 56 additions and 40 deletions

View File

@ -11,9 +11,9 @@ body {
margin: 5px auto; margin: 5px auto;
} }
.form { .form__line {
display: flex; display: flex;
flex-direction: column; width: 100%;
} }
.form__field { .form__field {
@ -21,6 +21,7 @@ body {
align-items: center; align-items: center;
margin: 4px; margin: 4px;
flex: 0.5;
} }
.form__field .form__label { .form__field .form__label {
@ -28,7 +29,7 @@ body {
} }
.form__input, .form__input,
.textarea { .form__textarea {
font-size: 1rem; font-size: 1rem;
padding: 4px; padding: 4px;
border: 2px solid #888888; border: 2px solid #888888;
@ -40,17 +41,14 @@ body {
} }
.form__input:focus, .form__input:focus,
.textarea:focus, .form__textarea:focus,
.form__button:focus { .form__button:focus {
outline: 2px solid #5d94ff; outline: 2px solid #5d94ff;
} }
.translation { .form__textarea {
font-size: 1rem; box-sizing: border-box;
padding: 4px;
}
.textarea {
resize: vertical; resize: vertical;
height: 5rem; height: 5rem;
@ -58,6 +56,21 @@ body {
width: 100%; 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) { @media screen and (prefers-color-scheme: dark) {
body { body {
background-color: #212529; background-color: #212529;
@ -66,7 +79,7 @@ body {
.form__input, .form__input,
.form__button, .form__button,
.textarea { .form__textarea {
background-color: #131618; background-color: #131618;
border-color: #495057; border-color: #495057;
color: #f8f9fa; color: #f8f9fa;

View File

@ -12,9 +12,10 @@
<section class="main-section"> <section class="main-section">
<form action="/" method="POST" class="form"> <form action="/" method="POST" class="form">
<div class="form__line">
<div class="form__field"> <div class="form__field">
<label for="from" class="item form__label"> <label for="from" class="item form__label">
Source language: From:
</label> </label>
<select name="from" id="from" class="form__input"> <select name="from" id="from" class="form__input">
{{range $code, $name := $.Languages}} {{range $code, $name := $.Languages}}
@ -23,12 +24,11 @@
</option> </option>
{{end}} {{end}}
</select> </select>
<!-- <input id="from" name="from" class="form__input" placeholder="en,de" value="{{.From}}"> -->
</div> </div>
<div class="form__field"> <div class="form__field">
<label for="to" class="item form__label"> <label for="to" class="item form__label">
Translate to: To:
</label> </label>
<select name="to" id="to" class="form__input"> <select name="to" id="to" class="form__input">
{{range $code, $name := $.Languages}} {{range $code, $name := $.Languages}}
@ -37,19 +37,22 @@
</option> </option>
{{end}} {{end}}
</select> </select>
<!-- <input id="to" name="to" class="form__input" placeholder="fr,ru" value="{{.To}}"> --> </div>
</div> </div>
<div class="form__line">
<div class="form__field"> <div class="form__field">
<textarea name="text" class="textarea" placeholder="Text to translate">{{.Text}}</textarea> <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>
<div class="form__field"> <div class="form__field">
<button type="submit" class="form__button">Translate!</button> <button type="submit" class="form__button">Translate!</button>
</div> </div>
</form> </form>
<pre class="translation">{{.Translation}}</pre>
</section> </section>
</body> </body>
</html> </html>