Skip to content

Commit 83e1e31

Browse files
jafrilliharshasrikara
jafrilli
and
harshasrikara
authored
view/home: implemented a visually complete navbar, and a fully animated, flexible grid with event tiles. (#1)
* view/home: implemented a visually complete navbar, and a fully animated, flexible event grid with tiles * randomize images & add bg blur * documentation, templates & workflows * add postbuild script & readme badge * minor cleanup * view/home: final touches * view/home: fixed acm edu logo alignment in tile-end * view/home: added a menu screen * add animation for menu icon and close menu when clicking pages or on the bg * minor updates, git ignore some webstorm stuff Co-authored-by: Harsha Srikara <[email protected]>
1 parent 64e2bb5 commit 83e1e31

30 files changed

+754
-28
lines changed

‎.gitignore

+7-1
Original file line numberDiff line numberDiff line change
@@ -23,4 +23,10 @@ yarn-debug.log*
2323
yarn-error.log*
2424

2525
# env
26-
.env
26+
.env
27+
28+
# WebStorm stuff
29+
misc.xml
30+
modules.xml
31+
portal.iml
32+
vcs.xml

‎.idea/.gitignore

+5
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package-lock.json

+234
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+4-1
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,14 @@
1010
"react-redux": "^7.2.0",
1111
"react-router-dom": "^5.2.0",
1212
"react-scripts": "3.4.1",
13+
"react-stack-grid": "^0.7.1",
1314
"redux": "^4.0.5",
15+
"styled-components": "^5.1.1",
1416
"serve": "^11.3.2"
1517
},
1618
"scripts": {
1719
"start": "serve -s build",
18-
"dev": "reaact-scripts start",
20+
"dev": "react-scripts start",
1921
"build": "react-scripts build",
2022
"test": "react-scripts test",
2123
"eject": "react-scripts eject",
@@ -46,6 +48,7 @@
4648
"@types/react": "^16.9.43",
4749
"@types/react-dom": "^16.9.8",
4850
"@types/react-router-dom": "^5.1.5",
51+
"@types/styled-components": "^5.1.1",
4952
"typescript": "^3.7.5"
5053
}
5154
}

‎public/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
work correctly both with client-side routing and a non-root public URL.
2525
Learn how to configure a non-root public URL by running `npm run build`.
2626
-->
27-
<title>React App</title>
27+
<title>ACM UTD</title>
2828
</head>
2929
<body>
3030
<noscript>You need to enable JavaScript to run this app.</noscript>

‎public/manifest.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
2-
"short_name": "React App",
3-
"name": "Create React App Sample",
2+
"short_name": "ACM",
3+
"name": "ACM UTD Website",
44
"icons": [
55
{
66
"src": "favicon.ico",

‎src/App.tsx

+1-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import React from "react";
22
import Homepage from "./views/HomePage";
33
import Division from "./views/Divisions";
4-
import LabsPage from "./mobileviews/LabsPage";
54
import "./App.css";
65
import { Route, Switch, BrowserRouter } from "react-router-dom";
76
import {
@@ -22,7 +21,7 @@ function App() {
2221

2322
<MobileView>
2423
<Switch>
25-
<Route path="/" component={LabsPage} exact />
24+
<Route path="/" component={Homepage} exact />
2625
<Route path="/divisions" component={Division} exact />
2726
</Switch>
2827
</MobileView>

‎src/assets/fonts/samsungsharpsans-bold.otf

145 KB
Binary file not shown.

‎src/assets/fonts/samsungsharpsans-medium.otf

143 KB
Binary file not shown.

‎src/assets/fonts/samsungsharpsans.otf

142 KB
Binary file not shown.

‎src/assets/images/arduino.png

786 KB
Loading

‎src/assets/images/cscareers.png

548 KB
Loading

‎src/assets/images/donuts.png

447 KB
Loading

‎src/assets/images/flyer.png

122 KB
Loading

‎src/assets/images/interview.png

1.33 MB
Loading

‎src/assets/images/sweacmfinal.png

102 KB
Loading

‎src/assets/svgs/close_outline.svg

+6
Loading

‎src/assets/svgs/close_outline_outline.svg

+6
Loading

‎src/assets/svgs/edu.svg

+3
Loading

‎src/assets/svgs/logo.svg

+8
Loading

‎src/assets/svgs/menu.svg

+8
Loading

‎src/components/Menu/menu.tsx

+82
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
import React from 'react';
2+
import styled from 'styled-components';
3+
import { ReactComponent as CloseIcon } from '../../assets/svgs/close_outline_outline.svg'
4+
5+
interface MenuProps {
6+
active: boolean,
7+
onClose(): void
8+
}
9+
10+
const Menu = ({ active, onClose }: MenuProps) => {
11+
return active ? (
12+
<MenuComponent onClick={onClose}>
13+
<div className="menu-controls">
14+
<div className="menu-controls-close" onClick={onClose}>
15+
<CloseIcon></CloseIcon>
16+
</div>
17+
</div>
18+
<div className="menu-content">
19+
<MenuItem onClick={() => console.log("Home")}>Home</MenuItem>
20+
<MenuItem onClick={() => console.log("Events")}>Events</MenuItem>
21+
<MenuItem onClick={() => console.log("About Us")}>About Us</MenuItem>
22+
<MenuItem onClick={() => console.log("Contact")}>Contact</MenuItem>
23+
</div>
24+
</MenuComponent>
25+
) : (<div></div>);
26+
}
27+
28+
const MenuComponent = styled.div`
29+
width: 100%;
30+
height: 100%;
31+
position: fixed;
32+
backdrop-filter: blur(7px);
33+
background: rgba(0,0,0,0.8);
34+
z-index: 9000;
35+
display: flex;
36+
flex-flow: column;
37+
38+
.menu-controls {
39+
height: 10rem;
40+
margin: 4rem auto 0px;
41+
color: white;
42+
43+
.menu-controls-close * {
44+
background: rgba(0,0,0,0);
45+
border: none;
46+
fill: rgba(0,0,0,0);
47+
transition: all 0.2s ease-in-out;
48+
:hover * {
49+
fill: white;
50+
}
51+
}
52+
53+
}
54+
55+
.menu-content {
56+
margin: 0rem auto;
57+
display: flex;
58+
flex-flow: column;
59+
}
60+
`
61+
62+
const MenuItem = styled.button`
63+
color: rgba(0,0,0,0);
64+
font-weight: bold;
65+
font-size: 5rem;
66+
background: none;
67+
margin-bottom: 1rem;
68+
border: none;
69+
letter-spacing: 3px;
70+
-webkit-text-stroke-width: 2px;
71+
-webkit-text-stroke-color: white;
72+
transition: all 0.1s ease-in;
73+
74+
:hover {
75+
color: white;
76+
transform: scale(1.1);
77+
}
78+
79+
:focus {outline:0;}
80+
`
81+
82+
export default Menu;

‎src/components/Navbar/Navbar.tsx

+120
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
import React from "react";
2+
import { ReactComponent as NavbarLogo } from "../../assets/svgs/logo.svg";
3+
import { ReactComponent as NavbarMenu } from "../../assets/svgs/menu.svg";
4+
import styled from "styled-components";
5+
import { isMobile } from "react-device-detect";
6+
7+
const colors = {
8+
white: `rgba(255,255,255,1)`,
9+
black: `rgba(0,0,0,1)`,
10+
};
11+
12+
interface NavbarProps {
13+
onMenu(): void;
14+
}
15+
16+
const Navbar = ({ onMenu }: NavbarProps) => {
17+
return (
18+
<NavbarComponent>
19+
<div className="navbar-bar">
20+
<div className="navbar-content">
21+
<div className="navbar-start">
22+
<NavbarLogo width="70px" height="70px" />
23+
</div>
24+
<div className="navbar-center">
25+
{/* Only show the divisions and Join Us buttons on either side of menu if on web */}
26+
{isMobile ? (
27+
<div />
28+
) : (
29+
<button className="navbar-button">Divisions</button>
30+
)}
31+
<button className="navbar-menu" onClick={onMenu}>
32+
<NavbarMenu />
33+
</button>
34+
{isMobile ? (
35+
<div />
36+
) : (
37+
<button className="navbar-button">Join Us</button>
38+
)}
39+
</div>
40+
<div className="navbar-end">
41+
<img
42+
className="navbar-auth"
43+
src="https://i.ibb.co/YfD2TCk/nopfp.png"
44+
alt="User PFP"
45+
></img>
46+
</div>
47+
</div>
48+
</div>
49+
</NavbarComponent>
50+
);
51+
};
52+
53+
const NavbarComponent = styled.div`
54+
.navbar-bar {
55+
width: 100%;
56+
background: linear-gradient(to bottom, ${colors.white}, rgba(0, 0, 0, 0));
57+
padding: 2.5rem 6rem;
58+
}
59+
60+
.navbar-content {
61+
width: 100%;
62+
position: relative;
63+
height: 5rem;
64+
display: flex;
65+
align-items: center;
66+
}
67+
68+
/* nav center */
69+
.navbar-center {
70+
height: inherit;
71+
display: flex;
72+
align-items: center;
73+
position: absolute;
74+
left: 38%;
75+
}
76+
77+
.navbar-button {
78+
font-size: 1.6rem;
79+
font-weight: bold;
80+
background: none;
81+
border: none;
82+
padding: 0.7rem 1.3rem;
83+
}
84+
85+
.navbar-menu {
86+
padding: 0.6rem;
87+
margin: 0rem 2rem;
88+
background: none;
89+
border: none;
90+
91+
-webkit-transition-duration: 0.8s;
92+
-moz-transition-duration: 0.8s;
93+
-o-transition-duration: 0.8s;
94+
transition-duration: 0.8s;
95+
96+
-webkit-transition-property: -webkit-transform;
97+
-moz-transition-property: -moz-transform;
98+
-o-transition-property: -o-transform;
99+
transition-property: transform;
100+
}
101+
102+
.navbar-menu:hover {
103+
-webkit-transform: rotate(270deg) scale(1.3);
104+
-moz-transform: rotate(270deg) scale(1.3);
105+
-o-transform: rotate(270deg) scale(1.3);
106+
}
107+
108+
/* nav end */
109+
.navbar-end {
110+
position: absolute;
111+
right: 0px;
112+
}
113+
114+
.navbar-auth {
115+
width: 3.5rem;
116+
height: 3.5rem;
117+
}
118+
`;
119+
120+
export default Navbar;

‎src/components/TileGrid/Tile/RectTile.tsx

+87
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
import React from "react";
2+
import styled from "styled-components";
3+
import { ReactComponent as EduLogo } from "../../../assets/svgs/edu.svg";
4+
import one from "../../../assets/images/flyer.png";
5+
import two from "../../../assets/images/arduino.png";
6+
import three from "../../../assets/images/cscareers.png";
7+
import four from "../../../assets/images/donuts.png";
8+
import five from "../../../assets/images/interview.png";
9+
import six from "../../../assets/images/sweacmfinal.png";
10+
11+
interface propTypes {
12+
title: string;
13+
date: string;
14+
time: string;
15+
num: number;
16+
}
17+
18+
const RectTile = (props: propTypes) => {
19+
return (
20+
<TileComponent tabIndex={props.num}>
21+
<div className="tile-card">
22+
<div className="tile-content">
23+
<div className="tile-top">
24+
<div className="tile-title">{props.title}</div>
25+
</div>
26+
<div className="tile-end">
27+
<div className="tile-end-left">
28+
<div className="tile-date">{props.date}</div>
29+
<div className="tile-time">{props.time}</div>
30+
</div>
31+
<div className="tile-end-right">
32+
<EduLogo />
33+
</div>
34+
</div>
35+
</div>
36+
</div>
37+
</TileComponent>
38+
);
39+
};
40+
41+
//the next few lines are temporary, just to get a cool effect even though its hardcoded
42+
//absolutely will get refactored
43+
let arrayOfImages = [one, two, three, four, five, six];
44+
45+
const TileComponent = styled.div`
46+
.tile-card {
47+
width: 230px;
48+
height: 400px;
49+
border-radius: 30px;
50+
background:url(${props => arrayOfImages[props.tabIndex ? props.tabIndex : 1]});
51+
color: white;
52+
}
53+
.tile-content {
54+
padding: 1.3rem;
55+
display: flex;
56+
height: inherit;
57+
flex-flow: column;
58+
/* dark tint */
59+
background: rgba(0,0,0,0.22);
60+
backdrop-filter: blur(10px);
61+
border-radius: 30px;
62+
justify-content: space-between;
63+
}
64+
.tile-end {
65+
display: flex;
66+
flex-flow: row;
67+
justify-content: space-between;
68+
align-items: flex-end;
69+
font-size: 1.1rem;
70+
}
71+
.tile-end-right {
72+
padding-left: 0.7rem;
73+
}
74+
/* Text */
75+
.tile-title {
76+
font-size: 1.8rem;
77+
font-weight: bold;
78+
}
79+
80+
:hover {
81+
transform: scale(1.07)
82+
}
83+
84+
:focus {outline:0;}
85+
`;
86+
87+
export default RectTile;

0 commit comments

Comments
 (0)