diff --git a/src/App.scss b/src/App.scss index 71031c07..29430716 100644 --- a/src/App.scss +++ b/src/App.scss @@ -62,6 +62,7 @@ // for example media object known from OOCSS. @import 'scss/objects/review-page'; @import 'scss/objects/homepage'; +@import 'scss/objects/home-header'; // ===================================================================== // 6. Components @@ -76,9 +77,9 @@ @import 'scss/components/review-header'; @import 'scss/components/review-nav'; @import 'scss/components/review-submission'; -@import 'scss/components/sparkeats-subtitle'; -@import 'scss/components/location-dropdown'; +@import 'scss/components/site-subtitle'; @import 'scss/components/location-new'; +@import 'scss/components/location-select'; // ===================================================================== // 7. Vendors diff --git a/src/App.tsx b/src/App.tsx index 9f920782..4d08a49f 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -4,9 +4,9 @@ import { SiteHeader } from './components/SiteHeader'; export function App() { return ( -
+
-
+ ); } diff --git a/src/components/HomeHeader.tsx b/src/components/HomeHeader.tsx new file mode 100644 index 00000000..aa8dd243 --- /dev/null +++ b/src/components/HomeHeader.tsx @@ -0,0 +1,21 @@ +import { Link } from 'react-router-dom'; +import SiteSubtitle from './SiteSubtitle'; +import LocationMenu from './LocationMenu'; + +function HomeHeader() { + return ( +
+ + + + +
+ + Add a Location + +
+
+ ); +} + +export default HomeHeader; diff --git a/src/components/HomePage/index.tsx b/src/components/HomePage/index.tsx index 76bb1440..8f7ba252 100644 --- a/src/components/HomePage/index.tsx +++ b/src/components/HomePage/index.tsx @@ -1,3 +1,4 @@ +import HomeHeader from '../HomeHeader'; import { LocationCards } from './LocationCards'; import { useLocations } from '../../useLocations'; @@ -6,7 +7,7 @@ export function HomePage() { return (
-
Home Header
+
); diff --git a/src/components/LocationMenu.tsx b/src/components/LocationMenu.tsx new file mode 100644 index 00000000..c77b490b --- /dev/null +++ b/src/components/LocationMenu.tsx @@ -0,0 +1,24 @@ +import { uniqueCities } from '../locations'; + +function LocationMenu() { + return ( +
+

+ +

+ + +
+ ); +} + +export default LocationMenu; diff --git a/src/components/SiteSubtitle.tsx b/src/components/SiteSubtitle.tsx new file mode 100644 index 00000000..7b96eaef --- /dev/null +++ b/src/components/SiteSubtitle.tsx @@ -0,0 +1,5 @@ +function SiteSubtitle() { + return

Food reviews and restaurant ratings

; +} + +export default SiteSubtitle; diff --git a/src/locations.ts b/src/locations.ts index 19636b56..f831a078 100644 --- a/src/locations.ts +++ b/src/locations.ts @@ -161,6 +161,13 @@ function transformLocations(legacyPlaces: LegacyPlace[]): Locations { .reduce(mapLocation, {}); } +function getUniqueCities(locations: Locations): string[] { + return Array.from( + new Set(Object.values(locations).map((location) => location.city)) + ); +} + const locations = transformLocations(legacyPlaces); +const uniqueCities = getUniqueCities(locations); -export { locations }; +export { locations, uniqueCities }; diff --git a/src/scss/components/_location-dropdown.scss b/src/scss/components/_location-dropdown.scss deleted file mode 100644 index f137baf5..00000000 --- a/src/scss/components/_location-dropdown.scss +++ /dev/null @@ -1,87 +0,0 @@ -.location-dropdown { - @media (min-width: $bp-grid-three-col) { - width: 33%; - } - - &__title { - font-family: $roboto-stack; - font-size: 1rem; - margin-bottom: 0.5rem; - } - - &__button { - box-sizing: border-box; - cursor: pointer; - background-color: $tertiary-color; - width: 100%; - padding: 0.5rem; - border: 1px solid #4f4f4f; - } - - &__button .location-dropdown { - &__button-arrow { - display: block; - float: right; - height: 0.5em; - width: 0.5em; - transform: rotate(135deg); - border: solid $accent-color; - border-width: 0.15rem 0.15rem 0 0; - - // center the arrow vertically. - margin: 0.2rem 0.25rem 0 0; - } - } - - &__button[aria-expanded='true'] .location-dropdown { - &__button-arrow { - transform: rotate(-45deg); - } - } - - &__button-text { - float: left; - font-family: $roboto-stack; - line-height: 120%; - } - - &__list { - display: none; - - & ul { - & li { - width: 100%; - } - } - - &--open { - display: block; - } - } - - &__list-button { - cursor: pointer; - line-height: 120%; - border-radius: 0; - padding: 0.25rem 0; - border: 1px solid #4f4f4f; - border-top: none; - width: 100%; - box-sizing: border-box; - background-color: $tertiary-color; - font-family: $roboto-stack; - text-align: left; - padding-left: 0.5rem; - - &:hover, - &:focus { - color: $tertiary-color; - background-color: $primary-color; - text-decoration: underline; - } - } -} - -.hidden { - display: none; -} diff --git a/src/scss/components/_location-select.scss b/src/scss/components/_location-select.scss new file mode 100644 index 00000000..c446a7cc --- /dev/null +++ b/src/scss/components/_location-select.scss @@ -0,0 +1,45 @@ +.location-select { + @media (min-width: $bp-grid-three-col) { + width: 33%; + } + + &__title { + font-family: $roboto-stack; + font-size: 1rem; + margin-bottom: 0.5rem; + } + + &__menu { + appearance: none; + cursor: pointer; + box-sizing: border-box; + width: 100%; + border: 1px solid #4f4f4f; + padding: 0.5rem; + background-color: $tertiary-color; + font-family: $roboto-stack; + text-transform: capitalize; + letter-spacing: inherit; + word-spacing: inherit; + line-height: 120%; + + // Custom select arrow + padding-right: 1.5rem; + background-repeat: no-repeat; + background-position: calc(100% - 0.5rem); + background-size: 1rem auto; + background-image: url("data:image/svg+xml,"); + } + + &__button .location-select { + &__button-arrow { + display: block; + float: right; + height: 0.5em; + width: 0.5em; + transform: rotate(135deg); + border: solid $accent-color; + border-width: 0.15rem 0.15rem 0 0; + } + } +} diff --git a/src/scss/components/_sparkeats-subtitle.scss b/src/scss/components/_site-subtitle.scss similarity index 92% rename from src/scss/components/_sparkeats-subtitle.scss rename to src/scss/components/_site-subtitle.scss index 48d4b574..2a632d42 100644 --- a/src/scss/components/_sparkeats-subtitle.scss +++ b/src/scss/components/_site-subtitle.scss @@ -1,4 +1,4 @@ -.sparkeats-subtitle { +.site-subtitle { font-family: $oswald-stack; font-size: 2rem; font-weight: $oswald-bold; diff --git a/src/scss/objects/_home-header.scss b/src/scss/objects/_home-header.scss new file mode 100644 index 00000000..f90580a2 --- /dev/null +++ b/src/scss/objects/_home-header.scss @@ -0,0 +1,12 @@ +.home-header { + margin: 4rem auto 5rem; + width: 80%; + + &__button { + margin-top: 2rem; + + @media (min-width: 64rem) { + width: 33%; + } + } +} diff --git a/src/scss/objects/_homepage.scss b/src/scss/objects/_homepage.scss index 67d2c206..f9e568ee 100644 --- a/src/scss/objects/_homepage.scss +++ b/src/scss/objects/_homepage.scss @@ -1,11 +1,6 @@ .homepage { padding-top: 1px; - &__header { - margin: 4rem auto 5rem; - width: 80%; - } - &__cards { margin: 2rem auto 4rem; width: 80%;