From f8ad002a696132cfc71a113679118200b3877636 Mon Sep 17 00:00:00 2001 From: jeremybuyi Date: Sat, 27 Jul 2024 18:43:50 +0300 Subject: [PATCH] Volunteers Wall This PR repurposed the main page to create a wall for Volunteers. Changes include: - Changed the categories and card features - Removed shareCard function from volunteers.js - Updated createCard function to remove the share button - Adjusted CSS to accommodate layout changes - Updated HTML structure - Suited for Volunteers These changes simplify the page and remove unused functionality. --- src/css/style.css | 244 ++++++++++++++++++++++++ src/css/styles.css | 399 ---------------------------------------- src/js/volunteerData.js | 29 +++ src/js/volunteers.js | 89 +++++++++ volunteers.html | 44 +++++ volunteers.json | 29 +++ 6 files changed, 435 insertions(+), 399 deletions(-) create mode 100644 src/css/style.css delete mode 100644 src/css/styles.css create mode 100644 src/js/volunteerData.js create mode 100644 src/js/volunteers.js create mode 100644 volunteers.html create mode 100644 volunteers.json diff --git a/src/css/style.css b/src/css/style.css new file mode 100644 index 0000000..0a478e8 --- /dev/null +++ b/src/css/style.css @@ -0,0 +1,244 @@ +@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); + +:root { + --black: #000000; + --white: #ffffff; + --dark-grey: #1a1a1a; + --light-grey: #333333; + --blue: #007bff; + --green: #28a745; + --yellow: #ffb224; +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Inter', sans-serif; + background-color: var(--black); + color: var(--white); + line-height: 1.6; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.container { + max-width: 1200px; + margin: 0 auto; + padding: 0 20px; +} + +.header { + background-color: var(--light-grey); + padding: 2rem 0; + text-align: center; +} + +h1 { + font-size: 2.5rem; + font-weight: 700; + margin-bottom: 1rem; +} + +.content { + padding: 2rem 0; +} + +.search-sort { + margin-bottom: 2rem; +} + +.content__sort-by { + font-size: 1.1rem; + font-weight: 500; + margin-bottom: 1rem; + text-align: center; +} + +.filter-and-search { + display: flex; + flex-direction: column; + gap: 1rem; + align-items: center; +} + +#searchInput { + width: 100%; + max-width: 400px; + padding: 0.75rem 1rem; + border: none; + border-radius: 24px; + font-size: 1rem; + background-color: var(--light-grey); + color: var(--white); + transition: background-color 0.3s ease; +} + +#searchInput:focus { + outline: none; + background-color: var(--dark-grey); +} + +.buttons { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 0.5rem; + margin-top: 1rem; +} + +.buttons button { + background-color: var(--light-grey); + color: var(--white); + border: none; + border-radius: 24px; + padding: 0.75rem 1.5rem; + font-size: 1rem; + cursor: pointer; + transition: background-color 0.3s ease, transform 0.1s ease; +} + +.buttons button:hover, +.buttons button.active { + background-color: var(--blue); + transform: translateY(-2px); +} + +.buttons button .badge { + background-color: var(--white); + color: var(--black); + border-radius: 12px; + padding: 2px 8px; + font-size: 0.75rem; + font-weight: 600; + margin-left: 0.5rem; +} + +.volunteers { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); + gap: 1.5rem; +} + +.card { + background-color: var(--dark-grey); + border-radius: 15px; + padding: 1.75rem; + display: flex; + flex-direction: column; + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.card__name { + font-size: 1.2rem; + font-weight: 600; + margin-bottom: 0.75rem; +} + +.card-status { + font-size: 0.9rem; + font-weight: 500; + padding: 0.25rem 0.75rem; + border-radius: 12px; + display: inline-block; + margin-bottom: 1rem; +} + +.card-status.medical { background-color: var(--blue); } +.card-status.legal { background-color: var(--green); } +.card-status.other { background-color: var(--yellow); color: var(--black); } + +.card__profession, +.card__contact, +.card__location, +.card__twitter { + font-size: 0.9rem; + margin-bottom: 0.75rem; +} + +#loading { + display: flex; + justify-content: center; + padding: 2rem 0; +} + +.spinner { + width: 50px; + height: 50px; + border: 5px solid var(--light-grey); + border-top: 5px solid var(--white); + border-radius: 50%; + animation: spin 1s linear infinite; +} + +@keyframes spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } +} + +@media screen and (min-width: 768px) { + .filter-and-search { + flex-direction: row; + justify-content: space-between; + align-items: center; + } + + #searchInput { + max-width: 300px; + } + + .buttons { + margin-top: 0; + } +} + +@media screen and (min-width: 1024px) { + .volunteers { + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); + } +} + +@media screen and (min-width: 1440px) { + .container { + max-width: 1400px; + } + + .volunteers { + grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); + } +} + +@media (max-width: 767px) { + h1 { + font-size: 2rem; + } + + .buttons button { + font-size: 0.9rem; + padding: 0.6rem 1rem; + } + + .card { + padding: 1.5rem; + } + + .card__name { + font-size: 1.1rem; + } + + .card-status, + .card__profession, + .card__contact, + .card__location, + .card__twitter { + font-size: 0.85rem; + } +} diff --git a/src/css/styles.css b/src/css/styles.css deleted file mode 100644 index 488c032..0000000 --- a/src/css/styles.css +++ /dev/null @@ -1,399 +0,0 @@ -@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;700;900&display=swap"); - -:root { - --red: #cb2929; - --blue: #007bff; - --green: #28a745; - --lightergrey: #444; - --lightgrey: #333; - --white: #fff; - --black: #000000; - --yellow: #ffb224; - --purple: #8e4ec6; - --darkred: #800000; - --card-bg: #0a0a0a; - --card-hover-bg: #1a1a1a; -} - -body, html { - margin: 0; - padding: 0; - font-family: 'Rubik', Arial, sans-serif; - background-color: var(--black); - color: var(--white); - min-height: 100vh; - display: flex; - flex-direction: column; -} - -a { - color: var(--white); - text-decoration: none; - transition: color 0.3s ease; -} - -a:hover { - color: var(--purple); -} - -button { - cursor: pointer; - color: var(--white); - transition: background-color 0.3s ease, transform 0.1s ease; -} - -button:hover { - transform: translateY(-2px); -} - -.header { - background-color: var(--lightgrey); - padding: 2rem; - text-align: center; -} - -.header h1 { - margin: 0; - font-size: 2.5rem; - font-weight: 700; -} - -.header h2 { - font-size: 1.3rem; - font-weight: 400; -} - -.filters { - max-width: 1400px; - width: 95%; - margin: 2rem auto 0 auto; - padding: 1rem 0; -} - -.search-input { - margin: 20px; - border-radius: 24px; -} - -.content { - flex-grow: 1; - max-width: 1400px; - width: 95%; - margin: 2rem auto; - padding: 1rem 0; -} - -.search-sort { - display: flex; - flex-flow: row nowrap; - justify-content: space-between; - align-items: center; -} - -.search-sort input { - margin: 1rem 0; - font-size: 0.9rem; - padding: 0.6rem 1rem; -} - -.filter-and-search { - flex:2; - display: flex; - flex-wrap: wrap; - gap: 1rem; - /* margin-bottom: 2rem; */ -} - -.filter-and-search input { - flex: 1; - min-width: 250px; - padding: 0.75rem; - border-radius: 24px; - border: none; - font-size: 1rem; -} - -.content__buttons { - display: flex; - flex-wrap: wrap; - gap: 0.5rem; -} - -.content__buttons button { - padding: 0.75rem 1.5rem; - font-size: 1rem; - border-radius: 24px; - border: none; - background-color: var(--lightergrey); - color: var(--white); - transition: background-color 0.3s ease, transform 0.1s ease; -} - -.content__buttons button.active { - background-color: var(--blue); -} - -.content__buttons button:hover { - background-color: var(--blue); - transform: translateY(-2px); -} - -.content__buttons button .badge { - background-color: #fff; - border-radius: 12px; - color: var(--black); - padding: 2px 8px; - margin-left: 10px; - font-size: 12px; - font-weight: bold; - display: inline-block; -} - -.persons { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); - gap: 1.5rem; - justify-content: center; -} - -.card { - background-color: var(--card-bg); - border-radius: 15px; - padding: 1.25rem; - text-align: center; - box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); - transition: background-color 0.3s ease, box-shadow 0.3s ease; - display: flex; - flex-direction: column; - justify-content: space-between; -} - -.card:hover { - background-color: var(--card-hover-bg); - box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); -} - -.card-img { - width: 100px; - height: 100px; - border-radius: 50%; - margin: 0 auto 1rem; - object-fit: cover; - border: 2px solid var(--white); -} - -.card__name { - font-size: 1.2rem; - margin-bottom: 0.6rem; - font-weight: 700; -} - -.card-status { - font-size: 0.8rem; - margin-bottom: 1rem; - color: var(--white); - background-color: var(--purple); - display: inline-block; - border-radius: 12px; - padding: 0.3rem 1rem; -} - -.card-status.remanded { background-color: var(--yellow); color: var(--black); } -.card-status.fallen { background-color: var(--red); } -.card-status.missing { background-color: var(--blue); } -.card-status.released { background-color: var(--green); } - -.card__info { - margin-bottom: 1rem; -} - -.card__office, .locations, .card__gender { - margin-bottom: 0.6rem; - font-size: 0.9rem; -} - -.card__twitter { - font-size: 0.9rem; - margin-bottom: 1rem; - word-break: break-all; -} - -.card__currently { - font-size: 0.9rem; - margin-bottom: 0.6rem; - margin-bottom: 1rem; - font-weight: 500; -} - -.card__currently-status { - font-weight: normal; - display: block; - margin-top: 0.3rem; -} - -.share-button { - background-color: var(--blue); - border: none; - color: var(--white); - padding: 0.7rem; - cursor: pointer; - border-radius: 20px; - width: 100%; - font-size: 0.9rem; - transition: background-color 0.3s ease; - margin-top: auto; -} - -.share-button:hover { - background-color: #0056b3; -} - -.footer { - background-color: var(--lightgrey); - padding: 2rem; - color: var(--white); -} - -.footer-content { - max-width: 1200px; - margin: 0 auto; - display: flex; - flex-direction: column; - align-items: center; - gap: 1rem; -} - -.footer-nav { - display: flex; - gap: 1rem; - margin-bottom: 0.5rem; -} - -.footer a { - color: var(--white); - text-decoration: none; - transition: color 0.3s ease; -} - -.footer a:hover { - color: var(--blue); -} - -.copyright, .current-time { - margin: 0; - text-align: center; - font-size: 0.9rem; -} - -.current-time { - font-weight: 500; - margin-top: 1rem; - color: var(--white); -} - -@media screen and (max-width: 480px) { - .footer-nav { - flex-direction: column; - align-items: center; - gap: 0.5rem; - } - - .copyright, .current-time { - font-size: 0.8rem; - } -} - -.hashtag { - font-size: 1.25rem; - margin: 1rem 0; - font-weight: 700; -} - -.rights { - font-size: 0.9rem; - opacity: 0.8; -} - -@media screen and (max-width: 1400px) { - .persons { - grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); - } -} - -@media screen and (max-width: 1200px) { - .persons { - grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); - } -} - -@media screen and (max-width: 1080px) { - - .search-sort { - display: flex; - flex-flow: column; - } -} - -@media screen and (max-width: 768px) { - - .persons { - grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); - } - - .header h1 { - font-size: 2rem; - } -} - -@media screen and (max-width: 480px) { - .persons { - grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); - } - - .card { - padding: 1rem; - } - - .card-img { - width: 80px; - height: 80px; - } - - .card__name { - font-size: 1rem; - } - - .card-status, .card__office, .locations, .card__gender, .card__twitter, .card__currently, .share-button { - font-size: 0.8rem; - } - - .search-sort input, - .content__buttons button { - font-size: 0.9rem; - padding: 0.6rem 1rem; - } -} - -/* spinner */ -.loading { - display: flex; - justify-content: center; - padding: 20px; -} - -.spinner { - width: 50px; - height: 50px; - border-radius: 50%; - border: 5px solid var(--lightgrey); - border-top: 5px solid var(--white); - animation: spin 1s linear infinite; -} - -@keyframes spin { - 0% { transform: rotate(0deg); } - 100% { transform: rotate(360deg); } -} -canvas { - max-height: 400px; -} diff --git a/src/js/volunteerData.js b/src/js/volunteerData.js new file mode 100644 index 0000000..b6d9e50 --- /dev/null +++ b/src/js/volunteerData.js @@ -0,0 +1,29 @@ +const volunteerData = [ + { + id: 1, + name: "John Kintu", + category: "Medical", + profession: "Doctor", + contact: "0772123123", + location: "Central Hospital", + twitter: "john_kintu" + }, + { + id: 2, + name: "Jane Akello", + category: "Legal", + profession: "Lawyer", + contact: "0751123123", + location: "City Court", + twitter: "jane_akello" + }, + { + id: 3, + name: "Robert Opio", + category: "Other", + profession: "Counselor", + contact: "0789456789", + location: "Community Center", + twitter: "robert_opio" + } +]; diff --git a/src/js/volunteers.js b/src/js/volunteers.js new file mode 100644 index 0000000..4b9b15e --- /dev/null +++ b/src/js/volunteers.js @@ -0,0 +1,89 @@ +const API_URL = `volunteers.json`; // We need this from the main dashboard if possible + +let allVolunteers = []; + +function createCard(volunteer) { + return ` +
+
+

${volunteer.Name}

+

${volunteer.Category}

+

Profession: ${volunteer.Profession}

+

Contact: ${volunteer.Contact}

+

Location: ${volunteer.Location}

+ +
+
+ `; +} + +document.addEventListener("DOMContentLoaded", function() { + const volunteersContainer = document.getElementById('volunteers'); + const loadingElement = document.getElementById('loading'); + const searchInput = document.getElementById('searchInput'); + + function loadVolunteers() { + loadingElement.style.display = 'flex'; + fetch(API_URL) + .then(response => response.json()) + .then(data => { + loadingElement.style.display = 'none'; + allVolunteers = data; + displayVolunteers(allVolunteers); + updateCategoryCounters(); + }) + .catch(error => { + console.error('Error fetching data:', error); + loadingElement.textContent = "An error occurred while fetching volunteers"; + }); + } + + function displayVolunteers(volunteers) { + volunteersContainer.innerHTML = volunteers.map(createCard).join(''); + } + + function filterCategory(category) { + const filteredVolunteers = category === 'All' + ? allVolunteers + : allVolunteers.filter(volunteer => volunteer.Category === category); + displayVolunteers(filteredVolunteers); + } + + function searchVolunteers() { + const searchTerm = searchInput.value.toLowerCase(); + const filteredVolunteers = allVolunteers.filter(volunteer => + volunteer.Name.toLowerCase().includes(searchTerm) || + volunteer.Profession.toLowerCase().includes(searchTerm) || + volunteer.Location.toLowerCase().includes(searchTerm) + ); + displayVolunteers(filteredVolunteers); + } + + function updateCategoryCounters() { + const counts = { + All: allVolunteers.length, + Medical: allVolunteers.filter(v => v.Category === 'Medical').length, + Legal: allVolunteers.filter(v => v.Category === 'Legal').length, + Other: allVolunteers.filter(v => v.Category === 'Other').length + }; + + document.querySelectorAll('.buttons button').forEach(button => { + const category = button.getAttribute('data-category'); + button.querySelector('.badge').textContent = counts[category]; + }); + } + + let buttons = document.querySelectorAll('.buttons button'); + buttons.forEach(button => { + button.addEventListener('click', () => { + const category = button.getAttribute('data-category'); + filterCategory(category); + buttons.forEach(btn => btn.classList.remove('active')); + button.classList.add('active'); + }); + }); + + searchInput.addEventListener('input', searchVolunteers); + + loadVolunteers(); +}); diff --git a/volunteers.html b/volunteers.html new file mode 100644 index 0000000..e0dedb3 --- /dev/null +++ b/volunteers.html @@ -0,0 +1,44 @@ + + + + + + #March2Parliament Volunteers + + + +
+
+

#March2Parliament Volunteers

+
+
+
+
+
+
Filter by:
+
+ +
+ + + + +
+
+
+
+ +
+
+ +
+
+
+ + + + diff --git a/volunteers.json b/volunteers.json new file mode 100644 index 0000000..a219fae --- /dev/null +++ b/volunteers.json @@ -0,0 +1,29 @@ +[ + { + "id": 1, + "Name": "John Kintu", + "Category": "Medical", + "Profession": "Doctor", + "Contact": "0772123123", + "Location": "Central Hospital", + "Twitter": "john_kintu" + }, + { + "id": 2, + "Name": "Jane Akello", + "Category": "Legal", + "Profession": "Lawyer", + "Contact": "0751123123", + "Location": "City Court", + "Twitter": "jane_akello" + }, + { + "id": 3, + "Name": "Robert Opio", + "Category": "Other", + "Profession": "Counselor", + "Contact": "0789456789", + "Location": "Community Center", + "Twitter": "robert_opio" + } +]