QoL Features for the List Item Modal #327
Merged
Conversation
This file contains hidden or 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
There was a problem hiding this comment.
Pull Request Overview
This PR enriches the list-item modal with feature parity to the /sell page by adding new links, a blog banner, price assessment labels, and privacy toggles.
- Introduces new CSS rules for the auction info banner, percentage assessment, and visibility buttons.
- Implements
getPercentageAssessment, renders SVG icons, and adds a private/public listing option. - Adds external links for “Search Similar Items” and “Prefer the website? Visit it here”.
Reviewed Changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| src/lib/components/inventory/list_item_modal_styles.ts | Added styles for percentage assessment, auction-info-banner, and visibility selector; refined colors and spacing. |
| src/lib/components/inventory/list_item_modal.ts | Introduced SVG icons, isPrivate state, search URL getter, assessment logic, auction banner, visibility buttons, and external links. |
Comments suppressed due to low confidence (4)
src/lib/components/inventory/list_item_modal.ts:357
- The logic in
getPercentageAssessmentand its corresponding UI rendering lacks unit or integration tests; consider adding tests for each percentage range to verify correct labels, colors, and icons.
private getPercentageAssessment(percentage: number): {label: string; color: string; icon: string} {
src/lib/components/inventory/list_item_modal.ts:408
- The class
success-linkis applied here but not defined in the stylesheet; add a rule for it inlist_item_modal_styles.tsor remove the unused class.
<a href="${this.searchUrl}" target="_blank" class="base-button secondary-button success-link">
src/lib/components/inventory/list_item_modal.ts:572
- SVG icons injected via
innerHTMLare missingaria-hidden="true"or other accessibility attributes; addaria-hiddento indicate these are decorative.
<div class="percentage-assessment-icon" .innerHTML="${percentageAssessment.icon}"></div>
src/lib/components/inventory/list_item_modal.ts:561
- Binding the slider to
this.pricePercentagewill fail becausepricePercentageis not a class property; define a reactive state for it or bind directly to the computedpricePercentagevariable.
.value="${this.pricePercentage.toString()}"
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
|
Added a new description field now. Per default this it is hidden behind a "plus"-button to avoid overwhelming the user. I also fixed another issue from the original modal PR, which caused the slider to not be updated when manually entering a price (35a60b4). |
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.
Motivation
The new listing modal only contains a small subset of features from the website. Users may want more customization options.
Description
This PR adds new elements to the "list item"-modal to provide higher feature parity with the CSFloat website. This includes:
/sell)/sell)Screenshot
After clicking the "plus" for the description: