scarlett/ITR-Website
1
1
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Compare commits

base: scarlett:858b9e0f27f604762338a528f120634abbe19b7c
Branches Tags
scarlett:main
scarlett:nextjs
scarlett:feat/waterfallpic
scarlett:feature/add-gitignore
..
compare: scarlett:9fdee7b824e00af6d2bc8596357a8246ebe4d34f
Branches Tags
scarlett:nextjs
scarlett:main
scarlett:feat/waterfallpic
scarlett:feature/add-gitignore

No commits in common. "858b9e0f27f604762338a528f120634abbe19b7c" and "9fdee7b824e00af6d2bc8596357a8246ebe4d34f" have entirely different histories.
858b9e0f27 ... 9fdee7b824

14 changed files with 169 additions and 396 deletions
Show Stats Expand all files Collapse all files

1
.gitignore vendored
View File

@ -1 +0,0 @@
node_modules

163
package-lock.json generated
View File

@ -11,10 +11,8 @@
"@testing-library/jest-dom": "^5.16.5", "@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0", "@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0", "@testing-library/user-event": "^13.5.0",
"ahooks": "^3.7.8",
"animate.css": "^4.1.1", "animate.css": "^4.1.1",
"axios": "^1.3.2", "axios": "^1.3.2",
"hamburger-react": "^2.5.0",
"nodemon": "^2.0.20", "nodemon": "^2.0.20",
"nth-check": "^2.1.1", "nth-check": "^2.1.1",
"react": "^18.2.0", "react": "^18.2.0",
@ -26,7 +24,6 @@
"react-spring": "^9.6.1", "react-spring": "^9.6.1",
"react-toastify": "^9.1.1", "react-toastify": "^9.1.1",
"sass": "^1.58.0", "sass": "^1.58.0",
"unstated-next": "^1.1.0",
"uuid": "^9.0.0", "uuid": "^9.0.0",
"web-vitals": "^2.1.4" "web-vitals": "^2.1.4"
} }
@ -1973,21 +1970,16 @@
} }
}, },
"node_modules/@babel/runtime": { "node_modules/@babel/runtime": {
"version": "7.22.15", "version": "7.20.7",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.15.tgz", "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.20.7.tgz",
"integrity": "sha512-T0O+aa+4w0u06iNmapipJXMV4HoUir03hpx3/YqXXhu9xim3w+dVphjFWl1OH8NbZHw5Lbm9k45drDkgq2VNNA==", "integrity": "sha512-UF0tvkUtxwAgZ5W/KrkHf0Rn0fdnLDU9ScxBrEVNUprE/MzirjK4MJUX1/BVDv00Sv8cljtukVK1aky++X1SjQ==",
"dependencies": { "dependencies": {
"regenerator-runtime": "^0.14.0" "regenerator-runtime": "^0.13.11"
}, },
"engines": { "engines": {
"node": ">=6.9.0" "node": ">=6.9.0"
} }
}, },
"node_modules/@babel/runtime/node_modules/regenerator-runtime": {
"version": "0.14.0",
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz",
"integrity": "sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA=="
},
"node_modules/@babel/template": { "node_modules/@babel/template": {
"version": "7.20.7", "version": "7.20.7",
"resolved": "https://registry.npmjs.org/@babel/template/-/template-7.20.7.tgz", "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.20.7.tgz",
@ -6379,11 +6371,6 @@
"node": ">=8" "node": ">=8"
} }
}, },
"node_modules/@types/js-cookie": {
"version": "2.2.7",
"resolved": "https://registry.npmjs.org/@types/js-cookie/-/js-cookie-2.2.7.tgz",
"integrity": "sha512-aLkWa0C0vO5b4Sr798E26QgOkss68Un0bLjs7u9qxzPT5CG+8DuNTffWES58YzJs3hrVAOs1wonycqEBqNJubA=="
},
"node_modules/@types/json-schema": { "node_modules/@types/json-schema": {
"version": "7.0.11", "version": "7.0.11",
"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz", "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz",
@ -7143,34 +7130,6 @@
"node": ">= 6.0.0" "node": ">= 6.0.0"
} }
}, },
"node_modules/ahooks": {
"version": "3.7.8",
"resolved": "https://registry.npmjs.org/ahooks/-/ahooks-3.7.8.tgz",
"integrity": "sha512-e/NMlQWoCjaUtncNFIZk3FG1ImSkV/JhScQSkTqnftakRwdfZWSw6zzoWSG9OMYqPNs2MguDYBUFFC6THelWXA==",
"dependencies": {
"@babel/runtime": "^7.21.0",
"@types/js-cookie": "^2.x.x",
"ahooks-v3-count": "^1.0.0",
"dayjs": "^1.9.1",
"intersection-observer": "^0.12.0",
"js-cookie": "^2.x.x",
"lodash": "^4.17.21",
"resize-observer-polyfill": "^1.5.1",
"screenfull": "^5.0.0",
"tslib": "^2.4.1"
},
"engines": {
"node": ">=8.0.0"
},
"peerDependencies": {
"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
}
},
"node_modules/ahooks-v3-count": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/ahooks-v3-count/-/ahooks-v3-count-1.0.0.tgz",
"integrity": "sha512-V7uUvAwnimu6eh/PED4mCDjE7tokeZQLKlxg9lCTMPhN+NjsSbtdacByVlR1oluXQzD3MOw55wylDmQo4+S9ZQ=="
},
"node_modules/ajv": { "node_modules/ajv": {
"version": "6.12.6", "version": "6.12.6",
"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
@ -9459,7 +9418,8 @@
"node_modules/dayjs": { "node_modules/dayjs": {
"version": "1.11.7", "version": "1.11.7",
"resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.7.tgz", "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.7.tgz",
"integrity": "sha512-+Yw9U6YO5TQohxLcIkrXBeY73WP3ejHWVvx8XCk3gxvQDCTEmS48ZrSZCKciI7Bhl/uCMyxYtE9UqRILmFphkQ==" "integrity": "sha512-+Yw9U6YO5TQohxLcIkrXBeY73WP3ejHWVvx8XCk3gxvQDCTEmS48ZrSZCKciI7Bhl/uCMyxYtE9UqRILmFphkQ==",
"peer": true
}, },
"node_modules/debounce": { "node_modules/debounce": {
"version": "1.2.1", "version": "1.2.1",
@ -12010,14 +11970,6 @@
"url": "https://github.com/sponsors/sindresorhus" "url": "https://github.com/sponsors/sindresorhus"
} }
}, },
"node_modules/hamburger-react": {
"version": "2.5.0",
"resolved": "https://registry.npmjs.org/hamburger-react/-/hamburger-react-2.5.0.tgz",
"integrity": "sha512-5GSXe+ucxTPJ0SkhIsPQ/PRDweZPIKya1lfahAuExx31SdheeUA4uOPfQIAirbKona8hvo79VDr5LJQzPXsdpw==",
"peerDependencies": {
"react": "^16.8 || ^17 || ^18"
}
},
"node_modules/handle-thing": { "node_modules/handle-thing": {
"version": "2.0.1", "version": "2.0.1",
"resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.1.tgz", "resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.1.tgz",
@ -12612,11 +12564,6 @@
"node": ">= 0.4" "node": ">= 0.4"
} }
}, },
"node_modules/intersection-observer": {
"version": "0.12.2",
"resolved": "https://registry.npmjs.org/intersection-observer/-/intersection-observer-0.12.2.tgz",
"integrity": "sha512-7m1vEcPCxXYI8HqnL8CKI6siDyD+eIWSwgB3DZA+ZTogxk9I4CDnj4wilt9x/+/QbHI4YG5YZNmC6458/e9Ktg=="
},
"node_modules/invariant": { "node_modules/invariant": {
"version": "2.2.4", "version": "2.2.4",
"resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz", "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
@ -15263,11 +15210,6 @@
"@sideway/pinpoint": "^2.0.0" "@sideway/pinpoint": "^2.0.0"
} }
}, },
"node_modules/js-cookie": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-2.2.1.tgz",
"integrity": "sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ=="
},
"node_modules/js-sdsl": { "node_modules/js-sdsl": {
"version": "4.2.0", "version": "4.2.0",
"resolved": "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.2.0.tgz", "resolved": "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.2.0.tgz",
@ -20917,7 +20859,8 @@
"node_modules/resize-observer-polyfill": { "node_modules/resize-observer-polyfill": {
"version": "1.5.1", "version": "1.5.1",
"resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz", "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
"integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==" "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==",
"peer": true
}, },
"node_modules/resolve": { "node_modules/resolve": {
"version": "1.22.1", "version": "1.22.1",
@ -21314,17 +21257,6 @@
"url": "https://opencollective.com/webpack" "url": "https://opencollective.com/webpack"
} }
}, },
"node_modules/screenfull": {
"version": "5.2.0",
"resolved": "https://registry.npmjs.org/screenfull/-/screenfull-5.2.0.tgz",
"integrity": "sha512-9BakfsO2aUQN2K9Fdbj87RJIEZ82Q9IGim7FqM5OsebfoFC6ZHXgDq/KvniuLTPdeM8wY2o6Dj3WQ7KeQCj3cA==",
"engines": {
"node": ">=0.10.0"
},
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/select-hose": { "node_modules/select-hose": {
"version": "2.0.0", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz", "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
@ -23223,11 +23155,6 @@
"integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==", "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==",
"peer": true "peer": true
}, },
"node_modules/unstated-next": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/unstated-next/-/unstated-next-1.1.0.tgz",
"integrity": "sha512-AAn47ZncPvgBGOvMcn8tSRxsrqwf2VdAPxLASTuLJvZt4rhKfDvUkmYZLGfclImSfTVMv7tF4ynaVxin0JjDCA=="
},
"node_modules/upath": { "node_modules/upath": {
"version": "1.2.0", "version": "1.2.0",
"resolved": "https://registry.npmjs.org/upath/-/upath-1.2.0.tgz", "resolved": "https://registry.npmjs.org/upath/-/upath-1.2.0.tgz",
@ -25659,18 +25586,11 @@
} }
}, },
"@babel/runtime": { "@babel/runtime": {
"version": "7.22.15", "version": "7.20.7",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.15.tgz", "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.20.7.tgz",
"integrity": "sha512-T0O+aa+4w0u06iNmapipJXMV4HoUir03hpx3/YqXXhu9xim3w+dVphjFWl1OH8NbZHw5Lbm9k45drDkgq2VNNA==", "integrity": "sha512-UF0tvkUtxwAgZ5W/KrkHf0Rn0fdnLDU9ScxBrEVNUprE/MzirjK4MJUX1/BVDv00Sv8cljtukVK1aky++X1SjQ==",
"requires": { "requires": {
"regenerator-runtime": "^0.14.0" "regenerator-runtime": "^0.13.11"
},
"dependencies": {
"regenerator-runtime": {
"version": "0.14.0",
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz",
"integrity": "sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA=="
}
} }
}, },
"@babel/template": { "@babel/template": {
@ -28883,11 +28803,6 @@
} }
} }
}, },
"@types/js-cookie": {
"version": "2.2.7",
"resolved": "https://registry.npmjs.org/@types/js-cookie/-/js-cookie-2.2.7.tgz",
"integrity": "sha512-aLkWa0C0vO5b4Sr798E26QgOkss68Un0bLjs7u9qxzPT5CG+8DuNTffWES58YzJs3hrVAOs1wonycqEBqNJubA=="
},
"@types/json-schema": { "@types/json-schema": {
"version": "7.0.11", "version": "7.0.11",
"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz", "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz",
@ -29485,28 +29400,6 @@
"debug": "4" "debug": "4"
} }
}, },
"ahooks": {
"version": "3.7.8",
"resolved": "https://registry.npmjs.org/ahooks/-/ahooks-3.7.8.tgz",
"integrity": "sha512-e/NMlQWoCjaUtncNFIZk3FG1ImSkV/JhScQSkTqnftakRwdfZWSw6zzoWSG9OMYqPNs2MguDYBUFFC6THelWXA==",
"requires": {
"@babel/runtime": "^7.21.0",
"@types/js-cookie": "^2.x.x",
"ahooks-v3-count": "^1.0.0",
"dayjs": "^1.9.1",
"intersection-observer": "^0.12.0",
"js-cookie": "^2.x.x",
"lodash": "^4.17.21",
"resize-observer-polyfill": "^1.5.1",
"screenfull": "^5.0.0",
"tslib": "^2.4.1"
}
},
"ahooks-v3-count": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/ahooks-v3-count/-/ahooks-v3-count-1.0.0.tgz",
"integrity": "sha512-V7uUvAwnimu6eh/PED4mCDjE7tokeZQLKlxg9lCTMPhN+NjsSbtdacByVlR1oluXQzD3MOw55wylDmQo4+S9ZQ=="
},
"ajv": { "ajv": {
"version": "6.12.6", "version": "6.12.6",
"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
@ -31199,7 +31092,8 @@
"dayjs": { "dayjs": {
"version": "1.11.7", "version": "1.11.7",
"resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.7.tgz", "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.7.tgz",
"integrity": "sha512-+Yw9U6YO5TQohxLcIkrXBeY73WP3ejHWVvx8XCk3gxvQDCTEmS48ZrSZCKciI7Bhl/uCMyxYtE9UqRILmFphkQ==" "integrity": "sha512-+Yw9U6YO5TQohxLcIkrXBeY73WP3ejHWVvx8XCk3gxvQDCTEmS48ZrSZCKciI7Bhl/uCMyxYtE9UqRILmFphkQ==",
"peer": true
}, },
"debounce": { "debounce": {
"version": "1.2.1", "version": "1.2.1",
@ -33084,12 +32978,6 @@
"duplexer": "^0.1.2" "duplexer": "^0.1.2"
} }
}, },
"hamburger-react": {
"version": "2.5.0",
"resolved": "https://registry.npmjs.org/hamburger-react/-/hamburger-react-2.5.0.tgz",
"integrity": "sha512-5GSXe+ucxTPJ0SkhIsPQ/PRDweZPIKya1lfahAuExx31SdheeUA4uOPfQIAirbKona8hvo79VDr5LJQzPXsdpw==",
"requires": {}
},
"handle-thing": { "handle-thing": {
"version": "2.0.1", "version": "2.0.1",
"resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.1.tgz", "resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.1.tgz",
@ -33521,11 +33409,6 @@
"side-channel": "^1.0.4" "side-channel": "^1.0.4"
} }
}, },
"intersection-observer": {
"version": "0.12.2",
"resolved": "https://registry.npmjs.org/intersection-observer/-/intersection-observer-0.12.2.tgz",
"integrity": "sha512-7m1vEcPCxXYI8HqnL8CKI6siDyD+eIWSwgB3DZA+ZTogxk9I4CDnj4wilt9x/+/QbHI4YG5YZNmC6458/e9Ktg=="
},
"invariant": { "invariant": {
"version": "2.2.4", "version": "2.2.4",
"resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz", "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
@ -35434,11 +35317,6 @@
"@sideway/pinpoint": "^2.0.0" "@sideway/pinpoint": "^2.0.0"
} }
}, },
"js-cookie": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-2.2.1.tgz",
"integrity": "sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ=="
},
"js-sdsl": { "js-sdsl": {
"version": "4.2.0", "version": "4.2.0",
"resolved": "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.2.0.tgz", "resolved": "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.2.0.tgz",
@ -39593,7 +39471,8 @@
"resize-observer-polyfill": { "resize-observer-polyfill": {
"version": "1.5.1", "version": "1.5.1",
"resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz", "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
"integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==" "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==",
"peer": true
}, },
"resolve": { "resolve": {
"version": "1.22.1", "version": "1.22.1",
@ -39840,11 +39719,6 @@
"ajv-keywords": "^3.5.2" "ajv-keywords": "^3.5.2"
} }
}, },
"screenfull": {
"version": "5.2.0",
"resolved": "https://registry.npmjs.org/screenfull/-/screenfull-5.2.0.tgz",
"integrity": "sha512-9BakfsO2aUQN2K9Fdbj87RJIEZ82Q9IGim7FqM5OsebfoFC6ZHXgDq/KvniuLTPdeM8wY2o6Dj3WQ7KeQCj3cA=="
},
"select-hose": { "select-hose": {
"version": "2.0.0", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz", "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
@ -41349,11 +41223,6 @@
} }
} }
}, },
"unstated-next": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/unstated-next/-/unstated-next-1.1.0.tgz",
"integrity": "sha512-AAn47ZncPvgBGOvMcn8tSRxsrqwf2VdAPxLASTuLJvZt4rhKfDvUkmYZLGfclImSfTVMv7tF4ynaVxin0JjDCA=="
},
"upath": { "upath": {
"version": "1.2.0", "version": "1.2.0",
"resolved": "https://registry.npmjs.org/upath/-/upath-1.2.0.tgz", "resolved": "https://registry.npmjs.org/upath/-/upath-1.2.0.tgz",

3
package.json
View File

@ -6,10 +6,8 @@
"@testing-library/jest-dom": "^5.16.5", "@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0", "@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0", "@testing-library/user-event": "^13.5.0",
"ahooks": "^3.7.8",
"animate.css": "^4.1.1", "animate.css": "^4.1.1",
"axios": "^1.3.2", "axios": "^1.3.2",
"hamburger-react": "^2.5.0",
"nodemon": "^2.0.20", "nodemon": "^2.0.20",
"nth-check": "^2.1.1", "nth-check": "^2.1.1",
"react": "^18.2.0", "react": "^18.2.0",
@ -21,7 +19,6 @@
"react-spring": "^9.6.1", "react-spring": "^9.6.1",
"react-toastify": "^9.1.1", "react-toastify": "^9.1.1",
"sass": "^1.58.0", "sass": "^1.58.0",
"unstated-next": "^1.1.0",
"uuid": "^9.0.0", "uuid": "^9.0.0",
"web-vitals": "^2.1.4" "web-vitals": "^2.1.4"
}, },

38
src/assets/stylesheets/dropdown.scss
View File

@ -8,18 +8,6 @@
src: url(../font/LeagueSpartan-Medium.ttf); src: url(../font/LeagueSpartan-Medium.ttf);
} }
.mobile {
position: fixed!important;
padding: 20px!important;
padding: 20px!important;
background-color: rgb(35, 35, 35)!important;
z-index: 999!important;
width: 100%!important;
box-sizing: border-box;
height: 100vh!important;
justify-content: start!important;
}
@media screen and (max-width: 650px) { @media screen and (max-width: 650px) {
.c { .c {
position: fixed; position: fixed;
@ -34,28 +22,22 @@
// animation: slide .6s ease; // animation: slide .6s ease;
// animation-iteration-count: 1; // animation-iteration-count: 1;
} }
.home__content__info {
.c {
padding: 0;
width: 100%;
}
}
.dd { .dd {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 100%; width: 95%;
margin-top: 45px; margin-top: 10%;
} }
li { li {
margin-bottom: 20px; margin-bottom: 10%;
// margin-left: 8px; margin-left: 8px;
} }
.dd__link { .dd__link {
color: white; color: white;
font-size: 24px; font-size: 40px;
padding: 0; padding: 0;
width: 100%; width: 100%;
display: flex; display: flex;
@ -65,16 +47,12 @@
position: relative; position: relative;
width: 90%; width: 90%;
cursor: pointer; cursor: pointer;
line-height: 33px;
height: 33px;
} }
.dd__link_arrow { .dd__link_arrow {
text-align: center; text-align: center;
color: white; color: white;
// padding-top: 7px; padding-top: 7px;
height: 33px;
line-height: 33px;
width: 10%; width: 10%;
font-size: 30px; font-size: 30px;
cursor: pointer; cursor: pointer;
@ -125,7 +103,7 @@
@keyframes slideIn { @keyframes slideIn {
0% { 0% {
margin-top: -100vh; margin-top: 100vh;
opacity: 0%; opacity: 0%;
} }
100% { 100% {
@ -140,7 +118,7 @@
opacity: 100%; opacity: 100%;
} }
100% { 100% {
margin-top: -100vh; margin-top: 100vh;
opacity: 0%; opacity: 0%;
} }
} }

6
src/assets/stylesheets/home.scss
View File

@ -77,12 +77,6 @@
z-index: 0; z-index: 0;
} }
.dropdown {
position: fixed;
z-index: 999;
background-color: #232323;
}
@media screen and (max-width: 650px) { @media screen and (max-width: 650px) {
// Phones // Phones
.home__content__panel__title { .home__content__panel__title {

8
src/assets/stylesheets/navbar.scss
View File

@ -170,10 +170,6 @@ li a:hover {
display: none; display: none;
} }
.hamburger-react {
display: none;
}
@media screen and (max-width: 912px) { @media screen and (max-width: 912px) {
// Tablets // Tablets
} }
@ -189,10 +185,6 @@ li a:hover {
display: none; display: none;
} }
.hamburger-react {
color: #fff;
display: block;
}
.navbar__hamburger { .navbar__hamburger {
display: flex; display: flex;
flex-direction: column; flex-direction: column;

38
src/components/DropdownContainer.js
View File

@ -1,26 +1,27 @@
import React, { useEffect, useRef } from "react"; import React, { Component } from "react";
import { NavLink } from "react-router-dom"; import { NavLink } from "react-router-dom";
import "../assets/stylesheets/dropdown.scss"; import "../assets/stylesheets/dropdown.scss";
import { useSize } from "ahooks";
import { useContainer } from "unstated-next";
import GlobalStore from "../store/global";
const DropdownContainer = () => { export default class DropdownContainer extends Component {
const container = useRef();
const { isMobile, toggleMenu } = useContainer(GlobalStore); constructor(props){
const toggleHamburger = () => { super(props);
container.current.className = "slideOut c"; this.container = React.createRef();
setTimeout(() => { }
toggleMenu();
}, 500); toggleHamburger() {
}; this.container.current.className = "slideOut c";
setTimeout(() => {this.props.hamburgerToggle();}
, 500);
}
render() {
return ( return (
<nav ref={container} className={`dropdown c slideIn ${isMobile ? 'mobile' : ''}`}> <nav ref={this.container} className="c slideIn">
{!isMobile && (
<div className="header"> <div className="header">
<label className="header__text">ITR</label> <label className="header__text">ITR</label>
<button className="header__x" onClick={() => toggleHamburger()}>X</button> <button className="header__x" onClick={() => this.toggleHamburger()}>X</button>
</div>)} </div>
<div className="dd"> <div className="dd">
<li> <li>
<NavLink className="dd__link" to="/"> <NavLink className="dd__link" to="/">
@ -50,5 +51,4 @@ const DropdownContainer = () => {
</nav> </nav>
); );
} }
}
export default DropdownContainer;

39
src/components/NavBar.js
View File

@ -1,26 +1,25 @@
import React, { Component, useEffect, useState } from "react"; import React, { Component } from "react";
import { NavLink } from "react-router-dom"; import { NavLink } from "react-router-dom";
import "../assets/stylesheets/navbar.scss"; import "../assets/stylesheets/navbar.scss";
import { useContainer } from "unstated-next";
import GlobalStore from "../store/global";
import Hamburger from "hamburger-react";
const NavBar = () => { export default class NavBar extends Component {
const [navBackground, setNavBackground] = useState({ backgroundColor: "transparent" }); constructor(props) {
const { toggleMenu, isHamburger } = useContainer(GlobalStore); super(props);
useEffect(() => { this.state = { navBackground: { backgroundColor: "transparent" }, hamburger: false };
document.addEventListener("scroll", (event) => { document.addEventListener("scroll", (event) => {
if (window.scrollY < 10) { if (window.scrollY < 10)
setNavBackground({ backgroundColor: "transparent" }); this.setState({ navBackground: { backgroundColor: "transparent" } });
} else this.setState({ navBackground: { backgroundColor: "#232323" } });
else {
setNavBackground({ backgroundColor: "#232323" });
};
}); });
}, []); }
toggleHamburger() {
this.props.hamburgerToggle();
}
render() {
return ( return (
<nav className="navbar" style={navBackground}> <nav className="navbar" style={this.state.navBackground}>
<a id="logo" href="http://localhost:3000"> <a id="logo" href="http://localhost:3000">
<h2 className="navbar__logotext">ITR</h2> <h2 className="navbar__logotext">ITR</h2>
</a> </a>
@ -42,14 +41,12 @@ const NavBar = () => {
Login Login
</NavLink> */} </NavLink> */}
<div className="nav__placeholder"></div> <div className="nav__placeholder"></div>
<Hamburger toggled={isHamburger} toggle={toggleMenu} /> <div className="navbar__hamburger" onClick={() => this.toggleHamburger()}>
{/* <div className="navbar__hamburger">
<div className="navbar__hamburger_line"></div> <div className="navbar__hamburger_line"></div>
<div className="navbar__hamburger_line"></div> <div className="navbar__hamburger_line"></div>
<div className="navbar__hamburger_line"></div> <div className="navbar__hamburger_line"></div>
</div> */} </div>
</nav> </nav>
); );
} }
}
export default NavBar;

5
src/index.js
View File

@ -6,7 +6,6 @@ import AwardsRoute from "./routes/AwardsRoute";
import reportWebVitals from "./reportWebVitals"; import reportWebVitals from "./reportWebVitals";
import { createBrowserRouter, RouterProvider } from "react-router-dom"; import { createBrowserRouter, RouterProvider } from "react-router-dom";
import ErrorRoute from "./routes/ErrorRoute"; import ErrorRoute from "./routes/ErrorRoute";
import GlobalStore from "./store/global";
const root = ReactDOM.createRoot(document.getElementById("root")); const root = ReactDOM.createRoot(document.getElementById("root"));
@ -28,8 +27,6 @@ const router = createBrowserRouter([
} }
]); ]);
root.render(<GlobalStore.Provider> root.render(<RouterProvider router={router}></RouterProvider>);
<RouterProvider router={router}></RouterProvider>
</GlobalStore.Provider>);
reportWebVitals(); reportWebVitals();

34
src/routes/AboutRoute.js
View File

@ -1,37 +1,31 @@
import React, { Component, useEffect } from "react"; import React, { Component } from "react";
import NavBar from "../components/NavBar"; import NavBar from "../components/NavBar";
import About from "../components/About"; import About from "../components/About";
import Footer from "../components/Footer"; import Footer from "../components/Footer";
import DropdownContainer from "../components/DropdownContainer"; import DropdownContainer from "../components/DropdownContainer";
import "../assets/stylesheets/app.scss"; import "../assets/stylesheets/app.scss";
import { useContainer } from "unstated-next";
import GlobalStore from "../store/global";
const Inner = () => {
const { isHamburger, setIsHamburger } = useContainer(GlobalStore);
useEffect(() => {
setIsHamburger(false);
}, []);
return (
<div className="container">
{isHamburger ? <DropdownContainer hamburgerToggle={setIsHamburger}/> : null}
<About></About>
<NavBar hamburgerToggle={setIsHamburger}></NavBar>
<Footer></Footer>
</div>
);
}
export default class AboutRoute extends Component { export default class AboutRoute extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = {
hamburger: false
};
document.title = "ITR - About"; document.title = "ITR - About";
} }
hamburgerToggle = () => {
this.setState({ hamburger: !this.state.hamburger });
}
render() { render() {
return ( return (
<Inner /> <div className="container">
{this.state.hamburger ? <DropdownContainer hamburgerToggle={this.hamburgerToggle}/> : null}
<About></About>
<NavBar hamburgerToggle={this.hamburgerToggle}></NavBar>
<Footer></Footer>
</div>
); );
} }
} }

5
src/routes/AwardsRoute.js
View File

@ -2,6 +2,7 @@ import React, { Component } from "react";
import NavBar from "../components/NavBar"; import NavBar from "../components/NavBar";
import Awards from "../components/Awards"; import Awards from "../components/Awards";
import Footer from "../components/Footer"; import Footer from "../components/Footer";
import DropdownContainer from "../components/DropdownContainer";
import "../assets/stylesheets/app.scss"; import "../assets/stylesheets/app.scss";
export default class AboutRoute extends Component { export default class AboutRoute extends Component {
@ -10,6 +11,10 @@ export default class AboutRoute extends Component {
document.title = "ITR - Awards"; document.title = "ITR - Awards";
} }
hamburgerToggle = () => {
this.setState({ hamburger: !this.state.hamburger });
}
render() { render() {
return ( return (
<div className="container"> <div className="container">

10
src/routes/ErrorRoute.js
View File

@ -1,22 +1,18 @@
import { useRouteError } from "react-router-dom"; import { useRouteError } from "react-router-dom";
import React, { useEffect, useState } from "react"; import React, { useState } from "react";
import NavBar from "../components/NavBar"; import NavBar from "../components/NavBar";
import Error from "../components/Error"; import Error from "../components/Error";
import Footer from "../components/Footer"; import Footer from "../components/Footer";
import DropdownContainer from "../components/DropdownContainer"; import DropdownContainer from "../components/DropdownContainer";
import "../assets/stylesheets/app.scss"; import "../assets/stylesheets/app.scss";
import "../assets/stylesheets/error.scss"; import "../assets/stylesheets/error.scss";
import { useContainer } from "unstated-next";
import GlobalStore from "../store/global";
export default function ErrorRoute() { export default function ErrorRoute() {
const error = useRouteError(); const error = useRouteError();
console.error(error); console.error(error);
const { isHamburger: hamburger, setIsHamburger: setHamburger } = useContainer(GlobalStore);
useEffect(() => {
setHamburger(false);
}, []);
// create state for hamburger // create state for hamburger
const [hamburger, setHamburger] = useState(false);
// create function to toggle hamburger // create function to toggle hamburger
const hamburgerToggle = () => { const hamburgerToggle = () => {
setHamburger(!hamburger); setHamburger(!hamburger);

41
src/routes/HomeRoute.js
View File

@ -1,4 +1,4 @@
import React, { Component, useEffect } from "react"; import React, { Component } from "react";
import NavBar from "../components/NavBar"; import NavBar from "../components/NavBar";
import DropdownContainer from "../components/DropdownContainer"; import DropdownContainer from "../components/DropdownContainer";
import Home from "../components/Home"; import Home from "../components/Home";
@ -6,20 +6,28 @@ import Footer from "../components/Footer";
import "../assets/stylesheets/app.scss"; import "../assets/stylesheets/app.scss";
import { ToastContainer, toast } from "react-toastify"; import { ToastContainer, toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css"; import "react-toastify/dist/ReactToastify.css";
import { useContainer } from "unstated-next";
import GlobalStore from "../store/global";
export default class HomeRoute extends Component {
constructor(props) {
super(props);
this.state = {
text: "",
hamburger: false
};
toast("The new ITR Webpage! 🎉");
document.title = "ITR - Home";
}
const Inner = () => { hamburgerToggle = () => {
const { isHamburger, setIsHamburger } = useContainer(GlobalStore); this.setState({ hamburger: !this.state.hamburger });
useEffect(() => { }
setIsHamburger(false);
}, []); render() {
return ( return (
<div className="container"> <div className="container">
{isHamburger ? <DropdownContainer hamburgerToggle={setIsHamburger}/> : null} {this.state.hamburger ? <DropdownContainer hamburgerToggle={this.hamburgerToggle}/> : null}
<Home></Home> <Home></Home>
<NavBar hamburgerToggle={setIsHamburger}></NavBar> <NavBar hamburgerToggle={this.hamburgerToggle}></NavBar>
<ToastContainer <ToastContainer
position="bottom-right" position="bottom-right"
autoClose={5000} autoClose={5000}
@ -36,17 +44,4 @@ const Inner = () => {
</div> </div>
); );
} }
export default class HomeRoute extends Component {
constructor(props) {
super(props);
toast("The new ITR Webpage! 🎉");
document.title = "ITR - Home";
}
render() {
return (
<Inner />
);
}
} }

40
src/store/global.js
View File

@ -1,40 +0,0 @@
import { useSize } from 'ahooks';
import { useEffect, useState } from 'react';
import { createContainer } from 'unstated-next';
const useGlobalStore = () => {
const bodySize = useSize(document.querySelector('body'));
const [isMobile, setIsMobile] = useState(false);
const [isHamburger, setIsHamburger] = useState(false);
const toggleMenu = () => {
setIsHamburger(!isHamburger);
};
const isScrollLock = isHamburger && isMobile;
useEffect(() => {
const isMobile = (bodySize?.width || 1200) < 650;
setIsMobile(isMobile);
if (!isMobile) {
setIsHamburger(false);
}
}, [bodySize]);
useEffect(() => {
const bodyDom = document.querySelector('body');
if (isScrollLock) {
bodyDom.style.height = '100vh';
bodyDom.style.overflow = 'hidden';
} else {
bodyDom.style.height = 'unset';
bodyDom.style.overflow = 'scroll';
}
}, [isScrollLock]);
return {
bodySize,
isMobile,
isHamburger, toggleMenu, setIsHamburger,
isScrollLock
};
};
const GlobalStore = createContainer(useGlobalStore);
export default GlobalStore;