use beefy ui

This commit is contained in:
Danny Coates 2017-10-10 10:20:49 -07:00
parent 12c81a22e8
commit 32c5b414de
No known key found for this signature in database
GPG Key ID: 4C442633C62E00CB
5 changed files with 10 additions and 62 deletions

View File

@ -1,38 +1,9 @@
import hash from 'string-hash'; import hash from 'string-hash';
const experiments = { const experiments = {};
'5YHCzn2CQTmBwWwTmZupBA': {
id: '5YHCzn2CQTmBwWwTmZupBA',
run: function(variant, state, emitter) {
state.experiment = {
xid: this.id,
xvar: variant
};
// Beefy UI
if (variant === 1) {
state.config.uploadWindowStyle = 'upload-window upload-window-b';
state.config.uploadButtonStyle = 'btn browse browse-b';
} else {
state.config.uploadWindowStyle = 'upload-window';
state.config.uploadButtonStyle = 'btn browse';
}
emitter.emit('render');
},
eligible: function(state) {
return this.luckyNumber(state) >= 0.5;
},
variant: function(state) {
return this.luckyNumber(state) < 0.75 ? 0 : 1;
},
luckyNumber: function(state) {
return luckyNumber(
`${this.id}:${state.storage.get('testpilot_ga__cid')}`
);
}
}
};
//Returns a number between 0 and 1 //Returns a number between 0 and 1
// eslint-disable-next-line no-unused-vars
function luckyNumber(str) { function luckyNumber(str) {
return hash(str) / 0xffffffff; return hash(str) / 0xffffffff;
} }

View File

@ -20,10 +20,6 @@ app.use((state, emitter) => {
state.translate = locale.getTranslator(); state.translate = locale.getTranslator();
state.storage = storage; state.storage = storage;
state.raven = Raven; state.raven = Raven;
state.config = {
uploadWindowStyle: 'upload-window',
uploadButtonStyle: 'browse btn'
};
emitter.on('DOMContentLoaded', async () => { emitter.on('DOMContentLoaded', async () => {
if ( if (
/firefox/i.test(navigator.userAgent) && /firefox/i.test(navigator.userAgent) &&

View File

@ -13,8 +13,7 @@ module.exports = function(state, emit) {
'uploadPageLearnMore' 'uploadPageLearnMore'
)}</a> )}</a>
</div> </div>
<div class="${state.config <div class="upload-window" ondragover=${dragover} ondragleave=${dragleave}>
.uploadWindowStyle}" ondragover=${dragover} ondragleave=${dragleave}>
<div id="upload-img"><img src="${assets.get( <div id="upload-img"><img src="${assets.get(
'upload.svg' 'upload.svg'
)}" title="${state.translate('uploadSvgAlt')}"/></div> )}" title="${state.translate('uploadSvgAlt')}"/></div>
@ -24,10 +23,9 @@ module.exports = function(state, emit) {
)}</em></span> )}</em></span>
<form method="post" action="upload" enctype="multipart/form-data"> <form method="post" action="upload" enctype="multipart/form-data">
<input id="file-upload" type="file" name="fileUploaded" onchange=${upload} onfocus=${onfocus} onblur=${onblur} /> <input id="file-upload" type="file" name="fileUploaded" onchange=${upload} onfocus=${onfocus} onblur=${onblur} />
<label for="file-upload" id="browse" class="${state.config <label for="file-upload" id="browse" class="btn browse" title="${state.translate(
.uploadButtonStyle}" title="${state.translate( 'uploadPageBrowseButton1'
'uploadPageBrowseButton1' )}">${state.translate('uploadPageBrowseButton1')}</label>
)}">${state.translate('uploadPageBrowseButton1')}</label>
</form> </form>
</div> </div>
${fileList(state, emit)} ${fileList(state, emit)}

View File

@ -205,7 +205,7 @@ a {
} }
.upload-window { .upload-window {
border: 1px dashed rgba(0, 148, 251, 0.5); border: 3px dashed rgba(0, 148, 251, 0.5);
margin: 0 auto; margin: 0 auto;
height: 255px; height: 255px;
border-radius: 4px; border-radius: 4px;
@ -219,7 +219,7 @@ a {
} }
.upload-window.ondrag { .upload-window.ondrag {
border: 3px dashed rgba(0, 148, 251, 0.5); border: 5px dashed rgba(0, 148, 251, 0.5);
margin: 0 auto; margin: 0 auto;
height: 251px; height: 251px;
transform: scale(1.04); transform: scale(1.04);
@ -231,14 +231,6 @@ a {
text-align: center; text-align: center;
} }
.upload-window-b {
border: 3px dashed rgba(0, 148, 251, 0.5);
}
.upload-window-b.ondrag {
border: 5px dashed rgba(0, 148, 251, 0.5);
}
.link { .link {
color: #0094fb; color: #0094fb;
text-decoration: none; text-decoration: none;
@ -258,10 +250,10 @@ a {
.browse { .browse {
background: #0297f8; background: #0297f8;
border-radius: 5px; border-radius: 5px;
font-size: 15px; font-size: 20px;
color: #fff; color: #fff;
min-width: 240px; min-width: 240px;
height: 44px; height: 60px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -273,11 +265,6 @@ a {
background-color: #0287e8; background-color: #0287e8;
} }
.browse-b {
height: 60px;
font-size: 20px;
}
input[type='file'] { input[type='file'] {
opacity: 0; opacity: 0;
overflow: hidden; overflow: hidden;

View File

@ -15,10 +15,6 @@ module.exports = function(req) {
storage: { storage: {
files: [] files: []
}, },
config: {
uploadWindowStyle: 'upload-window',
uploadButtonStyle: 'browse btn'
},
fira: false, fira: false,
fileInfo: {}, fileInfo: {},
layout layout