Skip to content

Update the mobile_guide page to the new design. #30006

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.

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

Open
wants to merge 6 commits into
base: develop
Choose a base branch
from

Conversation

pixlwave
Copy link
Member

@pixlwave pixlwave commented May 22, 2025

This PR updates the mobile_guide page to match the new design that we're going to roll out on mobile.element.io (we would like both pages to look the same). It makes the following changes:

  • Splits out the SVGs into a mobile_guide/assets directory (for easy sync with mobile.element.io) and the CSS into an index.css page (adding a new copy rule for the SVGs).
  • Adds a mobile_guide_app_variant to config.json (please let me know if there's a better name or if I missed any steps when adding this).
  • Uses the new config option to configure the page to show the right downloads/deep-link for Element/Element X/Element Pro (defaults to Element).
  • Updates the structure of the page to match the new designs.
    • This includes removing the button to continue on the web, as this wasn't in the design. I'm unsure if there's a need for this I might be missing, I was able to load the site in desktop mode without tapping it which seemed reasonable enough to me for the handful of users who might want to try this?
Element Classic Element X Element Pro
Element Mobile Guide Element Mobile Guide X Element Mobile Guide Pro

Checklist

  • Tests written for new code (and old code if feasible).
  • New or updated public/exported symbols have accurate TSDoc documentation.
  • Linter and other CI checks pass.
  • I have licensed the changes to Element by completing the Contributor License Agreement (CLA)

pixlwave added 5 commits May 22, 2025 12:11
- Extract the CSS & SVGs from the page for easier sync with mobile.element.io
- Update the webpack config to copy the extracted SVGs (webpack magic handles the CSS).
- Initial implementation of the updated design (still more updates to come).
- Allow the page to be configured for Element Classic, X and Pro.

fixup
@pixlwave
Copy link
Member Author

Ok, I don't understand, when I run locally with yarn build && yarn start I had to reference the assets as mobile_guide/assets/*.svg but I see on the Netlify deployment above it is now attempting to fetch mobile_guide/mobile_guide/assets/*.svg. How come it behaves differently there to on my local machine?

@pixlwave pixlwave marked this pull request as ready for review May 22, 2025 16:32
@pixlwave pixlwave requested a review from a team as a code owner May 22, 2025 16:32
@pixlwave pixlwave requested review from t3chguy and MidhunSureshR May 22, 2025 16:32
}

body {
background: #fff;
Copy link
Member Author

Choose a reason for hiding this comment

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

I haven't switched to using var(--cpd-color-*) yet as I'd like to figure out the best way to make this page easy to copy over to mobile.element.io.

Comment on lines +167 to +187
@media screen and (max-width: 1120px) {
body {
font-size: 16px;
}

h2 {
font-size: 16px;
}

.mx_Button {
font-size: 16px;
padding: 12px 16px;
}

.mx_HomePage_header {
justify-content: left;
}

.mx_Spacer {
margin-top: 48px;
}
Copy link
Member Author

Choose a reason for hiding this comment

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

I'm unsure if this is doing anything now, would it be ok to remove it?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant