Merge develop into main to release the first version of the map (#39)

* [CAN-18] Design: Stylise the localisation switch Problem Added styling for the switcher, along with flag svgs Solution Used the mobile nav as a template for the solution (thanks fab) Note A known issue is that once the dropdown for the switcher has been expanded, then changing url/tab will not auto close it. Before tackling the solutions I have found online I wanted to check if the team is happy with the current styling and behaviour. * [CAN-18] Design: Changing language switcher to onMouseEnter Problem This still doesnt solve the issue of an open dropdown menu being open whilst clicking onto another link/tab, however it does make it more unlikely for the dropdown menu to be open upon switching tabs. Solution Note * [CAN-18] Toggle between mobile and desktop switcher designs Problem Depending on if the device has a sm width or higher, use custom desktop language switcher, else use the select/option design which uses a phone's native design. Solution combination of sm:visible invisible and sm:invisible visible to toggle Note This still does not solve the issue of the switcher being left open upon switching tabs/urls * [CAN-45] Adds on hover animation to desktop navbar links Problem Thought it would look a bit more alive to have active links with an animation upon hovering. Solution Thanks to this stackoverflow solution: https://stackoverflow.com/questions/70906977/tailwind-underline-hover-animation Note Very open to the styling being changed in the future, eg colour/size/animation etc. * [CAN-38] Fix: normalise club card sizes Problem Both the image size and the size of the card were varying across clubs, the inconsistency did not look nice Solution Thanks to this stackoverflow: https://stackoverflow.com/questions/77275607/how-to-make-images-same-size-next-image-component i managed to get it to work. Note Feel free to change the sizes of the cards and the images. We need to be wary that these are fixed and what will happen when content overflows. Still need to test on multiple device sizes. * [CAN-41] Fixes the language switcher remaining upon locale change Problem A long list of problems arose from attempting to solve this issue: 1) When clicking away from the switcher without choosing a language and subsequently loading a new locale route, the switcher component wouldnt close. 2) Then solving the above issue meant that the caret wouldn't switch on every click away from the switcher as well, meaning the toggle was no longer in sync Solution 1) The solution to this problem was resolved thanks to this amazing stackoverflow: https://stackoverflow.com/questions/63086609/how-to-close-dropdown-on-outside-click-next-js 2) The solution to this problem was resolved based on this medium article (the former solution) as well as the linked repo: https://thivi.medium.com/react-development-94f95db41df6 https://github.com/thivi/child-method-call-from-parent-react/tree/master Note Additionally, fixed some of the errors and warnings to do with the incorrect react variable names which previously included hyphons. * [CAN-41] Reformats mobile language switcher text Problem Solution Note * [CAN-41] Swaps us flag for uk flag, NEEDS STYLING Problem Solution Note * [CAN-42] Fixes switcher flag from US to UK flag Problem Had issues with the sizing of the UK flag that I imported Solution Used a fix size for both the german and UK flag Note Still need to fix all of the SVG in public * [CAN-54] Center language switcher positioning Problem Switcher is at top of page, we want it center with rest of links. Solution Make the parent div flexbox so it can inherit the auto margins and properties of it's parent flex container. Note * [CAN-41] Blocks use of language switcher whilst page is in transition Problem Block was only in use for mobile language switcher Solution Make sure to use the 'isPending' state for the whenever the dropdown content is clicked, to avoid extreme cases where a user is able to spam the switcher faster than the page can load. Note MAY NEED TO BE USER TESTED * Hotfix/typescript for children (#35) * HOTFIX - Typescript being a dick not working yet * HOTFIX - typescript now happy but still a child --------- Co-authored-by: marcaufderheyde <[email protected]> * Hotfix/mobile language switcher (#37) * Merge develop into main with hot fixes for typescript shenanigans (#36) * [CAN-18] Design: Stylise the localisation switch Problem Added styling for the switcher, along with flag svgs Solution Used the mobile nav as a template for the solution (thanks fab) Note A known issue is that once the dropdown for the switcher has been expanded, then changing url/tab will not auto close it. Before tackling the solutions I have found online I wanted to check if the team is happy with the current styling and behaviour. * [CAN-18] Design: Changing language switcher to onMouseEnter Problem This still doesnt solve the issue of an open dropdown menu being open whilst clicking onto another link/tab, however it does make it more unlikely for the dropdown menu to be open upon switching tabs. Solution Note * [CAN-18] Toggle between mobile and desktop switcher designs Problem Depending on if the device has a sm width or higher, use custom desktop language switcher, else use the select/option design which uses a phone's native design. Solution combination of sm:visible invisible and sm:invisible visible to toggle Note This still does not solve the issue of the switcher being left open upon switching tabs/urls * [CAN-45] Adds on hover animation to desktop navbar links Problem Thought it would look a bit more alive to have active links with an animation upon hovering. Solution Thanks to this stackoverflow solution: https://stackoverflow.com/questions/70906977/tailwind-underline-hover-animation Note Very open to the styling being changed in the future, eg colour/size/animation etc. * [CAN-38] Fix: normalise club card sizes Problem Both the image size and the size of the card were varying across clubs, the inconsistency did not look nice Solution Thanks to this stackoverflow: https://stackoverflow.com/questions/77275607/how-to-make-images-same-size-next-image-component i managed to get it to work. Note Feel free to change the sizes of the cards and the images. We need to be wary that these are fixed and what will happen when content overflows. Still need to test on multiple device sizes. * [CAN-41] Fixes the language switcher remaining upon locale change Problem A long list of problems arose from attempting to solve this issue: 1) When clicking away from the switcher without choosing a language and subsequently loading a new locale route, the switcher component wouldnt close. 2) Then solving the above issue meant that the caret wouldn't switch on every click away from the switcher as well, meaning the toggle was no longer in sync Solution 1) The solution to this problem was resolved thanks to this amazing stackoverflow: https://stackoverflow.com/questions/63086609/how-to-close-dropdown-on-outside-click-next-js 2) The solution to this problem was resolved based on this medium article (the former solution) as well as the linked repo: https://thivi.medium.com/react-development-94f95db41df6 https://github.com/thivi/child-method-call-from-parent-react/tree/master Note Additionally, fixed some of the errors and warnings to do with the incorrect react variable names which previously included hyphons. * [CAN-41] Reformats mobile language switcher text Problem Solution Note * [CAN-41] Swaps us flag for uk flag, NEEDS STYLING Problem Solution Note * [CAN-42] Fixes switcher flag from US to UK flag Problem Had issues with the sizing of the UK flag that I imported Solution Used a fix size for both the german and UK flag Note Still need to fix all of the SVG in public * [CAN-54] Center language switcher positioning Problem Switcher is at top of page, we want it center with rest of links. Solution Make the parent div flexbox so it can inherit the auto margins and properties of it's parent flex container. Note * [CAN-41] Blocks use of language switcher whilst page is in transition Problem Block was only in use for mobile language switcher Solution Make sure to use the 'isPending' state for the whenever the dropdown content is clicked, to avoid extreme cases where a user is able to spam the switcher faster than the page can load. Note MAY NEED TO BE USER TESTED * Hotfix/typescript for children (#35) * HOTFIX - Typescript being a dick not working yet * HOTFIX - typescript now happy but still a child --------- Co-authored-by: marcaufderheyde <[email protected]> --------- Co-authored-by: Hector Jones <[email protected]> Co-authored-by: joneshector <[email protected]> Co-authored-by: Fabrizio <[email protected]> Co-authored-by: marcaufderheyde <[email protected]> * [HOTFIX] Swaps US flag for UK flag on mobile Problem Fully changed from US to UK flag and also there was a conflict of the label spilling out of the select/option component Solution Removed label as there is no need Note * [HOTFIX] Rounds the edges of mobile nav language switcher Problem Solution Note --------- Co-authored-by: Marc Auf der Heyde <[email protected]> Co-authored-by: Fabrizio <[email protected]> Co-authored-by: marcaufderheyde <[email protected]> * Frontend/map component (#32) * CAN-55 Implemented initial Map Component Can be toggled with button uses Open Street Map * CAN-55 Updated Map Component to use pullClubsList Problem: don't want to be rewriting code Solution: add geolocation to each club and pull Note * CAN-50 - added more coordinates and some new sites Problem: want to show more on the map Solution: added more geo info Note: there's lots of competitors suddenly * CAN-50 added remaining geocoordinates and logos Problem: keep filling that content baby Solution: filled content Note: gonna have a lot of leeching to do from the other sites * CAN-50 - More clubs and maps on each club page Problem: want to show location on club page Solution: added new clubmap component * CAN-50 - added clubs from all sources Problem: have leeched it all and put club map to bottom on club pages Solution: did it like a boss * CAN-50 - fixed issue where offerings weren't shown Problem: offerings not shown because they are generated in club list Solution: generate in map component as well Note: should do this in the 'store' but that dont have translation prov * CAN-50: change 0,0 coords to Berlin as default Problem: should have all locations in Germany Solution: 0,0 is memes and all but come on man * CAN-50 Added back button on club page Problem: need to send em back to the map innit Solution: send it Note: also fixed a club URL I had updated! * [HOTFIX] Flips backbutton triangle to be more intuitive Problem I believe that it is less obvious to have the arrow pointing forwards Solution Added some boolean to flip it Note I don't think it looks great, so open to the idea of leaving it as it was before. Just think it makes more sense. Dont stop yourselves from going ham on me. * [HOTFIX] Gets rid of outline border and show for map card Problem Solution Note I believe it looks nicer than the previous version, I am open to it being shutdown though! * [HOTFIX] Gets rid of club id number from map card Problem Solution Note --------- Co-authored-by: marcaufderheyde <[email protected]> Co-authored-by: Hector Jones <[email protected]> --------- Co-authored-by: Hector Jones <[email protected]> Co-authored-by: joneshector <[email protected]> Co-authored-by: Fabrizio <[email protected]> Co-authored-by: marcaufderheyde <[email protected]>
marcaufderheyde · Apr 13, 2024 · 7d0a9a7 · 7d0a9a7
1 parent 6934488
commit 7d0a9a7
Show file tree

Hide file tree

Showing 58 changed files with 1,202 additions and 41 deletions.
diff --git a/app/Components/ClubOpenStreetMap.tsx b/app/Components/ClubOpenStreetMap.tsx
@@ -0,0 +1,76 @@
+"use client"
+import React from 'react';
+import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
+import 'leaflet/dist/leaflet.css';
+import 'leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.webpack.css';
+import L, { icon, popup } from 'leaflet'
+import { useLocale, useTranslations } from 'next-intl';
+import styles from '@/app/[locale]/clubs/ClubCard.module.css';
+import Image from 'next/image';
+import { Club } from '../[locale]/clubs/clubsListContent';
+
+const customIcon = L.icon({
+  iconUrl: '/leaf-green.png',
+  shadowUrl: '/leaf-shadow.png',
+
+  iconSize:     [38, 95], // size of the icon
+  shadowSize:   [50, 64], // size of the shadow
+  iconAnchor:   [22, 94], // point of the icon which will correspond to marker's location
+  shadowAnchor: [4, 62],  // the same for the shadow
+  popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
+});
+
+type Props = {
+    club: Club,
+}
+
+const ClubOpenStreetMap = ({club}: Props) => {
+  const t = useTranslations('ClubsPage');
+  const localActive = useLocale();
+
+  const center = {
+    lat: club.geoLocation[0],
+    lng: club.geoLocation[1],
+  };
+
+  const zoom = 13;
+
+  return (
+    <MapContainer center={center} zoom={zoom} style={{ height: '200px', width: '100%' }}>
+      <TileLayer
+        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+      />
+
+        <Marker key={club.key} position={[club.geoLocation[0], club.geoLocation[1]] } icon={customIcon}
+        >
+          <Popup>
+          <a href={`/${localActive}/clubs/${club.slug}`} key={club.slug}>
+            <div className="flex justify-center items-center">
+                    <div className={styles.mapCard} key={club.key}>
+                        <div className={styles.cardNumber}>#{club.key}</div>
+                        <div className="flex justify-center items-center">
+                            <Image
+                                src={club.imageUrl}
+                                alt={club.name + ' Club Picture'}
+                                width={300}
+                                height={300}
+                                className={styles.mapCardImage}
+                            />
+                        </div>
+                        <div className={styles.mapCardContent}>
+                            <h3 className={styles.mapCardTitle}>{club.name}</h3>
+                            <p className={styles.mapCardDescription}>
+                                {club.offerings}
+                            </p>
+                        </div>
+                    </div>
+                </div>
+          </a>
+          </Popup>
+        </Marker>
+    </MapContainer>
+  );
+};
+
+export default ClubOpenStreetMap;
diff --git a/app/Components/OpenStreetMap.tsx b/app/Components/OpenStreetMap.tsx
@@ -0,0 +1,80 @@
+"use client"
+import React from 'react';
+import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
+import 'leaflet/dist/leaflet.css';
+import 'leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.webpack.css';
+import L, { icon, popup } from 'leaflet'
+import { pullClubsListContent } from '../[locale]/clubs/clubsListContent';
+import { useLocale, useTranslations } from 'next-intl';
+import styles from '@/app/[locale]/clubs/ClubCard.module.css';
+import Image from 'next/image';
+
+const clubs = pullClubsListContent();
+
+const customIcon = L.icon({
+  iconUrl: '/leaf-green.png',
+  shadowUrl: '/leaf-shadow.png',
+
+  iconSize:     [38, 95], // size of the icon
+  shadowSize:   [50, 64], // size of the shadow
+  iconAnchor:   [22, 94], // point of the icon which will correspond to marker's location
+  shadowAnchor: [4, 62],  // the same for the shadow
+  popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
+});
+
+const OpenStreetMap = () => {
+  const t = useTranslations('ClubsPage');
+  const localActive = useLocale();
+  clubs.forEach((club) => {
+      club.description = t(`${club.slug}.description`);
+      club.offerings = t(`${club.slug}.offerings`);
+      club.harm_reduction = t(`${club.slug}.harm_reduction`);
+  });
+  const locations = clubs.map((club) => {return {lat: club.geoLocation[0], lng: club.geoLocation[1], club: club}});
+
+  const center = {
+    lat: 52.516640,
+    lng: 13.408280,
+  };
+
+  const zoom = 13;
+
+  return (
+    <MapContainer center={center} zoom={zoom} style={{ height: '400px', width: '100%' }}>
+      <TileLayer
+        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+      />
+      {locations.map((location, index) => (
+        <Marker key={index} position={[location.lat, location.lng] } icon={customIcon}
+        >
+          <Popup>
+            <a href={`/${localActive}/clubs/${location.club.slug}`} key={location.club.slug}>
+              <div className="flex justify-center items-center">
+                      <div className={styles.mapCard} key={index}>
+                          <div className="flex justify-center items-center">
+                              <Image
+                                  src={location.club.imageUrl}
+                                  alt={location.club.name + ' Club Picture'}
+                                  width={300}
+                                  height={300}
+                                  className={styles.mapCardImage}
+                              />
+                          </div>
+                          <div className={styles.mapCardContent}>
+                              <h3 className={styles.mapCardTitle}>{location.club.name}</h3>
+                              <p className={styles.mapCardDescription}>
+                                  {location.club.offerings}
+                              </p>
+                          </div>
+                      </div>
+                  </div>
+            </a>
+          </Popup>
+        </Marker>
+      ))}
+    </MapContainer>
+  );
+};
+
+export default OpenStreetMap;
diff --git a/app/[locale]/clubs/ClubCard.module.css b/app/[locale]/clubs/ClubCard.module.css
@@ -16,6 +16,17 @@
     box-shadow: 0 2px 5px rgba(0,0,0,0.1);
     object-fit: contain;
   }
+
+  .mapCard {
+    /* commented out the card border until a method to override the whole popup component has been found */
+    width: 100px;
+    height: 225px;
+    /* border: 1px solid #ccc;
+    border-radius: 8px; */
+    overflow: hidden;
+    /* box-shadow: 0 2px 5px rgba(0,0,0,0.1); */
+    object-fit: contain;
+  }
 
   .cardNumber {
     font-size: 16px;
@@ -28,19 +39,42 @@
     object-fit: contain;
     padding: 5px;
   }
+
+  .mapCardImage {
+    width: 50px;
+    height: 50px;
+    object-fit: contain;
+    padding: 5px;
+  }
 
   .cardContent {
     padding: 15px;
   }
+
+  .mapCardContent {
+    padding: 5px;
+  }
 
   .cardTitle {
     font-size: 20px;
     color: #333;
     margin: 0 0 10px 0;
   }
+
+  .mapCardTitle {
+    font-size: 12px;
+    color: #333;
+    margin: 0 0 10px 0;
+  }
 
   .cardDescription {
     font-size: 16px;
     color: #666;
     margin: 0;
+  }
+
+  .mapCardDescription {
+    font-size: 10px;
+    color: #666;
+    margin: 0;
   }
diff --git a/app/[locale]/clubs/berliner-cannabis-hilfe-ev/page.tsx b/app/[locale]/clubs/berliner-cannabis-hilfe-ev/page.tsx
@@ -0,0 +1,11 @@
+import ClubContent from '../club-content';
+import { unstable_setRequestLocale } from 'next-intl/server';
+
+export default function Clubs({ params: { locale } }: { params: { locale: string } }) {
+    unstable_setRequestLocale(locale);
+    return (
+        <div className='flex flex-col md:flex-col w-full justify-center md:justify-between items-center h-full overflow-auto pt-12 md:pl-[YourNavbarWidth]'>
+            <ClubContent />
+        </div>
+    );
+}
diff --git a/...ial-club-ev-im-norden-von-berlin/page.tsx → ...ubs/cannabis-social-club-spandau/page.tsx b/...ial-club-ev-im-norden-von-berlin/page.tsx → ...ubs/cannabis-social-club-spandau/page.tsx
diff --git a/app/[locale]/clubs/cannabis-social-club-weeden-030-berlin-ev/page.tsx b/app/[locale]/clubs/cannabis-social-club-weeden-030-berlin-ev/page.tsx
@@ -0,0 +1,11 @@
+import ClubContent from '../club-content';
+import { unstable_setRequestLocale } from 'next-intl/server';
+
+export default function Clubs({ params: { locale } }: { params: { locale: string } }) {
+    unstable_setRequestLocale(locale);
+    return (
+        <div className='flex flex-col md:flex-col w-full justify-center md:justify-between items-center h-full overflow-auto pt-12 md:pl-[YourNavbarWidth]'>
+            <ClubContent />
+        </div>
+    );
+}
diff --git a/app/[locale]/clubs/cannabliss-csc/page.tsx b/app/[locale]/clubs/cannabliss-csc/page.tsx
@@ -0,0 +1,11 @@
+import ClubContent from '../club-content'; 
+import { unstable_setRequestLocale } from 'next-intl/server';
+
+export default function Clubs({ params: { locale } }: { params: { locale: string } }) {
+    unstable_setRequestLocale(locale);
+    return (
+        <div className='flex flex-col md:flex-col w-full justify-center md:justify-between items-center h-full overflow-auto pt-12 md:pl-[YourNavbarWidth]'>
+            <ClubContent />
+        </div>
+    );
+}
diff --git a/app/[locale]/clubs/captain-weedy-csc-berlin-ev/page.tsx b/app/[locale]/clubs/captain-weedy-csc-berlin-ev/page.tsx
@@ -0,0 +1,11 @@
+import ClubContent from '../club-content';
+import { unstable_setRequestLocale } from 'next-intl/server';
+
+export default function Clubs({ params: { locale } }: { params: { locale: string } }) {
+    unstable_setRequestLocale(locale);
+    return (
+        <div className='flex flex-col md:flex-col w-full justify-center md:justify-between items-center h-full overflow-auto pt-12 md:pl-[YourNavbarWidth]'>
+            <ClubContent />
+        </div>
+    );
+}
diff --git a/app/[locale]/clubs/club-content.tsx b/app/[locale]/clubs/club-content.tsx
@@ -3,8 +3,13 @@ import { useLocale, useTranslations } from 'next-intl';
 import { usePathname } from 'next/navigation'
 import { pullClubsListContent } from './clubsListContent';
 import Image from 'next/image';
+import dynamic from 'next/dynamic';
+import ActionButton from '@/app/ui/Home/actionbutton';
 
 export default function ClubContent() {
+    const ClubOpenStreetMap = dynamic(() => import('@/app/Components/ClubOpenStreetMap'), {
+        ssr: false,
+    })
     const pathname = usePathname().split("/")[3];
     const club = pullClubsListContent().find((club) => club.slug === pathname);
     const t = useTranslations('ClubsPage');
@@ -21,6 +26,16 @@ export default function ClubContent() {
                 <h1 className='font-bold text-4xl md:text-[4rem] opacity-[0.3] text-balance leading-tight'>
                     {club.name}
                 </h1>
+                <div className='flex flex-row text-lg font-semibold gap-2'>
+                    <ActionButton
+                        backgroundColor={'#B6CF54'}
+                        textColor={'#FFFFFF'}
+                        href={`/${localActive}/clubs`}
+                        backLink={true}
+                    >
+                        {t('clubs_menu')}
+                    </ActionButton>
+                </div>
                 <div>
                 <Image src={club.imageUrl} alt={club.name + ' Club Picture'} width={300} height={300}/>
 
@@ -29,10 +44,6 @@ export default function ClubContent() {
                 <p>
                     {club.prices}
                 </p>
-                <h2 className='font-bold text-4xl md:text-[2rem] opacity-[0.3] text-balance leading-tight'>{t("location_title")}</h2>
-                <p>
-                    {club.location}
-                </p>
                 <h2 className='font-bold text-4xl md:text-[2rem] opacity-[0.3] text-balance leading-tight'>{t("description_title")}</h2>
                 <p>
                     {club.description}
@@ -47,8 +58,13 @@ export default function ClubContent() {
                 </p>
                 <h2 className='font-bold text-4xl md:text-[2rem] opacity-[0.3] text-balance leading-tight'>{t("visit_website_title")}</h2>
                 <p>
-                    <a href={club.clubPageUrl}>{club.clubPageUrl}</a>
+                    <a href={club.clubPageUrl} target="_blank" >{club.clubPageUrl}</a>
+                </p>
+                <h2 className='font-bold text-4xl md:text-[2rem] opacity-[0.3] text-balance leading-tight'>{t("location_title")}</h2>
+                <p>
+                    {club.location}
                 </p>
+                <ClubOpenStreetMap club={club}/>
                 <br/>
             </div>
         );