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

Fix Search form on smaller viewports #437

Merged
merged 4 commits into from
Nov 25, 2021
Merged

Fix Search form on smaller viewports #437

merged 4 commits into from
Nov 25, 2021

Conversation

obulat
Copy link
Contributor

@obulat obulat commented Nov 19, 2021

Fixes

Fixes #436 by @obulat
Related to #428 by @obulat

Description

This PR adjusts the styles of the search grid form on screens smaller than lg.
This is the view for small/large screen with these changes:

Screen Shot 2021-11-19 at 12 35 41 PM

Screen Shot 2021-11-19 at 12 35 26 PM

Here is the current version:

Screen Shot 2021-11-19 at 12 17 57 PM

Screen Shot 2021-11-19 at 12 17 40 PM

It also fixes the Checkbox checkmark for RTL by changing the left positioning value to start.
Screen Shot 2021-11-19 at 12 16 30 PM

Testing Instructions

Run the app and search for something, change the screen width, open and close filters and see that the search form height is consistent, and there is a space between the "Filters" button and the search form.

Checklist

  • My pull request has a descriptive title (not a vague title like Update index.md).
  • My pull request targets the default branch of the repository (main) or a parent feature branch.
  • My commit messages follow best practices.
  • My code follows the established code style of the repository.
  • I added or updated tests for the changes I made (if applicable).
  • I added or updated documentation (if applicable).
  • I tried running the project locally and verified that there are no visible errors.

Developer Certificate of Origin

Developer Certificate of Origin
Developer Certificate of Origin
Version 1.1

Copyright (C) 2004, 2006 The Linux Foundation and its contributors.
1 Letterman Drive
Suite D4700
San Francisco, CA, 94129

Everyone is permitted to copy and distribute verbatim copies of this
license document, but changing it is not allowed.


Developer's Certificate of Origin 1.1

By making a contribution to this project, I certify that:

(a) The contribution was created in whole or in part by me and I
    have the right to submit it under the open source license
    indicated in the file; or

(b) The contribution is based upon previous work that, to the best
    of my knowledge, is covered under an appropriate open source
    license and I have the right under that license to submit that
    work with modifications, whether created in whole or in part
    by me, under the same open source license (unless I am
    permitted to submit under a different license), as indicated
    in the file; or

(c) The contribution was provided directly to me by some other
    person who certified (a), (b) or (c) and I have not modified
    it.

(d) I understand and agree that this project and the contribution
    are public and that a record of the contribution (including all
    personal information I submit with it, including my sign-off) is
    maintained indefinitely and may be redistributed consistent with
    this project or the open source license(s) involved.

@obulat obulat requested a review from a team as a code owner November 19, 2021 09:45
@obulat obulat requested review from krysal and dhruvkb November 19, 2021 09:45
@obulat obulat added 🕹 aspect: interface Concerns end-users' experience with the software 🛠 goal: fix Bug fix labels Nov 19, 2021
@obulat obulat self-assigned this Nov 19, 2021
@obulat obulat changed the title Fix/search form mobile Fix Search form on different viewports Nov 19, 2021
Copy link
Contributor

@sarayourfriend sarayourfriend left a comment

Choose a reason for hiding this comment

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

LGTM! 🚀

@obulat obulat changed the title Fix Search form on different viewports Fix Search form on smaller viewports Nov 24, 2021
Copy link
Member

@dhruvkb dhruvkb left a comment

Choose a reason for hiding this comment

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

LGTM!

src/components/SearchGridForm.vue Outdated Show resolved Hide resolved
@obulat obulat merged commit 9d06701 into main Nov 25, 2021
@obulat obulat deleted the fix/search_form_mobile branch November 25, 2021 13:54
rbadillap added a commit that referenced this pull request Nov 30, 2021
* main:
  Update Sass breakpoints to match tailwind (#455)
  Converge `NavSection` components (#454)
  Use a unique `SearchGridFilter` component (#439)
  Set explicit ltr direction for pages untranslated in rtl languages (#434)
  Add VItemGroup component (#410)
  Update video demos for Meta Search (#420)
  Fix Search form on smaller viewports (#437)
  Make Header RTL-compatible (#429)
  🔄 Synced file(s) with WordPress/openverse (#449)
  Removed unused image assets (#404)
  Restore husky (#444)
  Bump axios from 0.21.1 to 0.21.2 (#441)
  Remove husky
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
🕹 aspect: interface Concerns end-users' experience with the software 🛠 goal: fix Bug fix
Projects
None yet
Development

Successfully merging this pull request may close these issues.

SearchGridForm adjusts to screen size changes incorrectly
3 participants