mirror of
https://github.com/TrentSPalmer/fcc-challenges.git
synced 2024-11-21 19:31:29 -08:00
add maximize-screen for mobile pomodoro-clock-react
This commit is contained in:
parent
b16d2a23d1
commit
4279f4e75f
@ -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.5e097871.chunk.js",
|
"main.js": "/fcc-challenges/pomodoro-clock-react/build/static/js/main.fc7ef8c4.chunk.js",
|
||||||
"main.js.map": "/fcc-challenges/pomodoro-clock-react/build/static/js/main.5e097871.chunk.js.map",
|
"main.js.map": "/fcc-challenges/pomodoro-clock-react/build/static/js/main.fc7ef8c4.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.9a920135.chunk.js": "/fcc-challenges/pomodoro-clock-react/build/static/js/2.9a920135.chunk.js",
|
"static/js/2.8e985427.chunk.js": "/fcc-challenges/pomodoro-clock-react/build/static/js/2.8e985427.chunk.js",
|
||||||
"static/js/2.9a920135.chunk.js.map": "/fcc-challenges/pomodoro-clock-react/build/static/js/2.9a920135.chunk.js.map",
|
"static/js/2.8e985427.chunk.js.map": "/fcc-challenges/pomodoro-clock-react/build/static/js/2.8e985427.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.7463dc7e171886312079876ff7260b48.js": "/fcc-challenges/pomodoro-clock-react/build/precache-manifest.7463dc7e171886312079876ff7260b48.js",
|
"precache-manifest.e6fd82d65a64f9d87202c6dab0d433f6.js": "/fcc-challenges/pomodoro-clock-react/build/precache-manifest.e6fd82d65a64f9d87202c6dab0d433f6.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.9a920135.chunk.js.LICENSE.txt": "/fcc-challenges/pomodoro-clock-react/build/static/js/2.9a920135.chunk.js.LICENSE.txt",
|
"static/js/2.8e985427.chunk.js.LICENSE.txt": "/fcc-challenges/pomodoro-clock-react/build/static/js/2.8e985427.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.9a920135.chunk.js",
|
"static/js/2.8e985427.chunk.js",
|
||||||
"static/css/main.1b8ac635.chunk.css",
|
"static/css/main.1b8ac635.chunk.css",
|
||||||
"static/js/main.5e097871.chunk.js"
|
"static/js/main.fc7ef8c4.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.9a920135.chunk.js"></script><script src="/fcc-challenges/pomodoro-clock-react/build/static/js/main.5e097871.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.8e985427.chunk.js"></script><script src="/fcc-challenges/pomodoro-clock-react/build/static/js/main.fc7ef8c4.chunk.js"></script></body></html>
|
||||||
@ -1,23 +1,23 @@
|
|||||||
self.__precacheManifest = (self.__precacheManifest || []).concat([
|
self.__precacheManifest = (self.__precacheManifest || []).concat([
|
||||||
{
|
{
|
||||||
"revision": "fcb68efc07dbbc1d30772e3722b055e6",
|
"revision": "d082d68a5399586ec58ce57a803ad208",
|
||||||
"url": "/fcc-challenges/pomodoro-clock-react/build/index.html"
|
"url": "/fcc-challenges/pomodoro-clock-react/build/index.html"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"revision": "da3bf1522b4a976e1c53",
|
"revision": "e840ec85f934321d80d6",
|
||||||
"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": "a8ccb8073b63549a8872",
|
"revision": "f6e963889a1cdeb20ac3",
|
||||||
"url": "/fcc-challenges/pomodoro-clock-react/build/static/js/2.9a920135.chunk.js"
|
"url": "/fcc-challenges/pomodoro-clock-react/build/static/js/2.8e985427.chunk.js"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"revision": "c64c486544348f10a6d6c716950bc223",
|
"revision": "c64c486544348f10a6d6c716950bc223",
|
||||||
"url": "/fcc-challenges/pomodoro-clock-react/build/static/js/2.9a920135.chunk.js.LICENSE.txt"
|
"url": "/fcc-challenges/pomodoro-clock-react/build/static/js/2.8e985427.chunk.js.LICENSE.txt"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"revision": "da3bf1522b4a976e1c53",
|
"revision": "e840ec85f934321d80d6",
|
||||||
"url": "/fcc-challenges/pomodoro-clock-react/build/static/js/main.5e097871.chunk.js"
|
"url": "/fcc-challenges/pomodoro-clock-react/build/static/js/main.fc7ef8c4.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.7463dc7e171886312079876ff7260b48.js"
|
"/fcc-challenges/pomodoro-clock-react/build/precache-manifest.e6fd82d65a64f9d87202c6dab0d433f6.js"
|
||||||
);
|
);
|
||||||
|
|
||||||
self.addEventListener('message', (event) => {
|
self.addEventListener('message', (event) => {
|
||||||
|
|||||||
3
pomodoro-clock-react/build/static/js/2.8e985427.chunk.js
Normal file
3
pomodoro-clock-react/build/static/js/2.8e985427.chunk.js
Normal file
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
@ -2,6 +2,7 @@ import React from 'react';
|
|||||||
import { connect } from "react-redux";
|
import { connect } from "react-redux";
|
||||||
|
|
||||||
import PomodoroClock from './PomodoroClock';
|
import PomodoroClock from './PomodoroClock';
|
||||||
|
import FullScreen from './FullScreen';
|
||||||
|
|
||||||
import { colors } from './globals'
|
import { colors } from './globals'
|
||||||
|
|
||||||
@ -66,7 +67,7 @@ class App extends React.Component {
|
|||||||
fontSize: 48,
|
fontSize: 48,
|
||||||
};
|
};
|
||||||
|
|
||||||
if (width > height && height < 400) {
|
if (width > height && height < 450) {
|
||||||
gitHubLabelStyle['width'] = 99;
|
gitHubLabelStyle['width'] = 99;
|
||||||
attachmentStyle['width'] = 99;
|
attachmentStyle['width'] = 99;
|
||||||
attachmentStyle['height'] = 99;
|
attachmentStyle['height'] = 99;
|
||||||
@ -90,6 +91,7 @@ class App extends React.Component {
|
|||||||
</img>
|
</img>
|
||||||
</a>
|
</a>
|
||||||
<PomodoroClock />
|
<PomodoroClock />
|
||||||
|
{ navigator.userAgent.includes('Mobile') && <FullScreen /> }
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
38
pomodoro-clock-react/src/FullScreen.js
Normal file
38
pomodoro-clock-react/src/FullScreen.js
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||||
|
import { faExpand } from "@fortawesome/free-solid-svg-icons";
|
||||||
|
|
||||||
|
class FullScreen extends React.Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
this.handleClick = this.handleClick.bind(this);
|
||||||
|
};
|
||||||
|
|
||||||
|
handleClick(e) {
|
||||||
|
if (!document.fullscreenElement) {
|
||||||
|
document.documentElement.requestFullscreen();
|
||||||
|
} else {
|
||||||
|
if (document.exitFullscreen){
|
||||||
|
document.exitFullscreen();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const expandIconStyle = {
|
||||||
|
position: 'fixed',
|
||||||
|
fontSize: 32,
|
||||||
|
bottom: 10,
|
||||||
|
right: 10,
|
||||||
|
}
|
||||||
|
|
||||||
|
return(
|
||||||
|
<div>
|
||||||
|
<FontAwesomeIcon icon={faExpand} style={expandIconStyle} onClick={this.handleClick}/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
export default FullScreen;
|
||||||
@ -39,12 +39,17 @@ class PomodoroClock extends React.Component {
|
|||||||
width: '100%',
|
width: '100%',
|
||||||
};
|
};
|
||||||
|
|
||||||
if (width > height && height < 400) {
|
if (width > height && height < 450) {
|
||||||
style['height'] = '96vh';
|
style['height'] = '96vh';
|
||||||
style['width'] = '75vw';
|
style['width'] = '75vw';
|
||||||
style['margin'] = '1vh auto 3vh auto';
|
style['margin'] = '1vh auto 3vh auto';
|
||||||
style['fontSize'] = 24;
|
style['fontSize'] = 24;
|
||||||
} else if (height > width) {
|
} else if (height > width) {
|
||||||
|
if (height > (maxHeight + 179)) {
|
||||||
|
style['margin'] = 'auto';
|
||||||
|
} else {
|
||||||
|
style['margin'] = '99px 0 80px 0';
|
||||||
|
}
|
||||||
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;
|
||||||
@ -56,7 +61,7 @@ class PomodoroClock extends React.Component {
|
|||||||
|
|
||||||
return(
|
return(
|
||||||
<div style={style}>
|
<div style={style}>
|
||||||
<div style={clockContainerStyle}>
|
<div id='clockContainer' style={clockContainerStyle}>
|
||||||
<Top />
|
<Top />
|
||||||
<Clock />
|
<Clock />
|
||||||
<Controls />
|
<Controls />
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user