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

ruler marker labels #6663

Closed

ruggi opened this issue Nov 20, 2024 · 0 comments · Fixed by #6664

Assignees

Contributor

ruggi commented Nov 20, 2024

No description provided.

ruggi self-assigned this

ruggi mentioned this issue

Grid ruler marker labels #6664

Merged

2 tasks

ruggi added a commit that referenced this issue


          Grid ruler marker labels (#6664)

80561fc

**Problem:**

Ruler markers should show a label with the respective CSS value when
hovered.

**Fix:**

1. Show labels with the printed pin CSS when hovering a ruler marker.
For line names, show the line name. For named spans, show `span
the-area`.
2. Adjust the markers so they respect the verbatim CSS without special
treatment for span-end/start (which we could revisit in the future)
3. Adjust (and make more readable) the invididual marker skew values,
which need to be customized in a bunch of combinations (it's subtle, but
it's there!). I ended up using a bunch of named conditions, which after
some tinkering felt much more readable than a cluster of ifs or
switches. Better ideas are more than welcome tho! 🤗


https://github.com/user-attachments/assets/063adeb5-0b09-4a09-8603-77448bfd0cb2

| Config | Before | After |
|--------|---------|-----------|
| `gridColumn: auto`, `gridRow: auto` | <img width="1120"
alt="Screenshot 2024-11-20 at 15 30 23"
src="https://github.com/user-attachments/assets/c2d2b355-0312-46f4-a34c-f10f4619ddb8">
| <img width="1120" alt="Screenshot 2024-11-20 at 15 30 20"
src="https://github.com/user-attachments/assets/a733ca4c-1d77-4d26-925e-8ce4161a3989">
|
| `gridColumn: 3`, `gridRow: 1` | <img width="1120" alt="Screenshot
2024-11-20 at 15 30 36"
src="https://github.com/user-attachments/assets/b5365ca3-9d2b-4c26-ab32-1811bbf82cb4">
| <img width="1120" alt="Screenshot 2024-11-20 at 15 30 35"
src="https://github.com/user-attachments/assets/ae8a1a1c-67a5-466a-a46c-233f98553705">
|
| `gridColumn: span 2 / 4`, `gridRow: span 3` | <img width="1133"
alt="Screenshot 2024-11-20 at 15 35 51"
src="https://github.com/user-attachments/assets/dbb8d3e3-89ef-4262-90df-f222bb828c83">
| <img width="1133" alt="Screenshot 2024-11-20 at 15 35 50"
src="https://github.com/user-attachments/assets/018bd102-7331-4fbb-8ba6-8ab3316d4464">
|

<img width="1120" alt="Screenshot 2024-11-20 at 15 31 22"
src="https://github.com/user-attachments/assets/83057672-e2e5-4307-91ab-bd1a01e8a520">
<img width="1120" alt="Screenshot 2024-11-20 at 15 31 27"
src="https://github.com/user-attachments/assets/4bb71dab-d3d6-46e7-b6ec-6e10a726ae7e">
<img width="1133" alt="Screenshot 2024-11-20 at 15 31 35"
src="https://github.com/user-attachments/assets/453040c3-7151-4ff8-bfc8-73ed9925307b">






**Manual Tests:**
I hereby swear that:

- [x] I opened a hydrogen project and it loaded
- [x] I could navigate to various routes in Play mode

Fixes #6663

ruggi closed this as completed in #6664

liady pushed a commit that referenced this issue


          Grid ruler marker labels (#6664)

3d9652e

**Problem:**

Ruler markers should show a label with the respective CSS value when
hovered.

**Fix:**

1. Show labels with the printed pin CSS when hovering a ruler marker.
For line names, show the line name. For named spans, show `span
the-area`.
2. Adjust the markers so they respect the verbatim CSS without special
treatment for span-end/start (which we could revisit in the future)
3. Adjust (and make more readable) the invididual marker skew values,
which need to be customized in a bunch of combinations (it's subtle, but
it's there!). I ended up using a bunch of named conditions, which after
some tinkering felt much more readable than a cluster of ifs or
switches. Better ideas are more than welcome tho! 🤗


https://github.com/user-attachments/assets/063adeb5-0b09-4a09-8603-77448bfd0cb2

| Config | Before | After |
|--------|---------|-----------|
| `gridColumn: auto`, `gridRow: auto` | <img width="1120"
alt="Screenshot 2024-11-20 at 15 30 23"
src="https://github.com/user-attachments/assets/c2d2b355-0312-46f4-a34c-f10f4619ddb8">
| <img width="1120" alt="Screenshot 2024-11-20 at 15 30 20"
src="https://github.com/user-attachments/assets/a733ca4c-1d77-4d26-925e-8ce4161a3989">
|
| `gridColumn: 3`, `gridRow: 1` | <img width="1120" alt="Screenshot
2024-11-20 at 15 30 36"
src="https://github.com/user-attachments/assets/b5365ca3-9d2b-4c26-ab32-1811bbf82cb4">
| <img width="1120" alt="Screenshot 2024-11-20 at 15 30 35"
src="https://github.com/user-attachments/assets/ae8a1a1c-67a5-466a-a46c-233f98553705">
|
| `gridColumn: span 2 / 4`, `gridRow: span 3` | <img width="1133"
alt="Screenshot 2024-11-20 at 15 35 51"
src="https://github.com/user-attachments/assets/dbb8d3e3-89ef-4262-90df-f222bb828c83">
| <img width="1133" alt="Screenshot 2024-11-20 at 15 35 50"
src="https://github.com/user-attachments/assets/018bd102-7331-4fbb-8ba6-8ab3316d4464">
|

<img width="1120" alt="Screenshot 2024-11-20 at 15 31 22"
src="https://github.com/user-attachments/assets/83057672-e2e5-4307-91ab-bd1a01e8a520">
<img width="1120" alt="Screenshot 2024-11-20 at 15 31 27"
src="https://github.com/user-attachments/assets/4bb71dab-d3d6-46e7-b6ec-6e10a726ae7e">
<img width="1133" alt="Screenshot 2024-11-20 at 15 31 35"
src="https://github.com/user-attachments/assets/453040c3-7151-4ff8-bfc8-73ed9925307b">






**Manual Tests:**
I hereby swear that:

- [x] I opened a hydrogen project and it loaded
- [x] I could navigate to various routes in Play mode

Fixes #6663

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