mirrors/element-web
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2026-05-05 20:26:19 +02:00
Code Issues Projects Releases Wiki Activity

Update home page CSS (#32723)

Browse Source 
* Update home page CSS

* Update home-thin-viewport snapshot

* Update window-custom-theme snapshot

* Update window-custom-theme snapshot after develop merge
This commit is contained in:
Kamil Wolter 2026-05-05 13:24:52 +02:00 committed by GitHub
parent 53d5986b16
commit 9adaabae66
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 49 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
apps/web/playwright/e2e/app-loading/stored-credentials.spec.ts
View File

@ -23,6 +23,18 @@ test("Shows the homepage by default", async ({ pageWithCredentials: page }) => {
await expect(page.getByRole("heading", { name: "Welcome Boris", exact: true })).toBeVisible();
});
test(
"Adjusts homepage button layout in thin viewport",
{ tag: "@screenshot" },
async ({ pageWithCredentials: page }) => {
await page.setViewportSize({ width: 920, height: 720 });
await page.goto("/#/home");
await page.waitForSelector(".mx_HomePage", { timeout: 30000 });
await expect(page.locator(".mx_HomePage")).toMatchScreenshot("home-thin-viewport.png");
},
);
test("Shows the last known page on reload", async ({ pageWithCredentials: page }) => {
await page.goto("/");
await page.waitForSelector(".mx_MatrixChat", { timeout: 30000 });

BIN
apps/web/playwright/snapshots/app-loading/stored-credentials.spec.ts/home-thin-viewport-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

BIN
apps/web/playwright/snapshots/settings/appearance-user-settings-tab/theme-choice-panel.spec.ts/window-custom-theme-linux.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 56 KiB

After

Width:  |  Height:  |  Size: 56 KiB

63
apps/web/res/css/structures/_HomePage.pcss
View File

@ -8,30 +8,27 @@ Please see LICENSE files in the repository root for full details.
*/
.mx_HomePage {
max-width: 960px;
width: 100%;
display: grid;
place-items: center;
width: min(100% - 50px, 960px);
height: 100%;
margin-left: auto;
margin-right: auto;
margin: 0 auto;
container-type: inline-size;
container-name: homepage;
}
.mx_HomePage_default {
text-align: center;
display: flex;
.mx_HomePage_default_wrapper {
margin: auto;
}
img {
height: 48px;
}
h1 {
margin-bottom: 4px;
font-weight: var(--cpd-font-weight-semibold);
font-size: $font-32px;
line-height: 1.375;
margin-bottom: 4px;
}
h2 {
@ -47,23 +44,24 @@ Please see LICENSE files in the repository root for full details.
}
.mx_HomePage_default_buttons {
display: flex;
margin: 60px auto 0;
width: fit-content;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 5px 40px;
width: 100%;
margin-top: 80px;
margin-bottom: 20px;
.mx_AccessibleButton {
padding: 73px 8px 15px; /* top: 20px top padding + 40px icon + 13px margin */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 13px;
box-sizing: border-box;
width: 160px;
min-height: 132px;
margin: 20px;
position: relative;
display: inline-block;
padding: 8px 15px;
border-radius: 8px;
vertical-align: top;
word-break: break-word;
box-sizing: border-box;
font-weight: var(--cpd-font-weight-semibold);
font-size: $font-15px;
line-height: $font-20px;
@ -71,13 +69,26 @@ Please see LICENSE files in the repository root for full details.
background-color: $accent;
svg {
top: 20px;
left: 60px; /* (160px-40px)/2 */
width: 40px;
display: block;
width: 100%;
height: 40px;
position: absolute;
object-fit: contain;
color: #fff; /* on all themes */
}
}
@container homepage (max-width: 559px) {
grid-template-columns: 1fr;
.mx_AccessibleButton {
flex-direction: row;
width: 100%;
min-height: 0;
svg {
width: 24px;
}
}
}
}
}