trent/fcc-challenges
1
0
Fork 0
mirror of https://github.com/TrentSPalmer/fcc-challenges.git synced 2024-11-22 03:31:31 -08:00
Code Issues Projects Releases Wiki Activity

update portrait layout pomodoro-calculator-react

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
pomodoro-clock-react/build/asset-manifest.json
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"
] ]
} }

2
pomodoro-clock-react/build/index.html
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>

14
pomodoro-clock-react/build/precache-manifest.26aca98821ee4880d329b4892a380648.js → pomodoro-clock-react/build/precache-manifest.32c2e006ddde6520f555fbe5a9dcacf3.js
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",

2
pomodoro-clock-react/build/service-worker.js
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) => {

6
pomodoro-clock-react/build/static/js/2.a6220f55.chunk.js → pomodoro-clock-react/build/static/js/2.966a2449.chunk.js
View File

File diff suppressed because one or more lines are too long

0
pomodoro-clock-react/build/static/js/2.a6220f55.chunk.js.LICENSE.txt → pomodoro-clock-react/build/static/js/2.966a2449.chunk.js.LICENSE.txt
View File

1
pomodoro-clock-react/build/static/js/2.966a2449.chunk.js.map Normal file
View File

File diff suppressed because one or more lines are too long

1
pomodoro-clock-react/build/static/js/2.a6220f55.chunk.js.map
View File

File diff suppressed because one or more lines are too long

2
pomodoro-clock-react/build/static/js/main.4e34ae4f.chunk.js Normal file
View File

File diff suppressed because one or more lines are too long

1
pomodoro-clock-react/build/static/js/main.4e34ae4f.chunk.js.map Normal file
View File

File diff suppressed because one or more lines are too long

2
pomodoro-clock-react/build/static/js/main.56d846f0.chunk.js
View File

File diff suppressed because one or more lines are too long

1
pomodoro-clock-react/build/static/js/main.56d846f0.chunk.js.map
View File

File diff suppressed because one or more lines are too long

51
pomodoro-clock-react/src/Break.js
View File

@ -1,31 +1,42 @@
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 });
const style = {
height: '100%',
width: '50%',
};
const breakTextStyle = { class Break extends React.Component {
height: '50%', render() {
width: '90%', const width = this.props.innerWindowWidth;
display: 'flex', const height = this.props.innerWindowHeight;
flexDirection: 'column', const style = {
justifyContent: 'center', height: '100%',
textAlign: 'right', width: '50%',
marginRight: '10%', };
color: colors.goldLeaf,
};
return( const breakTextStyle = {
<div style={style}> height: '50%',
width: '90%',
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
textAlign: 'right',
marginRight: '10%',
color: colors.goldLeaf,
};
if (height > width && width < 380) {
breakTextStyle['fontSize'] = 20;
}
return(
<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);

3
pomodoro-clock-react/src/PomodoroClock.js
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 />

51
pomodoro-clock-react/src/Session.js
View File

@ -1,31 +1,42 @@
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 });
const style = {
height: '100%',
width: '50%',
};
const sessionTextStyle = { class Session extends React.Component {
height: '50%', render() {
width: '90%', const width = this.props.innerWindowWidth;
display: 'flex', const height = this.props.innerWindowHeight;
flexDirection: 'column', const style = {
justifyContent: 'center', height: '100%',
textAlign: 'left', width: '50%',
marginLeft: '10%', };
color: colors.goldLeaf,
};
return( const sessionTextStyle = {
<div style={style}> height: '50%',
width: '90%',
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
textAlign: 'left',
marginLeft: '10%',
color: colors.goldLeaf,
};
if (height > width && width < 380) {
sessionTextStyle['fontSize'] = 20;
}
return(
<div style={style}>
<div id="session-label" style={sessionTextStyle}>Session Length</div> <div id="session-label" style={sessionTextStyle}>Session Length</div>
<SessionControls /> <SessionControls />
</div> </div>
); );
}
}; };
export default Session; export default connect(mapStateToProps)(Session);

62
pomodoro-clock-react/src/Top.js
View File

@ -1,39 +1,49 @@
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 });
const style = { class Top extends React.Component {
height: '40%', render() {
width: '100%', const width = this.props.innerWindowWidth;
} const height = this.props.innerWindowHeight;
const style = {
height: '40%',
width: '100%',
}
const titleStyle = { const titleStyle = {
height: '50%', height: '50%',
width: '100%', width: '100%',
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
justifyContent: 'center', justifyContent: 'center',
fontSize: 48, fontSize: 48,
} }
const breakAndSessionStyle = { const breakAndSessionStyle = {
height: '50%', height: '50%',
width: '100%', width: '100%',
display: 'flex', display: 'flex',
} }
return( if (height > width && width < 385) {
<div style={style}> titleStyle['fontSize'] = 36;
}
return(
<div style={style}>
<div style={titleStyle}>Pomodoro Clock</div> <div style={titleStyle}>Pomodoro Clock</div>
<div style={breakAndSessionStyle}> <div style={breakAndSessionStyle}>
<Break /> <Break />
<Session /> <Session />
</div> </div>
</div> </div>
); );
} };
};
export default Top; export default connect(mapStateToProps)(Top);