blitzwing/mozhi
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Since Arya requested more than a simple button, more CSS jankiness!

Browse source
This commit is contained in:
Midou36O 2023-10-13 13:24:55 +01:00
parent febf0f3523
commit 16ee289b30
No known key found for this signature in database
GPG key ID: 1D134A95FE521A7A
2 changed files with 43 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
public/css/style.css
View file

@ -31,7 +31,7 @@ footer p {
}
a {
color: #F57C00;
color: #f57c00;
text-decoration: none;
}
a:hover {
@ -79,7 +79,7 @@ select {
border-bottom: none;
border-top: none;
border-radius: 4px;
border-left: 2px solid #F57C00;
border-left: 2px solid #f57c00;
/* Accent shadow */
box-shadow: 2px 2px 0px 0px rgba(245, 124, 0, 0.25);
color: #b2b2b2;
@ -89,18 +89,36 @@ select {
button {
display: flex;
font-size: 17px;
padding: 4px 8px;
justify-content: flex-end;
gap: 2px;
border: none;
border-radius: 4px;
background: #F57C00;
background: #f57c00;
}
button:hover {
box-shadow: 5px 5px 0px 0px rgba(245, 124, 0, 0.25);
cursor: pointer;
}
/* While we're at it, fake button css style for the url.*/
.button {
display: flex;
font-size: 17px;
padding: 4px 8px;
justify-content: flex-end;
gap: 2px;
border: none;
border-radius: 4px;
background: #f57c00;
}
.button:hover {
box-shadow: 5px 5px 0px 0px rgba(245, 124, 0, 0.25);
cursor: pointer;
}
/* Spacing stuff */
.wrap {
display: flex;
@ -168,11 +186,13 @@ button:hover {
}
/* Javascript searchable select used in source/target language */
.nice-select, .nice-select-dropdown, .nice-select-search {
.nice-select,
.nice-select-dropdown,
.nice-select-search {
border-right: none;
border-bottom: none;
border-top: none;
border-radius: 4px;
border-left: 2px solid #F57C00;
border-left: 2px solid #f57c00;
box-shadow: 2px 2px 0px 0px rgba(245, 124, 0, 0.25);
}

28
views/index.html
View file

@ -18,7 +18,7 @@
<!-- This hidden input is so that the engine gets sent in the request even though its not declared here -->
<input name="engine" value="{{.Engine}}" type="hidden" />
<div class="wrap languages">
<div class="wrap languages" style="display:flex; justify-content:space-around; align-items:center;">
<div class="language">
<select name="from" aria-label="Source language" id="sourceLanguage">
{{range $key, $value := .SourceLanguages}} {{if $.From}}
@ -55,7 +55,7 @@
</div>
</div>
<div class="item-wrapper">
<div class="item-wrapper" style="display:flex;flex-direction: column;justify-content: center;text-align: center;margin: auto;">
Source Text:
<textarea autofocus class="item" id="input" name="text" dir="auto" placeholder="Enter Text Here">
{{ .OriginalText }}</textarea>
@ -68,7 +68,7 @@
{{ if .TranslateAll }}
{{range $key, $value := .TranslateAll}}
<div class="item-wrapper">
<div class="item-wrapper" style="display:flex;flex-direction: column;justify-content: center;text-align: center;margin: auto;">
Engine: {{.Engine}}
<textarea class="translation item" dir="auto" placeholder="Translation" id="output" readonly>
{{.OutputText}}</textarea>
@ -92,13 +92,21 @@
{{end}}
{{end}}
{{end}}
<button class="wrap" type="submit">
Translate!
</button>
<button class="wrap" type="button" onclick="copyToClipboard()">
Copy
</button>
{{ if and .Engine .From .To .OriginalText }}<p><a href="/?engine={{.Engine}}&from={{.From}}&to={{.To}}&text={{.OriginalText}}">Copy translation link</a></p>{{end}}
<div style="display:flex; justify-content:space-around; align-items:center;">
{{if .TranslationExists}}
<button class="wrap" type="button" onclick="copyToClipboard()">
Copy the translation
</button>
{{end}}
{{ if and .Engine .From .To .OriginalText }}<p><a class="button" style="color:#010000; text-decoration: none;" href="/?engine={{.Engine}}&from={{.From}}&to={{.To}}&text={{.OriginalText}}">Copy translation link</a></p>{{end}}
{{if .TranslationExists}}
<button class="wrap" type="submit">
{{else}}
<button class="wrap" style="margin-left:auto; position:relative; left:-10%;margin-top: 1%;" type="submit">
{{end}}
Translate!
</button>
</div>
</form>
<script>
// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-3.0