Fixed a UI/UX bug with pressing enter on the importInput text input in the import screen

This commit is contained in:
James Mills 2020-03-29 16:31:36 +10:00
parent 18f1d35de7
commit b8aee1d2b5
No known key found for this signature in database
GPG key ID: AC4C014F1440EBD6
3 changed files with 26 additions and 35 deletions

File diff suppressed because one or more lines are too long

View file

@ -72,24 +72,15 @@ const bytesToSize = (bytes) => {
return (bytes / Math.pow(1024, i)).toFixed(1) + ' ' + sizes[i] return (bytes / Math.pow(1024, i)).toFixed(1) + ' ' + sizes[i]
} }
const determineDragAndDropCapable = () => {
const div = document.createElement('div')
return (('draggable' in div)
|| ('ondragstart' in div && 'ondrop' in div))
&& 'FormData' in window
&& 'FileReader' in window
}
/* MAIN */ /* MAIN */
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
['drag', 'dragstart', 'dragend', 'dragover', 'dragenter', 'dragleave'] importInput.addEventListener("keyup", (e) => {
.forEach((evt) => { if (e.keyCode === 13) {
importForm.addEventListener(evt, (e) => { e.preventDefault();
e.preventDefault() importButton.click();
e.stopPropagation() }
}) });
})
}, false) }, false)
const labelClicked = (e) => { const labelClicked = (e) => {

View file

@ -3,7 +3,7 @@
<label class="import-container" onclick="labelClicked(event)"> <label class="import-container" onclick="labelClicked(event)">
<div class="import-wrapper"> <div class="import-wrapper">
<form id="import-form" class="import-form" enctype="multipart/form-data" method="POST" action="/import"> <form id="import-form" class="import-form" enctype="multipart/form-data" method="POST" action="/import">
<input id="import-input" type="text" placeholder="Enter a valid URL or ID" required onchange="urlSelected()" /> <input id="import-input" type="text" name="url" placeholder="Enter a valid URL or ID" required onchange="urlSelected()" />
<div class="import-details"> <div class="import-details">
<span id="import-message" class="import-message">No URL entered</span> <span id="import-message" class="import-message">No URL entered</span>
<div id="import-button-wrapper" class="import-button-wrapper"> <div id="import-button-wrapper" class="import-button-wrapper">