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 { a {
color: #F57C00; color: #f57c00;
text-decoration: none; text-decoration: none;
} }
a:hover { a:hover {
@ -79,7 +79,7 @@ select {
border-bottom: none; border-bottom: none;
border-top: none; border-top: none;
border-radius: 4px; border-radius: 4px;
border-left: 2px solid #F57C00; border-left: 2px solid #f57c00;
/* Accent shadow */ /* Accent shadow */
box-shadow: 2px 2px 0px 0px rgba(245, 124, 0, 0.25); box-shadow: 2px 2px 0px 0px rgba(245, 124, 0, 0.25);
color: #b2b2b2; color: #b2b2b2;
@ -89,18 +89,36 @@ select {
button { button {
display: flex; display: flex;
font-size: 17px;
padding: 4px 8px; padding: 4px 8px;
justify-content: flex-end; justify-content: flex-end;
gap: 2px; gap: 2px;
border: none; border: none;
border-radius: 4px; border-radius: 4px;
background: #F57C00; background: #f57c00;
} }
button:hover { button:hover {
box-shadow: 5px 5px 0px 0px rgba(245, 124, 0, 0.25); box-shadow: 5px 5px 0px 0px rgba(245, 124, 0, 0.25);
cursor: pointer; 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 */ /* Spacing stuff */
.wrap { .wrap {
display: flex; display: flex;
@ -168,11 +186,13 @@ button:hover {
} }
/* Javascript searchable select used in source/target language */ /* 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-right: none;
border-bottom: none; border-bottom: none;
border-top: none; border-top: none;
border-radius: 4px; 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); 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 --> <!-- 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" /> <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"> <div class="language">
<select name="from" aria-label="Source language" id="sourceLanguage"> <select name="from" aria-label="Source language" id="sourceLanguage">
{{range $key, $value := .SourceLanguages}} {{if $.From}} {{range $key, $value := .SourceLanguages}} {{if $.From}}
@ -55,7 +55,7 @@
</div> </div>
</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: Source Text:
<textarea autofocus class="item" id="input" name="text" dir="auto" placeholder="Enter Text Here"> <textarea autofocus class="item" id="input" name="text" dir="auto" placeholder="Enter Text Here">
{{ .OriginalText }}</textarea> {{ .OriginalText }}</textarea>
@ -68,7 +68,7 @@
{{ if .TranslateAll }} {{ if .TranslateAll }}
{{range $key, $value := .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}} Engine: {{.Engine}}
<textarea class="translation item" dir="auto" placeholder="Translation" id="output" readonly> <textarea class="translation item" dir="auto" placeholder="Translation" id="output" readonly>
{{.OutputText}}</textarea> {{.OutputText}}</textarea>
@ -92,13 +92,21 @@
{{end}} {{end}}
{{end}} {{end}}
{{end}} {{end}}
<button class="wrap" type="submit"> <div style="display:flex; justify-content:space-around; align-items:center;">
Translate! {{if .TranslationExists}}
</button> <button class="wrap" type="button" onclick="copyToClipboard()">
<button class="wrap" type="button" onclick="copyToClipboard()"> Copy the translation
Copy </button>
</button> {{end}}
{{ if and .Engine .From .To .OriginalText }}<p><a href="/?engine={{.Engine}}&from={{.From}}&to={{.To}}&text={{.OriginalText}}">Copy translation link</a></p>{{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> </form>
<script> <script>
// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-3.0 // @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-3.0