From 140e1dfe1b061bf506e96cb80d67a8d15cbeeb11 Mon Sep 17 00:00:00 2001 From: Alex West Date: Mon, 18 Dec 2023 22:14:35 -0700 Subject: [PATCH] Add styling to PointsList and FilterList --- .firebase/hosting.b3V0.cache | 38 ++++++++++++------------ README.md | 2 +- components/FilterList.js | 27 +++++++++-------- components/PointsList.js | 5 ++-- pages/index.js | 34 +++++++++++----------- services/uploadMatch.js | 2 +- styles/FilterList.module.css | 56 ++++++++++++++++++++++++++++++++++++ styles/PointsList.module.css | 12 ++++++++ 8 files changed, 125 insertions(+), 51 deletions(-) create mode 100644 styles/FilterList.module.css create mode 100644 styles/PointsList.module.css diff --git a/.firebase/hosting.b3V0.cache b/.firebase/hosting.b3V0.cache index eefdb63..d85b335 100644 --- a/.firebase/hosting.b3V0.cache +++ b/.firebase/hosting.b3V0.cache @@ -1,19 +1,19 @@ -404.html,1702339212892,051e8e4ff3f71d0bd74e15494589e0ca5de0cb16e1e41279f2da91c79db16125 -upload-video.html,1702339212892,9f9248466de47a06469b2995e75ccdcc67a345e614e51bfd8433ec887b84132f -index.html,1702339212892,ab9a7c1cc07fe068a677ea93740862d816d28b0621e4270e6d8596ed532ee9eb -vercel.svg,1702339212746,95b23d92581bcaa6cd6312c6a8c0cb6eb64178a2c29f0fc2fee68662f70e1708 -favicon.ico,1702339212746,8ff5c5fd71faf06131ae533a096b06fcda3fae8f48c621bd441ddbcb8ea2b4d4 -_next/static/chunks/webpack-87b3a303122f2f0d.js,1702339211963,817c7888f6ef63218727f6f3159bfd652819603d625fa06bafcbd1f95605e25d -_next/static/chunks/pages/_app-a3f0dee1d78bc15f.js,1702339211967,aa3e2e0d85a1c6146eb9a8ea49d91421d1269914cdf411da7de7393d48fe6c36 -_next/static/chunks/pages/_error-2afa8b7423c17645.js,1702339211967,46195394ed71ab30c5c326413e9d28ca6f7a1ea52e2301f0651bcc25ae7ef6de -_next/static/chunks/pages/upload-video-99f947435c492371.js,1702339211967,2694158a61419c951f55a7014bcb396173239c7a4b24f17f92e21a3ebb465402 -_next/static/ovqO3hz2TH_Wvf6pHTgmi/_ssgManifest.js,1702339211963,5c126729f9831113842c425975615db312fa26d39f3a9e1baa47d4ad65ac2f90 -_next/static/ovqO3hz2TH_Wvf6pHTgmi/_buildManifest.js,1702339211963,1f7762a603843e64c9f29e785575aa8de1792957d038d3a9bcb5e31c11ee8bac -_next/static/css/a6890a3306711e32.css,1702339211963,5791555d8b1ce38c22accfa8f62672e4d31118eb0769a1550dcf3bdc68f99b04 -_next/static/chunks/pages/index-ebac8424859500cb.js,1702339211967,d6429c1ae21f9044fc38a3e3e33296daa33cc389e345a1312d369c10ef0ccf86 -_next/static/chunks/main-72cd581c1e9bd837.js,1702339211963,d3584519068ff7f184f2155275564e1927da62932132481ec0a6445d90704157 -_next/static/chunks/193-65db597f11989e77.js,1702339211963,f5446f6abf3ccf906499bfb2394e59cb937d456a2d439dee7ddf3e652998b645 -_next/static/chunks/868-ecc6e1ef00699bdd.js,1702339211963,3819fdb89fe4fbaf9a3587727cc96c7ce69fd0a3d1c50b5f1c9a4d99773875ff -_next/static/chunks/polyfills-c67a75d1b6f99dc8.js,1702339211963,9f22ebbc1e5746bc08aa476baa8169d3ac2c27814dba6bf675b749113ac4943e -_next/static/chunks/framework-1e817f2a1c5c711b.js,1702339211963,11d7cf622f5e21b38d1ae17f528858480ed90d8deed14537afbed9a64b21f20f -_next/static/chunks/7112840a-38828cf839f429a4.js,1702339211963,544f8b93e7869968012ce81e0dc7ec800b89685a52cd2f082a33f76057fd41f6 +404.html,1702956106181,c3cf4a5311a2d133fbea22c25e685f298944b954fe7f15d0e0419b206b86cb9d +vercel.svg,1702956106084,95b23d92581bcaa6cd6312c6a8c0cb6eb64178a2c29f0fc2fee68662f70e1708 +upload-video.html,1702956106188,4142cccc2a3af269a21fae86fb8cf6208feecf4b97c26e2721073b9605b33c8f +_next/static/AjC81hmv3QNSbfkjIujmV/_ssgManifest.js,1702956106032,5c126729f9831113842c425975615db312fa26d39f3a9e1baa47d4ad65ac2f90 +_next/static/AjC81hmv3QNSbfkjIujmV/_buildManifest.js,1702956106032,16d1d9b23a9fd2e4dd3c2840982bf61c3f8a43b6879c139908def862136fcc19 +index.html,1702956106184,ecb5243f5e5675d1405a4682f50c8859cff70ab34a11a9231d4b536208b3955b +favicon.ico,1702956106084,8ff5c5fd71faf06131ae533a096b06fcda3fae8f48c621bd441ddbcb8ea2b4d4 +_next/static/chunks/webpack-87b3a303122f2f0d.js,1702956106033,817c7888f6ef63218727f6f3159bfd652819603d625fa06bafcbd1f95605e25d +_next/static/chunks/pages/_app-a3f0dee1d78bc15f.js,1702956106048,aa3e2e0d85a1c6146eb9a8ea49d91421d1269914cdf411da7de7393d48fe6c36 +_next/static/chunks/pages/_error-2afa8b7423c17645.js,1702956106048,46195394ed71ab30c5c326413e9d28ca6f7a1ea52e2301f0651bcc25ae7ef6de +_next/static/chunks/pages/index-a790e292dab5e31d.js,1702956106048,c9cf27bf5a9fd934186efcd4d660dbd8e0b5d826c09b202add8448d5aa876b66 +_next/static/chunks/pages/upload-video-99f947435c492371.js,1702956106048,2694158a61419c951f55a7014bcb396173239c7a4b24f17f92e21a3ebb465402 +_next/static/css/6440bdeac8bd87a5.css,1702956106033,95b9918e9898955bee77e61dd3222e00ba54e1321a7f81f1ee3f7dd8682e024b +_next/static/chunks/868-ecc6e1ef00699bdd.js,1702956106032,3819fdb89fe4fbaf9a3587727cc96c7ce69fd0a3d1c50b5f1c9a4d99773875ff +_next/static/chunks/193-65db597f11989e77.js,1702956106032,f5446f6abf3ccf906499bfb2394e59cb937d456a2d439dee7ddf3e652998b645 +_next/static/chunks/main-72cd581c1e9bd837.js,1702956106033,d3584519068ff7f184f2155275564e1927da62932132481ec0a6445d90704157 +_next/static/chunks/polyfills-c67a75d1b6f99dc8.js,1702956106033,9f22ebbc1e5746bc08aa476baa8169d3ac2c27814dba6bf675b749113ac4943e +_next/static/chunks/framework-1e817f2a1c5c711b.js,1702956106032,11d7cf622f5e21b38d1ae17f528858480ed90d8deed14537afbed9a64b21f20f +_next/static/chunks/7112840a-38828cf839f429a4.js,1702956106032,544f8b93e7869968012ce81e0dc7ec800b89685a52cd2f082a33f76057fd41f6 diff --git a/README.md b/README.md index ef099bc..21cd6a8 100644 --- a/README.md +++ b/README.md @@ -14,5 +14,5 @@ Before uploading a CSV, it must be converted to JSON. Use csvjson.com. ## Deployment -1. Run `npm next build` to generate production files +1. Run `npm run build` to generate production files 2. Run `firebase deploy` to depoly to firebase \ No newline at end of file diff --git a/components/FilterList.js b/components/FilterList.js index 6c03f6f..0645876 100644 --- a/components/FilterList.js +++ b/components/FilterList.js @@ -1,6 +1,7 @@ // components/FilterList.js import React, { useEffect, useState } from 'react'; +import styles from '../styles/FilterList.module.css'; const FilterList = ({ pointsData, filterList, setFilterList }) => { const keys = Object.keys(pointsData[0] || {}).sort(); // Sort the keys array @@ -44,26 +45,28 @@ const FilterList = ({ pointsData, filterList, setFilterList }) => { return (
-
+
Active Filters: -
    +
      {sortedFilterList.map(([key, value]) => ( -
    • removeFilter(key, value)}> +
    • removeFilter(key, value)}> {key}: {value}
      • ))}
-
    +
      {keys.map((key) => ( -
    • - toggleCollapse(key)} style={{ cursor: 'pointer' }}>{key} -
        - {uniqueValues[key].map((value) => ( -
      • addFilter(key, value)}>{value}
        • - ))} -
      -
      • +
      +
    • + toggleCollapse(key)} style={{ cursor: 'pointer' }}>{key} +
        + {uniqueValues[key].map((value) => ( +
      • addFilter(key, value)}>{value}
        • + ))} +
      +
      • +
      ))}
diff --git a/components/PointsList.js b/components/PointsList.js index f98bab2..c8310d3 100644 --- a/components/PointsList.js +++ b/components/PointsList.js @@ -1,12 +1,13 @@ // components/PointsList.js import React from 'react'; +import styles from '../styles/PointsList.module.css'; const PointsList = ({ pointsData, onPointSelect }) => { return ( -
{/* Main Content Area */} -
- {/* Video Player */} -
- -
- - {/* Filter List */} -
- + {matchData && ( +
+ {/* Video Player */} +
+ +
+ + {/* Filter List */} +
+ +
+ + {/* Points List */} +
+ +
- - {/* Points List */} -
- -
-
+ )} diff --git a/services/uploadMatch.js b/services/uploadMatch.js index 6ece5a0..6b52658 100644 --- a/services/uploadMatch.js +++ b/services/uploadMatch.js @@ -1,5 +1,5 @@ // Import the necessary Firebase libraries -import { getFirestore, collection, addDoc } from "firebase/firestore"; +import { collection, addDoc } from "firebase/firestore"; import '../services/initializeFirebase.js'; // Initialize Firebase on the client side import db from '../services/initializeFirebase.js'; diff --git a/styles/FilterList.module.css b/styles/FilterList.module.css new file mode 100644 index 0000000..8809516 --- /dev/null +++ b/styles/FilterList.module.css @@ -0,0 +1,56 @@ +.activeFilterListContainer { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + align-items: center; + width: 100%; + box-sizing: border-box; + padding: 10px; + margin: 10px 0; + background-color: #ffffff; + border: 1px solid #eaeaea; + border-radius: 5px; +} + +.activeFilterList { + padding: 0px; + list-style-type: none; + margin: 0px; +} + +.activeFilterItem { + background-color: #f1f1f1; + border-radius: 5px; + padding: 10px; + margin: 10px 0; + display: flex; + flex-wrap: wrap; + justify-content: space-between; + align-items: center; + width: 100%; + box-sizing: border-box; + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2); +} + +.availableFilterItem { + padding: 10px; + list-style-type: none; +} + +.availableFilterSubitem { + list-style-type: none; +} + +.availableFilterList { + padding: 0px; +} + +.availableFilterSubitemList { + padding: 0px; + list-style-type: none; +} + +.list { + padding: 0px; + list-style-type: none; +} \ No newline at end of file diff --git a/styles/PointsList.module.css b/styles/PointsList.module.css new file mode 100644 index 0000000..8aeb54c --- /dev/null +++ b/styles/PointsList.module.css @@ -0,0 +1,12 @@ +.pointsList { + display: flex; + flex-direction: column; + width: 100%; + margin: 0; + padding: 0; + list-style: none; +} + +.pointsListItem { + padding: 10px; +} \ No newline at end of file