mirror of
https://github.com/TrentSPalmer/fcc-challenges.git
synced 2024-11-24 20:21:30 -08:00
update portrait layout pomodoro-calculator-react
This commit is contained in:
parent
0141162d14
commit
67ee122157
@ -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"
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
@ -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>
|
||||||
@ -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",
|
||||||
@ -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
File diff suppressed because one or more lines are too long
@ -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);
|
||||||
|
|||||||
@ -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 />
|
||||||
|
|||||||
@ -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);
|
||||||
|
|||||||
@ -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);
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user