From b923c53ca02da320802a87fe0267ff39e072708e Mon Sep 17 00:00:00 2001 From: Giovani Date: Tue, 16 Apr 2019 19:42:18 -0400 Subject: [PATCH] Made navigation bar responsive and fixed margin issue with history --- package-lock.json | 10 --- package.json | 2 - public/index.html | 3 + src/components/pages/home.js | 4 +- src/components/shared/bio/bio.css | 2 +- src/components/shared/header/navigation.css | 12 --- src/components/shared/header/navigation.js | 59 ------------- src/components/shared/history/history.js | 32 +++---- .../shared/introduction/introduction.css | 2 +- .../shared/navigation/navigation.css | 30 +++++++ .../shared/navigation/navigation.js | 83 +++++++++++++++++++ src/index.js | 4 - 12 files changed, 138 insertions(+), 105 deletions(-) delete mode 100644 src/components/shared/header/navigation.css delete mode 100644 src/components/shared/header/navigation.js create mode 100644 src/components/shared/navigation/navigation.css create mode 100644 src/components/shared/navigation/navigation.js diff --git a/package-lock.json b/package-lock.json index 7c5b749..c11117f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8740,11 +8740,6 @@ "topo": "2.0.2" } }, - "jquery": { - "version": "3.3.1", - "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.3.1.tgz", - "integrity": "sha512-Ubldcmxp5np52/ENotGxlLe6aGMvmF4R8S6tZjsP6Knsaxd/xp3Zrh50cG93lR6nPXyUFwzN3ZSOQI0wRJNdGg==" - }, "js-levenshtein": { "version": "1.1.6", "resolved": "https://registry.npmjs.org/js-levenshtein/-/js-levenshtein-1.1.6.tgz", @@ -10269,11 +10264,6 @@ "ts-pnp": "1.0.1" } }, - "popper.js": { - "version": "1.15.0", - "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.15.0.tgz", - "integrity": "sha512-w010cY1oCUmI+9KwwlWki+r5jxKfTFDVoadl7MSrIujHU5MJ5OR6HTDj6Xo8aoR/QsA56x8jKjA59qGH4ELtrA==" - }, "portfinder": { "version": "1.0.20", "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.20.tgz", diff --git a/package.json b/package.json index 6f5db3f..1111726 100644 --- a/package.json +++ b/package.json @@ -4,9 +4,7 @@ "private": true, "dependencies": { "animate.css": "^3.7.0", - "jquery": "^3.3.1", "octicons": "^8.5.0", - "popper.js": "^1.15.0", "react": "^16.8.6", "react-dom": "^16.8.6", "react-scripts": "2.1.8" diff --git a/public/index.html b/public/index.html index 0749a24..1b1e497 100644 --- a/public/index.html +++ b/public/index.html @@ -23,6 +23,9 @@ Learn how to configure a non-root public URL by running `npm run build`. --> + + + React App diff --git a/src/components/pages/home.js b/src/components/pages/home.js index 51bedb6..2cca8ac 100644 --- a/src/components/pages/home.js +++ b/src/components/pages/home.js @@ -1,7 +1,7 @@ import React, {Component} from 'react'; -import Navigation from '../shared/header/navigation'; +import Navigation from '../shared/navigation/navigation'; import Footer from "../shared/footer/footer"; -import Introduction from '../shared/introduction/introduction'; +import Introduction from '../shared/introduction/introduction'; import Bio from '../shared/bio/bio'; import History from '../shared/history/history'; import Skills from '../shared/skills/skills' diff --git a/src/components/shared/bio/bio.css b/src/components/shared/bio/bio.css index 0990fa6..974b52f 100644 --- a/src/components/shared/bio/bio.css +++ b/src/components/shared/bio/bio.css @@ -9,6 +9,6 @@ } .content-type-size { - font-size: 1.75rem; + font-size: 1.6rem; } } \ No newline at end of file diff --git a/src/components/shared/header/navigation.css b/src/components/shared/header/navigation.css deleted file mode 100644 index d2ff3ea..0000000 --- a/src/components/shared/header/navigation.css +++ /dev/null @@ -1,12 +0,0 @@ -.nav-background-color { - background-color: #eff1f4; -} - -.nav-menu-item:hover { - background-color: #d8d8da; -} - -.remove-link-styling { - color: inherit !important; - text-decoration: inherit !important; -} \ No newline at end of file diff --git a/src/components/shared/header/navigation.js b/src/components/shared/header/navigation.js deleted file mode 100644 index 347c71f..0000000 --- a/src/components/shared/header/navigation.js +++ /dev/null @@ -1,59 +0,0 @@ -import React, {Component} from 'react'; -import './navigation.css'; - -class NavigationBar extends Component { - constructor(props) { - super(props); - this.state = { - - }; - - this.navigationOptions = [ - { - content: 'Intro', - href: '#intro' - }, - { - content: 'Bio', - href: '#bio' - }, - { - content: 'History', - href: '#history' - }, - { - content: 'Skills', - href: '#skills' - }, - { - content: 'Contact', - href: '#contact' - } - ]; - } - - navigationOptions = []; - - render() { - return ( -
-
-
- -
- {this.navigationOptions.map((navigationOption, i) => { - return ( - -
-

{navigationOption.content}

-
- - ); - })} -
-
- ); - } -} - -export default NavigationBar; \ No newline at end of file diff --git a/src/components/shared/history/history.js b/src/components/shared/history/history.js index 36cf632..0284dde 100644 --- a/src/components/shared/history/history.js +++ b/src/components/shared/history/history.js @@ -85,26 +85,30 @@ class History extends Component { defaultClasses += ` ${isLeft ? 'slideInLeft' : 'slideInRight'} animated faster`; } - return defaultClasses + ' mb-5'; + if (i === (this.timelineContainers.length - 1)) { + defaultClasses += 'mb-3'; + } else { + defaultClasses += 'mb-5'; + } + + return defaultClasses; } render() { return (
-
-
-
- {this.timelineContainers.map((timelineContainer, i) => { - return ( -
timelineContainer.ref = el}> -
-

{timelineContainer.heading}

-
{timelineContainer.content}
-
+
+
+ {this.timelineContainers.map((timelineContainer, i) => { + return ( +
timelineContainer.ref = el}> +
+

{timelineContainer.heading}

+
{timelineContainer.content}
- ); - })} -
+
+ ); + })}
); diff --git a/src/components/shared/introduction/introduction.css b/src/components/shared/introduction/introduction.css index a52a9e4..c112e27 100644 --- a/src/components/shared/introduction/introduction.css +++ b/src/components/shared/introduction/introduction.css @@ -16,6 +16,6 @@ } .profile-image { - width: 350px; + width: 300px; } } \ No newline at end of file diff --git a/src/components/shared/navigation/navigation.css b/src/components/shared/navigation/navigation.css new file mode 100644 index 0000000..8f2e840 --- /dev/null +++ b/src/components/shared/navigation/navigation.css @@ -0,0 +1,30 @@ +.nav-background-color { + background-color: #eff1f4; +} + +.nav-menu-item:hover { + background-color: #d8d8da !important; +} + +.remove-link-styling { + color: inherit !important; + text-decoration: inherit !important; +} + +.navbar-toggler-icon { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(55, 58, 60, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E") !important; +} + +.mobile-nav { + display: none; +} + +@media (max-width: 575.98px) { /* sm */ + .desktop-nav { + display: none; + } + + .mobile-nav { + display: block; + } +} \ No newline at end of file diff --git a/src/components/shared/navigation/navigation.js b/src/components/shared/navigation/navigation.js new file mode 100644 index 0000000..569bbe0 --- /dev/null +++ b/src/components/shared/navigation/navigation.js @@ -0,0 +1,83 @@ +import React, {Component} from 'react'; +import './navigation.css'; + +class NavigationBar extends Component { + constructor(props) { + super(props); + this.state = { + }; + + this.navigationOptions = [ + { + content: 'Intro', + href: '#intro' + }, + { + content: 'Bio', + href: '#bio' + }, + { + content: 'History', + href: '#history' + }, + { + content: 'Skills', + href: '#skills' + }, + { + content: 'Contact', + href: '#contact' + } + ]; + } + + navigationOptions = []; + + render() { + return ( +
+
+
+ {this.navigationOptions.map((navigationOption, i) => { + return ( + +
+

{navigationOption.content}

+
+ + ); + })} +
+
+
+ + +
+
+ ); + } +} + +export default NavigationBar; \ No newline at end of file diff --git a/src/index.js b/src/index.js index bf739f8..3d36988 100644 --- a/src/index.js +++ b/src/index.js @@ -1,8 +1,4 @@ import './css/bootstrap.cosmo.min.css'; -// eslint-disable-next-line -import $ from 'jquery'; -// eslint-disable-next-line -import Popper from 'popper.js'; import 'animate.css/animate.min.css' import 'octicons/build/build.css'; import React from 'react';