UBC/Alley-HSBC-Frontend
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request #5 from CPSC319-Winter-term-2/cochrane

Browse Source 
Cochrane
This commit is contained in:
cth0604 2022-03-07 14:32:04 -08:00 committed by GitHub
commit ff53f91a62
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 196 additions and 229 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

97
src/components/home/Home.tsx
View File

@ -1,89 +1,20 @@
import people from "./images/people.png"; import MeetingsPanel from "./MeetingsPanel";
import plus from "./images/plus.png"; import ShortCuts from "./ShortCuts";
import phoneCall from "./images/phone-call.png"; import Container from "@mui/material/Container";
import circle from "./images/circle.png"; import Grid from "@mui/material/Grid";
const Home: React.FC = () => { const Home: React.FC = () => {
return ( return (
<html lang="en"> <Container className="main-home">
<head> <Grid container>
<meta name="viewport" content="width=device-width, initial-scale=1" /> <Grid item sm={8}>
<title>Digital Walk-Around</title> <MeetingsPanel />
</head> </Grid>
<body> <Grid item sm={4}>
<div className="container-fluid"> <ShortCuts />
<div className="row main-home"> </Grid>
<div className="col-8"> </Grid>
<div className="meetings-panel"> </Container>
<div className="row current-time">
<label>10:34 AM</label>
</div>
<div className="row current-date">
<label>Sunday, 03 Feb 2022</label>
</div>
<div className="row meeting">
<div className="col-12">
<div className="row">
<label>Metting Name</label>
</div>
<div className="row">
<label>Metting time</label>
</div>
</div>
</div>
</div>
</div>
<div className="col-4 short-cuts">
<div className="row row-1">
<div className="col-6">
<div className="row">
<a className="tile btn">
<img src={people} />
</a>
</div>
<div className="row">
<label>New Meeting</label>
</div>
</div>
<div className="col-6">
<div className="row">
<a className="tile btn">
<img src={plus} />
</a>
</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>
); );
}; };

17
src/components/home/Meeting.tsx Normal file
View File

@ -0,0 +1,17 @@
function Meeting(props: any) {
return (
<div className="row meeting">
<div className="col-12">
<div className="row">
<label>{props.meetingName}</label>
</div>
<div className="row">
<label>{props.meetingTime}</label>
</div>
</div>
</div>
);
};
export default Meeting;

19
src/components/home/MeetingsPanel.tsx Normal file
View File

@ -0,0 +1,19 @@
import Meeting from "./Meeting";
const MeetingsPanel: React.FC = () => {
return (
<div className="meetings-panel">
<div className="row current-time">
<label>10:34 AM</label>
</div>
<div className="row current-date">
<label>Sunday, 03 Feb 2022</label>
</div>
<Meeting meetingName="first meeting" meetingTime="time" />
<Meeting meetingName="second meeting" meetingTime="time" />
</div>
);
};
export default MeetingsPanel;

43
src/components/home/ShortCuts.tsx Normal file
View File

@ -0,0 +1,43 @@
import PeopleIcon from '@mui/icons-material/People';
import AddIcon from '@mui/icons-material/Add';
import PhoneEnabledIcon from '@mui/icons-material/PhoneEnabled';
import CircleIcon from '@mui/icons-material/Circle';
import Button from "@mui/material/Button";
import Grid from "@mui/material/Grid";
const ShortCuts: React.FC = () => {
return (
<div className="short-cuts" >
<Grid className="row-1" container spacing={1}>
<Grid item sm={6}>
<Button className="tile">
<PeopleIcon className="icon" />
</Button>
<label>New Meeting</label>
</Grid>
<Grid item sm={6}>
<Button className="tile">
<AddIcon className="icon" />
</Button>
<label>Join</label>
</Grid>
</Grid>
<Grid className="row-2" container spacing={1}>
<Grid item sm={6}>
<Button className="tile">
<PhoneEnabledIcon className="icon" />
</Button>
<label>Call Favourites</label>
</Grid>
<Grid item sm={6}>
<Button className="tile">
<CircleIcon className="icon" />
</Button>
<label>Recordings</label>
</Grid>
</Grid>
</div>
);
};
export default ShortCuts;

11
src/components/login/Login.tsx Normal file
View File

@ -0,0 +1,11 @@
import Container from "@mui/material/Container";
const Login: React.FC = () => {
return (
<Container className="login">
Login
</Container>
);
};
export default Login;

108
src/style/App.css
View File

@ -1,116 +1,49 @@
.col-1 { .full-width {
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%; width: 100%;
} }
.container-fluid { .main-home {
width: 100%; max-width: 85% !important;
margin-right: auto;
margin-left: auto;
}
label {
display: inline-block;
} }
.main-home .meetings-panel { .main-home .meetings-panel {
display: block; margin: auto;
margin-top: 20vh; margin-top: 15vh;
margin-left: 10vw;
border-style: solid; border-style: solid;
border-color: #D3D3D3; border-color: #D3D3D3;
border-width: 2px; border-width: 2px;
width: 40vw;
height: 60vh;
border-radius: 40px; border-radius: 40px;
width: 65%;
height: 65vh;
overflow: hidden; overflow: hidden;
} }
.main-home .meetings-panel .row { .main-home .meetings-panel .row {
width: 100%; width: 100%;
margin: 0;
} }
.main-home .meetings-panel .current-time { .main-home .meetings-panel .current-time {
text-align: center; text-align: center;
background-color: grey; background-color: grey;
padding-top: 1%;
padding-bottom: 1%;
} }
.main-home .meetings-panel .current-date { .main-home .meetings-panel .current-date {
text-align: center; text-align: center;
background-color: grey; background-color: grey;
padding-bottom: 1%;
} }
.main-home .meetings-panel .meeting { .main-home .meetings-panel .meeting {
background-color: #D3D3D3; background-color: #D3D3D3;
text-align: center; text-align: center;
margin-top: 15px; margin-top: 15px;
line-height: 2;
} }
.main-home .short-cuts .row-1 { .main-home .short-cuts .row-1 {
margin-top: 25vh; margin-top: 30vh;
} }
.main-home .short-cuts .row-2 { .main-home .short-cuts .row-2 {
@ -118,21 +51,22 @@ label {
} }
.main-home .short-cuts label { .main-home .short-cuts label {
width: 10vw; display: inline-block;
width: 100px;
text-align: center; text-align: center;
} }
.main-home .short-cuts .tile { .main-home .short-cuts .tile {
margin-right: 100%;
background-color: #D3D3D3; background-color: #D3D3D3;
width: 10vw; width: 100px;
height: 10vw; height: 100px;
border-radius: 1.5vw; border-radius: 16px;
} }
.main-home .short-cuts .tile img { .main-home .short-cuts .tile .icon {
color: black;
width: 70%; width: 70%;
height: 70%; height: 70%;
margin-top: 15%;
margin-left: 15%;
} }
/*# sourceMappingURL=style.css.map */ /*# sourceMappingURL=App.css.map */

9
src/style/App.css.map
View File

@ -1,8 +1,8 @@
{ {
"version": 3, "version": 3,
"mappings": "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", "mappings": "AG4CA,AAAA,WAAW,CAAC;EACR,KAAK,EAAE,IAAI;CAAG;;AK7ClB,AAAA,UAAU,CAAC;EAGP,SAAS,EAAE,cAAc;CA6CO;;AAhDpC,AAII,UAJM,CAIN,eAAe,CAAC;EACZ,MAAM,EAAE,IAAI;EACZ,UAAU,EAAE,IAAI;EAChB,YAAY,EAAE,KAAK;EACnB,YAAY,EPRS,OAAO;EOS5B,YAAY,EAAE,GAAG;EACjB,aAAa,EAAE,IAAI;EACnB,KAAK,EAAE,GAAG;EACV,MAAM,EAAE,IAAI;EACZ,QAAQ,EAAE,MAAM;CAgBO;;AA7B/B,AAcQ,UAdE,CAIN,eAAe,CAUX,IAAI,CAAC;EACD,KAAK,EAAE,IAAI;CAAG;;AAf1B,AAgBQ,UAhBE,CAIN,eAAe,CAYX,aAAa,CAAC;EACV,UAAU,EAAE,MAAM;EAClB,gBAAgB,EAAE,IAAI;EACtB,WAAW,EAAE,EAAE;EACf,cAAc,EAAE,EAAE;CAAG;;AApBjC,AAqBQ,UArBE,CAIN,eAAe,CAiBX,aAAa,CAAC;EACV,UAAU,EAAE,MAAM;EAClB,gBAAgB,EAAE,IAAI;EACtB,cAAc,EAAE,EAAE;CAAG;;AAxBjC,AAyBQ,UAzBE,CAIN,eAAe,CAqBX,QAAQ,CAAC;EACL,gBAAgB,EP1BC,OAAO;EO2BxB,UAAU,EAAE,MAAM;EAClB,UAAU,EAAE,IAAI;EAChB,WAAW,EAAE,CAAC;CAAG;;AA7B7B,AA+BQ,UA/BE,CA8BN,WAAW,CACP,MAAM,CAAC;EACH,UAAU,EAAE,IAAI;CAAG;;AAhC/B,AAiCQ,UAjCE,CA8BN,WAAW,CAGP,MAAM,CAAC;EACH,UAAU,EAAE,GAAG;CAAG;;AAlC9B,AAmCQ,UAnCE,CA8BN,WAAW,CAKP,KAAK,CAAC;EACF,OAAO,EAAE,YAAY;EACrB,KAAK,EAAE,KAAK;EACZ,UAAU,EAAE,MAAM;CAAG;;AAtCjC,AAuCQ,UAvCE,CA8BN,WAAW,CASP,KAAK,CAAC;EACF,YAAY,EAAE,IAAI;EAClB,gBAAgB,EPzCC,OAAO;EO0CxB,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,KAAK;EACb,aAAa,EAAE,IAAI;CAIC;;AAhDhC,AA6CY,UA7CF,CA8BN,WAAW,CASP,KAAK,CAMD,KAAK,CAAC;EACF,KAAK,EAAE,KAAK;EACZ,KAAK,EAAE,GAAG;EACV,MAAM,EAAE,GAAG;CAAG",
"sources": [ "sources": [
"style.sass", "App.sass",
"_variables.sass", "_variables.sass",
"base/_base-dir.sass", "base/_base-dir.sass",
"base/_base.sass", "base/_base.sass",
@ -10,8 +10,9 @@
"layouts/_header.sass", "layouts/_header.sass",
"layouts/_footer.sass", "layouts/_footer.sass",
"modules/_modules-dir.sass", "modules/_modules-dir.sass",
"modules/_mainHome.sass" "modules/_mainHome.sass",
"modules/_login.sass"
], ],
"names": [], "names": [],
"file": "style.css" "file": "App.css"
} }

80
src/style/base/_base.sass
View File

@ -1,42 +1,46 @@
.col-1 // .col-1
width: 8.33% !important // width: 8.33% !important
.col-2 // .col-2
width: 16.66% !important // width: 16.66% !important
.col-3 // .col-3
width: 25% !important // width: 25% !important
.col-4 // .col-4
width: 33.33% !important // width: 33.33% !important
.col-5 // .col-5
width: 41.66% !important // width: 41.66% !important
.col-6 // .col-6
width: 50% !important // width: 50% !important
.col-7 // .col-7
width: 58.33% !important // width: 58.33% !important
.col-8 // .col-8
width: 66.66% !important // width: 66.66% !important
.col-9 // .col-9
width: 75% !important // width: 75% !important
.col-10 // .col-10
width: 83.33% !important // width: 83.33% !important
.col-11 // .col-11
width: 91.66% !important // width: 91.66% !important
.col-12 // .col-12
width: 100% !important // width: 100% !important
[class*="col-"] // [class*="col-"]
flex: 0 0 auto // flex: 0 0 auto
.row // .row
box-sizing: border-box // box-sizing: border-box
display: flex // display: flex
max-width: 100% // max-width: 100%
* // *
width: 100% // width: 100%
.container-fluid // .container-fluid
// width: 100%
// margin-right: auto
// margin-left: auto
// label
// display: inline-block
.full-width
width: 100% width: 100%
margin-right: auto
margin-left: auto
label
display: inline-block

1
src/style/modules/_login.sass Normal file
View File

@ -0,0 +1 @@
.login

35
src/style/modules/_mainHome.sass
View File

@ -1,44 +1,49 @@
.main-home .main-home
// margin: 0 !important
// width: 100% !important
max-width: 85% !important
.meetings-panel .meetings-panel
display: block margin: auto
margin-top: 20vh margin-top: 15vh
margin-left: 10vw
border-style: solid border-style: solid
border-color: $main-home-background-color border-color: $main-home-background-color
border-width: 2px border-width: 2px
width: 40vw
height: 60vh
border-radius: 40px border-radius: 40px
width: 65%
height: 65vh
overflow: hidden overflow: hidden
.row .row
width: 100% width: 100%
margin: 0
.current-time .current-time
text-align: center text-align: center
background-color: grey background-color: grey
padding-top: 1%
padding-bottom: 1%
.current-date .current-date
text-align: center text-align: center
background-color: grey background-color: grey
padding-bottom: 1%
.meeting .meeting
background-color: $main-home-background-color background-color: $main-home-background-color
text-align: center text-align: center
margin-top: 15px margin-top: 15px
line-height: 2
.short-cuts .short-cuts
.row-1 .row-1
margin-top: 25vh margin-top: 30vh
.row-2 .row-2
margin-top: 5vh margin-top: 5vh
label label
width: 10vw display: inline-block
width: 100px
text-align: center text-align: center
.tile .tile
margin-right: 100%
background-color: $main-home-background-color background-color: $main-home-background-color
width: 10vw width: 100px
height: 10vw height: 100px
border-radius: 1.5vw border-radius: 16px
img .icon
color: black
width: 70% width: 70%
height: 70% height: 70%
margin-top: 15%
margin-left: 15%

1
src/style/modules/_modules-dir.sass
View File

@ -1 +1,2 @@
@import "mainHome" @import "mainHome"
@import "login"