This repository has been archived by the owner on Feb 22, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 64
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Move new homepage and 404 to the
default layout (#2075)
* Move the home and 404 pages to default layout * Update snapshots * Fix layout background not re-rendering on changing page * Fix homepage search type selection
- Loading branch information
Showing
66 changed files
with
563 additions
and
297 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
97 changes: 97 additions & 0 deletions
97
src/components/VHeaderOld/VSearchBar/VStandaloneSearchBarOld.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,97 @@ | ||
| <template> | ||
| <form | ||
| class="search-bar group flex h-[57px] flex-row items-center rounded-sm border-tx bg-white md:h-[69px]" | ||
| @submit.prevent="handleSearch" | ||
| > | ||
| <div | ||
| class="input-field search-field group flex h-full flex-grow items-center overflow-hidden rounded-sm border p-0.5px pe-1.5px rounded-e-none border-e-0 focus-within:border-1.5 focus-within:border-pink focus-within:bg-dark-charcoal-06 focus-within:p-0 focus-within:pe-1.5px group-hover:bg-dark-charcoal-06" | ||
| :class="[isHomeRoute ? 'border-tx' : 'border-black']" | ||
| > | ||
| <input | ||
| id="search-bar" | ||
| ref="inputRef" | ||
| type="search" | ||
| name="q" | ||
| :placeholder=" | ||
| $t( | ||
| isHomeRoute ? 'hero.search.placeholder' : '404.search-placeholder' | ||
| ).toString() | ||
| " | ||
| class="h-full w-full appearance-none rounded-none bg-tx text-base leading-none text-dark-charcoal placeholder-dark-charcoal-70 ms-4 focus:outline-none md:text-2xl" | ||
| :aria-label=" | ||
| isHomeRoute | ||
| ? $t('search.search-bar-label', { | ||
| openverse: 'Openverse', | ||
| }).toString() | ||
| : $t('404.search-placeholder').toString() | ||
| " | ||
| /> | ||
| <!-- @slot Extra information goes here --> | ||
| <slot /> | ||
| </div> | ||
| <VSearchButton | ||
| class="flex-shrink-0" | ||
| type="submit" | ||
| size="standalone" | ||
| :route="route" | ||
| /> | ||
| </form> | ||
| </template> | ||
|
|
||
| <script lang="ts"> | ||
| import { | ||
| computed, | ||
| defineComponent, | ||
| PropType, | ||
| ref, | ||
| } from "@nuxtjs/composition-api" | ||
| import { defineEvent } from "~/types/emits" | ||
| import VSearchButton from "~/components/VHeader/VSearchBar/VSearchButton.vue" | ||
| /** | ||
| * Displays a search input for a search query and is attached to an action button | ||
| * that fires a search request. Can contain other elements like the search type | ||
| * popover. Is uncontrolled: Vue code does not try to set a default value when | ||
| * hydrating the server-rendered code, so the value entered before full hydration | ||
| * is not removed. | ||
| */ | ||
| export default defineComponent({ | ||
| name: "VStandaloneSearchBarOld", | ||
| components: { VSearchButton }, | ||
| props: { | ||
| route: { | ||
| type: String as PropType<"home" | "404">, | ||
| default: "home", | ||
| }, | ||
| }, | ||
| emits: { | ||
| submit: defineEvent<[string]>(), | ||
| }, | ||
| setup(props, { emit }) { | ||
| const inputRef = ref<HTMLInputElement | null>(null) | ||
| // Only emit `submit` if the input value is not blank | ||
| const handleSearch = () => { | ||
| const searchTerm = inputRef.value?.value.trim() | ||
| if (searchTerm) { | ||
| emit("submit", searchTerm) | ||
| } | ||
| } | ||
| const isHomeRoute = computed(() => props.route === "home") | ||
| return { | ||
| inputRef, | ||
| handleSearch, | ||
| isHomeRoute, | ||
| } | ||
| }, | ||
| }) | ||
| </script> | ||
| <style scoped> | ||
| .input-field { | ||
| border-inline-end-width: 0; | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,66 @@ | ||
| <template> | ||
| <div> | ||
| <h2 | ||
| class="mt-auto mb-2 text-[40px] font-light leading-tight lg:text-[63px]" | ||
| > | ||
| {{ $t("hero.subtitle") }} | ||
| </h2> | ||
|
|
||
| <p class="text-base leading-relaxed"> | ||
| {{ $t("hero.description") }} | ||
| </p> | ||
|
|
||
| <VStandaloneSearchBar class="mt-4 md:mt-6" @submit="handleSearch"> | ||
| <VSearchTypePopover | ||
| class="mx-3 group-focus-within:bg-white group-hover:bg-white" | ||
| :active-item="searchType" | ||
| placement="searchbar" | ||
| @select="setSearchType" | ||
| /> | ||
| </VStandaloneSearchBar> | ||
|
|
||
| <!-- Disclaimer for large screens --> | ||
| <i18n path="hero.disclaimer.content" tag="p" class="mt-4 text-sr"> | ||
| <template #openverse>Openverse</template> | ||
| <template #license> | ||
| <VLink | ||
| href="https://creativecommons.org/licenses/" | ||
| class="text-dark-charcoal underline hover:text-dark-charcoal" | ||
| >{{ $t("hero.disclaimer.license") }}</VLink | ||
| > | ||
| </template> | ||
| </i18n> | ||
| </div> | ||
| </template> | ||
| <script lang="ts"> | ||
| import type { SearchType } from "~/constants/media" | ||
| import VLink from "~/components/VLink.vue" | ||
| import VStandaloneSearchBar from "~/components/VHeader/VSearchBar/VStandaloneSearchBar.vue" | ||
| import VSearchTypePopover from "~/components/VContentSwitcher/VSearchTypePopover.vue" | ||
| import type { PropType } from "@nuxtjs/composition-api" | ||
| export default { | ||
| name: "VHomepageContent", | ||
| components: { VSearchTypePopover, VStandaloneSearchBar, VLink }, | ||
| props: { | ||
| handleSearch: { | ||
| type: Function as PropType<(query: string) => void>, | ||
| required: true, | ||
| }, | ||
| searchType: { | ||
| type: String as PropType<SearchType>, | ||
| required: true, | ||
| }, | ||
| setSearchType: { | ||
| type: Function as PropType<(searchType: SearchType) => void>, | ||
| required: true, | ||
| }, | ||
| }, | ||
| } | ||
| </script> | ||
| <style> | ||
| @screen lg { | ||
| } | ||
| </style> |
Oops, something went wrong.