From 87381cf6b85e60d769600af6b430f06b08d181b2 Mon Sep 17 00:00:00 2001 From: Stanislaw <62724833+BoberITman@users.noreply.github.com> Date: Fri, 13 May 2022 22:44:44 +0200 Subject: [PATCH] tiles menu changes and floting navbar --- assets/Icons.js | 92 +++++++++++++++++++++++++++++++++++++++++++++ icons/PaperPlane.js | 11 ------ package-lock.json | 27 +++++++++++++ package.json | 2 + pages/index.js | 32 ++++++++++------ styles/globals.scss | 56 ++++++++++++++++++++++----- yarn.lock | 12 +++++- 7 files changed, 200 insertions(+), 32 deletions(-) create mode 100644 assets/Icons.js delete mode 100644 icons/PaperPlane.js diff --git a/assets/Icons.js b/assets/Icons.js new file mode 100644 index 0000000..d3a9e04 --- /dev/null +++ b/assets/Icons.js @@ -0,0 +1,92 @@ +module.exports = { + PaperPlane: function (props) { + return ( + + + + ); + }, + DiscordIcon: function (props) { + return ( + + + + + + + + + + + ); + }, + YtIcon: function (props) { + return ( + + + + + + ); + }, + GithubIcon: function (props) { + return ( + + + + ); + }, + TwitterIcon: function (props) { + return ( + + + + ); + }, + Minecraft: function (props) { + return ( + + + + ); + }, + MemberIcon: function (props) { + return ( + + + + ); + }, + CalendarIcon: function (props) { + return ( + + + + ); + }, +}; diff --git a/icons/PaperPlane.js b/icons/PaperPlane.js deleted file mode 100644 index 05143a6..0000000 --- a/icons/PaperPlane.js +++ /dev/null @@ -1,11 +0,0 @@ -export function PaperPlane(props) { - return ( - - - - ); -} diff --git a/package-lock.json b/package-lock.json index f1678f3..2a2d194 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,8 +8,10 @@ "name": "gractwo-pl", "version": "0.1.0", "dependencies": { + "chart.js": "^3.7.1", "next": "12.1.6", "react": "18.1.0", + "react-chartjs-2": "^4.1.0", "react-dom": "18.1.0", "sass": "^1.51.0", "yarn": "^1.22.18" @@ -664,6 +666,11 @@ "url": "https://github.com/chalk/chalk?sponsor=1" } }, + "node_modules/chart.js": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.7.1.tgz", + "integrity": "sha512-8knRegQLFnPQAheZV8MjxIXc5gQEfDFD897BJgv/klO/vtIyFFmgMXrNfgrXpbTr/XbTturxRgxIXx/Y+ASJBA==" + }, "node_modules/chokidar": { "version": "3.5.3", "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz", @@ -2500,6 +2507,15 @@ "node": ">=0.10.0" } }, + "node_modules/react-chartjs-2": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-4.1.0.tgz", + "integrity": "sha512-AsUihxEp8Jm1oBhbEovE+w50m9PVNhz1sfwEIT4hZduRC0m14gHWHd0cUaxkFDb8HNkdMIGzsNlmVqKiOpU74g==", + "peerDependencies": { + "chart.js": "^3.5.0", + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/react-dom": { "version": "18.1.0", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.1.0.tgz", @@ -3441,6 +3457,11 @@ "supports-color": "^7.1.0" } }, + "chart.js": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.7.1.tgz", + "integrity": "sha512-8knRegQLFnPQAheZV8MjxIXc5gQEfDFD897BJgv/klO/vtIyFFmgMXrNfgrXpbTr/XbTturxRgxIXx/Y+ASJBA==" + }, "chokidar": { "version": "3.5.3", "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz", @@ -4781,6 +4802,12 @@ "loose-envify": "^1.1.0" } }, + "react-chartjs-2": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-4.1.0.tgz", + "integrity": "sha512-AsUihxEp8Jm1oBhbEovE+w50m9PVNhz1sfwEIT4hZduRC0m14gHWHd0cUaxkFDb8HNkdMIGzsNlmVqKiOpU74g==", + "requires": {} + }, "react-dom": { "version": "18.1.0", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.1.0.tgz", diff --git a/package.json b/package.json index c1738f3..c09c0a2 100644 --- a/package.json +++ b/package.json @@ -9,8 +9,10 @@ "lint": "next lint" }, "dependencies": { + "chart.js": "^3.7.1", "next": "12.1.6", "react": "18.1.0", + "react-chartjs-2": "^4.1.0", "react-dom": "18.1.0", "sass": "^1.51.0", "yarn": "^1.22.18" diff --git a/pages/index.js b/pages/index.js index 9e45525..03fb609 100644 --- a/pages/index.js +++ b/pages/index.js @@ -1,6 +1,16 @@ import Header from "../components/Header.js"; import Banner from "../components/Banner.js"; -import { PaperPlane } from "../icons/PaperPlane.js"; +import { + PaperPlane, + DiscordIcon, + YtIcon, + GithubIcon, + TwitterIcon, + MemberIcon, + CalendarIcon, +} from "../assets/Icons.js"; +import { Line } from "react-chartjs-2"; +import { Chart as ChartJS } from "chart.js/auto"; export default function Home() { return ( <> @@ -17,26 +27,26 @@ export default function Home() {

Status botów

- +
- +
-

99,9k

-

Wysłane wiadomości

- +

196

+

Członków

+
-

99,9k

-

Wysłane wiadomości

- +

697 dni

+

Istnienia Gractwa

+
- +
- +
diff --git a/styles/globals.scss b/styles/globals.scss index f59f9c7..d6b6d94 100644 --- a/styles/globals.scss +++ b/styles/globals.scss @@ -14,15 +14,19 @@ body { background-color: var(--black1); color: white; + -ms-overflow-style: none; /* IE and Edge */ + scrollbar-width: none; /* Firefox */ } nav.main { + z-index: 1; height: 4rem; + width: 100%; background-color: var(--black1); display: flex; align-items: center; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); - position: relative; + position: fixed; a { font-family: "Lexend", sans-serif; display: block; @@ -66,6 +70,7 @@ section.banner { align-items: center; width: 100%; height: 25rem; + padding-top: 4rem; h1, p { position: absolute; @@ -90,11 +95,11 @@ article.main { display: flex; justify-content: center; .Map { - margin-top: 2rem; + margin: 2rem; display: grid; grid-gap: 2rem; - grid-template-rows: repeat(2, 10rem); - grid-template-columns: repeat(7, 10rem); + grid-template-rows: repeat(4, 10rem); + grid-template-columns: repeat(7, 11rem); div { display: flex; flex-direction: column; @@ -113,6 +118,20 @@ article.main { font-family: "Lexend", sans-serif; font-size: 1.6rem; } + } + div:hover { + background-color: var(--black0); + box-shadow: 7 px 21px rgba(0, 0, 0, 0.25); + } + .icons { + width: 6rem; + height: 6rem; + position: absolute; + color: white; + } + .msg { + grid-column: 1/3; + grid-row: 1; .icons { margin-bottom: 4rem; margin-left: 11rem; @@ -121,13 +140,8 @@ article.main { height: 15rem; opacity: 5%; position: absolute; - color: white; } } - .msg { - grid-column: 1/3; - grid-row: 1; - } .bots { grid-column: 3/6; grid-row: 1; @@ -143,10 +157,30 @@ article.main { .members { grid-column: 1/3; grid-row: 2; + .icons { + transform: scaleX(-1) rotate(20deg); + margin-top: rem; + margin-left: 16rem; + width: 16rem; + height: 15rem; + opacity: 5%; + position: absolute; + color: white; + } } .days { grid-column: 3/5; grid-row: 2; + .icons { + transform: rotate(20deg); + margin-top: rem; + margin-left: 14rem; + width: 14rem; + height: 15rem; + opacity: 5%; + position: absolute; + color: white; + } } .yt { grid-column: 5; @@ -162,3 +196,7 @@ article.main { } } } +/* Hide scrollbar for Chrome, Safari and Opera */ +body::-webkit-scrollbar { + display: none; +} diff --git a/yarn.lock b/yarn.lock index 1da9172..48170ad 100644 --- a/yarn.lock +++ b/yarn.lock @@ -293,6 +293,11 @@ "ansi-styles" "^4.1.0" "supports-color" "^7.1.0" +"chart.js@^3.5.0", "chart.js@^3.7.1": + "integrity" "sha512-8knRegQLFnPQAheZV8MjxIXc5gQEfDFD897BJgv/klO/vtIyFFmgMXrNfgrXpbTr/XbTturxRgxIXx/Y+ASJBA==" + "resolved" "https://registry.npmjs.org/chart.js/-/chart.js-3.7.1.tgz" + "version" "3.7.1" + "chokidar@>=3.0.0 <4.0.0": "integrity" "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==" "resolved" "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz" @@ -1357,6 +1362,11 @@ "resolved" "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz" "version" "1.2.3" +"react-chartjs-2@^4.1.0": + "integrity" "sha512-AsUihxEp8Jm1oBhbEovE+w50m9PVNhz1sfwEIT4hZduRC0m14gHWHd0cUaxkFDb8HNkdMIGzsNlmVqKiOpU74g==" + "resolved" "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-4.1.0.tgz" + "version" "4.1.0" + "react-dom@^17.0.2 || ^18.0.0-0", "react-dom@18.1.0": "integrity" "sha512-fU1Txz7Budmvamp7bshe4Zi32d0ll7ect+ccxNu9FlObT605GOEB8BfO4tmRJ39R5Zj831VCpvQ05QPBW5yb+w==" "resolved" "https://registry.npmjs.org/react-dom/-/react-dom-18.1.0.tgz" @@ -1370,7 +1380,7 @@ "resolved" "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz" "version" "16.13.1" -"react@^17.0.2 || ^18.0.0-0", "react@^18.1.0", "react@>= 16.8.0 || 17.x.x || ^18.0.0-0", "react@18.1.0": +"react@^16.8.0 || ^17.0.0 || ^18.0.0", "react@^17.0.2 || ^18.0.0-0", "react@^18.1.0", "react@>= 16.8.0 || 17.x.x || ^18.0.0-0", "react@18.1.0": "integrity" "sha512-4oL8ivCz5ZEPyclFQXaNksK3adutVS8l2xzZU0cqEFrE9Sb7fC0EFK5uEk74wIreL1DERyjvsU915j1pcT2uEQ==" "resolved" "https://registry.npmjs.org/react/-/react-18.1.0.tgz" "version" "18.1.0"