Netcentric / vg-macktrucks-com-rd

Franklin Site Redesign for https://www.macktrucks.com
Apache License 2.0
1 stars 12 forks source link

Truck features #43 #155

Closed TomaszDziezykNetcentric closed 1 year ago

TomaszDziezykNetcentric commented 1 year ago

Fix #43

Test URLs:

aem-code-sync[bot] commented 1 year ago

Hello, I'm the AEM Code Sync Bot and I will run some test suites that validate the page speed. In case there are problems, just click the checkbox below to rerun the respective action.

aem-code-sync[bot] commented 1 year ago
Page Scores Audits Google
/drafts/tdziezyk/v2/truck-features PERFORMANCE A11Y SEO BEST PRACTICES SI FCP LCP TBT CLS PSI
aem-code-sync[bot] commented 1 year ago
Page Scores Audits Google
/drafts/tdziezyk/v2/truck-features PERFORMANCE A11Y SEO BEST PRACTICES SI FCP LCP TBT CLS PSI
cogniSyb commented 1 year ago

I expect the main browser scrollbar to be present, and that as a user I can also use the keyboard (arrows/spacebar/page up/page down).

Example of this can be found on https://www.elgato.com/eu/en/p/prompter: Screenshot 2023-10-31 at 09 51 04

aem-code-sync[bot] commented 1 year ago
Page Scores Audits Google
/drafts/tdziezyk/v2/truck-features PERFORMANCE A11Y SEO BEST PRACTICES SI FCP LCP TBT CLS PSI
aem-code-sync[bot] commented 1 year ago
Page Scores Audits Google
/drafts/tdziezyk/v2/truck-features PERFORMANCE A11Y SEO BEST PRACTICES SI FCP LCP TBT CLS PSI
TomaszDziezykNetcentric commented 1 year ago

I expect the main browser scrollbar to be present, and that as a user I can also use the keyboard (arrows/spacebar/page up/page down).

Example of this can be found on https://www.elgato.com/eu/en/p/prompter: Screenshot 2023-10-31 at 09 51 04

Updated

aem-code-sync[bot] commented 1 year ago
Page Scores Audits Google
/drafts/tdziezyk/v2/truck-features PERFORMANCE A11Y SEO BEST PRACTICES SI FCP LCP TBT CLS PSI
aem-code-sync[bot] commented 1 year ago
Page Scores Audits Google
/drafts/tdziezyk/v2/truck-features PERFORMANCE A11Y SEO BEST PRACTICES SI FCP LCP TBT CLS PSI
TomaszDziezykNetcentric commented 1 year ago

I am not sure if it is my keyboard. seems to be not working properly for me key up , down, left, right

@Lakshmishri What do you mean that keys up, down, left and right aren't working properly? The key up and down should scroll the page. The left and right buttons shouldn't have any special behavior. I didn't add any special behavior for the keyboard.

aem-code-sync[bot] commented 1 year ago
Page Scores Audits Google
/drafts/tdziezyk/v2/truck-features PERFORMANCE A11Y SEO BEST PRACTICES SI FCP LCP TBT CLS PSI
aem-code-sync[bot] commented 1 year ago
Page Scores Audits Google
/drafts/tdziezyk/v2/truck-features PERFORMANCE A11Y SEO BEST PRACTICES SI FCP LCP TBT CLS PSI
aem-code-sync[bot] commented 1 year ago
Page Scores Audits Google
/drafts/tdziezyk/v2/truck-features PERFORMANCE A11Y SEO BEST PRACTICES SI FCP LCP TBT CLS PSI
aem-code-sync[bot] commented 1 year ago
Page Scores Audits Google
/drafts/tdziezyk/v2/truck-features PERFORMANCE A11Y SEO BEST PRACTICES SI FCP LCP TBT CLS PSI
aem-code-sync[bot] commented 1 year ago
Page Scores Audits Google
/drafts/tdziezyk/v2/truck-features PERFORMANCE A11Y SEO BEST PRACTICES SI FCP LCP TBT CLS PSI
TomaszDziezykNetcentric commented 1 year ago

UX-wise I’m expecting to switch faster to another slide. I think that right now we’re scrolling past the whole image before switching. Could we make it more 'responsive' to the user scroll/keyboard action?

I made the changes. Now we can change the number of pixels needed to change the slide in one variable (SLIDE_SCROLL_PADDING_IN_PX).

taimurCognizant commented 1 year ago
image

@TomaszDziezykNetcentric In mobile view there a is huge space after the bottom text. As per my understanding of the requirements and design the bottom text should stick to the bottom of the mobile screen and the images should be in the middle of the heading and the text @cogniSyb do you have any comments on this?

taimurCognizant commented 1 year ago

@TomaszDziezykNetcentric also the blur effect is missing for mobile. Not sure if that was part of requirement or not

aem-code-sync[bot] commented 1 year ago
Page Scores Audits Google
/drafts/tdziezyk/v2/truck-features PERFORMANCE A11Y SEO BEST PRACTICES SI FCP LCP TBT CLS PSI
aem-code-sync[bot] commented 1 year ago
Page Scores Audits Google
/drafts/tdziezyk/v2/truck-features PERFORMANCE A11Y SEO BEST PRACTICES SI FCP LCP TBT CLS PSI
aem-code-sync[bot] commented 1 year ago
Page Scores Audits Google
/drafts/tdziezyk/v2/truck-features PERFORMANCE A11Y SEO BEST PRACTICES SI FCP LCP TBT CLS PSI
cogniSyb commented 1 year ago

@TomaszDziezykNetcentric In mobile view there a is huge space after the bottom text. As per my understanding of the requirements and design the bottom text should stick to the bottom of the mobile screen and the images should be in the middle of the heading and the text @cogniSyb do you have any comments on this?

Good point, @taimurCognizant. This is a bit difficult to get out of Figma. We might want to use justify-content: space-evenly; or justify-content: center; here for mobile.

TomaszDziezykNetcentric commented 1 year ago

@TomaszDziezykNetcentric also the blur effect is missing for mobile. Not sure if that was part of requirement or not

I agree that the blur effect should be there. Code updated

aem-code-sync[bot] commented 1 year ago
Page Scores Audits Google
/drafts/tdziezyk/v2/truck-features PERFORMANCE A11Y SEO BEST PRACTICES SI FCP LCP TBT CLS PSI
TomaszDziezykNetcentric commented 1 year ago

@TomaszDziezykNetcentric In mobile view there a is huge space after the bottom text. As per my understanding of the requirements and design the bottom text should stick to the bottom of the mobile screen and the images should be in the middle of the heading and the text @cogniSyb do you have any comments on this?

Good point, @taimurCognizant. This is a bit difficult to get out of Figma. We might want to use justify-content: space-evenly; or justify-content: center; here for mobile.

@cogniSyb @taimurCognizant The aligments is updated

obraz
aem-code-sync[bot] commented 1 year ago
Page Scores Audits Google
/drafts/tdziezyk/v2/truck-features PERFORMANCE A11Y SEO BEST PRACTICES SI FCP LCP TBT CLS PSI
aem-code-sync[bot] commented 1 year ago
Page Scores Audits Google
/drafts/tdziezyk/v2/truck-features PERFORMANCE A11Y SEO BEST PRACTICES SI FCP LCP TBT CLS PSI
aem-code-sync[bot] commented 1 year ago
Page Scores Audits Google
/drafts/tdziezyk/v2/truck-features PERFORMANCE A11Y SEO BEST PRACTICES SI FCP LCP TBT CLS PSI
aem-code-sync[bot] commented 1 year ago
Page Scores Audits Google
/drafts/tdziezyk/v2/truck-features PERFORMANCE A11Y SEO BEST PRACTICES SI FCP LCP TBT CLS PSI