chaulmark/deafmissoula-website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update events, minutes viewing, and facebook logo

Browse source
This commit is contained in:
TheMaddax 2024-10-19 18:12:45 -06:00
parent da626f5478
commit 0dbdaf59f7
3 changed files with 73 additions and 62 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
client/src/components/Footer.tsx
View file

@ -102,8 +102,8 @@ const Footer: React.FC = () => {
className="inline-block mt-4 transition-transform duration-300 ease-in-out transform hover:scale-110"
>
<img
src="logos/facebook-logo.png"
alt="Facebook"
src="/logos/facebook-logo.png"
alt="Facebook Logo"
className="w-10 h-10 rounded-full shadow-lg hover:shadow-xl"
style={{
filter: 'drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.1))',

81
client/src/components/Minutes.tsx
View file

@ -1,5 +1,5 @@
import React, { useState } from 'react';
import { motion } from 'framer-motion';
import React, { useState, useEffect } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
interface MinuteEntry {
date: string;
@ -21,6 +21,19 @@ const minutesData: MinuteEntry[] = [
const Minutes: React.FC = () => {
const [sortColumn, setSortColumn] = useState<keyof MinuteEntry>('date');
const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('desc');
const [selectedMinutes, setSelectedMinutes] = useState<MinuteEntry | null>(null);
const [isMobile, setIsMobile] = useState(false);
useEffect(() => {
const checkMobile = () => {
setIsMobile(window.innerWidth < 768);
};
checkMobile();
window.addEventListener('resize', checkMobile);
return () => window.removeEventListener('resize', checkMobile);
}, []);
const sortedMinutes = [...minutesData].sort((a, b) => {
if (a[sortColumn] < b[sortColumn]) return sortDirection === 'asc' ? -1 : 1;
@ -37,6 +50,18 @@ const Minutes: React.FC = () => {
}
};
const handleMinutesClick = (entry: MinuteEntry) => {
if (isMobile) {
window.open(entry.fileUrl, '_blank');
} else {
setSelectedMinutes(entry);
}
};
const closePopup = () => {
setSelectedMinutes(null);
};
return (
<div className="container mx-auto px-4 py-8">
<motion.div
@ -62,19 +87,18 @@ const Minutes: React.FC = () => {
</tr>
</thead>
<tbody>
{sortedMinutes.map((entry, index) => ( <tr key={index} className="border-b border-gray-200 hover:bg-gray-100">
{sortedMinutes.map((entry, index) => (
<tr key={index} className="border-b border-gray-200 hover:bg-gray-100">
<td className="py-3 px-4">{entry.date}</td>
<td className="py-3 px-4">{entry.meetingType}</td>
<td className="py-3 px-4">{entry.location}</td>
<td className="py-3 px-4">
<a
href={entry.fileUrl}
target="_blank"
rel="noopener noreferrer"
className="text-blue-600 hover:text-blue-800 underline"
<button
onClick={() => handleMinutesClick(entry)}
className="bg-[#8C1D40] text-white font-bold py-2 px-4 rounded hover:bg-[#6B1631] transition duration-300"
>
View Minutes
</a>
</button>
</td>
</tr>
))}
@ -82,8 +106,45 @@ const Minutes: React.FC = () => {
</table>
</div>
</motion.div>
<AnimatePresence>
{selectedMinutes && !isMobile && (
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
onClick={closePopup}
>
<motion.div
initial={{ scale: 0.9, opacity: 0 }}
animate={{ scale: 1, opacity: 1 }}
exit={{ scale: 0.9, opacity: 0 }}
className="bg-white rounded-lg p-4 w-[90%] h-[90%] flex flex-col"
onClick={(e) => e.stopPropagation()}
>
<h2 className="text-2xl font-bold text-[#8C1D40] mb-4">
{selectedMinutes.meetingType} - {selectedMinutes.date}
</h2>
<div className="flex-grow">
<iframe
src={`${selectedMinutes.fileUrl}#view=FitH`}
className="w-full h-full rounded-md"
title={`Minutes for ${selectedMinutes.meetingType} on ${selectedMinutes.date}`}
/>
</div>
<button
onClick={closePopup}
className="mt-4 bg-[#8C1D40] text-white font-bold py-2 px-4 rounded hover:bg-[#6B1631] transition duration-300 self-end"
>
Close
</button>
</motion.div>
</motion.div>
)}
</AnimatePresence>
</div>
);
};
export default Minutes;
export default Minutes;

50
client/src/eventData.ts
View file

@ -10,56 +10,6 @@ export interface Event {
}
export const events: Event[] = [
{
date: '2024-11-01',
title: 'ASL Night Out!',
description: 'Cornhole Tournament - will have 3 rows of cornholes and will do elimination for winner',
startTime: '18:00',
endTime: '20:00',
pointOfContact: 'Tessa Williams',
email: 'tessa.williams@deafmissoula.org',
address: 'To be announced'
},
{
date: '2024-11-02',
title: 'Missoula Concealed Weapons Class',
description: 'Concealed weapons course at Cabela\'s',
startTime: '10:00',
endTime: '14:00',
pointOfContact: 'Kevin Cooley',
email: 'kevin.cooley@deafmissoula.org',
address: '3650 Brooks Street, Missoula, MT 59801'
},
{
date: '2024-11-28',
title: 'Thanksgiving Volunteer',
description: 'Volunteer at Missoula Food Bank and Community Center with us',
startTime: '10:00',
endTime: '13:00',
pointOfContact: 'Aubz M',
email: 'aubz.m@deafmissoula.org',
address: '1720 Wyoming St, Missoula, MT 59801'
},
{
date: '2024-12-06',
title: 'ASL Black Tie and Gown',
description: 'Time to dress up in your finest clothes for a night of dancing and rocking the fabulous looks',
startTime: '19:00',
endTime: '23:00',
pointOfContact: 'Rita Brandborg',
email: 'rita.brandborg@deafmissoula.org',
address: '101 Central Avenue, Whitefish, MT 59937'
},
{
date: '2024-12-24',
title: 'Christmas Cheer Volunteer',
description: 'Volunteer at Missoula Food Bank and Community Center',
startTime: '10:00',
endTime: '12:00',
pointOfContact: 'Tessa Williams',
email: 'tessa.williams@deafmissoula.org',
address: '1720 Wyoming St, Missoula, MT 59801'
},
{
date: '2025-01-11',
title: 'MCDi Members Meeting',