Make Homepage and Searchbar RTL-compatible (#427)

* Fix homepage search form style for rtl * Fix search bar styles for rtl * Align ScrollButton to the end of the page * Adjust SearchGridForm and SaferBrowsing * Make Homepage RTL-compatible (#425) * Remove all styling to make the component RTL-compatible * Change `.hero-search__form` and `.hero-search__control` to Tailwind * Remove redundant CSS * Fix rounded-corners on input and button * Center text inside the legend Co-authored-by: Olga Bulat <obulat@gmail.com> * Apply code review suggestions Co-authored-by: Dhruv Bhanushali <dhruv_b@live.com>
WordPress · Nov 18, 2021 · 8539e42 · 8539e42
1 parent 73490b9
commit 8539e42
Show file tree

Hide file tree

Showing 8 changed files with 38 additions and 133 deletions.
diff --git a/src/components/HeroSection.vue b/src/components/HeroSection.vue
@@ -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>
@@ -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 {
@@ -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;

diff --git a/src/components/HomeLicenseFilter.vue b/src/components/HomeLicenseFilter.vue
@@ -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"
@@ -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>
diff --git a/src/components/SaferBrowsing.vue b/src/components/SaferBrowsing.vue
@@ -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" />
@@ -74,13 +72,3 @@ export default {
   },
 }
 </script>
-
-<style>
-.safer-browsing {
-  position: relative;
-}
-
-.safer-browsing > .button.tiny {
-  font-size: 0.8rem;
-}
-</style>
diff --git a/src/components/ScrollButton.vue b/src/components/ScrollButton.vue
@@ -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"
   >

diff --git a/src/components/SearchGridForm.vue b/src/components/SearchGridForm.vue
@@ -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
@@ -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"
@@ -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>
@@ -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;
@@ -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%;
@@ -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;

diff --git a/src/styles/form/shared.sass b/src/styles/form/shared.sass
@@ -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

diff --git a/src/styles/form/tools.sass b/src/styles/form/tools.sass
@@ -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

diff --git a/test/unit/specs/components/search-grid-filter.spec.js b/test/unit/specs/components/search-grid-filter.spec.js
@@ -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,
@@ -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 })
@@ -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)
   })
 
   it('toggles search visibility', async () => {