Chapril/drop.chapril.org-firefoxsend
Chapril/drop.chapril.org-firefoxsend
25
1
Fork 0
Code Issues Releases Activity

adjusted selectbox styles

Browse Source
This commit is contained in:
Danny Coates 2018-03-27 23:19:07 -07:00
parent 77e3b5a3e6
commit fb91fd03cc
No known key found for this signature in database
GPG Key ID: 4C442633C62E00CB
3 changed files with 26 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
app/pages/share/index.js
View File

@ -16,7 +16,7 @@ module.exports = function(state, emit) {
return html` return html`
<div id="shareWrapper" class="effect--fadeIn"> <div id="shareWrapper" class="effect--fadeIn">
<div class="title">${expireInfo(file, state.translate, emit)}</div> ${expireInfo(file, state.translate, emit)}
<div class="sharePage"> <div class="sharePage">
<div class="sharePage__copyText"> <div class="sharePage__copyText">
${state.translate('copyUrlFormLabelWithName', { filename: file.name })} ${state.translate('copyUrlFormLabelWithName', { filename: file.name })}
@ -97,7 +97,7 @@ module.exports = function(state, emit) {
function expireInfo(file, translate, emit) { function expireInfo(file, translate, emit) {
const hours = Math.floor(EXPIRE_SECONDS / 60 / 60); const hours = Math.floor(EXPIRE_SECONDS / 60 / 60);
const el = html`<div>${raw( const el = html`<div class="title">${raw(
translate('expireInfo', { translate('expireInfo', {
downloadCount: '<select></select>', downloadCount: '<select></select>',
timespan: translate('timespanHours', { num: hours }) 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 options = [1, 2, 3, 4, 5, 20].filter(i => i > (file.dtotal || 0));
const t = num => translate('downloadCount', { num }); const t = num => translate('downloadCount', { num });
const changed = value => emit('changeLimit', { file, value }); const changed = value => emit('changeLimit', { file, value });
select.parentNode.replaceChild( el.replaceChild(selectbox(file.dlimit || 1, options, t, changed), select);
selectbox(file.dlimit || 1, options, t, changed),
select
);
return el; return el;
} }

8
app/templates/selectbox/index.js
View File

@ -5,7 +5,7 @@ module.exports = function(selected, options, translate, changed) {
let x = selected; let x = selected;
return html` return html`
<span class="select"> <div class="select">
<select id="${id}" onchange=${choose}> <select id="${id}" onchange=${choose}>
${options.map( ${options.map(
i => i =>
@ -14,11 +14,7 @@ module.exports = function(selected, options, translate, changed) {
}>${translate(i)}</option>` }>${translate(i)}</option>`
)} )}
</select> </select>
</div>`;
<svg id="arrow" width="32" height="32">
<polygon points="8 18 17 28 26 18" fill="#0094fb"/>
</svg>
</span>`;
function choose(event) { function choose(event) {
const target = event.target; const target = event.target;

22
app/templates/selectbox/selectbox.css
View File

@ -1,6 +1,25 @@
.select { .select {
background-color: var(--pageBGColor); background-color: var(--pageBGColor);
overflow: hidden; 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 { select {
@ -11,10 +30,11 @@ select {
background: #fff; background: #fff;
background-image: none; background-image: none;
font-size: 1em; font-size: 1em;
font-weight: 200;
margin: 0; margin: 0;
color: #0094fb; color: #0094fb;
cursor: pointer; cursor: pointer;
border-color: none; padding-right: 40px;
} }
select:active { select:active {