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

added background image

This commit is contained in:
Danny Coates 2018-06-19 12:58:42 -07:00
parent fdef37287d
commit 211b1a8576
No known key found for this signature in database
GPG Key ID: 4C442633C62E00CB
8 changed files with 47 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
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 {
@ -225,6 +221,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';

2
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">

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%;
}

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

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

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]);
}; };
} }
} }