Merge branch 'main' into material-ui-setup
This commit is contained in:
cth0604
GitHub
commit
22ac34dee4
1
env/local.env
vendored
Normal file
1
env/local.env
vendored
Normal file
@ -0,0 +1 @@
|
|||||||
|
ENV=local
|
||||||
5758
package-lock.json
generated
5758
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -13,7 +13,6 @@
|
|||||||
"@mui/icons-material": "^5.4.2",
|
"@mui/icons-material": "^5.4.2",
|
||||||
"@mui/material": "^5.4.3",
|
"@mui/material": "^5.4.3",
|
||||||
"react": "^17.0.2",
|
"react": "^17.0.2",
|
||||||
"react-bootstrap": "^2.1.2",
|
|
||||||
"react-dom": "^17.0.2",
|
"react-dom": "^17.0.2",
|
||||||
"react-router-dom": "^6.2.1"
|
"react-router-dom": "^6.2.1"
|
||||||
},
|
},
|
||||||
@ -49,7 +48,6 @@
|
|||||||
"@types/dotenv-webpack": "^7.0.3",
|
"@types/dotenv-webpack": "^7.0.3",
|
||||||
"@types/node": "^12.20.25",
|
"@types/node": "^12.20.25",
|
||||||
"@types/react": "^17.0.21",
|
"@types/react": "^17.0.21",
|
||||||
"@types/react-bootstrap": "^0.32.29",
|
|
||||||
"@types/react-dom": "^17.0.9",
|
"@types/react-dom": "^17.0.9",
|
||||||
"@types/react-router-dom": "^5.3.3",
|
"@types/react-router-dom": "^5.3.3",
|
||||||
"@types/webpack": "^5.28.0",
|
"@types/webpack": "^5.28.0",
|
||||||
@ -64,6 +62,7 @@
|
|||||||
"file-loader": "^6.2.0",
|
"file-loader": "^6.2.0",
|
||||||
"html-webpack-plugin": "^5.3.1",
|
"html-webpack-plugin": "^5.3.1",
|
||||||
"husky": "^7.0.0",
|
"husky": "^7.0.0",
|
||||||
|
"image-webpack-loader": "^8.1.0",
|
||||||
"style-loader": "^2.0.0",
|
"style-loader": "^2.0.0",
|
||||||
"ts-loader": "^8.0.18",
|
"ts-loader": "^8.0.18",
|
||||||
"ts-node": "^9.1.1",
|
"ts-node": "^9.1.1",
|
||||||
|
|||||||
@ -9,6 +9,8 @@ import { ThemeProvider } from "@emotion/react";
|
|||||||
|
|
||||||
import Theme from "./Theme";
|
import Theme from "./Theme";
|
||||||
|
|
||||||
|
import "./style/App.css";
|
||||||
|
|
||||||
const App: React.FC = () => {
|
const App: React.FC = () => {
|
||||||
return (
|
return (
|
||||||
<ThemeProvider theme={Theme}>
|
<ThemeProvider theme={Theme}>
|
||||||
|
|||||||
@ -1,59 +1,89 @@
|
|||||||
import React from "react";
|
import people from "./images/people.png";
|
||||||
import { Box, Button } from "@mui/material";
|
import plus from "./images/plus.png";
|
||||||
import GroupsIcon from "@mui/icons-material/Groups";
|
import phoneCall from "./images/phone-call.png";
|
||||||
import AddIcon from "@mui/icons-material/Add";
|
import circle from "./images/circle.png";
|
||||||
import CallIcon from "@mui/icons-material/Call";
|
|
||||||
import FiberManualRecordIcon from "@mui/icons-material/FiberManualRecord";
|
|
||||||
|
|
||||||
const Home:React.FC = () => {
|
const Home:React.FC = () => {
|
||||||
return (
|
return (
|
||||||
<Box
|
<html lang="en">
|
||||||
sx={{
|
<head>
|
||||||
display: "flex",
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
flexDirection: "row",
|
<title>Digital Walk-Around</title>
|
||||||
height: "75%",
|
</head>
|
||||||
}}
|
<body>
|
||||||
>
|
<div className="container-fluid">
|
||||||
<Box sx={{ flexGrow: 1 }}>hi</Box>
|
<div className="row main-home">
|
||||||
<Box
|
<div className="col-8">
|
||||||
sx={{
|
<div className="meetings-panel">
|
||||||
display: "flex",
|
<div className="row current-time">
|
||||||
flexDirection: "row",
|
<label>10:34 AM</label>
|
||||||
flexGrow: 1,
|
</div>
|
||||||
alignItems: "center",
|
<div className="row current-date">
|
||||||
justifyContent: "space-evenly",
|
<label>Sunday, 03 Feb 2022</label>
|
||||||
}}
|
</div>
|
||||||
>
|
|
||||||
<Box>
|
<div className="row meeting">
|
||||||
<Button
|
<div className="col-12">
|
||||||
color="secondary"
|
<div className="row">
|
||||||
variant="outlined"
|
<label>Metting Name</label>
|
||||||
startIcon={<GroupsIcon />}
|
</div>
|
||||||
></Button>
|
<div className="row">
|
||||||
</Box>
|
<label>Metting time</label>
|
||||||
<Box>
|
</div>
|
||||||
<Button
|
</div>
|
||||||
color="secondary"
|
</div>
|
||||||
variant="outlined"
|
</div>
|
||||||
startIcon={<GroupsIcon />}
|
</div>
|
||||||
></Button>
|
<div className="col-4 short-cuts">
|
||||||
</Box>
|
<div className="row row-1">
|
||||||
<Box>
|
<div className="col-6">
|
||||||
<Button
|
<div className="row">
|
||||||
color="secondary"
|
<a className="tile btn">
|
||||||
variant="outlined"
|
<img src={ people } />
|
||||||
startIcon={<GroupsIcon />}
|
</a>
|
||||||
></Button>
|
</div>
|
||||||
</Box>
|
<div className="row">
|
||||||
<Box>
|
<label>New Meeting</label>
|
||||||
<Button
|
</div>
|
||||||
color="secondary"
|
</div>
|
||||||
variant="outlined"
|
<div className="col-6">
|
||||||
startIcon={<GroupsIcon />}
|
<div className="row">
|
||||||
></Button>
|
<a className="tile btn">
|
||||||
</Box>
|
<img src={ plus } />
|
||||||
</Box>
|
</a>
|
||||||
</Box>
|
</div>
|
||||||
|
<div className="row">
|
||||||
|
<label>Join</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="row row-2">
|
||||||
|
<div className="col-6">
|
||||||
|
<div className="row">
|
||||||
|
<a className="tile btn">
|
||||||
|
<img src={ phoneCall } />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div className="row">
|
||||||
|
<label>Call Favourites</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="col-6">
|
||||||
|
<div className="row">
|
||||||
|
<a className="tile btn">
|
||||||
|
<img src={ circle } />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div className="row">
|
||||||
|
<label>Recordings</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
BIN
src/components/home/images/circle.png
Normal file
BIN
src/components/home/images/circle.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
BIN
src/components/home/images/people.png
Normal file
BIN
src/components/home/images/people.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
BIN
src/components/home/images/phone-call.png
Normal file
BIN
src/components/home/images/phone-call.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
src/components/home/images/plus.png
Normal file
BIN
src/components/home/images/plus.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
138
src/style/App.css
Normal file
138
src/style/App.css
Normal file
@ -0,0 +1,138 @@
|
|||||||
|
.col-1 {
|
||||||
|
width: 8.33% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-2 {
|
||||||
|
width: 16.66% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-3 {
|
||||||
|
width: 25% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-4 {
|
||||||
|
width: 33.33% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-5 {
|
||||||
|
width: 41.66% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-6 {
|
||||||
|
width: 50% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-7 {
|
||||||
|
width: 58.33% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-8 {
|
||||||
|
width: 66.66% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-9 {
|
||||||
|
width: 75% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-10 {
|
||||||
|
width: 83.33% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-11 {
|
||||||
|
width: 91.66% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-12 {
|
||||||
|
width: 100% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
[class*="col-"] {
|
||||||
|
-webkit-box-flex: 0;
|
||||||
|
-ms-flex: 0 0 auto;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.row {
|
||||||
|
-webkit-box-sizing: border-box;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.row * {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container-fluid {
|
||||||
|
width: 100%;
|
||||||
|
margin-right: auto;
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
label {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-home .meetings-panel {
|
||||||
|
display: block;
|
||||||
|
margin-top: 20vh;
|
||||||
|
margin-left: 10vw;
|
||||||
|
border-style: solid;
|
||||||
|
border-color: #D3D3D3;
|
||||||
|
border-width: 2px;
|
||||||
|
width: 40vw;
|
||||||
|
height: 60vh;
|
||||||
|
border-radius: 40px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-home .meetings-panel .row {
|
||||||
|
width: 100%;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-home .meetings-panel .current-time {
|
||||||
|
text-align: center;
|
||||||
|
background-color: grey;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-home .meetings-panel .current-date {
|
||||||
|
text-align: center;
|
||||||
|
background-color: grey;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-home .meetings-panel .meeting {
|
||||||
|
background-color: #D3D3D3;
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-home .short-cuts .row-1 {
|
||||||
|
margin-top: 25vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-home .short-cuts .row-2 {
|
||||||
|
margin-top: 5vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-home .short-cuts label {
|
||||||
|
width: 10vw;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-home .short-cuts .tile {
|
||||||
|
background-color: #D3D3D3;
|
||||||
|
width: 10vw;
|
||||||
|
height: 10vw;
|
||||||
|
border-radius: 1.5vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-home .short-cuts .tile img {
|
||||||
|
width: 70%;
|
||||||
|
height: 70%;
|
||||||
|
margin-top: 15%;
|
||||||
|
margin-left: 15%;
|
||||||
|
}
|
||||||
|
/*# sourceMappingURL=style.css.map */
|
||||||
17
src/style/App.css.map
Normal file
17
src/style/App.css.map
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
{
|
||||||
|
"version": 3,
|
||||||
|
"mappings": "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",
|
||||||
|
"sources": [
|
||||||
|
"style.sass",
|
||||||
|
"_variables.sass",
|
||||||
|
"base/_base-dir.sass",
|
||||||
|
"base/_base.sass",
|
||||||
|
"layouts/_layouts-dir.sass",
|
||||||
|
"layouts/_header.sass",
|
||||||
|
"layouts/_footer.sass",
|
||||||
|
"modules/_modules-dir.sass",
|
||||||
|
"modules/_mainHome.sass"
|
||||||
|
],
|
||||||
|
"names": [],
|
||||||
|
"file": "style.css"
|
||||||
|
}
|
||||||
4
src/style/App.sass
Normal file
4
src/style/App.sass
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
@import "variables"
|
||||||
|
@import "base/base-dir"
|
||||||
|
@import "layouts/layouts-dir"
|
||||||
|
@import "modules/modules-dir"
|
||||||
1
src/style/_variables.sass
Normal file
1
src/style/_variables.sass
Normal file
@ -0,0 +1 @@
|
|||||||
|
$main-home-background-color: #D3D3D3
|
||||||
1
src/style/base/_base-dir.sass
Normal file
1
src/style/base/_base-dir.sass
Normal file
@ -0,0 +1 @@
|
|||||||
|
@import "base"
|
||||||
42
src/style/base/_base.sass
Normal file
42
src/style/base/_base.sass
Normal file
@ -0,0 +1,42 @@
|
|||||||
|
.col-1
|
||||||
|
width: 8.33% !important
|
||||||
|
.col-2
|
||||||
|
width: 16.66% !important
|
||||||
|
.col-3
|
||||||
|
width: 25% !important
|
||||||
|
.col-4
|
||||||
|
width: 33.33% !important
|
||||||
|
.col-5
|
||||||
|
width: 41.66% !important
|
||||||
|
.col-6
|
||||||
|
width: 50% !important
|
||||||
|
.col-7
|
||||||
|
width: 58.33% !important
|
||||||
|
.col-8
|
||||||
|
width: 66.66% !important
|
||||||
|
.col-9
|
||||||
|
width: 75% !important
|
||||||
|
.col-10
|
||||||
|
width: 83.33% !important
|
||||||
|
.col-11
|
||||||
|
width: 91.66% !important
|
||||||
|
.col-12
|
||||||
|
width: 100% !important
|
||||||
|
|
||||||
|
[class*="col-"]
|
||||||
|
flex: 0 0 auto
|
||||||
|
|
||||||
|
.row
|
||||||
|
box-sizing: border-box
|
||||||
|
display: flex
|
||||||
|
max-width: 100%
|
||||||
|
*
|
||||||
|
width: 100%
|
||||||
|
|
||||||
|
.container-fluid
|
||||||
|
width: 100%
|
||||||
|
margin-right: auto
|
||||||
|
margin-left: auto
|
||||||
|
|
||||||
|
label
|
||||||
|
display: inline-block
|
||||||
0
src/style/layouts/_footer.sass
Normal file
0
src/style/layouts/_footer.sass
Normal file
0
src/style/layouts/_header.sass
Normal file
0
src/style/layouts/_header.sass
Normal file
2
src/style/layouts/_layouts-dir.sass
Normal file
2
src/style/layouts/_layouts-dir.sass
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
@import "header"
|
||||||
|
@import "footer"
|
||||||
44
src/style/modules/_mainHome.sass
Normal file
44
src/style/modules/_mainHome.sass
Normal file
@ -0,0 +1,44 @@
|
|||||||
|
.main-home
|
||||||
|
.meetings-panel
|
||||||
|
display: block
|
||||||
|
margin-top: 20vh
|
||||||
|
margin-left: 10vw
|
||||||
|
border-style: solid
|
||||||
|
border-color: $main-home-background-color
|
||||||
|
border-width: 2px
|
||||||
|
width: 40vw
|
||||||
|
height: 60vh
|
||||||
|
border-radius: 40px
|
||||||
|
overflow: hidden
|
||||||
|
.row
|
||||||
|
width: 100%
|
||||||
|
margin: 0
|
||||||
|
.current-time
|
||||||
|
text-align: center
|
||||||
|
background-color: grey
|
||||||
|
.current-date
|
||||||
|
text-align: center
|
||||||
|
background-color: grey
|
||||||
|
.meeting
|
||||||
|
background-color: $main-home-background-color
|
||||||
|
text-align: center
|
||||||
|
margin-top: 15px
|
||||||
|
|
||||||
|
.short-cuts
|
||||||
|
.row-1
|
||||||
|
margin-top: 25vh
|
||||||
|
.row-2
|
||||||
|
margin-top: 5vh
|
||||||
|
label
|
||||||
|
width: 10vw
|
||||||
|
text-align: center
|
||||||
|
.tile
|
||||||
|
background-color: $main-home-background-color
|
||||||
|
width: 10vw
|
||||||
|
height: 10vw
|
||||||
|
border-radius: 1.5vw
|
||||||
|
img
|
||||||
|
width: 70%
|
||||||
|
height: 70%
|
||||||
|
margin-top: 15%
|
||||||
|
margin-left: 15%
|
||||||
1
src/style/modules/_modules-dir.sass
Normal file
1
src/style/modules/_modules-dir.sass
Normal file
@ -0,0 +1 @@
|
|||||||
|
@import "mainHome"
|
||||||
3
src/types/images.d.ts
vendored
Normal file
3
src/types/images.d.ts
vendored
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
declare module "*.jpg";
|
||||||
|
declare module "*.jpeg";
|
||||||
|
declare module "*.png";
|
||||||
Reference in New Issue
Block a user