Page MenuHomePhabricator

[cashtab] Menu style tweaks
ClosedPublic

Authored by johnkuney on Nov 12 2024, 22:11.

Details

Reviewers
bytesofman
Group Reviewers
Restricted Project
Commits
rABC9e7a26de9f03: [cashtab] Menu style tweaks
Summary

The slide in menu is appearing with some odd spacing and getting cut off on some mobile devices
Adding a few css tweaks to address this by adding scroll if the screen is too short

Test Plan

Preview the site and check the menu

Diff Detail

Repository
rABC Bitcoin ABC
Lint
Lint Not Applicable
Unit
Tests Not Applicable

Event Timeline

Failed tests logs:

====== CashTab Unit Tests: <App /> Navigation menu routes to expected components ======
Error: expect(element).toHaveStyle()

- Expected

- max-height: 0;
+ max-height: calc(100vh - 80px);
    at Object.toHaveStyle (/work/cashtab/src/components/App/__tests__/App.test.js:252:54)

Each failure log is accessible here:
CashTab Unit Tests: <App /> Navigation menu routes to expected components

Fix tests, adjust the css its looking for to the max-width value

bytesofman added a subscriber: bytesofman.

Much better than what we have now, should go in.

A couple of issues

  1. too wide (should contain the longest named item)

image.png (571×280 px, 40 KB)

  1. Seems like there are horizontal stripes of transparency, at least at smallest supported mobile width

image.png (571×280 px, 46 KB)

This revision now requires changes to proceed.Nov 13 2024, 00:54

fix background lines and extra width

ok it's not really the width that's the issue

current cashtab, we have menu titles aligning left, icons right

image.png (623×243 px, 52 KB)

this diff has everything aligning right

image.png (623×243 px, 37 KB)

should preserve existing style of titles left, icons right. could make it display:flex with justify-content: space-between

This revision now requires changes to proceed.Nov 13 2024, 04:38

align nav items space between

This revision is now accepted and ready to land.Nov 13 2024, 18:33
This revision was automatically updated to reflect the committed changes.