From 6914791c39ca34286d2d0e4b9239052daf885b1a Mon Sep 17 00:00:00 2001 From: Doug Date: Thu, 22 May 2025 11:55:36 +0100 Subject: [PATCH 01/19] Rework the structure of mobile_guide. - 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 --- .../mobile_guide/assets/app-store-badge.svg | 46 ++ .../mobile_guide/assets/bottom-gradient.svg | 53 ++ .../mobile_guide/assets/element-logo.svg | 8 + .../mobile_guide/assets/google-play-badge.svg | 23 + src/vector/mobile_guide/index.css | 154 ++++ src/vector/mobile_guide/index.html | 771 +----------------- src/vector/mobile_guide/index.ts | 101 ++- webpack.config.js | 6 + 8 files changed, 415 insertions(+), 747 deletions(-) create mode 100755 src/vector/mobile_guide/assets/app-store-badge.svg create mode 100644 src/vector/mobile_guide/assets/bottom-gradient.svg create mode 100644 src/vector/mobile_guide/assets/element-logo.svg create mode 100644 src/vector/mobile_guide/assets/google-play-badge.svg create mode 100644 src/vector/mobile_guide/index.css diff --git a/src/vector/mobile_guide/assets/app-store-badge.svg b/src/vector/mobile_guide/assets/app-store-badge.svg new file mode 100755 index 00000000000..072b425a1ab --- /dev/null +++ b/src/vector/mobile_guide/assets/app-store-badge.svg @@ -0,0 +1,46 @@ + + Download_on_the_App_Store_Badge_US-UK_RGB_blk_4SVG_092917 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/vector/mobile_guide/assets/bottom-gradient.svg b/src/vector/mobile_guide/assets/bottom-gradient.svg new file mode 100644 index 00000000000..07404409466 --- /dev/null +++ b/src/vector/mobile_guide/assets/bottom-gradient.svg @@ -0,0 +1,53 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/vector/mobile_guide/assets/element-logo.svg b/src/vector/mobile_guide/assets/element-logo.svg new file mode 100644 index 00000000000..d2cb52e498f --- /dev/null +++ b/src/vector/mobile_guide/assets/element-logo.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/vector/mobile_guide/assets/google-play-badge.svg b/src/vector/mobile_guide/assets/google-play-badge.svg new file mode 100644 index 00000000000..fac62d70ed3 --- /dev/null +++ b/src/vector/mobile_guide/assets/google-play-badge.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/vector/mobile_guide/index.css b/src/vector/mobile_guide/index.css new file mode 100644 index 00000000000..c1cb448fef8 --- /dev/null +++ b/src/vector/mobile_guide/index.css @@ -0,0 +1,154 @@ +/* By default, hide the custom IS stuff - enabled in JS */ +#custom_is, +#is_url { + display: none; +} + +html { + min-height: 100%; + position: relative; +} + +body { + background: #fff; + max-width: 680px; + margin: 0 auto; + padding-bottom: 178px; /* Match the height of the gradient */ + font-family: + -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", + "Segoe UI Emoji", "Segoe UI Symbol"; +} + +.mx_Button { + border: 0; + border-radius: 100px; + font-size: 18px; + margin-left: 4px; + margin-right: 4px; + min-width: 80px; + background-color: #1b1d22; + color: #fff; + cursor: pointer; + padding: 12px 22px; + word-break: break-word; + text-decoration: none; +} + +.mx_Center { + justify-content: center; +} + +.mx_ClearDecoration { + text-decoration: none !important; + margin: 16px 0; +} + +.mx_HomePage_header { + color: #2e2f32; + align-items: center; + justify-content: center; + text-align: center; + padding-top: 48px; + padding-bottom: 48px; +} + +.mx_HomePage_header #header_title { + margin-top: 8px; + margin-bottom: 0px; +} + +.mx_HomePage h3 { + margin-top: 30px; +} + +.mx_HomePage_col { + display: flex; + flex-direction: row; +} + +.mx_HomePage_row { + flex: 1 1 0; + display: flex; + flex-direction: row; + flex-wrap: wrap; +} + +.mx_HomePage_container { + display: block !important; + margin: 10px 20px; +} + +.mx_HomePage_errorContainer { + display: none; /* shown in JS if needed */ + margin: 20px; + border: 1px solid red; + background-color: #ffb9b9; + padding: 5px; +} + +.mx_HomePage_container h1, +.mx_HomePage_container h2, +.mx_HomePage_container h3, +.mx_HomePage_container h4 { + font-weight: 600; + margin-bottom: 32px; + margin-top: 0px; +} + +.mx_Spacer { + margin-top: 24px; +} + +.mx_FooterLink { + color: #0dbd8b; + text-decoration: none; +} + +.mx_Subtext { + font-size: 14px; +} + +.mx_SubtextTop { + margin-top: 32px; +} + +.mx_BottomGradient { + position: absolute; + bottom: 0; + left: 0; + right: 0; + width: 100vw; + height: 178px; + background-image: url("assets/bottom-gradient.svg"); + background-size: 100% 100%; + background-repeat: no-repeat; + z-index: -1; + margin-left: calc(50% - 50vw); /* Center the gradient regardless of body width */ +} + +@media screen and (max-width: 1120px) { + body { + font-size: 16px; + } + + h1 { + font-size: 20px; + } + + h4 { + font-size: 16px; + } + + .mx_Button { + font-size: 16px; + padding: 12px 16px; + } + + .mx_HomePage_header { + justify-content: left; + } + + .mx_Spacer { + margin-top: 24px; + } +} diff --git a/src/vector/mobile_guide/index.html b/src/vector/mobile_guide/index.html index d58842d6a64..25eaccabc00 100644 --- a/src/vector/mobile_guide/index.html +++ b/src/vector/mobile_guide/index.html @@ -4,138 +4,6 @@ Element Mobile Guide - - @@ -145,632 +13,62 @@
- -

Set up Element on iOS or Android

+
+ Element Logo +
+
+

Join Element.

+
-

Install the app

-

iOS (iPhone or iPad)

+

Step 1: Download Element

- - Download on the App Store. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + Download on the App Store. -

Android

- - - Created with Sketch. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + Get it on Google Play. - - + Also available on + F-Droid - Get it on F-Droid. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +

diff --git a/src/vector/mobile_guide/index.ts b/src/vector/mobile_guide/index.ts index 93201d6a800..e0e570fb329 100644 --- a/src/vector/mobile_guide/index.ts +++ b/src/vector/mobile_guide/index.ts @@ -195,16 +195,9 @@ async function updateDocument( document.getElementById("f_droid_section")!.style.display = "none"; } - if (isUrl) { - document.getElementById("custom_is")!.style.display = "block"; - document.getElementById("is_url")!.style.display = "block"; - document.getElementById("is_url")!.innerText = isUrl; - } - (document.getElementById("deep_link_button") as HTMLAnchorElement).href = deepLinkUrl; document.getElementById("step1_heading")!.innerHTML = `Step 1: Download ${metadata.name}`; document.getElementById("step2_container")!.style.display = "block"; - document.getElementById("hs_url")!.innerText = hsUrl; } void initPage(); From c8031e84061c9d463b93d3f55f7c84398cefe471 Mon Sep 17 00:00:00 2001 From: Doug Date: Thu, 22 May 2025 12:10:55 +0100 Subject: [PATCH 04/19] Remove the back to Element link on mobile_guide --- src/vector/mobile_guide/index.css | 9 --------- src/vector/mobile_guide/index.html | 7 ------- src/vector/mobile_guide/index.ts | 8 -------- 3 files changed, 24 deletions(-) diff --git a/src/vector/mobile_guide/index.css b/src/vector/mobile_guide/index.css index 550916957fc..08f66c54178 100644 --- a/src/vector/mobile_guide/index.css +++ b/src/vector/mobile_guide/index.css @@ -34,10 +34,6 @@ body { text-decoration: none; } -.mx_Center { - justify-content: center; -} - .mx_ClearDecoration { text-decoration: none !important; margin: 16px 0; @@ -99,11 +95,6 @@ body { margin-top: 24px; } -.mx_FooterLink { - color: #0dbd8b; - text-decoration: none; -} - .mx_BottomGradient { position: absolute; bottom: 0; diff --git a/src/vector/mobile_guide/index.html b/src/vector/mobile_guide/index.html index 3e15699fdd8..bcd420d049f 100644 --- a/src/vector/mobile_guide/index.html +++ b/src/vector/mobile_guide/index.html @@ -72,13 +72,6 @@

Step 2: Come back here to sign in

-
-

- Go to Desktop Site -
- Please note the Desktop site does not work on mobile. -

-
diff --git a/src/vector/mobile_guide/index.ts b/src/vector/mobile_guide/index.ts index e0e570fb329..c2945f9238b 100644 --- a/src/vector/mobile_guide/index.ts +++ b/src/vector/mobile_guide/index.ts @@ -56,12 +56,6 @@ const appVariants: Record = { }, }; -function onBackToElementClick(): void { - // Cookie should expire in 4 hours - document.cookie = "element_mobile_redirect_to_guide=false;path=/;max-age=14400"; - window.location.href = "../"; -} - // NEVER pass user-controlled content to this function! Hardcoded strings only please. function renderConfigError(message: string): void { const contactMsg = @@ -85,8 +79,6 @@ function renderConfigError(message: string): void { } async function initPage(): Promise { - document.getElementById("back_to_element_button")!.onclick = onBackToElementClick; - const config = await getVectorConfig(".."); // We manually parse the config similar to how validateServerConfig works because From 405f68729e7dc33abfc0e448d43a966760092d4b Mon Sep 17 00:00:00 2001 From: Doug Date: Thu, 22 May 2025 17:02:56 +0100 Subject: [PATCH 05/19] Finish implementing the design updates on mobile_guide. --- src/vector/mobile_guide/index.css | 87 +++++++++++++++++++++++------- src/vector/mobile_guide/index.html | 67 +++++++++++++---------- src/vector/mobile_guide/index.ts | 22 ++++---- 3 files changed, 119 insertions(+), 57 deletions(-) diff --git a/src/vector/mobile_guide/index.css b/src/vector/mobile_guide/index.css index 08f66c54178..55629325fc4 100644 --- a/src/vector/mobile_guide/index.css +++ b/src/vector/mobile_guide/index.css @@ -1,3 +1,5 @@ +@import url("@vector-im/compound-design-tokens/assets/web/css/compound-design-tokens.css"); + /* By default, hide the custom IS stuff - enabled in JS */ #custom_is, #is_url { @@ -14,17 +16,28 @@ body { max-width: 680px; margin: 0 auto; padding-bottom: 178px; /* Match the height of the gradient */ - font-family: - -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", - "Segoe UI Emoji", "Segoe UI Symbol"; + font-family: var(--cpd-font-family-sans); + color: #1b1d22; +} + +hr { + border: none; + height: 1px; + background-color: #e1e6ec; + color: #e1e6ec; + margin: 0; +} + +p { + margin: 4px 0; + padding: 0; + color: #474a51; } .mx_Button { border: 0; border-radius: 100px; - font-size: 18px; - margin-left: 4px; - margin-right: 4px; + font-size: 16px; min-width: 80px; background-color: #1b1d22; color: #fff; @@ -34,13 +47,34 @@ body { text-decoration: none; } -.mx_ClearDecoration { +#deep_link_button { + margin-top: 12px; + display: inline-block; + width: auto; + box-sizing: border-box; +} + +.mx_StoreLinks { + margin: 15px 0 12px 0; +} + +.mx_StoreBadge { text-decoration: none !important; - margin: 16px 0; + margin: 16px 16px 16px 0px; +} + +#f_droid_link { + color: #007a61; + font-weight: bold; + text-decoration: none; +} + +#f_droid_link:visited { + color: #007a61; } .mx_HomePage_header { - color: #2e2f32; + color: #474a51; align-items: center; justify-content: center; text-align: center; @@ -67,6 +101,7 @@ body { display: flex; flex-direction: row; flex-wrap: wrap; + align-items: flex-start; } .mx_HomePage_container { @@ -87,12 +122,13 @@ body { .mx_HomePage_container h3, .mx_HomePage_container h4 { font-weight: 600; - margin-bottom: 32px; - margin-top: 0px; + font-size: 16px; + margin-bottom: 8px; + margin-top: 4px; } .mx_Spacer { - margin-top: 24px; + margin-top: 48px; } .mx_BottomGradient { @@ -109,16 +145,31 @@ body { margin-left: calc(50% - 50vw); /* Center the gradient regardless of body width */ } +.mx_HomePage_step_number { + display: flex; + align-items: flex-start; + margin-right: 8px; +} + +.mx_HomePage_step_number span { + display: flex; + align-items: center; + justify-content: center; + width: 24px; + height: 24px; + border-radius: 50%; + border: 1px solid #e1e6ec; + background-color: transparent; + color: #656d77; + font-size: 14px; +} + @media screen and (max-width: 1120px) { body { font-size: 16px; } - h1 { - font-size: 20px; - } - - h4 { + h2 { font-size: 16px; } @@ -132,6 +183,6 @@ body { } .mx_Spacer { - margin-top: 24px; + margin-top: 48px; } } diff --git a/src/vector/mobile_guide/index.html b/src/vector/mobile_guide/index.html index bcd420d049f..90b56100846 100644 --- a/src/vector/mobile_guide/index.html +++ b/src/vector/mobile_guide/index.html @@ -20,36 +20,42 @@

Join Element.

-
+
+
+
+ 1 +
-

Step 1: Download Element

- - Download on the App Store. - - - Get it on Google Play. - +

Download Element

+
+ + Download on the App Store. + + + Get it on Google Play. + +

Also available on Step 1: Download Element