arya/mozhi
1
0
Fork 0
mirror of https://codeberg.org/aryak/mozhi synced 2024-11-16 14:12:57 +05:30
Code Issues Actions Packages Projects Releases Wiki Activity

Merge pull request 'Add a "Copy" button. Closes #5' (#8) from Midou36O/mozhi:copy-button into master
All checks were successful
mozhi pipeline / Build and publish artifacts (push) Successful in 21m59s
Details
mozhi pipeline / Push Docker image to Codeberg docker registry (push) Successful in 11m47s
Details

Browse Source 
Reviewed-on: https://codeberg.org/aryak/mozhi/pulls/8
This commit is contained in:
Arya 2023-10-13 14:27:05 +00:00
commit 86e5c4eeea
2 changed files with 69 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
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,29 @@ 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);
}
.center-area {
display: flex;
justify-content: space-around;
align-items: center;
max-width: 35%;
margin: auto;
margin-bottom: 1%;
}
.center-area2 {
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
margin: auto;
}

38
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 center-area" >
<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="center-area2 item-wrapper">
Source Text:
<textarea autofocus class="item" id="input" name="text" dir="auto" placeholder="Enter Text Here">
{{ .OriginalText }}</textarea>
@ -68,9 +68,9 @@
{{ if .TranslateAll }}
{{range $key, $value := .TranslateAll}}
<div class="item-wrapper">
<div class="item-wrapper center-area2">
Engine: {{.Engine}}
<textarea class="translation item" dir="auto" placeholder="Translation" readonly>
<textarea class="translation item" dir="auto" placeholder="Translation" id="output" readonly>
{{.OutputText}}</textarea>
{{if .AutoDetect}}
Detected Language: {{.AutoDetect}}{{end}} {{if $.TtsTo}}
@ -81,8 +81,8 @@
</div>
{{end}}
{{ else }} {{if .TranslationExists}}
<div class="item-wrapper">
<textarea class="translation item" dir="auto" placeholder="Translation" readonly>
<div class="item-wrapper center-area2">
<textarea class="translation item" dir="auto" placeholder="Translation" id="output" readonly>
{{.Translation.OutputText}}</textarea>
{{if .Translation.AutoDetect}}
Detected Language: {{.Translation.AutoDetect}}{{end}} {{if .TtsTo}}
@ -92,10 +92,21 @@
{{end}}
{{end}}
{{end}}
<button class="wrap" type="submit">
Translate!
</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
@ -111,6 +122,13 @@
var options = { searchable: true };
NiceSelect.bind(document.getElementById("targetLanguage"), options);
NiceSelect.bind(document.getElementById("sourceLanguage"), options);
// This function allows to copy the translated text to the clipboard
function copyToClipboard() {
var copyText = document.getElementById("output");
copyText.select();
copyText.setSelectionRange(0, 99999); // This is for mobile devices.
document.execCommand("copy");
}
</script>
</main>
{{ template "footer" .}}