Hide pages list

[provokateurin]

Is your feature request related to a problem? Please describe. I have limited screen space and I would like to be able to hide the pages list just like the collectives list to make more use of the space.

Describe the solution you'd like Add a button similar to the one that can be used to hide the collectives.

[mejo-]

Thanks @provokateurin. On small screens, (less than 1024px width), the page list should hide itself automatically and expand to full screen width if opened. What screen width do you have?

Cc @jancborchardt and @nimishavijay - what do you think about this request? I'm a bit reluctant to add yet more buttons to the user interface :grimacing:

[nimishavijay]

Interesting idea! Like @mejo- said, the page list collapses for smaller screens and for bigger screens the width of the text on the screen is limited anyway, so what would the extra space be used for? :)

[provokateurin]

Interesting to know. Usually the width is fine, but when I open the outline or collectives list gets way to small (the outline even overlays the editor). My screen is 2256x1504, but I have 200% scaling (I believe, need to check if necessary).

[provokateurin]

It is not only about gaining more space but also about showing less information that's not needed when writing my pages.

[nimishavijay]

The pattern of the 3 column layout is something common to many apps (Collectives, Mail, Notes, etc), so this would need a bigger discussion. However, the outline overlapping the text seems like an annoying recurring problem even in the Text app.

Some quick fixes:

• Reduce the minimum width of the page list (in this screenshot it is 270px), Even with fairly long page titles and 3 levels of nesting, nothing is ellipsised, so I would say it is okay to reduce it.

• Don't make the outline overlap the main text, and instead move the main text to the right and show the outline on the left, similar to Gdocs.

What are your thoughts about this? cc @mejo- @max-nextcloud @szaimen @jancborchardt as well :)

[szaimen]

Usually the width is fine, but when I open the outline or collectives list gets way to small (the outline even overlays the editor).

@provokateurin can you post a screenshot of this behaviour?

[provokateurin]

Normal: Collectives list open: Outline open: Collectives list and outline open:

As you can see there is a mix of overlapping and waste screen space.

I don't understand why a small button like the one used for hiding the collectives page can't be added. When I write in these documents I only want to focus on the text and don't need to see the pages list.

[szaimen]

This rather looks like something that needs to be fixed in the text app as the content viewer is part of that? I mean obviously the content should not overlap the text file...

[provokateurin]

Sure the outline overlap is a different thing. I just think always showing the pages list is a waist of space and visual clutter.

[provokateurin]

This is also a problem with vertical monitors. I wanted to read the whole document on my vertical monitor as it gives me more vertical space, but then the pages list takes a lot of the screen width. I noticed that if I make the window only slightly smaller the pages list already hides. So maybe adjusting the minimum width for the pages list to show is also enough? We could do some testing on different setups to see what size works well.

[jancborchardt]

Thanks for the screenshots @provokateurin – agree it’s an annoying issue. Before diving into a whole new way of hiding another of the columns, let’s focus on fixing the immediate problem of the overlap, so I agree with @nimishavijay on the measures listed in https://github.com/nextcloud/collectives/issues/667#issuecomment-1545664657

Additionally, to not need to move the viewer text so much, we can reduce the min-width of the outline a bit. Currently it is quite present and overlaps the text (which is of course needed on mobile or smaller widths), but unless hovered/focused or just opened, it should probably never overlap the document itself.

[MarcelvC]

It seems to me that the reason why the outline (class .editor--outline) is overlapping the page content (class .editor__content) is that it is set to 300px and has a fixed position, so it doesn't respect the grid-cell of its parent. I don't really know how the interplay between Nextcloud Collectives and Nextcloud Text works, but I assume it is set here.

Changing/overwriting the CSS of .editor--outline to/with the following would solve the issue, I believe:

position: sticky;
width: 100%;
max-height: 80vh;
top: 50%;
transform: translateY(calc(50% * -1));

[MarcelvC]

This would break the view on smaller screens though. A possible solution would be to set the grid columns of the parent container .content-wrapper to something like this: (Where is the set? Here or here?)

grid-template-columns: minmax(150px, calc(var(--side-width)*2)) auto 20px;

And then for even smaller screens/mobile keep the current behavior with an overlay.

[mejo-]

The minimum page list size is lowered from 20% to 15% now: https://github.com/nextcloud/collectives/pull/752