Responsive visual issues new product page #35775

mattgoud · 2024-03-28T15:53:57Z

Questions	Answers
Branch?	8.1.x
Description?	see #32218
Type?	bug fix
Category?	BO
BC breaks?	no
Deprecations?	no
How to test?	go to product page and test each tab (fork : https://github.com/mattgoud/PrestaShop/tree/fix/32218-responsive-visual-issues-new-product-page)
UI Tests	https://github.com/florine2623/testing_pr/actions/runs/8797116451 ✅
Fixed issue or discussion?	Fixes #32218 & #36097 (with the exception of point number 4 : creation of a separate issue see #35765
Related PRs	If theme, autoupgrade or other module change is needed to make this change work, provide a link to related PRs here.
Sponsor company	Your company or customer's name goes here (if applicable).

…hree dots alignement (product header), switch alignement (product details - show_condition)

…gnment (low stock alert)

… : position right, modal footer : add padding

…ctions

…ive dropdown menu (carriers available)

…uantities feature

prestonBot · 2024-03-28T15:54:03Z

Hello @mattgoud!

This is your first pull request on the PrestaShop project. Thank you, and welcome to this Open Source community!

prestonBot · 2024-03-28T15:54:04Z

Hi, thanks for this contribution!

I found some issues with the Pull Request description:

Your pull request does not seem to fix any issue, consider creating one (see note below) and linking it by writing Fixes #1234.

Would you mind having a look at it? This will help us understand how interesting your contribution is, thank you very much!

About linked issues

Please consider opening an issue before submitting a Pull Request:

If it's a bug fix, it helps maintainers verify that the bug is effectively due to a defect in the code, and that it hasn't been fixed already.
It can help trigger a discussion about the best implementation path before a single line of code is written.
It may lead the Core Product team to mark that issue as a priority, further attracting the maintainers' attention.

(Note: this is an automated message, but answering it will reach a real human)

SharakPL · 2024-03-28T17:17:55Z

admin-dev/themes/new-theme/scss/pages/product/product_page.scss

+ .material-icons {
+ margin-top: 0;
+ }


I really doubt this requires a selector made of 6 components, including 2 IDs 😱

Did you try adding mt-0 class to that element?

I'm guessing it's not that easy since it's probably nested in some twig partial used in many places, but surely it can be shortened to 2-3 components selector to be specific enough.

I would go for utility classes where we can, maybe not the most performant solution, but it's much safer making changes.

hello, ok this is a somewhat specific need (on a single go-to-catalog button). I have reduced the depth of the classes nesting if you prefer.

…ass for the go-to-catalog button icon

jolelievre

Thanks @mattgoud

MatShir · 2024-04-26T12:32:58Z

I was talking of the number 9 🙄

mattgoud · 2024-04-26T12:49:27Z

I was talking of the number 9 🙄

ok thank you for your feedbacks @MatShir @Hlavtox , yes on mobile it will be a native select. @florine2623 I will only deal with number 3

…e line as the features inputs (see feedback 3 - PR PrestaShop#35775)

paulnoelcholot · 2024-05-27T10:13:03Z

Hello @mattgoud,

I tested your PR and I found this :

But on mobile I found this :

This bug can't be corrected on mobile? 🤔

Thanks for your feedback

Hlavtox · 2024-05-27T10:34:08Z

@paulnoelcholot What is wrong with the second image?

paulnoelcholot · 2024-05-27T11:28:11Z

@Hlavtox, is this the expected behavior? 🤔

Hlavtox · 2024-05-27T11:42:51Z

@paulnoelcholot It looks how it should. 👍

paulnoelcholot · 2024-05-27T11:49:25Z

My apologize!

So it's good for me!

Thanks!

prestonBot · 2024-05-27T11:50:06Z

QA approved, well done! Message to the maintainers: do not forget to milestone it before the merge.

mattgoud added 17 commits March 25, 2024 14:37

style: related PrestaShop#32218 - product footer responsive

279d29d

style: [page-product-tab-details] related PrestaShop#32218 - update t…

d94d317

…hree dots alignement (product header), switch alignement (product details - show_condition)

style: related PrestaShop#32218 - responsive product page - details tab

b914434

style: related PrestaShop#32218 - lint style product_page.scss

27bd765

style: [product-page-stock-tab] related PrestaShop#32218 - switch ali…

da1ebce

…gnment (low stock alert)

style: [product-page-tab-pricing] responsive

721df43

style: [product-page-header] three dots alignement

77d1926

style: [product-page-add-categories-modal] action btns on mobile view…

a0bf168

… : position right, modal footer : add padding

style: [product-page] related PrestaShop#32218 - add space between se…

4ad03d9

…ctions

style: [product-page-option-tab] scrollable table (suppliers table)

c52c2b8

style: [product-page-shipping-tab] related PrestaShop#32218 - respons…

866dd6b

…ive dropdown menu (carriers available)

style: [product-page-stock-tab] - responsive layout for stock delta q…

051849d

…uantities feature

style: [page-product] PrestaShop#32218 - add/remove some margin

761374e

lint: related PrestaShop#32218 - lint scss

c89c9c5

style: [product-catalog] - min-width for filter input ID min/max

049d4c8

lint: fix github check lint job

af136f2

lint: remove EOL in themes/package.json file

8f41bd1

mattgoud requested a review from a team as a code owner March 28, 2024 15:53

prestonBot added 8.1.x Branch Bug fix Type: Bug fix labels Mar 28, 2024

mattgoud force-pushed the fix/32218-responsive-visual-issues-new-product-page branch from 6d35420 to 8f41bd1 Compare March 28, 2024 16:29

lint: [format scss rules] add space before curly braces

eb18382

SharakPL reviewed Mar 28, 2024

View reviewed changes

mattgoud added 2 commits April 9, 2024 11:39

style: [product-page-footer] related PrestaShop#32218 more generic cl…

29b1a59

…ass for the go-to-catalog button icon

lint: related PrestaShop#32218 lint properties order

5c10baf

jolelievre linked an issue Apr 9, 2024 that may be closed by this pull request

Visual issues on the new product page (mobile) #32218

Closed

2 tasks

jolelievre previously approved these changes Apr 9, 2024

View reviewed changes

boherm previously approved these changes Apr 9, 2024

View reviewed changes

mattgoud dismissed jolelievre’s stale review via 12ae5e2 April 26, 2024 10:52

mattgoud force-pushed the fix/32218-responsive-visual-issues-new-product-page branch 2 times, most recently from 12ae5e2 to 5c10baf Compare April 26, 2024 11:54

MatShir removed Waiting for author Status: action required, waiting for author feedback Waiting for QA Status: action required, waiting for test feedback labels Apr 26, 2024

style : [product-page-details-tab] - trash icon is aligned on the sam…

60db6b7

…e line as the features inputs (see feedback 3 - PR PrestaShop#35775)

mattgoud requested review from florine2623 and jolelievre April 26, 2024 15:06

fix: PrestaShop#36097 - product edition display on small screen

334c489

nicosomb mentioned this pull request May 13, 2024

Fixed product edition display on small screen #36125

Closed

jolelievre approved these changes May 13, 2024

View reviewed changes

nicosomb approved these changes May 13, 2024

View reviewed changes

ps-jarvis added the Waiting for QA Status: action required, waiting for test feedback label May 13, 2024

paulnoelcholot added the Waiting for author Status: action required, waiting for author feedback label May 27, 2024

paulnoelcholot removed Waiting for author Status: action required, waiting for author feedback Waiting for QA Status: action required, waiting for test feedback labels May 27, 2024

paulnoelcholot approved these changes May 27, 2024

View reviewed changes

ps-jarvis added the Waiting for QA Status: action required, waiting for test feedback label May 27, 2024

paulnoelcholot added QA ✔️ Status: check done, code approved and removed Waiting for QA Status: action required, waiting for test feedback labels May 27, 2024

nicosomb merged commit dec2a9e into PrestaShop:8.1.x May 27, 2024
38 checks passed

nicosomb added this to the 8.1.7 milestone May 27, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Responsive visual issues new product page #35775

Responsive visual issues new product page #35775

mattgoud commented Mar 28, 2024 •

edited

Loading

prestonBot commented Mar 28, 2024

prestonBot commented Mar 28, 2024

SharakPL Mar 28, 2024 •

edited

Loading

Hlavtox Mar 28, 2024

mattgoud Apr 9, 2024

jolelievre left a comment

MatShir commented Apr 26, 2024 •

edited

Loading

mattgoud commented Apr 26, 2024

paulnoelcholot commented May 27, 2024

Hlavtox commented May 27, 2024

paulnoelcholot commented May 27, 2024

Hlavtox commented May 27, 2024

paulnoelcholot commented May 27, 2024

prestonBot commented May 27, 2024

Responsive visual issues new product page #35775

Responsive visual issues new product page #35775

Conversation

mattgoud commented Mar 28, 2024 • edited Loading

prestonBot commented Mar 28, 2024

prestonBot commented Mar 28, 2024

About linked issues

SharakPL Mar 28, 2024 • edited Loading

Choose a reason for hiding this comment

Hlavtox Mar 28, 2024

Choose a reason for hiding this comment

mattgoud Apr 9, 2024

Choose a reason for hiding this comment

jolelievre left a comment

Choose a reason for hiding this comment

MatShir commented Apr 26, 2024 • edited Loading

mattgoud commented Apr 26, 2024

paulnoelcholot commented May 27, 2024

Hlavtox commented May 27, 2024

paulnoelcholot commented May 27, 2024

Hlavtox commented May 27, 2024

paulnoelcholot commented May 27, 2024

prestonBot commented May 27, 2024

mattgoud commented Mar 28, 2024 •

edited

Loading

SharakPL Mar 28, 2024 •

edited

Loading

MatShir commented Apr 26, 2024 •

edited

Loading