update portrait layout pomodoro-calculator-react

This commit is contained in:
Trent Palmer 2020-06-14 22:08:31 -07:00
parent 0141162d14
commit 67ee122157
16 changed files with 124 additions and 91 deletions

View File

@ -1,23 +1,23 @@
{ {
"files": { "files": {
"main.css": "/fcc-challenges/pomodoro-clock-react/build/static/css/main.1b8ac635.chunk.css", "main.css": "/fcc-challenges/pomodoro-clock-react/build/static/css/main.1b8ac635.chunk.css",
"main.js": "/fcc-challenges/pomodoro-clock-react/build/static/js/main.56d846f0.chunk.js", "main.js": "/fcc-challenges/pomodoro-clock-react/build/static/js/main.4e34ae4f.chunk.js",
"main.js.map": "/fcc-challenges/pomodoro-clock-react/build/static/js/main.56d846f0.chunk.js.map", "main.js.map": "/fcc-challenges/pomodoro-clock-react/build/static/js/main.4e34ae4f.chunk.js.map",
"runtime-main.js": "/fcc-challenges/pomodoro-clock-react/build/static/js/runtime-main.601eb45a.js", "runtime-main.js": "/fcc-challenges/pomodoro-clock-react/build/static/js/runtime-main.601eb45a.js",
"runtime-main.js.map": "/fcc-challenges/pomodoro-clock-react/build/static/js/runtime-main.601eb45a.js.map", "runtime-main.js.map": "/fcc-challenges/pomodoro-clock-react/build/static/js/runtime-main.601eb45a.js.map",
"static/js/2.a6220f55.chunk.js": "/fcc-challenges/pomodoro-clock-react/build/static/js/2.a6220f55.chunk.js", "static/js/2.966a2449.chunk.js": "/fcc-challenges/pomodoro-clock-react/build/static/js/2.966a2449.chunk.js",
"static/js/2.a6220f55.chunk.js.map": "/fcc-challenges/pomodoro-clock-react/build/static/js/2.a6220f55.chunk.js.map", "static/js/2.966a2449.chunk.js.map": "/fcc-challenges/pomodoro-clock-react/build/static/js/2.966a2449.chunk.js.map",
"index.html": "/fcc-challenges/pomodoro-clock-react/build/index.html", "index.html": "/fcc-challenges/pomodoro-clock-react/build/index.html",
"precache-manifest.26aca98821ee4880d329b4892a380648.js": "/fcc-challenges/pomodoro-clock-react/build/precache-manifest.26aca98821ee4880d329b4892a380648.js", "precache-manifest.32c2e006ddde6520f555fbe5a9dcacf3.js": "/fcc-challenges/pomodoro-clock-react/build/precache-manifest.32c2e006ddde6520f555fbe5a9dcacf3.js",
"service-worker.js": "/fcc-challenges/pomodoro-clock-react/build/service-worker.js", "service-worker.js": "/fcc-challenges/pomodoro-clock-react/build/service-worker.js",
"static/css/main.1b8ac635.chunk.css.map": "/fcc-challenges/pomodoro-clock-react/build/static/css/main.1b8ac635.chunk.css.map", "static/css/main.1b8ac635.chunk.css.map": "/fcc-challenges/pomodoro-clock-react/build/static/css/main.1b8ac635.chunk.css.map",
"static/js/2.a6220f55.chunk.js.LICENSE.txt": "/fcc-challenges/pomodoro-clock-react/build/static/js/2.a6220f55.chunk.js.LICENSE.txt", "static/js/2.966a2449.chunk.js.LICENSE.txt": "/fcc-challenges/pomodoro-clock-react/build/static/js/2.966a2449.chunk.js.LICENSE.txt",
"static/media/BeepSound.ogg": "/fcc-challenges/pomodoro-clock-react/build/static/media/BeepSound.049fe0d0.ogg" "static/media/BeepSound.ogg": "/fcc-challenges/pomodoro-clock-react/build/static/media/BeepSound.049fe0d0.ogg"
}, },
"entrypoints": [ "entrypoints": [
"static/js/runtime-main.601eb45a.js", "static/js/runtime-main.601eb45a.js",
"static/js/2.a6220f55.chunk.js", "static/js/2.966a2449.chunk.js",
"static/css/main.1b8ac635.chunk.css", "static/css/main.1b8ac635.chunk.css",
"static/js/main.56d846f0.chunk.js" "static/js/main.4e34ae4f.chunk.js"
] ]
} }

View File

@ -1 +1 @@
<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="#"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/fcc-challenges/pomodoro-clock-react/build/logo192.png"/><link rel="manifest" href="/fcc-challenges/pomodoro-clock-react/build/manifest.json"/><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@400&display=swap"><title>Pomodoro Clock React - Build a Pomodoro Clock - Front End Libraries Projects</title><link href="/fcc-challenges/pomodoro-clock-react/build/static/css/main.1b8ac635.chunk.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"><div><script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script></div></div><script>!function(e){function r(r){for(var o,u,l=r[0],a=r[1],p=r[2],i=0,s=[];i<l.length;i++)u=l[i],Object.prototype.hasOwnProperty.call(n,u)&&n[u]&&s.push(n[u][0]),n[u]=0;for(o in a)Object.prototype.hasOwnProperty.call(a,o)&&(e[o]=a[o]);for(f&&f(r);s.length;)s.shift()();return c.push.apply(c,p||[]),t()}function t(){for(var e,r=0;r<c.length;r++){for(var t=c[r],o=!0,l=1;l<t.length;l++){var a=t[l];0!==n[a]&&(o=!1)}o&&(c.splice(r--,1),e=u(u.s=t[0]))}return e}var o={},n={1:0},c=[];function u(r){if(o[r])return o[r].exports;var t=o[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,u),t.l=!0,t.exports}u.m=e,u.c=o,u.d=function(e,r,t){u.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},u.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},u.t=function(e,r){if(1&r&&(e=u(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(u.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var o in e)u.d(t,o,function(r){return e[r]}.bind(null,o));return t},u.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return u.d(r,"a",r),r},u.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},u.p="/fcc-challenges/pomodoro-clock-react/build/";var l=this["webpackJsonppomodoro-clock-react"]=this["webpackJsonppomodoro-clock-react"]||[],a=l.push.bind(l);l.push=r,l=l.slice();for(var p=0;p<l.length;p++)r(l[p]);var f=a;t()}([])</script><script src="/fcc-challenges/pomodoro-clock-react/build/static/js/2.a6220f55.chunk.js"></script><script src="/fcc-challenges/pomodoro-clock-react/build/static/js/main.56d846f0.chunk.js"></script></body></html> <!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="#"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/fcc-challenges/pomodoro-clock-react/build/logo192.png"/><link rel="manifest" href="/fcc-challenges/pomodoro-clock-react/build/manifest.json"/><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@400&display=swap"><title>Pomodoro Clock React - Build a Pomodoro Clock - Front End Libraries Projects</title><link href="/fcc-challenges/pomodoro-clock-react/build/static/css/main.1b8ac635.chunk.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"><div><script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script></div></div><script>!function(e){function r(r){for(var o,u,l=r[0],a=r[1],p=r[2],i=0,s=[];i<l.length;i++)u=l[i],Object.prototype.hasOwnProperty.call(n,u)&&n[u]&&s.push(n[u][0]),n[u]=0;for(o in a)Object.prototype.hasOwnProperty.call(a,o)&&(e[o]=a[o]);for(f&&f(r);s.length;)s.shift()();return c.push.apply(c,p||[]),t()}function t(){for(var e,r=0;r<c.length;r++){for(var t=c[r],o=!0,l=1;l<t.length;l++){var a=t[l];0!==n[a]&&(o=!1)}o&&(c.splice(r--,1),e=u(u.s=t[0]))}return e}var o={},n={1:0},c=[];function u(r){if(o[r])return o[r].exports;var t=o[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,u),t.l=!0,t.exports}u.m=e,u.c=o,u.d=function(e,r,t){u.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},u.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},u.t=function(e,r){if(1&r&&(e=u(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(u.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var o in e)u.d(t,o,function(r){return e[r]}.bind(null,o));return t},u.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return u.d(r,"a",r),r},u.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},u.p="/fcc-challenges/pomodoro-clock-react/build/";var l=this["webpackJsonppomodoro-clock-react"]=this["webpackJsonppomodoro-clock-react"]||[],a=l.push.bind(l);l.push=r,l=l.slice();for(var p=0;p<l.length;p++)r(l[p]);var f=a;t()}([])</script><script src="/fcc-challenges/pomodoro-clock-react/build/static/js/2.966a2449.chunk.js"></script><script src="/fcc-challenges/pomodoro-clock-react/build/static/js/main.4e34ae4f.chunk.js"></script></body></html>

View File

@ -1,23 +1,23 @@
self.__precacheManifest = (self.__precacheManifest || []).concat([ self.__precacheManifest = (self.__precacheManifest || []).concat([
{ {
"revision": "cafb8c1b297ca5855a25f6bbc1d61de6", "revision": "9b96cd3e17367cb41e090261456c6f38",
"url": "/fcc-challenges/pomodoro-clock-react/build/index.html" "url": "/fcc-challenges/pomodoro-clock-react/build/index.html"
}, },
{ {
"revision": "18588698f155892ce8d1", "revision": "b6d638cd2a0a241849dd",
"url": "/fcc-challenges/pomodoro-clock-react/build/static/css/main.1b8ac635.chunk.css" "url": "/fcc-challenges/pomodoro-clock-react/build/static/css/main.1b8ac635.chunk.css"
}, },
{ {
"revision": "955c972470b036699bb7", "revision": "fbc9cc7de3e1b193242c",
"url": "/fcc-challenges/pomodoro-clock-react/build/static/js/2.a6220f55.chunk.js" "url": "/fcc-challenges/pomodoro-clock-react/build/static/js/2.966a2449.chunk.js"
}, },
{ {
"revision": "c64c486544348f10a6d6c716950bc223", "revision": "c64c486544348f10a6d6c716950bc223",
"url": "/fcc-challenges/pomodoro-clock-react/build/static/js/2.a6220f55.chunk.js.LICENSE.txt" "url": "/fcc-challenges/pomodoro-clock-react/build/static/js/2.966a2449.chunk.js.LICENSE.txt"
}, },
{ {
"revision": "18588698f155892ce8d1", "revision": "b6d638cd2a0a241849dd",
"url": "/fcc-challenges/pomodoro-clock-react/build/static/js/main.56d846f0.chunk.js" "url": "/fcc-challenges/pomodoro-clock-react/build/static/js/main.4e34ae4f.chunk.js"
}, },
{ {
"revision": "8cfbad2a32123298c100", "revision": "8cfbad2a32123298c100",

View File

@ -14,7 +14,7 @@
importScripts("https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js"); importScripts("https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js");
importScripts( importScripts(
"/fcc-challenges/pomodoro-clock-react/build/precache-manifest.26aca98821ee4880d329b4892a380648.js" "/fcc-challenges/pomodoro-clock-react/build/precache-manifest.32c2e006ddde6520f555fbe5a9dcacf3.js"
); );
self.addEventListener('message', (event) => { self.addEventListener('message', (event) => {

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1,9 +1,15 @@
import React from 'react'; import React from 'react';
import { connect } from "react-redux";
import { colors } from './globals' import { colors } from './globals'
import BreakControls from './BreakControls'; import BreakControls from './BreakControls';
const Break = () => { const mapStateToProps = (state) => ({ ...state });
class Break extends React.Component {
render() {
const width = this.props.innerWindowWidth;
const height = this.props.innerWindowHeight;
const style = { const style = {
height: '100%', height: '100%',
width: '50%', width: '50%',
@ -20,12 +26,17 @@ const Break = () => {
color: colors.goldLeaf, color: colors.goldLeaf,
}; };
if (height > width && width < 380) {
breakTextStyle['fontSize'] = 20;
}
return( return(
<div style={style}> <div style={style}>
<div id="break-label" style={breakTextStyle}>Break Length</div> <div id="break-label" style={breakTextStyle}>Break Length</div>
<BreakControls /> <BreakControls />
</div> </div>
); );
}
}; };
export default Break; export default connect(mapStateToProps)(Break);

View File

@ -53,6 +53,7 @@ class PomodoroClock extends React.Component {
style['height'] = Math.round(height * 0.75); style['height'] = Math.round(height * 0.75);
style['maxHeight'] = maxHeight; style['maxHeight'] = maxHeight;
clockContainerStyle['height'] = width > style['height'] ? style['height'] : width; clockContainerStyle['height'] = width > style['height'] ? style['height'] : width;
clockContainerStyle['minHeight'] = '340px';
clockContainerStyle['maxHeight'] = maxHeight; clockContainerStyle['maxHeight'] = maxHeight;
style['width'] = width - 6; style['width'] = width - 6;
style['maxWidth'] = maxWidth; style['maxWidth'] = maxWidth;
@ -60,7 +61,7 @@ class PomodoroClock extends React.Component {
} }
return( return(
<div style={style}> <div id='pomodoroClock' style={style}>
<div id='clockContainer' style={clockContainerStyle}> <div id='clockContainer' style={clockContainerStyle}>
<Top /> <Top />
<Clock /> <Clock />

View File

@ -1,9 +1,15 @@
import React from 'react'; import React from 'react';
import { connect } from "react-redux";
import { colors } from './globals' import { colors } from './globals'
import SessionControls from './SessionControls'; import SessionControls from './SessionControls';
const Session = () => { const mapStateToProps = (state) => ({ ...state });
class Session extends React.Component {
render() {
const width = this.props.innerWindowWidth;
const height = this.props.innerWindowHeight;
const style = { const style = {
height: '100%', height: '100%',
width: '50%', width: '50%',
@ -19,6 +25,10 @@ const Session = () => {
marginLeft: '10%', marginLeft: '10%',
color: colors.goldLeaf, color: colors.goldLeaf,
}; };
if (height > width && width < 380) {
sessionTextStyle['fontSize'] = 20;
}
return( return(
<div style={style}> <div style={style}>
@ -26,6 +36,7 @@ const Session = () => {
<SessionControls /> <SessionControls />
</div> </div>
); );
}
}; };
export default Session; export default connect(mapStateToProps)(Session);

View File

@ -1,10 +1,15 @@
import React from 'react'; import React from 'react';
import { connect } from "react-redux";
import Break from './Break'; import Break from './Break';
import Session from './Session'; import Session from './Session';
const Top = () => { const mapStateToProps = (state) => ({ ...state });
class Top extends React.Component {
render() {
const width = this.props.innerWindowWidth;
const height = this.props.innerWindowHeight;
const style = { const style = {
height: '40%', height: '40%',
width: '100%', width: '100%',
@ -25,6 +30,10 @@ const Top = () => {
display: 'flex', display: 'flex',
} }
if (height > width && width < 385) {
titleStyle['fontSize'] = 36;
}
return( return(
<div style={style}> <div style={style}>
<div style={titleStyle}>Pomodoro Clock</div> <div style={titleStyle}>Pomodoro Clock</div>
@ -34,6 +43,7 @@ const Top = () => {
</div> </div>
</div> </div>
); );
} };
};
export default Top; export default connect(mapStateToProps)(Top);