Use react-github-corner module and start dateswitchbar component

Also
1. Add empty typedef for react-github-corner
2. Rotate square a+ animation for dateswitchbar component done
This commit is contained in:
2018-03-24 19:52:23 +05:30
parent 743ded6645
commit afe4767cc6
8 changed files with 102 additions and 1 deletions
+21 -1
View File
@@ -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);
}
+14
View File
@@ -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 (
<div className="IsNiftyOpenApp">
<div className="top-bar">
<GithubCorner
href="https://github.com/bendtherules/is-nifty-open"
bannerColor="rgb(64, 64, 64)"
octoColor="rgba(255, 255, 255, 0.9)"
size={80}
direction="right"
/>
<div className="DateSwitchBar-container">
<DateSwitchBar />
</div>
</div>
<div className="upper-half">
<div className="OpenXDay-container">
<OpenXDay