Skip to content
This repository has been archived by the owner on Feb 17, 2019. It is now read-only.

Added navigation divider #93

Open
wants to merge 11 commits into
base: dev
Choose a base branch
from
Open

Added navigation divider #93

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
edfcfe8
Added navigation divider
samagragupta Dec 15, 2018
cdcfdbe
Merge branch 'side' into side-details
samagragupta Dec 15, 2018
04c7168
uncommented particle JS
samagragupta Dec 15, 2018
358ba9f
Few needed changes (#85)
aashutoshrathi Dec 15, 2018
26c168d
Fixes #39 (#88)
aashutoshrathi Dec 15, 2018
5bcaf06
Massive Refactoring and cleanup (#91)
aashutoshrathi Dec 15, 2018
85e9f33
uncommented particle JS
samagragupta Dec 15, 2018
90b61e1
Used rem and removed right class
samagragupta Dec 15, 2018
bf47a0e
Merge branch 'side-details' of https://github.com/samagragupta/web-20…
samagragupta Dec 15, 2018
9c774f1
Merge branch 'dev' into side-details
samagragupta Dec 30, 2018
e7607ab
Merge branch 'dev' into side-details
samagragupta Jan 7, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions src/components/header/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,14 +54,14 @@ class Header extends React.Component {
render() {
return <div style={{height: '72px'}}>
<nav className="uk-navbar-container uk-margin uk-dark uk-navbar-transparent" uk-navbar="mode: click">
<div className="uk-navbar-center">
<div className="uk-navbar-right right">
aashutoshrathi marked this conversation as resolved.
Show resolved Hide resolved
<ul className="uk-navbar-nav">
<li className={[this.props.location.pathname === '/' ? 'uk-active' : ''].join(' ')}>
<Link className={'heading-text'} to={'/'}><span>Home</span></Link></li>
<li className={[this.props.location.pathname === '/timeline' ? 'uk-active' : ''].join(' ')}>
<Link className={'heading-text'} to={'/timeline'}><span>Timeline</span></Link></li>
<li className={[this.props.location.pathname === '/about' ? 'uk-active' : ''].join(' ')}>
<Link className={'heading-text'} to={'/about'}><span>About</span></Link></li>
{/* <li className={[this.props.location.pathname === '/about' ? 'uk-active' : ''].join(' ')}>
<Link className={'heading-text'} to={'/about'}><span>About</span></Link></li> */}
<li className={[this.props.location.pathname === '/dashboard' ? 'uk-active' : ''].join(' ')}>
{!this.props.signedIN ? <SignIn/> : <Link className={'heading-text'} to={'/dashboard'}>
<span>Dashboard</span></Link>}</li>
Expand Down
3 changes: 3 additions & 0 deletions src/components/header/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,9 @@
padding-bottom: 4px;
}

.right {
samagragupta marked this conversation as resolved.
Show resolved Hide resolved
margin-right: 10%;
}

.institute-logo {
width: 30%;
Expand Down
20 changes: 20 additions & 0 deletions src/components/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
.divider{
position: absolute;
transform: rotate(90deg);
color: white;
}

.contact {
top: 33%;
right: 20px;
}

.about {
top: 77%;
right: 31px;
}

.team {
right: 34px;
top: 53%;
}
samagragupta marked this conversation as resolved.
Show resolved Hide resolved
220 changes: 115 additions & 105 deletions src/components/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,127 +5,137 @@ import Particles from 'react-particles-js';
import Countdown from './Countdown';
import EventList from './eventList';

import './index.css'

class Home extends React.Component {
componentDidMount() {
document.body.scrollTop = 0;
}
render() {
return <div>
{/*<img className="absolute triangle" src="https://firebasestorage.googleapis.com/v0/b/cerebro-2018-f1052.appspot.com/o/triangle.png?alt=media&token=f3cbbbed-2d31-4201-a051-8d123d594156" alt=""/>*/}
{/*<img className="absolute square" src="https://firebasestorage.googleapis.com/v0/b/cerebro-2018-f1052.appspot.com/o/square.png?alt=media&token=8979df90-1eaf-466e-9ef9-94546eec3e90" alt=""/>*/}
{/*<div className={'absolute triangle'}/>*/}
{/*<div className={'absolute square'} />*/}
{/* <img className="absolute triangle" src="https://firebasestorage.googleapis.com/v0/b/cerebro-2018-f1052.appspot.com/o/triangle.png?alt=media&token=f3cbbbed-2d31-4201-a051-8d123d594156" alt=""/>}
{<img className="absolute square" src="https://firebasestorage.googleapis.com/v0/b/cerebro-2018-f1052.appspot.com/o/square.png?alt=media&token=8979df90-1eaf-466e-9ef9-94546eec3e90" alt=""/>}
{<div className={'absolute triangle'}/>}
{<div className={'absolute square'} />} */}

<div>
<Countdown/>
<Particles params={{
"particles": {
"number": {
"value": 160,
"density": {
"enable": true,
"value_area": 800
}
},
"color": {
"value": "#ffffff"
},
"shape": {
"type": "circle",
"stroke": {
"width": 0,
"color": "#000000"
},
"polygon": {
"nb_sides": 5
<div>
<a href="/"><p className="divider contact">Contact</p></a>
<a href="/about"><p className="divider about">About</p></a>
<a href="/"><p className="divider team">Team</p></a>
</div>
<Particles params={{
"particles": {
"number": {
"value": 160,
"density": {
"enable": true,
"value_area": 800
}
},
"image": {
"src": "img/github.svg",
"width": 100,
"height": 100
}
},
"opacity": {
"value": 0.4,
"random": true,
"anim": {
"enable": true,
"speed": 1,
"opacity_min": 0,
"sync": false
}
},
"size": {
"value": 3,
"random": true,
"anim": {
"enable": false,
"speed": 4,
"size_min": 0.3,
"sync": false
}
},
"line_linked": {
"enable": false,
"distance": 150,
"color": "#ffffff",
"opacity": 0.4,
"width": 1
},
"move": {
"enable": true,
"speed": 1,
"direction": "none",
"random": true,
"straight": false,
"out_mode": "out",
"bounce": false,
"attract": {
"enable": false,
"rotateX": 600,
"rotateY": 600
}
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": true,
"mode": "bubble"
"color": {
"value": "#ffffff"
},
"onclick": {
"enable": true,
"mode": "repulse"
"shape": {
"type": "circle",
"stroke": {
"width": 0,
"color": "#000000"
},
"polygon": {
"nb_sides": 5
},
"image": {
"src": "img/github.svg",
"width": 100,
"height": 100
}
},
"resize": true
},
"modes": {
"grab": {
"distance": 400,
"line_linked": {
"opacity": 1
"opacity": {
"value": 0.4,
"random": true,
"anim": {
"enable": true,
"speed": 1,
"opacity_min": 0,
"sync": false
}
},
"bubble": {
"distance": 250,
"size": 0,
"duration": 2,
"opacity": 0,
"speed": 3
"size": {
"value": 3,
"random": true,
"anim": {
"enable": false,
"speed": 4,
"size_min": 0.3,
"sync": false
}
},
"repulse": {
"distance": 400,
"duration": 0.4
"line_linked": {
"enable": false,
"distance": 150,
"color": "#ffffff",
"opacity": 0.4,
"width": 1
},
"push": {
"particles_nb": 4
"move": {
"enable": true,
"speed": 1,
"direction": "none",
"random": true,
"straight": false,
"out_mode": "out",
"bounce": false,
"attract": {
"enable": false,
"rotateX": 600,
"rotateY": 600
}
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": true,
"mode": "bubble"
},
"onclick": {
"enable": true,
"mode": "repulse"
},
"resize": true
},
"remove": {
"particles_nb": 2
"modes": {
"grab": {
"distance": 400,
"line_linked": {
"opacity": 1
}
},
"bubble": {
"distance": 250,
"size": 0,
"duration": 2,
"opacity": 0,
"speed": 3
},
"repulse": {
"distance": 400,
"duration": 0.4
},
"push": {
"particles_nb": 4
},
"remove": {
"particles_nb": 2
}
}
}
},
"retina_detect": true
}}/>
},
"retina_detect": true
}}/>
</div>
<EventList/>
</div>
}
Expand Down