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

color promo experiment

Browse Source
This commit is contained in:
Danny Coates 2017-12-05 14:06:40 -08:00
parent da4338ed69
commit b2c1daa6c7
No known key found for this signature in database
GPG Key ID: 4C442633C62E00CB
8 changed files with 23 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/experiments.js
View File

@ -1,10 +1,10 @@
import hash from 'string-hash'; import hash from 'string-hash';
const experiments = { const experiments = {
'SyI-hI7gT9agiH-f3f0BYg': { XnN0idVWSxO6A0kiNkxzGw: {
id: 'SyI-hI7gT9agiH-f3f0BYg', id: 'XnN0idVWSxO6A0kiNkxzGw',
run: function(variant, state, emitter) { run: function(variant, state, emitter) {
state.promo = variant === 1 ? 'body' : 'header'; state.promo = variant === 1 ? 'blue' : 'grey';
emitter.emit('render'); emitter.emit('render');
}, },
eligible: function() { eligible: function() {

2
app/routes/index.js
View File

@ -10,7 +10,7 @@ const app = choo();
function body(template) { function body(template) {
return function(state, emit) { return function(state, emit) {
const b = html`<body> const b = html`<body>
${state.promo === 'header' ? fxPromo(state, emit) : ''} ${state.promo ? fxPromo(state, emit) : ''}
${header(state)} ${header(state)}
<div class="all"> <div class="all">
<noscript> <noscript>

2
app/templates/completed.js
View File

@ -1,7 +1,6 @@
const html = require('choo/html'); const html = require('choo/html');
const progress = require('./progress'); const progress = require('./progress');
const { fadeOut } = require('../utils'); const { fadeOut } = require('../utils');
const fxPromo = require('./fxPromo');
module.exports = function(state, emit) { module.exports = function(state, emit) {
const div = html` const div = html`
@ -21,7 +20,6 @@ module.exports = function(state, emit) {
sendNew sendNew
}>${state.translate('sendYourFilesLink')}</a> }>${state.translate('sendYourFilesLink')}</a>
</div> </div>
${state.promo === 'body' ? fxPromo(state, emit) : ''}
</div> </div>
`; `;

4
app/templates/download.js
View File

@ -1,9 +1,8 @@
const html = require('choo/html'); const html = require('choo/html');
const progress = require('./progress'); const progress = require('./progress');
const { bytes } = require('../utils'); const { bytes } = require('../utils');
const fxPromo = require('./fxPromo');
module.exports = function(state, emit) { module.exports = function(state) {
const transfer = state.transfer; const transfer = state.transfer;
const div = html` const div = html`
<div id="page-one"> <div id="page-one">
@ -24,7 +23,6 @@ module.exports = function(state, emit) {
)}</div> )}</div>
</div> </div>
</div> </div>
${state.promo === 'body' ? fxPromo(state, emit) : ''}
</div> </div>
`; `;

4
app/templates/fxPromo.js
View File

@ -19,8 +19,10 @@ module.exports = function(state, emit) {
emit('exit', evt); emit('exit', evt);
} }
const classes = state.promo === 'blue' ? 'banner banner-blue' : 'banner';
return html` return html`
<div class="banner"> <div class="${classes}">
<div> <div>
<img <img
src="${assets.get('firefox_logo-only.svg')}" src="${assets.get('firefox_logo-only.svg')}"

2
app/templates/preview.js
View File

@ -3,7 +3,6 @@ const assets = require('../../common/assets');
const notFound = require('./notFound'); const notFound = require('./notFound');
const downloadPassword = require('./downloadPassword'); const downloadPassword = require('./downloadPassword');
const { bytes } = require('../utils'); const { bytes } = require('../utils');
const fxPromo = require('./fxPromo');
function getFileFromDOM() { function getFileFromDOM() {
const el = document.getElementById('dl-file'); const el = document.getElementById('dl-file');
@ -62,7 +61,6 @@ module.exports = function(state, emit) {
</div> </div>
<a class="send-new" href="/">${state.translate('sendYourFilesLink')}</a> <a class="send-new" href="/">${state.translate('sendYourFilesLink')}</a>
</div> </div>
${state.promo === 'body' ? fxPromo(state, emit) : ''}
</div> </div>
`; `;

2
app/templates/welcome.js
View File

@ -1,7 +1,6 @@
const html = require('choo/html'); const html = require('choo/html');
const assets = require('../../common/assets'); const assets = require('../../common/assets');
const fileList = require('./fileList'); const fileList = require('./fileList');
const fxPromo = require('./fxPromo');
const { fadeOut } = require('../utils'); const { fadeOut } = require('../utils');
module.exports = function(state, emit) { module.exports = function(state, emit) {
@ -36,7 +35,6 @@ module.exports = function(state, emit) {
title="${state.translate('uploadPageBrowseButton1')}"> title="${state.translate('uploadPageBrowseButton1')}">
${state.translate('uploadPageBrowseButton1')}</label> ${state.translate('uploadPageBrowseButton1')}</label>
</div> </div>
${state.promo === 'body' ? fxPromo(state, emit) : ''}
${fileList(state, emit)} ${fileList(state, emit)}
</div> </div>
`; `;

15
assets/main.css
View File

@ -984,6 +984,21 @@ tbody {
margin-left: 10px; margin-left: 10px;
} }
.banner-blue {
background-color: #0098f7;
color: #fff;
}
.banner-blue a {
color: #fff;
font-weight: bold;
}
.banner-blue a:hover {
color: #eee;
font-weight: bold;
}
.selectbox { .selectbox {
display: inline-block; display: inline-block;
position: relative; position: relative;