From 8ef5dbec70e33609af5bc46a6accdc9295cdad40 Mon Sep 17 00:00:00 2001 From: Kristina Date: Tue, 27 Feb 2024 14:03:12 +0200 Subject: [PATCH 1/4] style is ready --- package-lock.json | 311 +++++++++++++++++++++++++++++ package.json | 1 + src/css/rating.css | 139 +++++++++++++ src/css/star.scss | 210 ++++++++++++++++++++ src/css/styles.css | 3 +- src/partials/rating.html | 419 +++++++++++++++++++++++++++++++++++++++ 6 files changed, 1082 insertions(+), 1 deletion(-) create mode 100644 src/css/star.scss diff --git a/package-lock.json b/package-lock.json index feff161..aff6349 100644 --- a/package-lock.json +++ b/package-lock.json @@ -20,6 +20,7 @@ }, "devDependencies": { "glob": "^8.1.0", + "sass": "^1.71.1", "vite": "^4.5.2" } }, @@ -353,6 +354,19 @@ "node": ">=12" } }, + "node_modules/anymatch": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz", + "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==", + "devOptional": true, + "dependencies": { + "normalize-path": "^3.0.0", + "picomatch": "^2.0.4" + }, + "engines": { + "node": ">= 8" + } + }, "node_modules/asynckit": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", @@ -374,6 +388,15 @@ "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==", "dev": true }, + "node_modules/binary-extensions": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz", + "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==", + "devOptional": true, + "engines": { + "node": ">=8" + } + }, "node_modules/brace-expansion": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz", @@ -383,6 +406,42 @@ "balanced-match": "^1.0.0" } }, + "node_modules/braces": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz", + "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==", + "devOptional": true, + "dependencies": { + "fill-range": "^7.0.1" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/chokidar": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz", + "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==", + "devOptional": true, + "dependencies": { + "anymatch": "~3.1.2", + "braces": "~3.0.2", + "glob-parent": "~5.1.2", + "is-binary-path": "~2.1.0", + "is-glob": "~4.0.1", + "normalize-path": "~3.0.0", + "readdirp": "~3.6.0" + }, + "engines": { + "node": ">= 8.10.0" + }, + "funding": { + "url": "https://paulmillr.com/funding/" + }, + "optionalDependencies": { + "fsevents": "~2.3.2" + } + }, "node_modules/combined-stream": { "version": "1.0.8", "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz", @@ -447,6 +506,18 @@ "@esbuild/win32-x64": "0.18.20" } }, + "node_modules/fill-range": { + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", + "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==", + "devOptional": true, + "dependencies": { + "to-regex-range": "^5.0.1" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/follow-redirects": { "version": "1.15.5", "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.5.tgz", @@ -517,6 +588,24 @@ "url": "https://github.com/sponsors/isaacs" } }, + "node_modules/glob-parent": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", + "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", + "devOptional": true, + "dependencies": { + "is-glob": "^4.0.1" + }, + "engines": { + "node": ">= 6" + } + }, + "node_modules/immutable": { + "version": "4.3.5", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.5.tgz", + "integrity": "sha512-8eabxkth9gZatlwl5TBuJnCsoTADlL6ftEr7A4qgdaTsPyreilDSnUk57SO+jfKcNtxPa22U5KK6DSeAYhpBJw==", + "devOptional": true + }, "node_modules/inflight": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz", @@ -533,6 +622,48 @@ "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==", "dev": true }, + "node_modules/is-binary-path": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", + "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", + "devOptional": true, + "dependencies": { + "binary-extensions": "^2.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/is-extglob": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", + "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==", + "devOptional": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/is-glob": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz", + "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==", + "devOptional": true, + "dependencies": { + "is-extglob": "^2.1.1" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/is-number": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", + "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==", + "devOptional": true, + "engines": { + "node": ">=0.12.0" + } + }, "node_modules/izitoast": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/izitoast/-/izitoast-1.4.0.tgz", @@ -597,6 +728,15 @@ "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1" } }, + "node_modules/normalize-path": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", + "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", + "devOptional": true, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/once": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", @@ -654,6 +794,18 @@ "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz", "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==" }, + "node_modules/readdirp": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", + "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==", + "devOptional": true, + "dependencies": { + "picomatch": "^2.2.1" + }, + "engines": { + "node": ">=8.10.0" + } + }, "node_modules/rollup": { "version": "3.29.4", "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.29.4.tgz", @@ -669,6 +821,23 @@ "fsevents": "~2.3.2" } }, + "node_modules/sass": { + "version": "1.71.1", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.71.1.tgz", + "integrity": "sha512-wovtnV2PxzteLlfNzbgm1tFXPLoZILYAMJtvoXXkD7/+1uP41eKkIt1ypWq5/q2uT94qHjXehEYfmjKOvjL9sg==", + "devOptional": true, + "dependencies": { + "chokidar": ">=3.0.0 <4.0.0", + "immutable": "^4.0.0", + "source-map-js": ">=0.6.2 <2.0.0" + }, + "bin": { + "sass": "sass.js" + }, + "engines": { + "node": ">=14.0.0" + } + }, "node_modules/simplelightbox": { "version": "2.14.2", "resolved": "https://registry.npmjs.org/simplelightbox/-/simplelightbox-2.14.2.tgz", @@ -682,6 +851,18 @@ "node": ">=0.10.0" } }, + "node_modules/to-regex-range": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", + "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==", + "devOptional": true, + "dependencies": { + "is-number": "^7.0.0" + }, + "engines": { + "node": ">=8.0" + } + }, "node_modules/tui-pagination": { "version": "3.4.1", "resolved": "https://registry.npmjs.org/tui-pagination/-/tui-pagination-3.4.1.tgz", @@ -898,6 +1079,16 @@ "integrity": "sha512-kTdfRcSiDfQca/y9QIkng02avJ+NCaQvrMejlsB3RRv5sE9rRoeBPISaZpKxHELzRxZyLvNts1P27W3wV+8geQ==", "optional": true }, + "anymatch": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz", + "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==", + "devOptional": true, + "requires": { + "normalize-path": "^3.0.0", + "picomatch": "^2.0.4" + } + }, "asynckit": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", @@ -919,6 +1110,12 @@ "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==", "dev": true }, + "binary-extensions": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz", + "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==", + "devOptional": true + }, "brace-expansion": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz", @@ -928,6 +1125,31 @@ "balanced-match": "^1.0.0" } }, + "braces": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz", + "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==", + "devOptional": true, + "requires": { + "fill-range": "^7.0.1" + } + }, + "chokidar": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz", + "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==", + "devOptional": true, + "requires": { + "anymatch": "~3.1.2", + "braces": "~3.0.2", + "fsevents": "~2.3.2", + "glob-parent": "~5.1.2", + "is-binary-path": "~2.1.0", + "is-glob": "~4.0.1", + "normalize-path": "~3.0.0", + "readdirp": "~3.6.0" + } + }, "combined-stream": { "version": "1.0.8", "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz", @@ -975,6 +1197,15 @@ "@esbuild/win32-x64": "0.18.20" } }, + "fill-range": { + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", + "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==", + "devOptional": true, + "requires": { + "to-regex-range": "^5.0.1" + } + }, "follow-redirects": { "version": "1.15.5", "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.5.tgz", @@ -1015,6 +1246,21 @@ "once": "^1.3.0" } }, + "glob-parent": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", + "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", + "devOptional": true, + "requires": { + "is-glob": "^4.0.1" + } + }, + "immutable": { + "version": "4.3.5", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.5.tgz", + "integrity": "sha512-8eabxkth9gZatlwl5TBuJnCsoTADlL6ftEr7A4qgdaTsPyreilDSnUk57SO+jfKcNtxPa22U5KK6DSeAYhpBJw==", + "devOptional": true + }, "inflight": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz", @@ -1031,6 +1277,36 @@ "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==", "dev": true }, + "is-binary-path": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", + "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", + "devOptional": true, + "requires": { + "binary-extensions": "^2.0.0" + } + }, + "is-extglob": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", + "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==", + "devOptional": true + }, + "is-glob": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz", + "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==", + "devOptional": true, + "requires": { + "is-extglob": "^2.1.1" + } + }, + "is-number": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", + "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==", + "devOptional": true + }, "izitoast": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/izitoast/-/izitoast-1.4.0.tgz", @@ -1068,6 +1344,12 @@ "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz", "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==" }, + "normalize-path": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", + "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", + "devOptional": true + }, "once": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", @@ -1102,6 +1384,15 @@ "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz", "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==" }, + "readdirp": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", + "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==", + "devOptional": true, + "requires": { + "picomatch": "^2.2.1" + } + }, "rollup": { "version": "3.29.4", "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.29.4.tgz", @@ -1110,6 +1401,17 @@ "fsevents": "~2.3.2" } }, + "sass": { + "version": "1.71.1", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.71.1.tgz", + "integrity": "sha512-wovtnV2PxzteLlfNzbgm1tFXPLoZILYAMJtvoXXkD7/+1uP41eKkIt1ypWq5/q2uT94qHjXehEYfmjKOvjL9sg==", + "devOptional": true, + "requires": { + "chokidar": ">=3.0.0 <4.0.0", + "immutable": "^4.0.0", + "source-map-js": ">=0.6.2 <2.0.0" + } + }, "simplelightbox": { "version": "2.14.2", "resolved": "https://registry.npmjs.org/simplelightbox/-/simplelightbox-2.14.2.tgz", @@ -1120,6 +1422,15 @@ "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==" }, + "to-regex-range": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", + "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==", + "devOptional": true, + "requires": { + "is-number": "^7.0.0" + } + }, "tui-pagination": { "version": "3.4.1", "resolved": "https://registry.npmjs.org/tui-pagination/-/tui-pagination-3.4.1.tgz", diff --git a/package.json b/package.json index 88e0a60..5111344 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ }, "devDependencies": { "glob": "^8.1.0", + "sass": "^1.71.1", "vite": "^4.5.2" }, "author": "Alexander Repeta ", diff --git a/src/css/rating.css b/src/css/rating.css index e69de29..68b3f94 100644 --- a/src/css/rating.css +++ b/src/css/rating.css @@ -0,0 +1,139 @@ +.backdrop-thumb { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 100; + background-color: rgba(46, 47, 66, 0.40); + + opacity: 1; + transition: opacity 400ms cubic-bezier(0.4, 0, 0.2, 1), visibility 400ms cubic-bezier(0.4, 0, 0.2, 1); +} + +.backdrop-thumb.is-close { + opacity: 0; + visibility: hidden; + pointer-events: auto; +} + +.rating-window { + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%) scale(1); + z-index: 20; + transition: transform 0.3s ease; + width: 335px; + overflow-y: auto; + border-radius: 20px; + background-color: var(--text-light); + box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.14), 0px 1px 3px rgba(0, 0, 0, 0.12), 0px 2px 1px rgba(0, 0, 0, 0.2); + padding: 40px 20px; + + @media screen and (max-width: 320px) { + width: 280px; + } +} + +.rating-title { + font-weight: 400; + font-size: 12px; + line-height: 1.5; + color: var(--border-color); + margin-bottom: 8px; +} + +.rating-thumb { + display: flex; + align-items: center; + gap: 2px; + margin-bottom: 20px; +} + +.raiting-number { + font-weight: 400; + font-size: 12px; + line-height: 1.5; + color: var(--text-dark); +} + +.input-email { + border: 1px solid var(--border-color); + border-radius: 30px; + padding: 12px 14px; + width: 100%; + + margin-bottom: 10px; +} + +.comment-area { + border: 1px solid var(--border-color); + border-radius: 15px; + padding: 12px 14px; + width: 100%; + height: 93px; + + resize: none; + + margin-bottom: 20px; +} + +.rating-btn { + border-radius: 30px; + background-color: var(--accent); + color: var(--text-light); + font-size: 14px; + font-weight: 400; + line-height: 1.29; + border: none; + transition: background-color 400ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 400ms cubic-bezier(0.4, 0, 0.2, 1); + + padding: 12px 131px; +} + +.rating-btn:hover, +.rating-btn:focus { + background-color: var(--hover-button-icon); + box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.14), 0px 1px 3px rgba(0, 0, 0, 0.12), 0px 2px 1px rgba(0, 0, 0, 0.2); +} + +@media screen and (min-width: 768px) { + .rating-window { + width: 450px; + padding: 50px; + } + + .modal-button-close { + top: 25px; + right: 25px; + } + + .rating-title { + font-size: 15px; + margin-bottom: 8px; + } + + .rating-thumb { + margin-bottom: 32px; + } + + .raiting-number { + font-style: 15px; + } + + .input-email { + margin-bottom: 16px; + } + + .comment-area { + width: 100%; + height: 106px; + margin-bottom: 32px; + } + + .rating-btn { + width: 100%; + font-size: 16px; + } +} \ No newline at end of file diff --git a/src/css/star.scss b/src/css/star.scss new file mode 100644 index 0000000..241c60a --- /dev/null +++ b/src/css/star.scss @@ -0,0 +1,210 @@ +$hue: 223; +$starHue: 38; + +:root { + --yellow: #{hsl($starHue,90%,55%)}; + --yellow-t: #{hsla($starHue,90%,55%,0)}; + --bezier: cubic-bezier(0.42,0,0.58,1); + --trans-dur: 0.3s; +} + +.rating { + margin: auto; + &__stars { + display: flex; + gap: 2px; + position: relative; + } + &__star { + display: block; + overflow: visible; + pointer-events: none; + width: 24px; + height: 24px; + + &-ring, + &-fill, + &-line, + &-stroke { + animation-duration: 1s; + animation-timing-function: ease-in-out; + animation-fill-mode: forwards; + } + &-ring, + &-fill, + &-line { + stroke: var(--yellow); + } + &-fill { + fill: var(--yellow); + transform: scale(0); + transition: + fill var(--trans-dur) var(--bezier), + transform var(--trans-dur) var(--bezier); + } + &-line { + stroke-dasharray: 12 13; + stroke-dashoffset: -13; + } + } + &__label { + cursor: pointer; + } + @for $s from 1 through 4 { + &__label--delay#{$s} &__star-ring, + &__label--delay#{$s} &__star-fill, + &__label--delay#{$s} &__star-line, + &__label--delay#{$s} &__star-stroke { + animation-delay: 0.05s * $s; + } + } + &__input { + position: absolute; + -webkit-appearance: none; + appearance: none; + } + // display + &__input:hover ~ [data-rating]:not([hidden]) { + display: none; + } + + &__input-1:hover ~ [data-rating="1"][hidden], + &__input-2:hover ~ [data-rating="2"][hidden], + &__input-3:hover ~ [data-rating="3"][hidden], + &__input-4:hover ~ [data-rating="4"][hidden], + &__input-5:hover ~ [data-rating="5"][hidden], + &__input:checked:hover ~ [data-rating]:not([hidden]) { + display: block; + } + // stars + &__input-1:hover ~ &__label:first-of-type &__star-stroke, + &__input-2:hover ~ &__label:nth-of-type(-n + 2) &__star-stroke, + &__input-3:hover ~ &__label:nth-of-type(-n + 3) &__star-stroke, + &__input-4:hover ~ &__label:nth-of-type(-n + 4) &__star-stroke, + &__input-5:hover ~ &__label:nth-of-type(-n + 5) &__star-stroke { + fill: var(--yellow); + transform: scale(1); + } + &__input-1:checked ~ &__label:first-of-type &__star-ring, + &__input-2:checked ~ &__label:nth-of-type(-n + 2) &__star-ring, + &__input-3:checked ~ &__label:nth-of-type(-n + 3) &__star-ring, + &__input-4:checked ~ &__label:nth-of-type(-n + 4) &__star-ring, + &__input-5:checked ~ &__label:nth-of-type(-n + 5) &__star-ring { + animation-name: starRing; + } + &__input-1:checked ~ &__label:first-of-type &__star-stroke, + &__input-2:checked ~ &__label:nth-of-type(-n + 2) &__star-stroke, + &__input-3:checked ~ &__label:nth-of-type(-n + 3) &__star-stroke, + &__input-4:checked ~ &__label:nth-of-type(-n + 4) &__star-stroke, + &__input-5:checked ~ &__label:nth-of-type(-n + 5) &__star-stroke { + animation-name: starStroke; + } + &__input-1:checked ~ &__label:first-of-type &__star-line, + &__input-2:checked ~ &__label:nth-of-type(-n + 2) &__star-line, + &__input-3:checked ~ &__label:nth-of-type(-n + 3) &__star-line, + &__input-4:checked ~ &__label:nth-of-type(-n + 4) &__star-line, + &__input-5:checked ~ &__label:nth-of-type(-n + 5) &__star-line { + animation-name: starLine; + } + &__input-1:checked ~ &__label:first-of-type &__star-fill, + &__input-2:checked ~ &__label:nth-of-type(-n + 2) &__star-fill, + &__input-3:checked ~ &__label:nth-of-type(-n + 3) &__star-fill, + &__input-4:checked ~ &__label:nth-of-type(-n + 4) &__star-fill, + &__input-5:checked ~ &__label:nth-of-type(-n + 5) &__star-fill { + animation-name: starFill; + } + &__input-1:not(:checked):hover ~ &__label:first-of-type &__star-fill, + &__input-2:not(:checked):hover ~ &__label:nth-of-type(2) &__star-fill, + &__input-3:not(:checked):hover ~ &__label:nth-of-type(3) &__star-fill, + &__input-4:not(:checked):hover ~ &__label:nth-of-type(4) &__star-fill, + &__input-5:not(:checked):hover ~ &__label:nth-of-type(5) &__star-fill { + fill: var(--yellow-t); + } + // screen reader text + &__sr { + clip: rect(1px,1px,1px,1px); + overflow: hidden; + position: absolute; + width: 1px; + height: 1px; + } +} + +// Dark theme +@media (prefers-color-scheme: dark) { + .rating { + margin: auto; + + &__star { + &-stroke { + fill: var(--not-color-star); + stroke: none; + } + } + } +} + +// Animations +@keyframes starRing { + from, + 20% { + animation-timing-function: ease-in; + opacity: 1; + r: 8px; + stroke-width: 16px; + transform: scale(0); + } + 35% { + animation-timing-function: ease-out; + opacity: 0.5; + r: 8px; + stroke-width: 16px; + transform: scale(1); + } + 50%, + to { + opacity: 0; + r: 16px; + stroke-width: 0; + transform: scale(1); + } +} +@keyframes starFill { + from, + 40% { + animation-timing-function: ease-out; + transform: scale(0); + } + 60% { + animation-timing-function: ease-in-out; + transform: scale(1.2); + } + 80% { + transform: scale(0.9); + } + to { + transform: scale(1); + } +} +@keyframes starStroke { + from { + transform: scale(1); + } + 20%, + to { + transform: scale(0); + } +} +@keyframes starLine { + from, + 40% { + animation-timing-function: ease-out; + stroke-dasharray: 1 23; + stroke-dashoffset: 1; + } + 60%, + to { + stroke-dasharray: 12 13; + stroke-dashoffset: -13; + } +} \ No newline at end of file diff --git a/src/css/styles.css b/src/css/styles.css index 7d8f4a6..1d0cf18 100644 --- a/src/css/styles.css +++ b/src/css/styles.css @@ -12,4 +12,5 @@ @import url('./quote-favorities.css'); @import url('./favorities-exercise.css'); @import url('./modal-window.css'); -@import url('./rating.css'); \ No newline at end of file +@import url('./rating.css'); +@import url('./star.scss'); \ No newline at end of file diff --git a/src/partials/rating.html b/src/partials/rating.html index e69de29..bcbdce9 100644 --- a/src/partials/rating.html +++ b/src/partials/rating.html @@ -0,0 +1,419 @@ +
+
+ +
+

Rating

+ +
+

0.0

+
+ + + + + + + + + + +
+
+ +
+ + + +
+
+
+
From f19c57e45cb3a6f950450cf7470cffe5f24b27f7 Mon Sep 17 00:00:00 2001 From: Kristina Date: Tue, 27 Feb 2024 15:15:35 +0200 Subject: [PATCH 2/4] close and rating ready --- src/css/rating.css | 4 +-- src/js/rating.js | 64 ++++++++++++++++++++++++++++++++++++++++ src/partials/rating.html | 14 ++++----- 3 files changed, 73 insertions(+), 9 deletions(-) diff --git a/src/css/rating.css b/src/css/rating.css index 68b3f94..1fc56c3 100644 --- a/src/css/rating.css +++ b/src/css/rating.css @@ -1,4 +1,4 @@ -.backdrop-thumb { +.backdrop-rating-thumb { position: fixed; top: 0; left: 0; @@ -11,7 +11,7 @@ transition: opacity 400ms cubic-bezier(0.4, 0, 0.2, 1), visibility 400ms cubic-bezier(0.4, 0, 0.2, 1); } -.backdrop-thumb.is-close { +.backdrop-rating-thumb.is-close { opacity: 0; visibility: hidden; pointer-events: auto; diff --git a/src/js/rating.js b/src/js/rating.js index e69de29..236fca6 100644 --- a/src/js/rating.js +++ b/src/js/rating.js @@ -0,0 +1,64 @@ +const numberRating = document.querySelector('.js-rating'); +const labelgInputs = document.querySelectorAll('.rating__label'); +const backdrop = document.querySelector('.backdrop-rating-thumb') +const closeRatingModal = document.querySelector('.js-rating-window'); + +let lastClickedRating = 0; +// налаштування зірочок +labelgInputs.forEach(input => { + input.addEventListener('mouseover', function (event) { + const rating = Number(event.target.getAttribute('data-value')); + numberRating.textContent = rating.toFixed(1); + }); + input.addEventListener('mouseout', function () { + if (lastClickedRating > 0) { + numberRating.textContent = lastClickedRating.toFixed(1); + } else { + numberRating.textContent = '0.0'; + } + }); + input.addEventListener('click', function (event) { + lastClickedRating = Number(event.target.getAttribute('data-value')); + numberRating.textContent = lastClickedRating.toFixed(1); + }); +}); + + +// refs.galleryWindow.addEventListener('click', openModal); + +// // Відкриття модалки +// function openModal(e) { +// if (e.target.classList.contains('js-start')) { +// refs.backdrop.classList.remove('is-open'); +// document.body.style.overflow = 'hidden'; + +// const liElement = e.target.closest('.js-id'); + +// if (liElement) { +// const id = liElement.dataset.id; +// getExercisesObject(id); +// } +// } +// } + +// Закриття модального вікна +closeRatingModal.addEventListener('click', closeModal); +document.addEventListener('keydown', closeModalByEsc); + +function closeModal() { + console.log('hello') + backdrop.classList.add('is-close'); + document.body.style.overflow = ''; +} + +function closeModalByEsc(e) { + if (e.code === 'Escape') { + backdrop.classList.add('is-close'); + document.body.style.overflow = ''; + } +} +backdrop.addEventListener('click', function (event) { + if (event.target === this) { + closeModal(); + } +}); \ No newline at end of file diff --git a/src/partials/rating.html b/src/partials/rating.html index bcbdce9..4ce1152 100644 --- a/src/partials/rating.html +++ b/src/partials/rating.html @@ -1,4 +1,4 @@ -
+
+
diff --git a/src/partials/rating.html b/src/partials/rating.html index 4ce1152..38af5a9 100644 --- a/src/partials/rating.html +++ b/src/partials/rating.html @@ -1,4 +1,4 @@ -
+
-
- + +
From da713726ecf29abbe635b11d315503a5dd18eb4b Mon Sep 17 00:00:00 2001 From: Kristina Date: Tue, 27 Feb 2024 19:09:22 +0200 Subject: [PATCH 4/4] rating is ready --- src/js/helper/get-access.js | 53 ++++++++++++++++++++-------- src/js/modal-window.js | 4 ++- src/js/rating.js | 69 ++++++++++++++++++++++++------------- 3 files changed, 87 insertions(+), 39 deletions(-) diff --git a/src/js/helper/get-access.js b/src/js/helper/get-access.js index 68d3430..a82024d 100644 --- a/src/js/helper/get-access.js +++ b/src/js/helper/get-access.js @@ -1,6 +1,7 @@ import axios from 'axios'; +import iziToast from 'izitoast'; -export { getAccess, postAccess }; +export { getAccess, patchAccess }; /** * Виконує GET-запит до сервера за вказаною URL з вказаними параметрами. @@ -31,21 +32,43 @@ async function getAccess({ filter, limit, page = 1, typeFilter, id = null }) { } } -/** - * Виконує POST-запит до сервера за вказаною URL з вказаними даними. - * @param {Object} options - Об'єкт з параметрами - * @param {Object} options.userEmail - Дані, які відправляються у POST-запиті (відправляються у форматі JSON) - * @param {string} options.typeFilter - Тип фільтра, який використовується у URL (в данному випадку потрібно вказувати subscription) - * @returns {Promise} Об'єкт Promise, який розрішується у відповідь від сервера. - */ -async function postAccess({ userEmail, typeFilter }) { +async function patchAccess({ id, formData }) { try { - const response = await axios.post( - `https://energyflow.b.goit.study/api/${typeFilter}`, - userEmail - ); + const response = await axios.patch( + `https://energyflow.b.goit.study/api/exercises/${id}/rating`, formData); + iziToast.info({ + message: 'Rating has been updated' + }) return response; } catch (error) { - console.error(error.message); + if (error.response) { + const statusCode = error.response.status; + if (statusCode === 400) { + iziToast.error({ + message: 'Bad request! Please check your data.' + }); + } else if (statusCode === 404) { + iziToast.error({ + message: 'Exercises not found!' + }); + } else if (statusCode === 409) { + iziToast.error({ + message: 'Sorry! But you have already appreciated this exercise' + }); + } else if (statusCode === 500) { + iziToast.error({ + message: 'Internal server error! Please try again later.' + }); + } else { + iziToast.error({ + message: 'An error occurred! Please try again later.' + }); + } + } else { + iziToast.error({ + message: 'An error occurred! Please try again later.' + }); + } + return statusCode; } -} +} \ No newline at end of file diff --git a/src/js/modal-window.js b/src/js/modal-window.js index 7a95625..a44cf06 100644 --- a/src/js/modal-window.js +++ b/src/js/modal-window.js @@ -6,6 +6,7 @@ export const refs = { galleryWindow: document.querySelector('.js-gallery'), ratingBtn: document.querySelector('.js-open-rating'), } +export let idExercises; const raitings = document.querySelectorAll('.raiting') @@ -30,7 +31,7 @@ function openModal(e) { refs.closeIcon.addEventListener('click', closeModal); document.addEventListener('keydown', closeModalByEsc); -function closeModal(e) { +function closeModal() { refs.backdrop.classList.add('is-open'); document.body.style.overflow = ''; @@ -58,6 +59,7 @@ function hiddenWindow() { // Завантаження сторінки function getExercisesObject(id) { + idExercises = id; getAccess({ typeFilter: 'exercises', id: id }) .then(({ data }) => { const { diff --git a/src/js/rating.js b/src/js/rating.js index fdcdb37..13306bf 100644 --- a/src/js/rating.js +++ b/src/js/rating.js @@ -1,69 +1,92 @@ -import { refs } from "./modal-window"; +import { patchAccess } from "./helper/get-access"; +import { idExercises, refs } from "./modal-window"; import iziToast from 'izitoast'; -const numberRating = document.querySelector('.js-rating'); -const labelgInputs = document.querySelectorAll('.rating__label'); -const backdrop = document.querySelector('.backdrop-rating-thumb') -const closeRatingModal = document.querySelector('.js-rating-window'); -const ratingBtn = document.querySelector('.js-open-rating'); +const refsRating = { + numberRating: document.querySelector('.js-rating'), + labelsInputs: document.querySelectorAll('.rating__label'), + backdrop: document.querySelector('.backdrop-rating-thumb'), + closeRatingModal: document.querySelector('.js-rating-window'), + ratingBtn: document.querySelector('.js-open-rating'), + inputEmail: document.querySelector('.js-input'), + textareaComment: document.querySelector('.js-textarea'), + formRating: document.querySelector('.js-form'), +} const pattern = /^\w+(\.\w+)?@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/; -const inputEmail = document.querySelector('.js-input'); -const textareaComment = document.querySelector('.js-textarea') -const formRating = document.querySelector('.js-form') +let lastClickedRating = 0; // налаштування зірочок -let lastClickedRating = 0; -labelgInputs.forEach(input => { +refsRating.labelsInputs.forEach(input => { input.addEventListener('mouseover', function (event) { const rating = Number(event.target.getAttribute('data-value')); - numberRating.textContent = rating.toFixed(1); + refsRating.numberRating.textContent = rating.toFixed(1); }); input.addEventListener('mouseout', function () { if (lastClickedRating > 0) { - numberRating.textContent = lastClickedRating.toFixed(1); + refsRating.numberRating.textContent = lastClickedRating.toFixed(1); } else { - numberRating.textContent = '0.0'; + refsRating.numberRating.textContent = '0.0'; } }); input.addEventListener('click', function (event) { lastClickedRating = Number(event.target.getAttribute('data-value')); - numberRating.textContent = lastClickedRating.toFixed(1); + refsRating.numberRating.textContent = lastClickedRating.toFixed(1); }); }); - -ratingBtn.addEventListener('click', openModal); +refsRating.ratingBtn.addEventListener('click', openModal); // Відкриття модалки function openModal() { - backdrop.classList.remove('is-close'); + refsRating.backdrop.classList.remove('is-close'); document.body.style.overflow = 'hidden'; } // Закриття модального вікна -closeRatingModal.addEventListener('click', closeModal); +refsRating.closeRatingModal.addEventListener('click', closeModal); function closeModal() { - backdrop.classList.add('is-close'); + refsRating.backdrop.classList.add('is-close'); document.body.style.overflow = ''; refs.backdrop.classList.remove('is-open'); } -backdrop.addEventListener('click', function (event) { +refsRating.backdrop.addEventListener('click', function (event) { if (event.target === this) { refs.backdrop.classList.remove('is-open'); closeModal(); } }); -formRating.addEventListener('submit', sendRating) +export const timeToClose = () => setTimeout(() => closeModal(), 1500) +// Функція відправки рейтенгу +refsRating.formRating.addEventListener('submit', sendRating) function sendRating(event) { event.preventDefault(); - const email = inputEmail.value.trim(); + + const objectDate = { + rate: lastClickedRating, + email: refsRating.inputEmail.value.trim(), + review: refsRating.textareaComment.value.trim(), + } + + const email = refsRating.inputEmail.value.trim(); if (!pattern.test(email)) { iziToast.error({ message: 'Enter the correct email!' }); + } else { + patchAccess({ + id: idExercises, + formData: objectDate, + }) + .then(() => { + timeToClose(); + refsRating.formRating.reset(); + }) + .catch((error) => { + console.log(error); + }) } } \ No newline at end of file