general layout issues #11

r10s commented 2023年07月12日 16:25:31 +02:00

before diving into detailed layout tweaking (size, button placements, save feedback etc), we should fix the following larger layout glitches:

• the toolbar scrolls away when scrolling editor content. this is bad, the toolbar should really always stay visible at the top of the screen
  EDIT: this is still an issue on iOS

• the toolbar needs to handle overflow more gracefully. currently, things break in another row, however, without resizing the outer box (so that items are over the vertical line:

Screenshot 2023年07月12日 at 16.17.31.png

for a good layout, we need the possibility to left- and right-align items in the toolbar plus the option to have at least one item that shows a menu (similar to the current "Type...")

before diving into detailed layout tweaking (size, button placements, save feedback etc), we should fix the following larger layout glitches: - [ ] the toolbar scrolls away when scrolling editor content. this is bad, the toolbar should really always stay visible at the top of the screen EDIT: this is still an issue on iOS - [x] the toolbar needs to handle overflow more gracefully. currently, things break in another row, however, without resizing the outer box (so that items are over the vertical line:  for a good layout, we need the possibility to left- and right-align items in the toolbar plus the option to have at least one item that shows a menu (similar to the current "Type...")

r10s commented 2023年07月20日 17:24:27 +02:00

reopening as the scrollbar is still not fixed on iOS, i did not have a closer look at possible reasons yet

EDIT: double checked that i was using the correct version (recent master)

reopening as the scrollbar is still not fixed on iOS, i did not have a closer look at possible reasons yet EDIT: double checked that i was using the correct version (recent master)

r10s commented 2023年07月24日 17:32:24 +02:00

if one looks closely, the scrolling away of the scrollbar is also visible in desktop shortly:

• type some pages of text into a document
• close the document
• reopen the document
• scroll down really fast
• -> you'll see some flickering of the toolbar, that gets fixed, however

i think, this "fixing" is not working on ios, however, if one is using really "sticky" layout elements, it should not flicker at all. so i think, we should use sth. as position: sticky - not sure how the current fix is supposed to work at all

if one looks closely, the scrolling away of the scrollbar is also visible in desktop shortly: - type some pages of text into a document - close the document - reopen the document - scroll down _really fast_ - -> you'll see some flickering of the toolbar, that gets fixed, however i think, this "fixing" is not working on ios, however, if one is using really "sticky" layout elements, it should not flicker at all. so i think, we should use sth. as `position: sticky` - not sure how the [current fix](https://codeberg.org/webxdc/editor/commit/5bf0452651174c9c86c16730a0b7fdbcc452e33d) is supposed to work at all

WofWca commented 2023年07月25日 15:11:38 +02:00

@Septias could you please tell where you got this CSS

? I feel like the problem is here:

Because the stickiness is supposed to behave differently on iOS:

github.com/ProseMirror/prosemirror-menu@1870eca2b6/src/menubar.ts (L59)

github.com/ProseMirror/prosemirror-menu@1870eca2b6/src/menubar.ts (L127)

@Septias could you please tell where you got this CSS https://codeberg.org/webxdc/editor/src/commit/add1be95a87a34c5462ab10a79ca038f88195d7e/src/styles/style.css#L82-L406 ? I feel like the problem is here: https://codeberg.org/webxdc/editor/src/commit/add1be95a87a34c5462ab10a79ca038f88195d7e/src/styles/style.css#L245 Because the stickiness is supposed to behave differently on iOS: https://github.com/ProseMirror/prosemirror-menu/blob/1870eca2b6512f260a45480b4072b38f8965cbee/src/menubar.ts#L59 https://github.com/ProseMirror/prosemirror-menu/blob/1870eca2b6512f260a45480b4072b38f8965cbee/src/menubar.ts#L127

r10s commented 2023年07月25日 16:00:38 +02:00

Because the stickiness is supposed to behave differently on iOS:

weird. why so, prosemirror? :)

but anyways, we should find a solution here. if in doubt, we should not use the toolbar of prosemirror (is it easily replaceable? it seems to be a separate dependency). but let's postpone this issue and target the other ones first

> Because the stickiness is supposed to behave differently on iOS: weird. why so, prosemirror? :) but anyways, we should find a solution here. if in doubt, we should not use the toolbar of prosemirror (is it easily replaceable? it seems to be a separate dependency). but let's postpone this issue and target the other ones first

WofWca commented 2023年07月25日 16:01:53 +02:00

weird. why so, prosemirror? :)

Yes github.com/ProseMirror/prosemirror-menu@1870eca2b6/src/menubar.ts (L59)

Edit: oh, you're asking Prosemirror 😅

> weird. why so, prosemirror? :) Yes https://github.com/ProseMirror/prosemirror-menu/blob/1870eca2b6512f260a45480b4072b38f8965cbee/src/menubar.ts#L59 Edit: oh, you're asking Prosemirror 😅

r10s commented 2023年07月26日 16:22:42 +02:00

if in doubt, we probably can copy prosemirror-menu similar to #22 (comment)

if in doubt, we probably can copy `prosemirror-menu` similar to https://codeberg.org/webxdc/editor/issues/22#issuecomment-1009121

WofWca commented 2023年07月27日 20:21:05 +02:00

if in doubt, we probably can copy prosemirror-menu similar to #22

It's still an option of prosemirror-menu:

> if in doubt, we probably can copy prosemirror-menu similar to #22 It's still an option of `prosemirror-menu`: https://codeberg.org/webxdc/editor/src/commit/6972781877a321f3183791f175b6fcb18dcf52ac/src/prosemirror-setup.js#L127-L131

r10s commented 2023年08月12日 17:58:27 +02:00

closing this more general issue in favour of a dedicated #43

closing this more general issue in favour of a dedicated https://codeberg.org/webxdc/editor/issues/43