diff --git a/package.json b/package.json index 4d17d52..3174649 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "moment-timezone": "^0.5.14", "react": "^16.2.0", "react-dom": "^16.2.0", + "react-github-corner": "^2.1.0", "react-router-dom": "^4.2.2", "react-scripts-ts": "2.13.0" }, diff --git a/src/Components/DateSwitchBar/Component.css b/src/Components/DateSwitchBar/Component.css new file mode 100644 index 0000000..fc67ff0 --- /dev/null +++ b/src/Components/DateSwitchBar/Component.css @@ -0,0 +1,22 @@ +.DateSwitchBar { + width: 100%; + height: 3.5vh; + position: relative; +} + +.icon { + position: absolute; + left: 50%; + top: 0; + transform: translate(-50%, 0); + width: 3.5vh; + height: 3.5vh; + border: .15em solid rgba(255, 255, 255, 0.75); + background-color: rgba(255, 255, 255, 0.25); + + transition: transform .75s cubic-bezier(0.175, 0.885, 0.32, 1.275); +} + +.icon-rotated { + transform: translate(-50%, 0) rotate(-135deg); +} \ No newline at end of file diff --git a/src/Components/DateSwitchBar/Component.tsx b/src/Components/DateSwitchBar/Component.tsx new file mode 100644 index 0000000..9ef33cb --- /dev/null +++ b/src/Components/DateSwitchBar/Component.tsx @@ -0,0 +1,38 @@ +import * as React from 'react'; +import * as classNames from 'classnames'; +import './Component.css'; + +export class DateSwitchBar extends React.Component<{}, { rotated: boolean }> { + + constructor(props: {}) { + super(props); + this.updateFromProps(props); + + this.state = { rotated: false }; + } + + componentDidMount() { + setTimeout(() => { this.setState({ rotated: true }); }, 1000); + } + + componentWillUpdate(nextProps: {}, nextState: {}) { + this.updateFromProps(nextProps); + } + + updateFromProps(props: {}) { + // do nothing for now + } + + render() { + const iconClasses = ["icon"]; + if (this.state.rotated) { + iconClasses.push("icon-rotated"); + } + + return ( +
+
+
+ ); + } +} \ No newline at end of file diff --git a/src/Components/DateSwitchBar/index.tsx b/src/Components/DateSwitchBar/index.tsx new file mode 100644 index 0000000..d191540 --- /dev/null +++ b/src/Components/DateSwitchBar/index.tsx @@ -0,0 +1 @@ +export { DateSwitchBar } from './Component'; \ No newline at end of file diff --git a/src/Components/IsNiftyOpenApp/App.css b/src/Components/IsNiftyOpenApp/App.css index d2254f7..d2eb93c 100644 --- a/src/Components/IsNiftyOpenApp/App.css +++ b/src/Components/IsNiftyOpenApp/App.css @@ -53,14 +53,22 @@ height: 100%; } +.App .top-bar { + z-index: 1; +} + .App .upper-half { width: 100%; height: 80vh; + position: relative; + z-index: -1; } .App .lower-half { width: 100%; height: 20vh; + + z-index: -1; } .App .OpenXDayMini, .App .NextOpenCloseMini { @@ -79,11 +87,23 @@ } .App .OpenXPlusOneDay-container .OpenXDayMini { - border-right: 5px solid rgba(255, 255, 255, 0.6); + border-right: 2.5px solid rgba(255, 255, 255, 0.6); +} + +.App .NextOpenClose-container .NextOpenCloseMini { + border-left: 2.5px solid rgba(255, 255, 255, 0.6); } .App .NextOpenClose-container { float: right; width: 50%; height: 100%; +} + +.App .DateSwitchBar-container { + position: absolute; + top: 4vh; + left: 50%; + width: 75%; + transform: translate(-50%, 0); } \ No newline at end of file diff --git a/src/Components/IsNiftyOpenApp/App.tsx b/src/Components/IsNiftyOpenApp/App.tsx index 50a793b..4edba3a 100644 --- a/src/Components/IsNiftyOpenApp/App.tsx +++ b/src/Components/IsNiftyOpenApp/App.tsx @@ -1,7 +1,9 @@ import * as React from 'react'; import { Switch, Route, Redirect } from 'react-router-dom'; import * as moment from 'moment-timezone'; +import GithubCorner from 'react-github-corner'; import './App.css'; +import { DateSwitchBar } from '../DateSwitchBar'; import { OpenXDay } from '../OpenXDay'; import { OpenXDayMini } from '../OpenXDayMini'; import { NextOpenCloseMini } from '../NextOpenCloseMini'; @@ -76,6 +78,18 @@ class IsNiftyOpenApp extends React.Component { return (
+
+ +
+ +
+