add maximize-screen for mobile pomodoro-clock-react

pomodoro-clock-react/src/App.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { connect } from "react-redux";
 
 import PomodoroClock from './PomodoroClock';
+import FullScreen from './FullScreen';
 
 import { colors } from './globals'
 
@@ -66,7 +67,7 @@ class App extends React.Component {
       fontSize: 48,
     };
 
-    if (width > height && height < 400) {
+    if (width > height && height < 450) {
       gitHubLabelStyle['width'] = 99;
       attachmentStyle['width'] = 99;
       attachmentStyle['height'] = 99;
@@ -90,6 +91,7 @@ class App extends React.Component {
       </img>
       </a>
       <PomodoroClock />
+      {  navigator.userAgent.includes('Mobile') && <FullScreen />  }
       </div>
     );
   };

pomodoro-clock-react/src/FullScreen.js

@@ -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;

pomodoro-clock-react/src/PomodoroClock.js

@@ -39,12 +39,17 @@ class PomodoroClock extends React.Component {
       width: '100%',
     };
 
-    if (width > height && height < 400) {
+    if (width > height && height < 450) {
       style['height'] = '96vh';
       style['width'] = '75vw';
       style['margin'] = '1vh auto 3vh auto';
       style['fontSize'] = 24;
     } 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['maxHeight'] = maxHeight;
       clockContainerStyle['height'] = width > style['height'] ? style['height'] : width; 
@@ -56,7 +61,7 @@ class PomodoroClock extends React.Component {
 
     return(
       <div style={style}>
-        <div style={clockContainerStyle}>
+        <div id='clockContainer' style={clockContainerStyle}>
           <Top />
           <Clock />
           <Controls />