From 13d15c9eb8dc8d69910084d5ca26e96f4a485645 Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Mon, 23 Jan 2023 22:08:17 -0800 Subject: [PATCH 01/24] Added api endpoint --- utils/api.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/utils/api.tsx b/utils/api.tsx index 352f60ed..148df604 100644 --- a/utils/api.tsx +++ b/utils/api.tsx @@ -115,6 +115,11 @@ class Api { return axios.get(resourceUrl, params) } + jobAccessoriesForJob(jobId: string, params?: {}) { + const resourceUrl = `${this.url}/jobs/${jobId}/accessories` + return axios.get(resourceUrl, params) + } + savedTeams(params: {}) { const resourceUrl = `${this.url}/parties/favorites` return axios.get(resourceUrl, params) From fadf422d9afe26705359dbb358c0c851e5fa3ce4 Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Mon, 23 Jan 2023 22:08:23 -0800 Subject: [PATCH 02/24] Added shield asset --- public/icons/Shield.svg | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 public/icons/Shield.svg diff --git a/public/icons/Shield.svg b/public/icons/Shield.svg new file mode 100644 index 00000000..35fe26d8 --- /dev/null +++ b/public/icons/Shield.svg @@ -0,0 +1,3 @@ + + + From 6f32c975ce92725742b74b6cb2cbafcb4282f30c Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Mon, 23 Jan 2023 22:08:38 -0800 Subject: [PATCH 03/24] Extracted display of Job image into a component --- components/JobImage/index.scss | 80 ++++++++++++++++++++++++++++++++ components/JobImage/index.tsx | 61 ++++++++++++++++++++++++ components/JobSection/index.scss | 57 ----------------------- components/JobSection/index.tsx | 14 +++--- 4 files changed, 147 insertions(+), 65 deletions(-) create mode 100644 components/JobImage/index.scss create mode 100644 components/JobImage/index.tsx diff --git a/components/JobImage/index.scss b/components/JobImage/index.scss new file mode 100644 index 00000000..a5004f66 --- /dev/null +++ b/components/JobImage/index.scss @@ -0,0 +1,80 @@ +.JobImage { + $height: 252px; + $width: 447px; + + aspect-ratio: 7/9; + background: url('/images/background_a.jpg'); + background-size: 500px 281px; + border-radius: $unit; + box-sizing: border-box; + box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2); + display: block; + isolation: isolate; + flex-grow: 2; + flex-shrink: 0; + height: $height; + margin-right: $unit * 3; + max-height: $height; + max-width: $width; + overflow: hidden; + position: relative; + width: $width; + transition: box-shadow 0.15s ease-in-out; + + // prettier-ignore + @media only screen + and (max-width: 800px) + and (max-height: 920px) + and (-webkit-min-device-pixel-ratio: 2) { + margin-right: 0; + width: 100%; + } + + @include breakpoint(phone) { + aspect-ratio: 16/9; + margin: 0; + width: 100%; + height: inherit; + } + + img { + -webkit-filter: drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.48)); + filter: drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.48)); + position: relative; + top: $unit * -4; + left: 50%; + transform: translateX(-50%); + width: 100%; + z-index: 2; + } + + .JobAccessory.Button { + align-items: center; + border-radius: 99px; + justify-content: center; + position: relative; + padding: $unit * 1.5; + top: $unit; + left: $unit; + height: auto; + z-index: 10; + + &:hover .Accessory svg { + stroke: var(--button-text-hover); + } + + .Accessory svg { + fill: none; + stroke: var(--button-text); + stroke-width: 3px; + width: $unit-3x; + height: auto; + } + } + + .Overlay { + background: none; + position: absolute; + z-index: 1; + } +} diff --git a/components/JobImage/index.tsx b/components/JobImage/index.tsx new file mode 100644 index 00000000..d7000292 --- /dev/null +++ b/components/JobImage/index.tsx @@ -0,0 +1,61 @@ +import React, { useEffect, useState } from 'react' +import { useRouter } from 'next/router' +import { useTranslation } from 'next-i18next' + +import Button from '~components/Button' +import ShieldIcon from '~public/icons/Shield.svg' +import './index.scss' + +interface Props { + job?: Job + user?: User + onAccessoryButtonClicked: () => void +} + +const ACCESSORY_JOB_IDS = ['683ffee8-4ea2-432d-bc30-4865020ac9f4'] + +const JobImage = ({ job, user, onAccessoryButtonClicked }: Props) => { + // Localization + const { t } = useTranslation('common') + + const router = useRouter() + const locale = + router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en' + + // Static variables + const imageUrl = () => { + let source = '' + + if (job) { + const slug = job.name.en.replaceAll(' ', '-').toLowerCase() + const gender = user && user.gender == 1 ? 'b' : 'a' + source = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/jobs/${slug}_${gender}.png` + } + + return source + } + + const hasAccessory = job && ACCESSORY_JOB_IDS.includes(job.id) + const image = {job?.name[locale]} + + // Elements + const accessoryButton = () => { + return ( +