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;
}
.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;

View File

@ -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>