make site responsive and add feedback link

This commit is contained in:
John Gruen 2017-07-20 23:52:21 +02:00
parent 34f26fc017
commit 463393552b
9 changed files with 290 additions and 134 deletions

View file

@ -40,7 +40,9 @@ $(document).ready(function() {
//disable button for 3s
$copyBtn.attr('disabled', true);
$('#link').attr('disabled', true);
$copyBtn.html('<img src="/resources/check-16.svg" class="icon-check"></img>');
$copyBtn.html(
'<img src="/resources/check-16.svg" class="icon-check"></img>'
);
window.setTimeout(() => {
$copyBtn.attr('disabled', false);
$('#link').attr('disabled', false);
@ -71,12 +73,14 @@ $(document).ready(function() {
event.preventDefault();
let file = '';
if (event.type === 'drop') {
if (event.originalEvent.dataTransfer.files.length > 1 || event.originalEvent.dataTransfer.files[0].size === 0){
if (
event.originalEvent.dataTransfer.files.length > 1 ||
event.originalEvent.dataTransfer.files[0].size === 0
) {
$('.upload-window').removeClass('ondrag');
document.l10n.formatValue('uploadPageMultipleFilesAlert')
.then(str => {
alert(str);
});
document.l10n.formatValue('uploadPageMultipleFilesAlert').then(str => {
alert(str);
});
return;
}
file = event.originalEvent.dataTransfer.files[0];
@ -95,10 +99,9 @@ $(document).ready(function() {
$('#cancel-upload').click(() => {
fileSender.cancel();
location.reload();
document.l10n.formatValue('uploadCancelNotification')
.then(str => {
notify(str);
});
document.l10n.formatValue('uploadCancelNotification').then(str => {
notify(str);
});
});
fileSender.on('progress', progress => {
@ -110,15 +113,21 @@ $(document).ready(function() {
});
if (progress[1] < 1000000) {
$('.progress-text').text(
`${file.name} (${(progress[0] / 1000).toFixed(1)}KB of ${(progress[1] / 1000).toFixed(1)}KB)`
`${file.name} (${(progress[0] / 1000).toFixed(
1
)}KB of ${(progress[1] / 1000).toFixed(1)}KB)`
);
} else if (progress[1] < 1000000000) {
$('.progress-text').text(
`${file.name} (${(progress[0] / 1000000).toFixed(1)}MB of ${(progress[1] / 1000000).toFixed(1)}MB)`
`${file.name} (${(progress[0] / 1000000).toFixed(
1
)}MB of ${(progress[1] / 1000000).toFixed(1)}MB)`
);
} else {
$('.progress-text').text(
`${file.name} (${(progress[0] / 1000000).toFixed(1)}MB of ${(progress[1] / 1000000000).toFixed(1)}GB)`
`${file.name} (${(progress[0] / 1000000).toFixed(
1
)}MB of ${(progress[1] / 1000000000).toFixed(1)}GB)`
);
}
});
@ -163,7 +172,10 @@ $(document).ready(function() {
expiry: expiration
};
localStorage.setItem(info.fileId, JSON.stringify(fileData));
$('#upload-filename').attr('data-l10n-id', 'uploadSuccessConfirmHeader');
$('#upload-filename').attr(
'data-l10n-id',
'uploadSuccessConfirmHeader'
);
t = window.setTimeout(() => {
$('#page-one').attr('hidden', true);
$('#upload-progress').attr('hidden', true);
@ -172,10 +184,9 @@ $(document).ready(function() {
}, 1000);
populateFileList(JSON.stringify(fileData));
document.l10n.formatValue('notifyUploadDone')
.then(str => {
notify(str);
});
document.l10n.formatValue('notifyUploadDone').then(str => {
notify(str);
});
})
.catch(err => {
Raven.captureException(err);
@ -219,10 +230,18 @@ $(document).ready(function() {
const row = document.createElement('tr');
const name = document.createElement('td');
const link = document.createElement('td');
const $copyIcon = $('<img>', { src: '/resources/copy-16.svg', class: 'icon-copy', 'data-l10n-id': 'copyUrlHover'});
const $copyIcon = $('<img>', {
src: '/resources/copy-16.svg',
class: 'icon-copy',
'data-l10n-id': 'copyUrlHover'
});
const expiry = document.createElement('td');
const del = document.createElement('td');
const $delIcon = $('<img>', { src: '/resources/close-16.svg', class: 'icon-delete', 'data-l10n-id': 'deleteButtonHover' });
const $delIcon = $('<img>', {
src: '/resources/close-16.svg',
class: 'icon-delete',
'data-l10n-id': 'deleteButtonHover'
});
const popupDiv = document.createElement('div');
const $popupText = $('<div>', { class: 'popuptext' });
const cellText = document.createTextNode(file.name);
@ -230,14 +249,8 @@ $(document).ready(function() {
const url = file.url.trim() + `#${file.secretKey}`.trim();
$('#link').attr('value', url);
$('#copy-text').attr(
'data-l10n-args',
'{"filename": "' + file.name + '"}'
);
$('#copy-text').attr(
'data-l10n-id',
'copyUrlFormLabelWithName'
);
$('#copy-text').attr('data-l10n-args', '{"filename": "' + file.name + '"}');
$('#copy-text').attr('data-l10n-id', 'copyUrlFormLabelWithName');
$popupText.attr('tabindex', '-1');
name.appendChild(cellText);
@ -264,10 +277,9 @@ $(document).ready(function() {
aux.select();
document.execCommand('copy');
document.body.removeChild(aux);
document.l10n.formatValue('copiedUrl')
.then(translated => {
link.innerHTML = translated;
});
document.l10n.formatValue('copiedUrl').then(translated => {
link.innerHTML = translated;
});
window.setTimeout(() => {
const linkImg = document.createElement('img');
$(linkImg).addClass('icon-copy');
@ -327,13 +339,7 @@ $(document).ready(function() {
$(popupNvmSpan).addClass('nvm');
$(popupNvmSpan).attr('data-l10n-id', 'nevermindButton');
$popupText.html([
popupDelSpan,
'&nbsp;',
'&nbsp;',
popupNvmSpan
]);
$popupText.html([popupDelSpan, '&nbsp;', '&nbsp;', popupNvmSpan]);
// add data cells to table row
row.appendChild(name);
@ -378,7 +384,6 @@ $(document).ready(function() {
$popupText.removeClass('show');
});
toggleHeader();
}
function toggleHeader() {