Andrei/phs 50 ii hifi home screen web and design updates (#78)

* feat: web screens met, testing on iPhone SE screens + switch to web: instead of md: needed * feat: iPhone SE debugged, window containers required * chore: sync * feat+bug: Hover and Focus effects added to visitor resources buttons. Custom shadow classes added to tailwind config, for use in future hifi styles. Hunter-cream renamed to hunter-cream for figma design system consistency. syncing but some weird issues with the npm run pre-commit command, some files committed by mistake * chore: Added hover + focus effects to buttons, reorganized files relating to the home page components * fix: padding on title header and sizing of exhibit button styling, Galaxy Fold 5 boundary issues + button icon gap fixes incoming * fix: Galaxy Fold 5 + Iphone SE boundary error fixed. Note: aim to use max prefix on measurements for parent tags to avoid this in the future * fix: fixed bounding issues again + visitor resources button styling fixes * feat: transition to using React Context for window resize checks, should look into using other React Contexts in the future * Claire fixes (#63) * done with popup styling * updated package lock for npm install * Revert "fix: remove formatting changes to media/queries.tsx" This reverts commit f6e1d69. * cont. rebase * cont. rebase * rebase 3 * rebase 4 * refactor: add formatting changes * refactor: add jsdoc, imports, change queries.tsx -> .ts * edited to accomodate database changes for categories and exhibits * claire's approval * figma dev changes resolved * updated desktop version * finished all desktop feedback - delted display component (not using) changed navbar component to huntergreen * done with claire's mobile edits --------- Co-authored-by: sarahhpeng <[email protected]> Co-authored-by: Noah Hernandez <[email protected]> Co-authored-by: jxmoose <[email protected]> * Revert "Claire fixes (#63)" (#64) This reverts commit 8faac52. * package changed * change useWebScreenDetection to useWebDeviceDetection (#68) * fixed some linting errors, mostly jsdocs (#69) * news feed web (#61) * news feed web * small change * added web screen, fixed styling when screen between certain sizes, fixed coloring using h-full (?), changed margins to padding, changed to rem * just used gradient for now for epic styling lol.. * changed bg to mint cream for now :( * changed web detection * removed text from web --------- Co-authored-by: sarahhpeng <[email protected]> * Justin exhibit redo (#67) * added database and page * fixed lint errors lol... * style changes * prettier * added database and page * fixed lint errors lol... * update package-lock * small style * added exhibit component * adding comp * finished? * added to nav bar * removed cateogry for now * prettier changes * feat: disabling github actions until MPH / post-MPH * chore: prettier * chore: disabled only the tsc compiler for now * adding comp * finished? * prettier changes * removed category from table and small fixes * added linking from map * added database and page * fixed lint errors lol... * style changes * prettier * added database and page * fixed lint errors lol... * update package-lock * small style * added exhibit component * adding comp * finished? * added to nav bar * removed cateogry for now * prettier changes * feat: disabling github actions until MPH / post-MPH * chore: prettier * chore: disabled only the tsc compiler for now * adding comp * finished? * prettier changes * removed category from table and small fixes * added linking from map * design changes + adding active state to buttons * big database edits to make fun facts possible on map * supabase function change * documentation changes + tailwind changes * small styling changes * some wbe changes * maybe will make components equal heightsl ater if have time i cant figure it out lol fml * web resize changes * edit nav bar * added database and page * fixed lint errors lol... * style changes * prettier * added database and page * fixed lint errors lol... * update package-lock * small style * added exhibit component * adding comp * finished? * added to nav bar * removed cateogry for now * prettier changes * feat: disabling github actions until MPH / post-MPH * chore: prettier * chore: disabled only the tsc compiler for now * adding comp * finished? * prettier changes * removed category from table and small fixes * added linking from map * added database and page * fixed lint errors lol... * style changes * prettier * fixed lint errors lol... * update package-lock * small style * added exhibit component * adding comp * finished? * added to nav bar * removed cateogry for now * prettier changes * adding comp * finished? * prettier changes * removed category from table and small fixes * added linking from map * design changes + adding active state to buttons * big database edits to make fun facts possible on map * supabase function change * documentation changes + tailwind changes * small styling changes * some wbe changes * maybe will make components equal heightsl ater if have time i cant figure it out lol fml * web resize changes * edit nav bar * small post rebase fixes --------- Co-authored-by: Andrei Tan <[email protected]> Co-authored-by: sarahhpeng <[email protected]> * fixed all eslint errors, still some warnings, introduced some ignores (#70) Co-authored-by: sarahhpeng <[email protected]> * fixed remaining errors (#71) * Phs sitemap fix (#66) * done with popup styling * updated package lock for npm install * Revert "fix: remove formatting changes to media/queries.tsx" This reverts commit f6e1d69. * cont. rebase * cont. rebase * rebase 3 * rebase 4 * refactor: add formatting changes * refactor: add jsdoc, imports, change queries.tsx -> .ts * edited to accomodate database changes for categories and exhibits * claire's approval * figma dev changes resolved * updated desktop version * finished all desktop feedback - delted display component (not using) changed navbar component to huntergreen * done with claire's mobile edits * added working nav bar to mihas pr * fixed bracket issue in the siteMapPage * filter button duplicated import statement * changed hunterGreen to hunter-green for filter button * testing w-auto * minor change * fixed alignment issues and used andrei's resizing * fixed popup alignment * resolved justin's comments * fixed fonts * fixing lag from tours to exhibit * combined use affects * trying to push with eslint fixes * fixed eslint errors - ready to push --------- Co-authored-by: sarahhpeng <[email protected]> Co-authored-by: Noah Hernandez <[email protected]> Co-authored-by: jxmoose <[email protected]> * Christophertorres/phs final tours spotlights styling (#62) * . * refinements * . * style: make navbar sticky * style: rename pages * feat: hours and location web layout * style: make image carousel fit to parent container * style: update mobile and web designs * style: fix virtual tours button radius * style: tour end page fills screen height * style: back to tours button height adjustment * style: adjust button-text spacing * style: update space between title and subtitle for spotlight buttons * style * style: fix button radius under more in this spotlight * style: add back button click effect * style: tour button with text click effect * style: add last and next stop button click effects * style: add spotlight display button click effect * style: text on click effect * style: add line clamp 2 to related spotlights * style: specifically define each font feature * feat: add links table to supabase * style: related links component uses new links table * style: fix eslint and prettier errors * style: rename navBar.tsx to NavBar.tsx * style: update page path names * feat: add exhibits to navigation bar * style: fix eslint and prettier issues * style: fix text overflow in spotlight page * deleted outdated images from public folder and updated navBar folder to NavBar (#72) * renamed navBar to NavBar (#73) * Phs site map eslint (#74) * fixed colors and deleted the ts file for category queries * supabase fix * supabase types added * fixed eslint and prettier things for all pages pertaining to site maps * Justin footer redo (#75) * added footer file * added footer component to all pages, plus small edits to footer * made links open new tab instead of change exisitng --------- Co-authored-by: sarahhpeng <[email protected]> * Noah/fix window reference (#77) * fix: move window into useEffect * fix: remove news state dependency from useEffect * added correct links to site map (#76) * added correct links to site map * made images fit to exhibit component * merge resolved * style * nothing * feat: iPhone SE debugged, window containers required * feat+bug: Hover and Focus effects added to visitor resources buttons. Custom shadow classes added to tailwind config, for use in future hifi styles. Hunter-cream renamed to hunter-cream for figma design system consistency. syncing but some weird issues with the npm run pre-commit command, some files committed by mistake * chore: Added hover + focus effects to buttons, reorganized files relating to the home page components * fix: misc changes to styling and fixing some console log errors * feat + fix: web design system set up, fixed lato font * fix: resolving old merge conflicts * feat: web screens met, testing on iPhone SE screens + switch to web: instead of md: needed * feat: iPhone SE debugged, window containers required * chore: sync * feat+bug: Hover and Focus effects added to visitor resources buttons. Custom shadow classes added to tailwind config, for use in future hifi styles. Hunter-cream renamed to hunter-cream for figma design system consistency. syncing but some weird issues with the npm run pre-commit command, some files committed by mistake * chore: Added hover + focus effects to buttons, reorganized files relating to the home page components * Claire fixes (#63) * done with popup styling * updated package lock for npm install * Revert "fix: remove formatting changes to media/queries.tsx" This reverts commit f6e1d69. * cont. rebase * cont. rebase * rebase 3 * rebase 4 * refactor: add formatting changes * refactor: add jsdoc, imports, change queries.tsx -> .ts * edited to accomodate database changes for categories and exhibits * claire's approval * figma dev changes resolved * updated desktop version * finished all desktop feedback - delted display component (not using) changed navbar component to huntergreen * done with claire's mobile edits --------- Co-authored-by: sarahhpeng <[email protected]> Co-authored-by: Noah Hernandez <[email protected]> Co-authored-by: jxmoose <[email protected]> * Revert "Claire fixes (#63)" (#64) This reverts commit 8faac52. * merge resolved * style * nothing * feat: iPhone SE debugged, window containers required * feat+bug: Hover and Focus effects added to visitor resources buttons. Custom shadow classes added to tailwind config, for use in future hifi styles. Hunter-cream renamed to hunter-cream for figma design system consistency. syncing but some weird issues with the npm run pre-commit command, some files committed by mistake * chore: Added hover + focus effects to buttons, reorganized files relating to the home page components * fix: misc changes to styling and fixing some console log errors * feat + fix: web design system set up, fixed lato font * fix: resolving old merge conflicts * sync with origin --------- Co-authored-by: miha-bhaskaran <[email protected]> Co-authored-by: sarahhpeng <[email protected]> Co-authored-by: Noah Hernandez <[email protected]> Co-authored-by: jxmoose <[email protected]> Co-authored-by: sarahhpeng <[email protected]> Co-authored-by: David Qing <[email protected]> Co-authored-by: Justin Xue <[email protected]> Co-authored-by: Chris Torres <[email protected]>
calblueprint · Sep 16, 2024 · 4ba278f · 4ba278f
1 parent a775685
commit 4ba278f
Show file tree

Hide file tree

Showing 23 changed files with 1,507 additions and 206 deletions.
diff --git a/src/app/featuredToursPage/[tourId]/page.tsx b/src/app/featuredToursPage/[tourId]/page.tsx
@@ -0,0 +1,137 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+import Image from 'next/image';
+import Link from 'next/link';
+
+import { fetchAllDisplays } from '../../../supabase/displays/queries';
+import { fetchMedia } from '../../../supabase/media/queries';
+import { fetchTour } from '../../../supabase/tours/queries';
+import { fetchTourDisplays } from '../../../supabase/tour_displays/queries';
+import { fetchTourMedia } from '../../../supabase/tour_media/queries';
+import {
+  DisplayRow,
+  MediaRow,
+  TourDisplaysRow,
+  TourMediaRow,
+  TourRow,
+} from '../../../types/types';
+
+import BackButton from '../../../components/userComponents/BackButton/BackButton';
+import NavBar from '../../../components/userComponents/navBar/navBar';
+
+/**
+ * @param params -
+ * @param params.params -
+ * @param params.params.tourId - The tour ID
+ * @returns The tour start page
+ */
+export default function TourStartPage({
+  params,
+}: {
+  params: { tourId: string };
+}) {
+  const [tour, setTour] = useState<TourRow>();
+  const [tourDisplays, setTourDisplays] = useState<TourDisplaysRow[]>([]);
+  const [displays, setDisplays] = useState<DisplayRow[]>([]);
+  const [tourMedia, setTourMedia] = useState<TourMediaRow[]>([]);
+  const [media, setMedia] = useState<MediaRow[]>([]);
+
+  useEffect(() => {
+    // Fetch tour, tour displays, and tour media data
+    const fetchData = async () => {
+      const fetchedTour = await fetchTour(params.tourId);
+      setTour(fetchedTour);
+      const fetchedTourDisplays = await fetchTourDisplays(params.tourId);
+      setTourDisplays(fetchedTourDisplays);
+      const fetchedDisplays = await fetchAllDisplays();
+      setDisplays(fetchedDisplays);
+      const fetchedTourMedia = await fetchTourMedia(params.tourId);
+      setTourMedia(fetchedTourMedia);
+      const fetchedMedia = await fetchMedia();
+      setMedia(fetchedMedia);
+    };
+
+    fetchData();
+  }, [params.tourId]);
+
+  return (
+    tour && (
+      <div className="bg-ivory w-[24.375rem] min-h-screen">
+        <NavBar />
+        <Link
+          href="/featuredToursPage"
+          className="absolute top-[5.25rem] left-[1.12rem] z-10"
+        >
+          <BackButton />
+        </Link>
+        <div className="bg-scary-forest relative w-[24.375rem] h-[15.3125rem]">
+          {media.length > 0 && (
+            <Image
+              key={media.find(m => m.id === tourMedia[0]?.media_id)?.id}
+              src={media.find(m => m.id === tourMedia[0]?.media_id)?.url ?? ''}
+              alt={media.find(m => m.id === tourMedia[0]?.media_id)?.text ?? ''}
+              layout="fill"
+              objectFit="cover"
+              priority
+            />
+          )}
+        </div>
+
+        <div className="w-[24.375rem] flex flex-col px-[1.125rem] absolute top-[17.81rem] gap-6 mb-[2.5rem]">
+          <div className="bg-mint-green w-[22.125rem] rounded-md px-[2.1875rem] py-[2.25rem] flex-col items-center gap-3 inline-flex">
+            <div className="flex flex-col w-[22.125rem] rounded-md px-[2.1875rem] text-center gap-1">
+              <h2 className="text-night text-sm font-lato font-normal">
+                WELCOME TO
+              </h2>
+              <h1 className="text-night font-lato text-[2rem] truncate font-bold">
+                {tour.name}
+              </h1>
+            </div>
+            <div className="w-[12.625rem] px-4 py-[0.62rem] bg-asparagus rounded-lg justify-center items-center gap-2.5">
+              <Link
+                href={`/featuredToursPage/${params.tourId}/${tourDisplays[0]?.display_id}`}
+              >
+                <h2 className="text-ivory text-center text-base font-lato font-bold">
+                  Start Tour
+                </h2>
+              </Link>
+            </div>
+          </div>
+
+          <p className="text-night font-lato font-normal">{tour.description}</p>
+
+          <div className="flex flex-col relative gap-4 mb-10">
+            <div className="flex justify-between items-center">
+              <h3 className="text-night font-lato text-lg font-bold">
+                In this tour
+              </h3>
+              <div className="bg-[#F5EDCF80] w-[4.375rem] h-[1.5rem] rounded-[0.5625rem] px-3 py-1">
+                <p className="text-night font-lato font-normal text-xs text-center">
+                  {tour.stop_count} stops
+                </p>
+              </div>
+            </div>
+            <ol>
+              {tourDisplays.map(tourDisplay => (
+                <li key={tourDisplay.display_id} className="mb-[0.44rem] ml-4">
+                  <h4 className="font-normal font-lato">
+                    {tourDisplay.display_order != null
+                      ? tourDisplay.display_order + 1
+                      : ''}
+                    .{' '}
+                    {
+                      displays.find(
+                        display => display.id === tourDisplay.display_id,
+                      )?.title
+                    }
+                  </h4>
+                </li>
+              ))}
+            </ol>
+          </div>
+        </div>
+      </div>
+    )
+  );
+}
diff --git a/src/app/featuredToursPage/[tourId]/tourEndPage/page.tsx b/src/app/featuredToursPage/[tourId]/tourEndPage/page.tsx
@@ -0,0 +1,142 @@
+'use client';
+
+import Link from 'next/link';
+import React, { useEffect, useState } from 'react';
+
+import NavBar from '../../../../components/userComponents/navBar/navBar';
+import {
+  MediaRow,
+  TourRow,
+  TourMediaRow,
+  TourDisplaysRow,
+} from '../../../../types/types';
+import { fetchMedia } from '../../../../supabase/media/queries';
+import { fetchTour } from '../../../../supabase/tours/queries';
+import { fetchTourDisplays } from '../../../../supabase/tour_displays/queries';
+import { fetchTourMedia } from '../../../../supabase/tour_media/queries';
+import {
+  BackArrow,
+  Congratulations,
+  ExternalLinkIcon,
+} from '../../../../../public/icons';
+
+/**
+ * @param params -
+ * @param params.params -
+ * @param params.params.tourId - The tour ID
+ * @returns The tour end page
+ */
+export default function TourEndPage({
+  params,
+}: {
+  params: { tourId: string };
+}) {
+  const [media, setMedia] = useState<MediaRow[]>([]);
+  const [tour, setTour] = useState<TourRow>();
+  const [tourMedia, setTourMedia] = useState<TourMediaRow[]>([]);
+  const [backLink, setBackLink] = useState<string>(
+    `/featuredToursPage/${params.tourId}`,
+  );
+
+  useEffect(() => {
+    // Get tour
+    const getTour = async () => {
+      const fetchedTour = await fetchTour(params.tourId);
+      setTour(fetchedTour);
+    };
+
+    // Get tour media
+    const getTourMedia = async () => {
+      const fetchedTourMedia = await fetchTourMedia(params.tourId);
+      setTourMedia(fetchedTourMedia);
+    };
+
+    // Get media
+    const getMedia = async () => {
+      const fetchedMedia = await fetchMedia();
+      setMedia(fetchedMedia);
+    };
+
+    /**
+     * @returns The link to the previous page.
+     */
+    async function getBackLink() {
+      const tourDisplays: TourDisplaysRow[] = await fetchTourDisplays(
+        params.tourId,
+      );
+      setBackLink(
+        `/featuredToursPage/${params.tourId}/${
+          tourDisplays[tourDisplays.length - 1].display_id
+        }`,
+      );
+    }
+
+    getTour();
+    getTourMedia();
+    getMedia();
+    getBackLink();
+  }, [params.tourId]);
+
+  return (
+    <div className="bg-ivory w-[24.375rem] min-h-screen">
+      <NavBar />
+      <Link href={backLink} className="relative top-4 left-[1.12rem]">
+        <BackArrow />
+      </Link>
+
+      <div className="flex flex-col gap-10 mt-8 mb-10">
+        <div className="flex flex-col items-center gap-8 mx-[3.47rem]">
+          <div className="flex flex-col gap-3 text-center">
+            <div className="flex flex-col items-center gap-5 mx-[2.34rem]">
+              <Congratulations />
+              <h1 className="text-night font-lato text-xl font-semibold">
+                {`You've reached the end of this tour!`}
+              </h1>
+            </div>
+            <p className="text-night font-lato text-sm font-normal">
+              Thanks for visiting {tour?.name}.
+            </p>
+          </div>
+          <div className="bg-asparagus w-[13.75rem] text-center rounded-lg">
+            <Link href="/featuredToursPage">
+              <h2 className="text-ivory font-lato text-base font-bold px-4 py-[0.62rem]">
+                Back to Virtual Tours
+              </h2>
+            </Link>
+          </div>
+        </div>
+
+        <div className="bg-[#F5F6F5] mb-10">
+          <div className="bg-[#BDBDBD] h-[0.03125rem]" />
+          <div className="flex flex-col px-[1.12rem] py-8 gap-6">
+            <h3 className="text-night font-lato font-bold">Related Links</h3>
+            <ol className="px-[0.88rem]">
+              {tourMedia.map((tm, index) => (
+                <li key={tm.media_id} className="flex flex-col gap-4">
+                  <Link
+                    href={media.find(m => m.id === tm.media_id)?.url ?? '-1'}
+                    className="flex flex-col gap-1"
+                  >
+                    <div className="flex flex-row items-center gap-2">
+                      <h4 className="text-shadow font-lato text-sm font-normal uppercase">
+                        {media.find(m => m.id === tm.media_id)?.type}
+                      </h4>
+                      <ExternalLinkIcon />
+                    </div>
+                    <h4 className="text-night font-lato font-medium">
+                      {media.find(m => m.id === tm.media_id)?.title}
+                    </h4>
+                  </Link>
+                  {index !== tourMedia.length - 1 && (
+                    <div className="bg-[#BDBDBD] h-[0.03125rem] mb-6" />
+                  )}
+                </li>
+              ))}
+            </ol>
+          </div>
+          <div className="bg-[#BDBDBD] h-[0.03125rem]" />
+        </div>
+      </div>
+    </div>
+  );
+}