natty
/
fox-send
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #854 from mozilla/uitwo 

Some progress on new UI
This commit is contained in:
Danny Coates 2018-06-21 10:51:48 -07:00 committed by GitHub
parent fdef37287d 207179484c
commit ff092d3d84
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 93 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
app/base.css
View File

@ -13,13 +13,9 @@
} }
html { html {
background: url('../assets/send_bg.svg');
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'segoe ui', font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'segoe ui',
'helvetica neue', helvetica, ubuntu, roboto, noto, arial, sans-serif; 'helvetica neue', helvetica, ubuntu, roboto, noto, arial, sans-serif;
font-weight: 200; font-weight: 200;
background-size: 110%;
background-repeat: no-repeat;
background-position: center top;
} }
body { body {
@ -44,12 +40,44 @@ a {
} }
.main { .main {
display: flex;
flex-direction: row;
flex: auto; flex: auto;
max-width: 650px;
margin: 0 auto;
padding: 0 20px; padding: 0 20px;
box-sizing: border-box; box-sizing: border-box;
width: 96%; }
.stripedBox {
width: 480px;
background-color: white;
border-radius: 6px;
box-shadow: 0 0 0 3px rgba(155, 155, 155, 0.4);
background-image: repeating-linear-gradient(
45deg,
white,
white 5px,
#ea000e 5px,
#ea000e 25px,
white 25px,
white 30px,
#0083ff 30px,
#0083ff 50px
);
}
.mainContent {
height: 100%;
background-color: white;
margin: 0 10px;
padding: 1px 10px 0 10px; /* top wtf? */
}
.spacer {
flex: auto;
}
.uploads {
flex: auto;
} }
.noscript { .noscript {
@ -225,6 +253,7 @@ a {
} }
.title { .title {
color: var(--textColor);
font-size: 33px; font-size: 33px;
line-height: 40px; line-height: 40px;
margin: 20px auto; margin: 20px auto;

1
app/main.css
View File

@ -1,4 +1,5 @@
@import './base.css'; @import './base.css';
@import './templates/activeBackground/activeBackground.css';
@import './templates/header/header.css'; @import './templates/header/header.css';
@import './templates/downloadButton/downloadButton.css'; @import './templates/downloadButton/downloadButton.css';
@import './templates/progress/progress.css'; @import './templates/progress/progress.css';

10
app/routes/index.js
View File

@ -5,6 +5,7 @@ const download = require('./download');
const header = require('../templates/header'); const header = require('../templates/header');
const footer = require('../templates/footer'); const footer = require('../templates/footer');
const fxPromo = require('../templates/fxPromo'); const fxPromo = require('../templates/fxPromo');
const activeBackground = require('../templates/activeBackground');
nanotiming.disabled = true; nanotiming.disabled = true;
const app = choo(); const app = choo();
@ -18,6 +19,7 @@ function banner(state, emit) {
function body(template) { function body(template) {
return function(state, emit) { return function(state, emit) {
const b = html`<body> const b = html`<body>
${activeBackground(state, emit)}
${banner(state, emit)} ${banner(state, emit)}
${header(state)} ${header(state)}
<main class="main"> <main class="main">
@ -32,7 +34,13 @@ function body(template) {
<p>${state.translate('enableJavascript')}</p> <p>${state.translate('enableJavascript')}</p>
</div> </div>
</noscript> </noscript>
${template(state, emit)} <div class="stripedBox">
<div class="mainContent">
${template(state, emit)}
</div>
</div>
<div class="spacer"></div>
<div class="uploads"></div>
</main> </main>
${footer(state)} ${footer(state)}
</body>`; </body>`;

11
app/templates/activeBackground/activeBackground.css Normal file
View File

@ -0,0 +1,11 @@
.background {
position: absolute;
left: 0;
top: 0;
height: 100%;
z-index: -1;
}
.background > img {
height: 100%;
}

14
app/templates/activeBackground/index.js Normal file
View File

@ -0,0 +1,14 @@
const html = require('choo/html');
const assets = require('../../../common/assets');
module.exports = function(state) {
if (!state.backgroundUrl) {
const backgrounds = assets.match(/background/);
state.backgroundUrl =
backgrounds[Math.floor(Math.random() * backgrounds.length)];
}
return html`<div class="background">
<img src="${state.backgroundUrl}">
</div>`;
};

11
app/templates/header/index.js
View File

@ -1,5 +1,4 @@
const html = require('choo/html'); const html = require('choo/html');
const assets = require('../../../common/assets');
/* /*
The current weback config uses package.json to generate The current weback config uses package.json to generate
version.json for /__version__ meaning `require` returns the version.json for /__version__ meaning `require` returns the
@ -18,16 +17,6 @@ module.exports = function(state) {
const header = html` const header = html`
<header class="header"> <header class="header">
<div class="logo"> <div class="logo">
<a class="logo__link" href="/">
<img
src="${assets.get('send_logo.svg')}"
alt="Send"/>
<h1 class="logo__title">Send</h1>
</a>
<div class="logo__subtitle">
<a class="logo__subtitle-link" href="https://testpilot.firefox.com">Firefox Test Pilot</a>
<div>${state.translate('siteSubtitle')}</div>
</div>
</div> </div>
<a href="${feedbackUrl}" <a href="${feedbackUrl}"
rel="noreferrer noopener" rel="noreferrer noopener"

BIN
assets/background_1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 305 KiB

BIN
assets/background_2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 572 KiB

26
common/assets.js
View File

@ -15,15 +15,33 @@ function getAsset(name) {
return prefix + assets[name]; return prefix + assets[name];
} }
function getMatches(match) {
return Object.keys(assets)
.filter(k => match.test(k))
.map(getAsset);
}
const instance = { const instance = {
get: getAsset, get: getAsset,
match: getMatches,
setMiddleware: function(middleware) { setMiddleware: function(middleware) {
function getManifest() {
return JSON.parse(
middleware.fileSystem.readFileSync(
middleware.getFilenameFromUrl('/manifest.json')
)
);
}
if (middleware) { if (middleware) {
instance.get = function getAssetWithMiddleware(name) { instance.get = function getAssetWithMiddleware(name) {
const f = middleware.fileSystem.readFileSync( const m = getManifest();
middleware.getFilenameFromUrl('/manifest.json') return prefix + m[name];
); };
return prefix + JSON.parse(f)[name]; instance.match = function matchAssetWithMiddleware(match) {
const m = getManifest();
return Object.keys(m)
.filter(k => match.test(k))
.map(k => prefix + m[k]);
}; };
} }
} }