rob
/
gtranslate
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
static/style.css
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;

63
templates/index.html
View File

@ -12,44 +12,47 @@
<section class="main-section"> <section class="main-section">
<form action="/" method="POST" class="form"> <form action="/" method="POST" class="form">
<div class="form__field"> <div class="form__line">
<label for="from" class="item form__label"> <div class="form__field">
Source language: <label for="from" class="item form__label">
</label> From:
<select name="from" id="from" class="form__input"> </label>
{{range $code, $name := $.Languages}} <select name="from" id="from" class="form__input">
<option value="{{$code}}" {{if eq $code $.From}}selected{{end}}> {{range $code, $name := $.Languages}}
{{$name|title}} <option value="{{$code}}" {{if eq $code $.From}}selected{{end}}>
</option> {{$name|title}}
{{end}} </option>
</select> {{end}}
<!-- <input id="from" name="from" class="form__input" placeholder="en,de" value="{{.From}}"> --> </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>
<div class="form__field"> <div class="form__line">
<label for="to" class="item form__label"> <div class="form__field">
Translate to: <textarea name="text" class="form__textarea" placeholder="Text to translate">{{.Text}}</textarea>
</label> </div>
<select name="to" id="to" class="form__input"> <div class="form__field">
{{range $code, $name := $.Languages}} <textarea class="form__textarea form__translation" readonly>{{.Translation}}</textarea>
<option value="{{$code}}" {{if eq $code $.To}}selected{{end}}> </div>
{{$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> </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>