Skip to content
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

Jump to bottom

Make the header switcher styles more flexible #27495

Merged
merged 1 commit into from
Apr 4, 2020
Merged

Make the header switcher styles more flexible #27495

merged 1 commit into from
Apr 4, 2020

Conversation

vasilii-b
Copy link

Description (*)

This PR aims to make the switcher styles in the header more specific: the desktop styles must not apply for mobile as well.

description from the original (abandoned) PR
The issue I encountered was related to the duplicated store switcher block for the mobile navigation, which is part of the navigation.sections.

The styling which is here added for the dropdown of the store switcher for the desktop variant, is currently also applied to the mobile variant when moved into the header-wrapper (to have the category navigation on Desktop between logo and other Header Parts)

Related Pull Requests

  1. make store switcher style more resistent #26879 - make store switcher style more resistent

Fixed Issues (if relevant)

N/A

Manual testing scenarios (*)

  1. have a layout xml which moves the navigation.sectionsinto the `header-wrapper``
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <move element="navigation.sections" destination="header-wrapper" after="logo"/>
    </body>
</page>
  1. reduce the Website to "mobile size" (320px or 375ox wide) and check the store switcher in the mobile navigation

Result

The changes affect both Blank and Luma themes

Blank

Desktop Mobile
result-blank-desktop result-blank-mobile

Luma

Desktop Mobile
result-luma-desktop result-luma-mobile

Questions or comments

Contribution checklist (*)

  • Pull request has a meaningful description of its purpose
  • All commits are accompanied by meaningful commit messages
  • All new or changed code is covered with unit/integration tests (if applicable)
  • All automated tests passed successfully (all builds are green)

make the switcher styles in the header more specific
94bdc67 
desktop styles must not apply for mobile devices as well
@m2-assistant
Copy link

m2-assistant bot commented Mar 30, 2020

Hi @vasilii-b. Thank you for your contribution
Here is some useful tips how you can test your changes using Magento test environment.
Add the comment under your pull request to deploy test or vanilla Magento instance:

  • @magento give me test instance - deploy test instance based on PR changes
  • @magento give me 2.4-develop instance - deploy vanilla Magento instance

For more details, please, review the Magento Contributor Guide documentation.

@magento-engcom-team magento-engcom-team added Release Line: 2.4 Partner: Atwix Pull Request is created by partner Atwix partners-contribution Pull Request is created by Magento Partner labels Mar 30, 2020
@VitaliyBoyko VitaliyBoyko self-assigned this Mar 30, 2020
@VitaliyBoyko VitaliyBoyko self-requested a review March 30, 2020 10:32
@VitaliyBoyko
Copy link
Contributor

@magento give me test instance

@magento-engcom-team
Copy link
Contributor

Hi @VitaliyBoyko. Thank you for your request. I'm working on Magento instance for you

@magento-engcom-team
Copy link
Contributor

Hi @VitaliyBoyko, here is your new Magento instance.
Admin access: https://pr-27495.instances.magento-community.engineering/admin_29ed
Login: ff85d71c Password: 7774ea0a8785
Instance will be terminated in up to 3 hours.

@VitaliyBoyko VitaliyBoyko added the Auto-Tests: Not Required Changes in Pull Request does not require coverage by auto-tests label Mar 30, 2020
@VitaliyBoyko
Copy link
Contributor

Looks good ✅
Switcher desktop:
image
Switcher mobile:
image

@magento-engcom-team
Copy link
Contributor

Hi @VitaliyBoyko, thank you for the review.
ENGCOM-7226 has been created to process this Pull Request

@engcom-Alfa engcom-Alfa self-assigned this Mar 31, 2020
@engcom-Alfa
Copy link
Contributor

✔️ QA Passed

Before (luma):
Screenshot from 2020-03-31 12-28-19
Before (blank):
Screenshot from 2020-03-31 13-13-21

After(luma):
mobile
Screenshot from 2020-03-31 12-41-11
desktop
Screenshot from 2020-03-31 12-49-16

After(blank):
mobile
Screenshot from 2020-03-31 13-04-58

desktop
Screenshot from 2020-03-31 13-01-08

@engcom-Echo engcom-Echo self-assigned this Apr 1, 2020
@engcom-Echo
Copy link
Contributor

@magento run Functional Tests B2B, Functional Tests CE, Functional Tests EE

@engcom-Echo
Copy link
Contributor

@magento run Unit Tests

magento-engcom-team pushed a commit that referenced this pull request Apr 4, 2020
@slavvka
ENGCOM-7226: Make the header switcher styles more flexible #27495
4c686df
@magento-engcom-team magento-engcom-team merged commit dc23cfc into magento:2.4-develop Apr 4, 2020
@m2-assistant
Copy link

m2-assistant bot commented Apr 4, 2020

Hi @vasilii-b, thank you for your contribution!
Please, complete Contribution Survey, it will take less than a minute.
Your feedback will help us to improve contribution process.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@VitaliyBoyko VitaliyBoyko VitaliyBoyko approved these changes

Assignees

@VitaliyBoyko VitaliyBoyko

@engcom-Alfa engcom-Alfa

@engcom-Echo engcom-Echo

Labels
Area: Design/Frontend Auto-Tests: Not Required Changes in Pull Request does not require coverage by auto-tests Award: bug fix Event: Global-Contribution-Day Partner: Atwix Pull Request is created by partner Atwix partners-contribution Pull Request is created by Magento Partner Progress: accept Release Line: 2.4
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
5 participants
@vasilii-b @VitaliyBoyko @magento-engcom-team @engcom-Alfa @engcom-Echo