Skip to content

Fixed mobile version of checkout progress bar #36982

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 10 commits into from
Dec 4, 2024
Merged

Fixed mobile version of checkout progress bar #36982

Changes from 1 commit
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
a2d99ee
Fixed mobile version of checkout progress bar
nidhigupta13-ey Mar 7, 2023
65e190d
Changed the media conditions as per review comments
nidhigupta13-ey Mar 14, 2023
2951763
Merge branch 'magento:2.4-develop' into issue-36856
nidhigupta13-ey Jun 15, 2023
879705b
Corrected code as per review comment
nidhigupta13-ey Jun 16, 2023
ea73c15
Merge branch 'issue-36856' of github.com:nidhigupta13-ey/magento2 int…
nidhigupta13-ey Jun 16, 2023
548a604
Corrected code as per review comment
nidhigupta13-ey Jun 16, 2023
2df6d51
Merge branch '2.4-develop' into issue-36856
nidhigupta13-ey Jun 22, 2023
f327b1a
Merge branch '2.4-develop' into issue-36856
engcom-Hotel Nov 13, 2024
0a56ecc
Merge branch '2.4-develop' into issue-36856
engcom-Dash Nov 20, 2024
b7472b5
Merge branch '2.4-develop' into issue-36856
engcom-Dash Nov 21, 2024
File filter

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 26 additions & 2 deletions .../frontend/Magento/luma/Magento_Checkout/web/css/source/module/checkout/_progress-bar.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,16 @@
@checkout-progress-bar__font-size: 18px;
@checkout-progress-bar__font-weight: @font-weight__light;
@checkout-progress-bar__margin: @indent__base;
@checkout-progress-bar__margin__mobile: 30px;

@checkout-progress-bar-item__background-color: @color-gray-middle1;
@checkout-progress-bar-item__border-radius: 6px;
@checkout-progress-bar-item__color: @color-gray40;
@checkout-progress-bar-item__margin: @indent__s;
@checkout-progress-bar-item__transition: background .3s;
@checkout-progress-bar-item__width: 185px;
@checkout-progress-bar-item__width__mobile: 165px;
@checkout-progress-bar-item__width__mobile_small: 125px;

@checkout-progress-bar-item__active__background-color: @active__color;
@checkout-progress-bar-item__active__color: @primary__color;
Expand Down Expand Up @@ -57,8 +60,6 @@
// Desktop
// _____________________________________________

Copy link
Contributor

Choose a reason for hiding this comment

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

any reason of remove this media mixin ?
Copy link
Contributor Author

Choose a reason for hiding this comment

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

As this issue is working fine in blank theme. So I compared the code and there as well we don't have any mixin and using the progress bar code irrespective of view. So the progress bar will show in each device.
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {

.opc-progress-bar {
.lib-css(margin, 0 0 @checkout-progress-bar__margin);
counter-reset: i;
Expand Down Expand Up @@ -195,4 +196,27 @@
}
}
}

//
// Mobile max width 600px
//
Copy link
Contributor

@mrtuvn mrtuvn Mar 7, 2023 •
edited
Loading

Choose a reason for hiding this comment

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

should target for mobile device. These lines will also maybe duplicated for desktop
Copy link
Contributor Author

Choose a reason for hiding this comment

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

It is not duplicated. Some kind of thing like margin and width is only changing based on screen size.
Copy link
Contributor

@mrtuvn mrtuvn Mar 13, 2023 •
edited
Loading

Choose a reason for hiding this comment

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

without wrap between media mixins your code styles probably duplicated in both final output files styles-m.css and styles-l.css as i remember before
That's why code base use mixins for target mobile or desktop
Copy link
Contributor

@mrtuvn mrtuvn Mar 13, 2023 •
edited
Loading

Choose a reason for hiding this comment

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

If you want apply for mobile move code between for apply also mobile and desktop

& when (@media-common = true) { //Your code here }
@media only screen and (max-width: 600px) {
.opc-progress-bar {
.lib-css(margin, 0 0 @checkout-progress-bar__margin__mobile);
counter-reset: i;
display: block;
font-size: 0;
}
.opc-progress-bar-item {
Copy link
Contributor

@mrtuvn mrtuvn May 21, 2023 •
edited
Loading

Choose a reason for hiding this comment

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

need whitespace between each selectors
.lib-css(width, @checkout-progress-bar-item__width__mobile);
}
}

//
// Mobile max width 320px and 280px
//
@media (min-width: 280px) and (max-width: 320px) {
.opc-progress-bar-item {
.lib-css(width, @checkout-progress-bar-item__width__mobile_small);
}
Copy link
Contributor

Choose a reason for hiding this comment

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

Also you should use screen variables instead hardcoded fix value
}