Commit e25d973f authored by Jiawen Lyu's avatar Jiawen Lyu

add layout

parent c80441dd
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<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="%PUBLIC_URL%/logo192.png" />
<!--
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous" />
<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="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
......@@ -24,12 +24,13 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
......@@ -39,5 +40,6 @@
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
</body>
</html>
\ No newline at end of file
......@@ -2,37 +2,23 @@
text-align: center;
}
.App-logo {
height: 40vmin;
pointer-events: none;
}
.clearfix::after{
content: "";
display: block;
clear: both;
@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}
.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
.wrapper {
padding: 0 0 0 200px;
}
.App-link {
color: #61dafb;
.main {
float: left;
width: 100%;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
.left {
float: left;
width: 200px;
margin-left: -100%;
position: relative;
left: -200px;
}
......@@ -39,13 +39,44 @@ class App extends Component {
const { currentTimeFormatState, messages } = this.state;
return (
<div>
<div className="scheduler-container">
<SchedulerWithData
timeFormatState={currentTimeFormatState}
onDataUpdated={this.logDataUpdate}
/>
<header>nihao</header>
<div class="clearfix wrapper">
<div class="main">
<div className="scheduler-container">
<SchedulerWithData
timeFormatState={currentTimeFormatState}
onDataUpdated={this.logDataUpdate}
/>
</div>
<MessageArea messages={messages} />
</div>
<div class="left">
<div class="row">
<div class="col"></div>
<div class="col">
<form>
<div class="row">
<label for="exampleInputEmail1">Login</label>
</div>
<div class="row">
<div class="col">
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" />
</div>
<div class="col">
<button type="submit" class="btn btn-primary btn-sm">Submit</button>
</div>
</div>
</form>
</div>
<div class="col"></div>
</div>
</div>
</div>
<MessageArea messages={messages} />
<footer>
UTC SR03 P20
</footer>
</div >
);
......
......@@ -99,7 +99,6 @@ const getCurrentStudents = data => Array.from(new Set(data.map(elem => elem.logi
const withUVs = WrappedComponent => props => {
const { data, login } = props;
console.log("withUVs: ", data)
const uvs = extractUvDateInfo(data, login)
const currentStudents = getCurrentStudents(uvs)
return <WrappedComponent events={uvs} currentStudents={currentStudents} {...props} />;
......
.scheduler-container {
height: calc(100vh - 200px);
width: 100vw;
/* width: 100vw; */
}
\ No newline at end of file
class LocalStorageManager {
constructor(storage = window.localStorage) {
this.storage = storage
}
get(key) {
try {
return JSON.parse(this.storage.getItem(key))
} catch (e) {
return undefined
}
}
set(key, value) {
const valueStr = JSON.stringify(value)
this.storage.setItem(key, valueStr)
}
remove(key) {
return this.storage.removeItem(key)
}
loggedUser() {
return this.get('loggedUser')
}
userToken() {
return this.get('userToken')
}
registerDate() {
return this.get('registerDate')
}
}
export default LocalStorageManager
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment