From 6032d92e2c0d3d9aec6b44193d54b0342faec9f2 Mon Sep 17 00:00:00 2001 From: Pierre Dubouilh Date: Sat, 26 Jan 2019 15:14:13 +0100 Subject: [PATCH] click to upload on phones --- Makefile | 2 +- src/script.js | 12 +++++++++++- src/style.css | 35 +++++++++++++++++++++++++---------- src/template.go | 3 ++- src/theme.css | 2 +- 5 files changed, 40 insertions(+), 14 deletions(-) mode change 100755 => 100644 src/style.css diff --git a/Makefile b/Makefile index f8d344b..c185cca 100755 --- a/Makefile +++ b/Makefile @@ -6,7 +6,7 @@ run: ./gossa fixture watch: - ls src/* | entr -rc make run + ls src/** | entr -rc make run embed: echo "embedding css and js into binary" diff --git a/src/script.js b/src/script.js index e31dadc..ad0ed19 100755 --- a/src/script.js +++ b/src/script.js @@ -15,6 +15,8 @@ const barDiv = document.getElementById('progress') const upGrid = document.getElementById('drop-grid') const pics = document.getElementById('pics') const picsHolder = document.getElementById('picsHolder') +const icHolder = document.getElementById('icHolder') +const manualUpload = document.getElementById('clickupload') // helpers let allA @@ -26,6 +28,14 @@ const getASelected = () => !getArrowSelected() ? false : getArrowSelected().pare const prependPath = a => a.startsWith('/') ? a : decodeURI(location.pathname) + a const prevent = e => e.preventDefault() +// Add upload icon on phones +if (typeof window.orientation !== 'undefined') { + icHolder.innerHTML = '
' + icHolder.innerHTML +} + +// Manual upload +manualUpload.addEventListener('change', () => Array.from(manualUpload.files).forEach(f => postFile(f, '/' + f.name)), false) + // Soft nav function browseTo (href) { fetch(href, { credentials: 'include' }).then(r => r.text().then(t => { @@ -439,7 +449,7 @@ document.body.addEventListener('keydown', e => { return prevent(e) || isPicMode() || window.mkdirBtn() case 'KeyB': - return prevent(e) || toggleTheme() + return prevent(e) || toggleTheme() // eslint-disable-line } } diff --git a/src/style.css b/src/style.css old mode 100755 new mode 100644 index bd44206..e031e75 --- a/src/style.css +++ b/src/style.css @@ -1,3 +1,7 @@ +html { + zoom: 1.5; +} + a { text-decoration: none; background-color: transparent !important; @@ -46,7 +50,7 @@ h1 { margin-top: 10px; } -.icHolder { +#icHolder { display: inline-block; right: 15px; top: 25px; @@ -60,6 +64,7 @@ h1 { display: inline-block; overflow: hidden; color: transparent; + margin-left: 5px; } @@ -74,12 +79,6 @@ h1 { z-index: 101; } -.icon-folder{ - height: 20px !important; - width: 20px !important; - zoom: 1 !important; -} - #progress { width: 99%; left: 0.5%; @@ -149,11 +148,26 @@ h1 { } .icon-large-folder { - background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAFG0lEQVRYR81XfUxbVRQ/77XQrgxWZB06ZZjNOFaklfIxxhbM5owaIqLgZGUhQUOCRBLJJKCwZPEPNBoXFgPuI+G/zT/mki2Zc5uZATNBRBiDoqXA6ootbdnaUWD9bj33ta9pS8vYaMJOcnLffb33nt/5nXPPeaVgjYVaY/vw5ADo7OwsMBgMzVwu10pYcbvdEcmhKMrO4XCOtLa2TseCPYaBlpaWNJFIdDEnJyfbarWCx+Nh1Ov1MiMRdqRpGqamppQqlSoPQS+sFgQDoLm5OTkpKalXKpVmGI1GxnuiLJBgQAQUgrinVqvfam9v74sJgLq6uvWpqan9BQUF4tnZ2QCAcCDEuB+ABxnownD8uFy4cC2no6Pj8nIgGQbq6+t5QqFwKC8vT6zX68HlcjEgyEi8Z9kgxon4gbgSEhIcAoGAPR/x+HIac4SwRNSrVCq/a2tra44Ggr0FVFNTkyI3N1es0+kCxqMxwAIhhxKjrPqNMgCIkvdarbYPQ1X4MADQ2Ng4gkmYhRvA7nSD1UkFmAjOhWDjQa4zxggA1nt21OsMt245Je+wa21cWBw5UWUM7GUfGhoaBgsLC2UzMzMwcjcRzJ4NwOXQhO8A7aFe+N4jB4HXzJM/DGQkc4fTYXdRfC27yE3TNqN+rnLgdOVwyG7Mg978/PxdhIHRxS3w6is7wWJzRc2fSBWMtb10k291PJeGnr+m51R3tAcGTx26FgKgtra2B3OgiAAYd2VA0W4Z6My2qAAe5wd+HAeG/tboNFpT+Z8n5cwVDjhSU1NzDQG8ptXq4DYtgd0FUpgxM0UxJuL2eGFdPAf6x9RTeq3l7YHT8rFwAJcwBMUanRH0PAm8LM0Aw/3YMODBPLI63CBK4sNv/ZNKg9n8+uCpKk0IgOrq6vPZ2dnv/qszgU20EzK2b4O78/ZVe0+M2xxY2nF8Jnkd/HxDqZhdXCwa/b7SHAKgqqrqrEQiOTilswB/axFsSU8D84JjVQBcSLsdPWfvS9pGAVy4rhjZpHXLzp07wHS7QA7I5fIuBFA9MfMAUjL3w0bRJliwOR8LAIm3w4UVFMdgSUsRwMVfFX3d7WWBwhQAUFFR0SmTyT5SGZwgemk/JCYmgg0LUiQhdJKzfSXZt4KMOMPSjZ2TfRm2+ekNPLjcM3al+/h7b7I/BQCUl5cfy8rKapgwceF52RvAE/DBiV4QIZ6w6sHnUL9WTlJKQhz88sf4me5jZYeWACgtLW3LzMz8bGJeCC/m7QM6Lh7j5wEX812wciPLrUyMp+D6wOTxG+3lnywBUFJSckQsFn8xad0ML2TvAYc3+tdaAM8ywMJ/IlWS63VB7+Dtz3/veP/LJQCKi4s/xQ+Sb8bt6ZC2IwfcgH0gXJg4LycRwuPfQCMCh90Gw4o7H/afONgVDoDeu3fvYeyGX4+7d8Bz26VoKJQBf0t6iHmSjZGXEAbum+acY6PDHyh+OHwWVzEJxlp5CjthDVbCr1QghdRtYqa1shLVa/YGrCBFiKF7erNlZODqx+qr3/6EUxMLgFgS4Q0o2bWv5KQ2LotKfjZ9BUc+2hICQKPW6G6eP1pm0f6jxuksYYFlQIiTlD3yo5e4fGGqFz+l8LrRkS6c1+uvDdGuhr8nUxSHFATKS1NWzvrNA85FE++/oQsd0zevkCZEvA8txfgiCTURlYf6AJWAipUo8aCtqKS5zKNa2IMj3TUSEqLoQsyEGCZn+ipbkDw5f81i5usjHrTmDPwPh1d5PwAYMkwAAAAASUVORK5CYII="); + background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAJFBMVEUAAACZmQAICAj4+Pj//5nMzGb/+/AAAAD/zJkzMwAAAP////+gebovAAAAAXRSTlMAQObYZgAAAAFiS0dECx/XxMAAAAAHdElNRQfiBhgXAy5jJ3EAAAAA1klEQVQoz42RMQ7CMBAEQ0mZIIp0/AGecJFO7kC2FKXmATxikaxUtPS48Ss5XxwnoWI7j3f3fHJV/aFa1KzOuwsRdacFHCjpthjuChbL0U261ipJnDd65IokJhCaGTCzEOZ25SAwaAUgASoOyFFzxWEsEkQGz2BskFJfHMMwWB07AVAXg/QwZscYPzHqXAVicDE4eJ47QOOoHexzhINxQRxIEVkC6I217OGLg9DLIn7qkHHEWiAvEwAdJyQlNKK3gKfcITuxZjzrO+qt2mr/3uj1z1//6AsSG3mwAQQN9wAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAxOC0wNi0yNFQyMzowMzo0Ni0wNDowMFfZ8nYAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMTgtMDYtMjRUMjM6MDM6NDYtMDQ6MDAmhErKAAAAAElFTkSuQmCC"); } .icon-large-images { - background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABxUlEQVRYR+2XyyuFQRjGz3HPNfIPiEL5D0RYyNJeVlYuycIlf4EkSRQLG1bWkrKwo7BSyg5LZUW533+PZvQ1nL7jO2echTP1NDPffO/7POed55vmxGMZbvEM88eyAoIVGGY7pkCx5225I/8EWBRPUMAN8xLP5Db9LYNSV8C7Wa2lP/MkpJG8Jyb3548PVsAK8GnMIjjvfQsohGAW9BqiNfpR8Ai09uBbgMw16GzhAnOZ/E8EXENU7gi4Yl4JCkwlvrbfhwcyLkDlHnIqMM98BOSDp1Q80ETwtjFSJ/2pQ6Sp9nkmYMJVxuOGOCUB1SQ5BDWG9Jy+GVz8ICLRozwWnqNUQMp3QIuT+Zh5K5DJbLO+sudKMCSygBWy9CX4WXs813bojK8HG+AFtINLJybXrOlx0iehzDMXUuZd1rfAGNDnpnYE2oC+Ctt+LaCLyE2gwChNwlQde/zmMH41iUIr0MCL+6AiCnMgRpXpBjJf0gKqePkA1KVIbsPXGfQAGfMtrAJyvL71jjSR2zTLDAaSEbDES/1pJrfpdOOaDKuAJ+5vaROa8P8K+MtLqbjKVOrgfUC3mGng+2asG7FOTJk9+88oW4HYB/NaXyF6NJlmAAAAAElFTkSuQmCC"); + background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAJ1BMVEUAAACAgIAAAAD////AwMAAgIAAAIAA////AP8AgAD//wCAgACAAICCVHrWAAAAAXRSTlMAQObYZgAAAAFiS0dEAxEMTPIAAAAHdElNRQfiBhoANySLuBaXAAAAvUlEQVQoz2NgIB0IogIhBmFjFOBEpkAoDCRDBcLDw91LSkpKS2ECISXlIODuDlfhXl5eDBQpgQlElFcWmy+fWQ5XEVm+07y4cs/0CrjArpmbzW1m7twJE4ieOXv2zpOT5syEq5i0U3P2zJnamnAVJzXnZGaqTZsEV5E0U81l1apVK+DWLlm1xGuVl5cX3KVA9hIgWA1X4bF6xa5dXVta4Cq2tLR4e3t4e8AE0mAgmcwgFHFBAU4MSmiAjLgGACNod0RkBHb1AAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE4LTA2LTI2VDAwOjU1OjM2LTA0OjAw+lGqagAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxOC0wNi0yNlQwMDo1NTozNi0wNDowMIsMEtYAAAAASUVORK5CYII="); +} + +.icon-large-sad-server { + background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwBAMAAAClLOS0AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAHlBMVEUAAACAgIDAwMAAAAD///8A/wAAgAD/AACAgAD//wAxEuVaAAAAAXRSTlMAQObYZgAAAAFiS0dEBI9o2VEAAAAHdElNRQfiBhoALCLL7Xg4AAAAy0lEQVQ4y+WSPQ7CMAyFHbUSa38G5iLBHCkXKBUnQOICDMwgBnMDuEJvi00TKM3L0IWFN/rLs/zsEP2BSiCtm1WsxgqoAChtwqAAGgSYXaztC3So0xywPuwx2JyOM1uNwWRN1RtMUnQ/alVTAtgEqPWw6OJ6WHJA358lGx7GMs0swHwWsGCeAikJEAwst8d9bCh8kCVzz3zxQQpDbe53x6qwyDYnm/lQ0oevIaHNPj2dAEdIHM8aBgbDDgZo0dDQokWwEV8DlqE0sjwBakRwyV+dKtoAAAAldEVYdGRhdGU6Y3JlYXRlADIwMTgtMDYtMjZUMDA6NDQ6MzQtMDQ6MDBDgg+9AAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE4LTA2LTI2VDAwOjQ0OjM0LTA0OjAwMt+3AQAAAABJRU5ErkJggg=="); +} + +.icon-large-ok { + background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAElBMVEUAAAAAAAAAgACAgID////AwMAbJqpVAAAAAXRSTlMAQObYZgAAAAFiS0dEBI9o2VEAAAAHdElNRQfiBhoANRyRjMyLAAAArElEQVQoz22R0Q3EIAiGNbfAeU4gad+9sMGFLtC4/yyngBaa+tCELz+fFkJ4PimltyljAoCSrvoDfBbRGkC74qyh3AIauQIacaCajo1+ANmARqcHRP2T61LsdIgkWoUFrICCC7Bigo1OUUzQK1GslkaiGIDfsZMoICvokcODXRTjpXpvU0W9/T5WP7GhcDNF9EPN3GH2ooEQvrI51EAIL+y7zbgCg/Cx68eZ/wNuLjeFQzbY1AAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAxOC0wNi0yNlQwMDo1MzoyOC0wNDowMGvaoe4AAAAldEVYdGRhdGU6bW9kaWZ5ADIwMTgtMDYtMjZUMDA6NTM6MjgtMDQ6MDAahxlSAAAAAElFTkSuQmCC"); +} + +.icon-large-upload { + background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAXVBMVEUAAAAzzDPM/8z///8z/2YzmQAzZgAzZv8Amf8AAAAzzP+ZzP8AgADM//8z//8AMwAzzGaZmQD4+Pj//5kAZgD/zGYzmTP/zJmAgAAzMwDMZjPMmTP//wBmMwDwyqYv7S31AAAAAXRSTlMAQObYZgAAAAFiS0dEAxEMTPIAAAAHdElNRQfiBhoAOCALTc5BAAAB3klEQVRIx5WUCZKDIBBFAQXEbTTRQbPM/Y85TQMKClm+piplvcdv0YSQINSFfBQAWcHKsqSUc/EBbmnAgedCyje8Xxxxw782LI+zCPORVSWlesPj4qKqETdC3nA8R76uasBr+cJoCmHGdzwadSsxaaPpCiHcPJ6naLQqw3d9J2jEix/AW540msIYZnMMX/et5xnPCNjQC+SrvoUvlh8GzlWW73tcH+YRdk+tIFRqoq6jwPf+Diph5mcjJiEAThkNeQb4MF6uJmej6ShjrJymnR+GjU8YDfLwJk2Wr9DY+LNBi4DHSMHGOcjo418k5Es+TY6vxO94SUU5oUQDXg1QpDlEOBFEu3MOjJKCsfioUNBe0fNqBcfTZaMWdYkKXMUmIF8uAbSo0zx7A+GH9SPDwNqegWD4Oc6yx1dsAuHw61ku2ShsCRoImY4T6fCYlZ0oEMjEl8NG7rd6nVd9bAAjbrCOb1i1PgkkELR7VnpveCV4OLiH1W9dpiGaR5sGH5IQjvPgJKn/Disc9ke755UXzjQ23NTdJRb0NZ5ne16Pp8+HDSEYCPbFvMb0cfuTu3QwcoKOnpf+umFPRpjzSQpkzYe8z/OuPqC+E+5hbhAVXUmsGebx93eLLjzf1L1i/gHK3l4JVuA9nAAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAxOC0wNi0yNlQwMDo1NjozMi0wNDowMOUpNXoAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMTgtMDYtMjZUMDA6NTY6MzItMDQ6MDCUdI3GAAAAAElFTkSuQmCC"); + background-size: cover !important; + zoom: 0.9; + margin-bottom: 3px; } .icon-blank { @@ -161,7 +175,8 @@ h1 { } .icon-folder { - background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAC9klEQVQ4T62TX0hTURzHf2f3btNRV8o/YU6dm2H1IEEIEgaFs9ICH0RhMQiNQGRkPbgSBu1BcA+yBWJKFAg91Us9+Icgo5BKMdGwzH/YBFPJtP2f2/3XOWcmmw9Nwd/ld8/Ozjmf8/39uQgO2BDh1dbWMgaDgdvNjkQiyOVybe7nTgrs7u5uE0WxQqFQyHgESZJAlmU64vmLlpYW516hFOh0OvuxwqpAIAA8zxMIdQIMhUJf1tfXy/FaIB6qVqvZjo6O4O6LKNDhcLzS6/XVfr+fAgVBoL6tNIj/G9NoNGocASCEAI/knOTxeG63traOx0Mp0G63P8cK67w+H0Sjwg6UAIkT2wYBy7LUyXx15Vf74NIZO6cF5pOrLkz3kZfNZnum0+nME6sshBEHMskheXAeEwxDyBMTiCAYlZckFbcggwihTbFpwHl1jgKtVusTDLw5F9aCrqgIwhFxrzWIqZdE6H/31TjcZRqiwObm5q58nb5pBRVCem4BhKN7BwqiDCokbPW9nT33+alpggItFoszW6u76+OK4XBmDkSFWN6SmSjJEOFFSEXS74EPs+fHH1+focDGxsb2zOMF98XsUkhJywBBTA7k8Z4ILwGD84kVuoc+zl8c6TG5KbChoeFBlvaEXZFfBspDR3BRYsUgbwn/JrWJFQnPsYu08WP6WUYBQtA/NTw1f2nsUf0aBZrN5ntZeacc6sJyYFI0WKEMAj5JYMmMAL2bnpHRycXKyd56DwWaTKY76bmnXWzhZVAolVTZjsQ4YiKeygaGQbC29ufN6M+tawudVREKrKmpsWQYSjqlvAvAYuBuSwDFTUgaSE+6fyy/HmyvvkLOEaDSaDRadWcr28LHSkGpUiWLMmGdNL/72/eX73tu3MILGwTInCypKMspLu9VpaSl4o+NkXCj0kKQIuB8blcldj35lnGYSFYgETFeATGL030PbRvL0zN41UtDJsZx3FGfz0c6OnVfEgGieL8fO/8v5H2e///2HYUHRf0LvmViJOrjD14AAAAASUVORK5CYII=") !important; + background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAIVBMVEUAAACZmQAICAj4+Pj//5n/+/DMzGYAAAD/zJkzMwD///9AsZvJAAAAAXRSTlMAQObYZgAAAAFiS0dECmjQ9FYAAAAHdElNRQfiBhgXARMJeV+TAAAAuElEQVQoz62QMQ7CQBADLyVlQKLmD/ABpC38AF5AgZSOR7i4kpbf4t3b4xLR4i6+sb1KKb+apf3qe7qY2fU0jIO5BjLdwhjI8dE0Nylx3uiZFS4YjfduAJADLCvCCNrKoAL2JajPyG0IZ9IQGzP1S2iSMdsMZgbshOIVsRsGs7WidzAm1IGaEfgNIugRxIJblXUQ/my1dXgaUaDLZDDm5HgiIvGqQyw7GJVOIO7oPzm1lN17o1f5gz69jIC7vf9PIQAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAxOC0wNi0yNFQyMzowMToxOS0wNDowMO2EXMYAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMTgtMDYtMjRUMjM6MDE6MTktMDQ6MDCc2eR6AAAAAElFTkSuQmCC") !important; + background-size: cover !important; } .icon-page { diff --git a/src/template.go b/src/template.go index 7b2ed4e..912dc06 100644 --- a/src/template.go +++ b/src/template.go @@ -19,10 +19,11 @@
Drop here to upload
+

.{{.Title}}

-
+
diff --git a/src/theme.css b/src/theme.css index b67272f..0d335e9 100644 --- a/src/theme.css +++ b/src/theme.css @@ -2,6 +2,6 @@ html, a { background-color: #2d3436; color: #dfe6e9; } -.arrow, .icon-large-images { +.arrow { filter: invert(100%) !important; }