Skip to content
This repository has been archived by the owner on Feb 22, 2023. It is now read-only.

Make Homepage and Searchbar RTL-compatible #427

Merged
merged 6 commits into from
Nov 18, 2021
Merged

Make Homepage and Searchbar RTL-compatible #427

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
9991573
Fix homepage search form style for rtl
obulat Nov 18, 2021
f66caba
Fix search bar styles for rtl
obulat Nov 18, 2021
5078658
Align ScrollButton to the end of the page
obulat Nov 18, 2021
52f457a
Adjust SearchGridForm and SaferBrowsing
obulat Nov 18, 2021
6350849
Make Homepage RTL-compatible (#425)
dhruvkb Nov 18, 2021
8f3c7e1
Apply code review suggestions
obulat Nov 18, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 8 additions & 37 deletions src/components/HeroSection.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,34 +1,37 @@
<template>
<!-- eslint-disable vuejs-accessibility/no-autofocus -->
<div class="hero">
<div class="hero-center text-center">
<div class="text-center mt-16">
<h1 class="text-5xl pb-4">
{{ $t('hero.title') }}
</h1>
<h2 class="text-2xl font-medium">
{{ $t('hero.subtitle') }}
</h2>
<form
class="hero-search__form mt-12"
class="relative w-full px-2 mt-12"
role="search"
method="get"
action="/search"
@submit.prevent="onSubmit"
>
<div class="hero-search__control">
<div class="flex justify-center">
<input
id="searchTerm"
v-model.lazy="form.searchTerm"
required="required"
class="hero-search__input input"
class="hero-search__input input rounded rounded-e-none -me-px text-start lg:px-10 w-full max-w-full"
:aria-label="$t('hero.aria.search')"
autofocus
type="search"
name="q"
:placeholder="$t('hero.search.placeholder')"
autocapitalize="none"
/>
<button class="hero-search__button button is-primary" title="Search">
<button
class="hero-search__button button is-primary rounded rounded-s-none"
title="Search"
>
{{ $t('hero.search.button') }}
</button>
</div>
Expand Down Expand Up @@ -146,35 +149,15 @@ $hero-height: 55vh;
min-height: $hero-height-desktop;
}
}
.hero-center {
margin-top: 4rem;
}
.hero-search {
&__form {
position: relative;
width: 100%;
padding: 0 0.5em 0 0.5em;
}
&__control {
display: flex;
justify-content: center;
}
&__input {
margin-right: -1px;
border-bottom-right-radius: 0;
border-top-right-radius: 0;
width: 100%;
max-width: 100%;
@screen lg {
width: 570px;
font-size: 1.75rem;
height: 5.063rem;
padding-left: 1.5rem;
}
}
&__button {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
font-size: 1rem;
padding: 0.5rem 1.2rem;
@screen lg {
Expand All @@ -186,18 +169,6 @@ $hero-height: 55vh;
}
}

.help-links {
z-index: 1;
position: absolute;
bottom: 1rem;
left: 1rem;
}

.help-icon {
height: 32px;
vertical-align: middle;
}

.logo-cloud {
z-index: 0;
margin-top: auto;
Expand Down
21 changes: 2 additions & 19 deletions src/components/HomeLicenseFilter.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
<template>
<fieldset class="home-license-filter mt-16">
<legend>
<legend class="w-full text-center">
{{ $t('hero.license-filter.label') }}
</legend>
<template v-for="(licenseType, index) in filters">
<label :key="index" class="checkbox" :for="licenseType.code">
<label :key="index" class="checkbox mx-3" :for="licenseType.code">
<input
:id="licenseType.code"
v-model="licenseType.checked"
Expand Down Expand Up @@ -43,20 +43,3 @@ export default {
},
}
</script>

<style lang="scss" scoped>
.home-license-filter {
display: flex;
justify-content: center;
legend {
display: flex;
justify-content: center;
width: 100%;
margin-bottom: 0.5rem;
}
}

.checkbox:not(:last-child) {
margin-right: 1.5rem;
}
</style>
24 changes: 6 additions & 18 deletions src/components/SaferBrowsing.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,18 @@
<template>
<div class="safer-browsing" @keyup.esc="closeShowForm">
<div class="relative" @keyup.esc="closeShowForm">
<button
class="button is-text tiny p-0 rating"
@keypress.enter="toggleShowForm"
type="button"
class="appearance-none px-0 leading-10 text-xs text-trans-blue font-semibold"
style="white-space: nowrap"
@click="toggleShowForm"
>
<span class="text-trans-blue" style="white-space: nowrap">
{{ $t('browse-page.safer-browsing.title') }}
<i class="icon flag ms-2" />
</span>
{{ $t('browse-page.safer-browsing.title') }}
</button>
<FocusTrap :active="true">
<div v-show="showForm" class="p-4 arrow-popup arrow-popup--anchor-right">
<button
class="button close-button is-text tiny float-right block text-light-gray"
@keypress.enter="toggleShowForm"
type="button"
@click="toggleShowForm"
>
<i class="icon cross" />
Expand Down Expand Up @@ -74,13 +72,3 @@ export default {
},
}
</script>

<style>
.safer-browsing {
position: relative;
}

.safer-browsing > .button.tiny {
font-size: 0.8rem;
}
</style>
2 changes: 1 addition & 1 deletion src/components/ScrollButton.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<button
v-if="showBtn"
:aria-label="$t('browse-page.aria.scroll')"
class="scroll text-white bg-trans-blue hover:bg-trans-blue-action transition-all duration-100 ease-linear fixed right-4 bottom-4 w-14 h-14 hover:shadow-md rounded-full text-center"
class="scroll text-white bg-trans-blue hover:bg-trans-blue-action transition-all duration-100 ease-linear fixed end-4 bottom-4 w-14 h-14 hover:shadow-md rounded-full text-center"
@click="scrollToTop"
@keyup.enter="scrollToTop"
>
Expand Down
46 changes: 18 additions & 28 deletions src/components/SearchGridForm.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,8 @@
{{ $t('filters.title') }}
</button>
<div
class="search-field field has-addons control search-control has-icons-left ms-2"
class="search-field field has-addons control search-control"
:class="{ 'ms-2': isFilterVisible }"
>
<label for="searchInput" class="search-field__label control label">
<input
Expand All @@ -25,15 +26,15 @@
:aria-label="$t('browse-page.aria.search')"
required="required"
autofocus="true"
class="search-field__input input"
class="search-input input placeholder-dark-charcoal-50 placeholder-opacity-50"
type="search"
:placeholder="searchBoxPlaceholder"
:value="searchTermsModel"
@input="onInput"
@keyup.enter="onSubmit"
/>
</label>
<span class="icon is-left">
<span class="search-icon icon">
<svg
viewBox="0 0 30 30"
xmlns="http://www.w3.org/2000/svg"
Expand All @@ -49,10 +50,9 @@
</span>
<input
type="submit"
class="control button is-primary"
class="control button is-primary rounded rounded-s-none text-2xl"
:value="$t('browse-page.search-form.button')"
@click.prevent="onSubmit"
@keyup.enter.prevent="onSubmit"
/>
</div>
</form>
Expand Down Expand Up @@ -137,7 +137,18 @@ export default {
height: 3.875rem;
}
}

.search-icon {
@apply start-0 text-light-gray w-10 h-10 absolute items-center inline-flex justify-center pointer-events-none;
}
.search-input {
@apply w-full max-w-full h-10 relative appearance-none items-center justify-start -me-px ps-10;
@apply text-2xl text-start font-semibold placeholder-dark-charcoal-70;
@apply border border-light-gray rounded rounded-e-none focus:outline-none focus:border-gray;
@screen lg {
font-size: 1.43rem;
height: 3.875rem;
}
}
.search-form {
width: 100%;
top: 0;
Expand All @@ -146,18 +157,6 @@ export default {
display: flex;
}

.has-addons {
.control:first-child:not(:only-child),
.control:first-child:not(:only-child) .input {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
margin-right: -1px;
}
.button {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
}
}
.search-field {
display: flex;
width: 100%;
Expand All @@ -171,22 +170,13 @@ export default {
flex: 1;
margin-bottom: 0;
}
.input {
font-size: 1rem;
height: 2.5rem;
@screen lg {
font-size: 1.43rem;
height: 3.875rem;
}
}

.icon {
top: calc(50% - 1.25em);
}
.button {
font-size: 1rem;
padding: 0.5rem calc(1rem + 0.2rem);
@screen lg {
font-size: 1.43rem;
padding-left: var(--button-padding-horizontal);
padding-right: var(--button-padding-horizontal);
height: 3.875rem;
Expand Down
1 change: 0 additions & 1 deletion src/styles/form/shared.sass
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ $input-arrow: $color-dark-gray
border-width: 1px

height: 2.5em
padding-left: $space-small
background-color: $color-white
color: $color-dark-slate-gray
&::placeholder
Expand Down
27 changes: 0 additions & 27 deletions src/styles/form/tools.sass
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,33 +33,6 @@ $help-size: $size-small !default
display: flex
justify-content: flex-start
.control
&:not(:last-child)
+ltr-property("margin", -1px)
&:not(:first-child):not(:last-child)
.button,
.input,
.select select
border-radius: 0
&:first-child:not(:only-child)
.button,
.input,
.select select
+ltr
border-bottom-right-radius: 0
border-top-right-radius: 0
+rtl
border-bottom-left-radius: 0
border-top-left-radius: 0
&:last-child:not(:only-child)
.button,
.input,
.select select
+ltr
border-bottom-left-radius: 0
border-top-left-radius: 0
+rtl
border-bottom-right-radius: 0
border-top-right-radius: 0
.button,
.input,
.select select
Expand Down
5 changes: 3 additions & 2 deletions test/unit/specs/components/search-grid-filter.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ const initialFilters = {
imageExtensions: [{ code: 'jpg', name: 'JPG', checked: false }],
imageProviders: [{ code: 'met', name: 'Metropolitan', checked: false }],
audioProviders: [{ code: 'jamendo', name: 'Jamendo', checked: false }],
sizes: [{ code: 'small', name: 'small', checked: false }],
aspectRatios: [],
searchBy: [{ code: 'creator', checked: false }],
mature: false,
Expand Down Expand Up @@ -89,7 +90,7 @@ describe('SearchGridFilter', () => {
const checked = screen.queryAllByRole('checkbox', { checked: true })
expect(checked.length).toEqual(0)

await fireEvent.click(screen.queryByLabelText('Commercial usage'))
await fireEvent.click(screen.queryByLabelText(/commercial/i))

// `getBy` serves as expect because it throws an error if no element is found
screen.getByRole('checkbox', { checked: true })
Expand All @@ -109,7 +110,7 @@ describe('SearchGridFilter', () => {
})
expect(checkedFilters.length).toEqual(0)
// Filters are reset with the initial `filterData`
expect(uncheckedFilters.length).toEqual(22)
expect(uncheckedFilters.length).toEqual(25)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why is this changing?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Because previously we didn't have the sizes in mock filters in this test. Without them, the filter handling in search store fails. And after adding the sizes option, the number of filters goes up 3 (for small, medium and large, IIRC). The filters filtering (or typing, maybe) needs to be a bit more robust, I guess, because sometimes tests pass non-array objects to some functions that use .filter over them.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah okay, thanks for explaining 🙂 I saw that we added the sizes to the filter but I didn't realize it added three more options instead of just one size 😂 But I get it now!

})

it('toggles search visibility', async () => {
Expand Down