DEV 97: Search Page Redesign + Card Components Redesign #79
Conversation
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
ApplePieAngel
changed the title
This was referenced Dec 15, 2022
ApplePieAngel
changed the base branch from
main
to
DEV-94-Styling-And-Remaining-Filters
Base automatically changed from
DEV-94-Styling-And-Remaining-Filters
to
main
February 23, 2023 23:38
|
merge conflicts |
* Refactored redundant css and abstracted logic into variables * Refactored out the next and previous buttons for pagination * Refactoring more redundant classes * Abstracted out the showing page range logic * Abstracted pagination buttons into a parent function * Refactored paginationMenu logic to be more readable * Fixed a bug regarding which numbers were rendered in pagination menu * Pagination will now center during mobile sized screens * Align showing x of y results label absolute center relative to container * Removed underline and fixed a bug regarding colors for pagination buttons * Expanded the margins between each button and extended width of next and back buttons * Current page now displays with a purple highlight and white font * Added spacing between Go to page and pagination * GoToPage now has a variable that determines if it's hidden or not * Switching anchor tags to MUI links * 1, 2, 3 pagination.. etc buttons now redirect to the correct link * The ... button now opens up the Go To Page prompt * Implemented Go To Page functionality * DEV-97.2: Pagination, Card, Refactoring and Improvements (#81) * Fixed a bug where Rating wasn't inheriting the right color * Updated pagination with larger icons for the next, back buttons * Fixed a bug with Pagination where the buttons now render as gray * Fixed a bug with ToGoPageX, deleted unnecessary override * Realigned the buttons to be in the center of the purple box * Fixed bug with text overflowing the card component * Refactored out some of the CTA logic * Refactored some rendundant classes, address now links in a new tab * Added a lot of refactoring for redundant css * Added min height for CTA bar * Added additional margins to the Chips * Cleanly render images without the use of booleans * Added 16px margin around the card * DEV-97.3: Search Page Menus and Mobile Menus (#82) * Added components for search options, aligned text and icon * Renamed class names for readability, created parent component for Sort * Sort by bars now extend the length of the page on smaller dimensions * Refactoring component tree into smaller components * Header containing num of search results shrinks in smaller dimensions * Reduced the margin between cards and pagination * Sort bars now collapse at a smaller width * Added extra font weight to the rating CTA * Refactored some redudancy with props drilling * Added dropdown for share button * Fixed a bug regarding Google Maps and locations * Replaced hrefs with react router links prevent re-rendering * Added clear all button and refactored redundant component * Changed Clear All button to be the same size as filter buutton * Deleted unused css, added coloring and borders to the Clear All button * Refactored props composition with Menus * Fixed cards not extending the max length, changed some menu text * Added back the new menu labels for all the menus * Refactored components into one object to make it easier to edit * Phone number buttons no longer appear if there's no input * Align the filter and sort menus for the desktop view * Users can no longer go to the current page with pagination. * Menu now renders under the button rather than off to the side * Changed the Buttons to ListItems, it now changes and saves the current value. * Scrapped list items and implemented changing values with buttons * The selected menu item label has a bolding effect * Changed dropdown menu to gray and selected option is grayer with box shadow * Added additional line height to mobile menus * Adding initial test scaffolding * Adding initial test scaffolding * Added scaffolding for tests * Added scaffolding to business card tests. * Fixed no key in list error, fixed typo in className and fixed unused MUI element * Refactoring all class names to be camelCase * Added box shadow to apply box and removed bottom margin for mobile view * Removed unnecessary prop causing errors. * Removed empty tests, abstracted out pagination function * Added test cases for next button. * Added tests for check valid page number * Testing range of results * Added test cases for reviewCTA, addressRow, titleBar, ShareMenu, OrdinalNumber, formatPhone#, convertAdd.. * Added tests for business cards regarding CTA components * Added tests for SortByMenu * DEV-97.4: Add Report Problem Button in Results Page (#84) * Added SupportButton component from PR 74 * Opening Go To Page no longer adjusts the page height, added support button
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
Before merging: The placeholder photo for images should be removed or replaced with an approved one.
Built on top of the first 30 commits of #78 . In order to make the mobile view easier to implement. I'll make my PRs smaller in scope moving forward.
This feature adds the scaffolding and styling to the Search page redesign.
There's still a long list of features, bugs, optimizations to implement or redundancy but this PR is already way too big. I have a full write up that'll list separately on the Jira board.
Relates to:
DEV-98: CTAs on the card component
DEV-97: Create new card component for a space
DEV-95: Additional filtering once results are displayed.
DEV-49: Add placeholder photo with spaces that no photo.
Screenshots
Ad screenshots of the changes if relevant
Before
After
PR79.mp4
Type of change
Please delete options that are not relevant.
How Has This Been Tested?
Manual testing. As a note I was testing it with React Profiler and I noticed it was re-rendering the chips whenever the user scrolled up and down the chips out of view. This seems like intended behavior in ChipList but I'm not 100% sure why. With the current redesign it causes some subtle adjustments when you scroll down the page for the card components.
I'll be writing test cases for this in a future PR.