diff --git a/app/pages/share/index.js b/app/pages/share/index.js index 2454bf32..5710c8ef 100644 --- a/app/pages/share/index.js +++ b/app/pages/share/index.js @@ -16,7 +16,7 @@ module.exports = function(state, emit) { return html`
-
${expireInfo(file, state.translate, emit)}
+ ${expireInfo(file, state.translate, emit)}
${state.translate('copyUrlFormLabelWithName', { filename: file.name })} @@ -97,7 +97,7 @@ module.exports = function(state, emit) { function expireInfo(file, translate, emit) { const hours = Math.floor(EXPIRE_SECONDS / 60 / 60); - const el = html`
${raw( + const el = html`
${raw( translate('expireInfo', { downloadCount: '', timespan: translate('timespanHours', { num: hours }) @@ -107,9 +107,6 @@ function expireInfo(file, translate, emit) { const options = [1, 2, 3, 4, 5, 20].filter(i => i > (file.dtotal || 0)); const t = num => translate('downloadCount', { num }); const changed = value => emit('changeLimit', { file, value }); - select.parentNode.replaceChild( - selectbox(file.dlimit || 1, options, t, changed), - select - ); + el.replaceChild(selectbox(file.dlimit || 1, options, t, changed), select); return el; } diff --git a/app/templates/selectbox/index.js b/app/templates/selectbox/index.js index f44333ca..52ed93b9 100644 --- a/app/templates/selectbox/index.js +++ b/app/templates/selectbox/index.js @@ -5,7 +5,7 @@ module.exports = function(selected, options, translate, changed) { let x = selected; return html` - +
- - - - - `; +
`; function choose(event) { const target = event.target; diff --git a/app/templates/selectbox/selectbox.css b/app/templates/selectbox/selectbox.css index 968b0a0d..f08de11c 100644 --- a/app/templates/selectbox/selectbox.css +++ b/app/templates/selectbox/selectbox.css @@ -1,6 +1,25 @@ .select { background-color: var(--pageBGColor); overflow: hidden; + padding: 4px 2px 1px 2px; + border: 1px dotted #0094fb88; + border-radius: 4px; + display: inline; + position: relative; +} + +.select::after { + color: #0094fb; + content: '\25BC'; + position: absolute; + right: 0; + padding: 0 10px; + pointer-events: none; + font-size: 20px; +} + +option { + padding: 0; } select { @@ -11,10 +30,11 @@ select { background: #fff; background-image: none; font-size: 1em; + font-weight: 200; margin: 0; color: #0094fb; cursor: pointer; - border-color: none; + padding-right: 40px; } select:active {