From 3900d52a1a1e36b47c57d702c8e989c2f6e837f7 Mon Sep 17 00:00:00 2001 From: Luis Ricardo Date: Wed, 6 May 2020 20:07:31 +0000 Subject: [PATCH] Made main navbar mobile friendly. Fixes gvelez17/marturia#2 --- package-lock.json | 147 ++++++++++++++++++++++++++++++++----- package.json | 2 + src/components/Admin.scss | 5 +- src/components/Header.js | 61 ++++++++++----- src/components/Header.scss | 76 +++++++++++++++---- src/styles/global.scss | 4 +- 6 files changed, 238 insertions(+), 57 deletions(-) diff --git a/package-lock.json b/package-lock.json index 9d50c8f..4656191 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1274,6 +1274,25 @@ "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz", "integrity": "sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==" }, + "@popperjs/core": { + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.4.0.tgz", + "integrity": "sha512-NMrDy6EWh9TPdSRiHmHH2ye1v5U0gBD7pRYwSwJvomx7Bm4GG04vu63dYiVzebLOx2obPpJugew06xVP0Nk7hA==" + }, + "@restart/context": { + "version": "2.1.4", + "resolved": "https://registry.npmjs.org/@restart/context/-/context-2.1.4.tgz", + "integrity": "sha512-INJYZQJP7g+IoDUh/475NlGiTeMfwTXUEr3tmRneckHIxNolGOW9CTq83S8cxq0CgJwwcMzMJFchxvlwe7Rk8Q==" + }, + "@restart/hooks": { + "version": "0.3.22", + "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.3.22.tgz", + "integrity": "sha512-tW0T3hP6emYNOc76/iC96rlu+f7JYLSVk/Wnn+7dj1gJUcw4CkQNLy16vx2mBLtVKsFMZ9miVEZXat8blruDHQ==", + "requires": { + "lodash": "^4.17.15", + "lodash-es": "^4.17.15" + } + }, "@sheerun/mutationobserver-shim": { "version": "0.3.2", "resolved": "https://registry.npmjs.org/@sheerun/mutationobserver-shim/-/mutationobserver-shim-0.3.2.tgz", @@ -1432,18 +1451,6 @@ "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-7.2.1.tgz", "integrity": "sha512-oZ0Ib5I4Z2pUEcoo95cT1cr6slco9WY7yiPpG+RGNkj8YcYgJnM7pXmYmorNOReh8MIGcKSqXyeGjxnr8YiZbA==" }, - "@trendmicro/react-sidenav": { - "version": "0.5.0", - "resolved": "https://registry.npmjs.org/@trendmicro/react-sidenav/-/react-sidenav-0.5.0.tgz", - "integrity": "sha512-NBitXTtBda763gcU27hQu6zTnq4dq1ngoB3U1h8oK2WowdTl757mqMOnuDa1dU1dgND+YLY5Q96s5NoUOjfvqA==", - "requires": { - "chained-function": "^0.5.0", - "classnames": "^2.2.5", - "prop-types": "^15.6.0", - "uncontrollable": "^7.1.1", - "warning": "^3.0.0" - } - }, "@types/babel__core": { "version": "7.1.4", "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.1.4.tgz", @@ -1592,6 +1599,11 @@ "@types/testing-library__dom": "*" } }, + "@types/warning": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.0.tgz", + "integrity": "sha1-DSUBJorY+ZYrdA04fEZU9fjiPlI=" + }, "@types/yargs": { "version": "13.0.8", "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.8.tgz", @@ -2659,6 +2671,11 @@ "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz", "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=" }, + "bootstrap": { + "version": "4.4.1", + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.4.1.tgz", + "integrity": "sha512-tbx5cHubwE6e2ZG7nqM3g/FZ5PQEDMWmMGNrCUBVRPHXTJaH7CBDdsLeu3eCh3B1tzAxTnAbtmrzvWEvT2NNEA==" + }, "brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", @@ -2979,11 +2996,6 @@ "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz", "integrity": "sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=" }, - "chained-function": { - "version": "0.5.0", - "resolved": "https://registry.npmjs.org/chained-function/-/chained-function-0.5.0.tgz", - "integrity": "sha1-JWS73994AxlL6/daayvQQe3iOzo=" - }, "chalk": { "version": "2.4.2", "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", @@ -4125,6 +4137,30 @@ "utila": "~0.4" } }, + "dom-helpers": { + "version": "5.1.4", + "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.1.4.tgz", + "integrity": "sha512-TjMyeVUvNEnOnhzs6uAn9Ya47GmMo3qq7m+Lr/3ON0Rs5kHvb8I+SQYjLUSYn7qhEm0QjW0yrBkvz9yOrwwz1A==", + "requires": { + "@babel/runtime": "^7.8.7", + "csstype": "^2.6.7" + }, + "dependencies": { + "@babel/runtime": { + "version": "7.9.6", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.9.6.tgz", + "integrity": "sha512-64AF1xY3OAkFHqOb9s4jpgk1Mm5vDZ4L3acHvAml+53nO1XbXLuDodsVpO4OIUsmemlUHMxNdYMNJmsvOwLrvQ==", + "requires": { + "regenerator-runtime": "^0.13.4" + } + }, + "regenerator-runtime": { + "version": "0.13.5", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.5.tgz", + "integrity": "sha512-ZS5w8CpKFinUzOwW3c83oPeVXoNsrLsaCoLtJvAClH135j/R77RuymhiSErhm2lKcwSCIpmvIWSbDkIfAqKQlA==" + } + } + }, "dom-serializer": { "version": "0.2.2", "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz", @@ -8026,6 +8062,11 @@ "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz", "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==" }, + "lodash-es": { + "version": "4.17.15", + "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.15.tgz", + "integrity": "sha512-rlrc3yU3+JNOpZ9zj5pQtxnx2THmvRykwL4Xlxoa8I9lHBlVbbyPhgyPMioxVZ4NqyxaVVtaJnzsyOidQIhyyQ==" + }, "lodash._reinterpolate": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz", @@ -10620,6 +10661,15 @@ "react-is": "^16.8.1" } }, + "prop-types-extra": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.1.tgz", + "integrity": "sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew==", + "requires": { + "react-is": "^16.3.2", + "warning": "^4.0.0" + } + }, "proxy-addr": { "version": "2.0.5", "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.5.tgz", @@ -10797,6 +10847,37 @@ "whatwg-fetch": "^3.0.0" } }, + "react-bootstrap": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-1.0.1.tgz", + "integrity": "sha512-xMHwsvDN7sIv26P9wWiosWjITZije2dRCjEJHVfV2KFoSJY+8uv2zttEw0XMB7xviQcW3zuIGLJXuj8vf6lYEg==", + "requires": { + "@babel/runtime": "^7.4.2", + "@restart/context": "^2.1.4", + "@restart/hooks": "^0.3.21", + "@types/react": "^16.9.23", + "classnames": "^2.2.6", + "dom-helpers": "^5.1.2", + "invariant": "^2.2.4", + "prop-types": "^15.7.2", + "prop-types-extra": "^1.1.0", + "react-overlays": "^3.1.2", + "react-transition-group": "^4.0.0", + "uncontrollable": "^7.0.0", + "warning": "^4.0.3" + }, + "dependencies": { + "@types/react": { + "version": "16.9.34", + "resolved": "https://registry.npmjs.org/@types/react/-/react-16.9.34.tgz", + "integrity": "sha512-8AJlYMOfPe1KGLKyHpflCg5z46n0b5DbRfqDksxBLBTUpB75ypDBAO9eCUcjNwE6LCUslwTz00yyG/X9gaVtow==", + "requires": { + "@types/prop-types": "*", + "csstype": "^2.2.0" + } + } + } + }, "react-dev-utils": { "version": "10.2.0", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-10.2.0.tgz", @@ -10950,6 +11031,21 @@ "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" }, + "react-overlays": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/react-overlays/-/react-overlays-3.1.3.tgz", + "integrity": "sha512-FH82W0R9lFJm/YCTDeSvEKQxXyTaZmjMEQlAjRhgjQhknTkyMsft+X4Wep5l95QveqdxGVxl/P41WUOzTGJUcw==", + "requires": { + "@babel/runtime": "^7.4.5", + "@popperjs/core": "^2.0.0", + "@restart/hooks": "^0.3.12", + "@types/warning": "^3.0.0", + "dom-helpers": "^5.1.0", + "prop-types": "^15.7.2", + "uncontrollable": "^7.0.0", + "warning": "^4.0.3" + } + }, "react-redux": { "version": "7.1.3", "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.1.3.tgz", @@ -11069,6 +11165,17 @@ "workbox-webpack-plugin": "4.3.1" } }, + "react-transition-group": { + "version": "4.4.1", + "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.1.tgz", + "integrity": "sha512-Djqr7OQ2aPUiYurhPalTrVy9ddmFCCzwhqQmtN+J3+3DzLO209Fdr70QrN8Z3DsglWql6iY1lDWAfpFiBtuKGw==", + "requires": { + "@babel/runtime": "^7.5.5", + "dom-helpers": "^5.0.1", + "loose-envify": "^1.4.0", + "prop-types": "^15.6.2" + } + }, "reactjs-popup": { "version": "1.5.0", "resolved": "https://registry.npmjs.org/reactjs-popup/-/reactjs-popup-1.5.0.tgz", @@ -13548,9 +13655,9 @@ } }, "warning": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz", - "integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=", + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", + "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==", "requires": { "loose-envify": "^1.0.0" } diff --git a/package.json b/package.json index bbb9c8b..cfeadd7 100644 --- a/package.json +++ b/package.json @@ -6,9 +6,11 @@ "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.4.0", "@testing-library/user-event": "^7.2.1", + "bootstrap": "^4.4.1", "dotenv": "^8.2.0", "node-sass": "^4.13.1", "react": "^16.13.1", + "react-bootstrap": "^1.0.1", "react-dom": "^16.12.0", "react-hook-form": "^4.10.1", "react-redux": "^7.1.3", diff --git a/src/components/Admin.scss b/src/components/Admin.scss index cdcd1c6..88bf002 100644 --- a/src/components/Admin.scss +++ b/src/components/Admin.scss @@ -3,17 +3,18 @@ .admin-wrapper{ display: flex; - width: "90%" + width: 90%; + margin-top: 30px; } .admin-choice-container { border: 1px solid darkgray; border-radius: 4px; - height:180px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); cursor: pointer; flex:1 0 200px; max-width:200px; + height: 210px; ul { list-style-type: none; diff --git a/src/components/Header.js b/src/components/Header.js index 96a3700..55b0577 100644 --- a/src/components/Header.js +++ b/src/components/Header.js @@ -1,31 +1,54 @@ import React from 'react'; import { NavLink } from 'react-router-dom'; +import Navbar from 'react-bootstrap/Navbar'; +import Nav from 'react-bootstrap/Nav'; import './Header.scss'; const Header = () => { return (
-
-

Testimony Database

- -
+ + Testimony Database + + + + +
); }; export default Header; + + //
+ //

Testimony Database

+ // + //
\ No newline at end of file diff --git a/src/components/Header.scss b/src/components/Header.scss index 8eb8ae7..baab0f8 100644 --- a/src/components/Header.scss +++ b/src/components/Header.scss @@ -4,18 +4,14 @@ background: #25646a; .main-header { - height: 100px; - display: flex; - align-items: center; - justify-content: center; - width: 90%; - max-width: $max-page-width; - margin: 0 auto; - letter-spacing: 0.08rem; - + padding: 0; + .navbar-toggler { + margin-right: 5px; + } .logo { flex: 1 0 200px; max-width: 200px; + padding: 10px; color: $white-1; background: rgb(0, 0, 0); // fallback background: rgba(0, 0, 0, 0.55); @@ -36,18 +32,66 @@ } } -.main-navigation { - flex: 4; +#basic-navbar-nav { + margin-top: 10px; + .navbar-nav { + font-size: 0.95em; + + .nav-link { + display: block; + padding: 20px; + font-weight: bold; + text-decoration: none; + text-transform: uppercase; + color: $white-1; + + &.active { + background: rgb(0, 0, 0); // fallback + background: rgba(0, 0, 0, 0.55); + } + } + } + } - ul { + +@media (min-width: 992px) { + .main-header { + height: 100px; display: flex; align-items: center; - justify-content: flex-end;; + justify-content: center; + width: 90%; + max-width: $max-page-width; + margin: 0 auto; + letter-spacing: 0.08rem; + padding: 0; + + .logo { + flex: 1 0 200px; + max-width: 200px; + color: $white-1; + background: rgb(0, 0, 0); // fallback + background: rgba(0, 0, 0, 0.55); + font-size: 1.2em; + line-height: 1.4; + text-align: center; + text-transform: uppercase; + align-self: stretch; + display: flex; + align-items: center; + justify-content: center; + white-space: normal; + } + } - li { +#basic-navbar-nav { + flex: 4; + align-items: center; + justify-content: flex-end;; + .navbar-nav { font-size: 0.95em; - a { + .nav-link { display: block; padding: 20px; font-weight: bold; @@ -63,4 +107,6 @@ } } } + } + diff --git a/src/styles/global.scss b/src/styles/global.scss index e141906..acfbf5d 100644 --- a/src/styles/global.scss +++ b/src/styles/global.scss @@ -1,4 +1,5 @@ @import 'variables'; +@import './node_modules/bootstrap/scss/bootstrap.scss'; html { box-sizing: border-box; @@ -34,13 +35,14 @@ form { h1 { font-size: 1.3rem; + font-weight: bold; background: rgb(0, 0, 0); background: rgba(0, 0, 0, 0.1); color: rgb(20, 20, 20); display: inline-block; padding: 10px 15px; position: relative; - left: -15px; + left: -30px; } }