Page MenuHomePhorge

Show table of contents by default on wide screens
Needs ReviewPublic

Authored by mturdus on Aug 17 2024, 13:12.

Details

Summary

Show table of content in left whitespace area in wide screens (width >= 1792px)

Closes T15920

Test Plan
  1. Open Phriction wiki page in browser which contain a number of chapter titles
  2. Open Responsive Design Mode in browser (Ctrl-Shift-M in Firefox) and test different

width's of the page (e.g. 1024, 1280, 1440, 1600, 1920, ...)

  1. Open Remarkup Reference at /book/phorge/article/remarkup/ and repeat step 2

Diff Detail

Repository
rP Phorge
Branch
master
Lint
Lint Passed
Unit
No Test Coverage
Build Status
Buildable 1557
Build 1557: arc lint + arc unit

Event Timeline

mturdus requested review of this revision.Aug 17 2024, 13:12

Thanks. Maybe it happens only to me but if my content is very short I see an UX regression

Phriction UX tests.png (955×1 px, 102 KB)

Updating D25790: Make table of contents visible when using wide screens

Actions-curtain position fixed

@mturdus: Thanks for the patch! I tested this locally on a wiki page with a bunch of sections and on http://phorge.localhost/book/phorge/article/remarkup/ ; and on Differential's /D1 where it does not affect the ToC panel (good).

I'm tempted to accept this, only thing I'm wondering: Could you explain what is the intention behind the margin-left: 32px; and the left: 50px;? What would happen if they were left out?

aklapper retitled this revision from Make table of contents visible when using wide screens to Show table of contents by default on wide screens.Sep 10 2024, 10:43
aklapper edited the test plan for this revision. (Show Details)

Those were just for the looks, but this is of course personal.
I can remove them if you want.

I thought that the text with a curtain (e.g. a phriction wiki page) was a bit too far to the left when the left:50px was missing:

image.png (862×1 px, 267 KB)

The margin-left:32px removed a bit of the spacing between the toc and the content in a page without a curtain (e.g. the remarkup syntax page):
image.png (841×1 px, 168 KB)