Happychat: Fix sidebar sizing issues in Editor and other places #12270
Conversation
This changes the panel mode to be the base style, and the sidebar mode to be CSS that overrides the panel mode. This allows us to enable the panel mode on larger breakpoints, without having to resort to ugly duplicate CSS hacks. As part of this, I removed a bunch of old hacks, and simply invoked the panel mode instead. This includes the editor, the reader, and looking at a single theme. It would be nice if we could have the sidebar in the reader, but zooming into a single reader post makes the sidebar overlap the full bleed card. This also fixes an issue in Happychat with the new editor. Because it's major CSS surgery, would appreciate a good review, many eyes, and tests in various browsers. Thank you.
jasmussen
added
[Feature] Post/Page Editor
|
Tested in Chrome and Firefox on the Mac. I can't seem to load http://calypso.localhost:3000/help at all on Safari (which seems unrelated to the changes in this PR) — anyone else? |
|
Tested it in Safari via calypso.live. Works fine. |
|
Tested in chrome on Linux (Ubuntu). My understanding is that Tried several sections (help, customizer, editor, pages, etc) and viewports. All look good. In a big viewport, all sections show the |
Correct!
Sounds like it works as intended, then. Thanks for testing. Also tested in Android Chrome, worked fine. Only Windows browsers, mobile Safari, and perhaps a code review remaining, looks like! |
|
Should the saved message be appearing over the post settings? This is in a narrowed Chrome window:
And here it is with Happychat opened:
|
|
First off, do you have a very large screen Kris? If yes, then great catch! Seems like an editor issue, can you add to #11996 |
|
Did a bit more testing in the editor with the post settings sidebar and the chat panel as well. This is how it looks the transition between medium and large viewports. medium viewport at maximum size:
big viewport at minimum size:
Could repro the same issue on chrome and FF, on Linux. If either the post settings or the chat pannel is not activated, the editor has a more smooth transition between viewports. |
|
I am not sure if this was a result of these changes, but occasionally the cursor and first line drop behind the toolbar. I haven't been able to reproduce it consistently, but it seems to happen most often after toggling the post settings to hidden:
|
|
Thanks for the thorough test results, some interesting findings here. I'll take a look early next week! |
|
@kriskarkoski that likely could be from #12078 - I thought I had fixed all of those lingering issues, but will play around with that in this branch too. By chance do you remember the screen size when you saw this? |
|
@timmyc It should be right around 425-430px wide, I am not sure on the height but it was pretty tall as it was on by Thunderbolt monitor as I was testing changing the width of a bigger window at the time. If you can't repro please let me know and I will be happy to record some testing and note the screen size once I see it. |
Props Andrés.
|
The weird viewport sizing issues that were reported here #12270 (comment) should be fixed now:
@timmyc I'm going to try and get this merged in, hope that's okay. I'll take a look at the footer issues as well as some other bugs in a separate branch, feel free to join in on that one. |
jasmussen
added
the
[Status] Needs Review
There was a problem hiding this comment.
This is testing out great for me 👍
Tested on Chrome, Firefox and Safari Mac.
With the new editor, when we have HappyChat open, we can't access some options on the sidebar ("More Options" hidden a bit behind the happy chat panel) but it seems unrelated to this PR
matticbot
removed
the
[Status] Needs Review
* Fix issue with word count overlap. * Rewrite a fair bit of the panel/sidebar code. This changes the panel mode to be the base style, and the sidebar mode to be CSS that overrides the panel mode. This allows us to enable the panel mode on larger breakpoints, without having to resort to ugly duplicate CSS hacks. As part of this, I removed a bunch of old hacks, and simply invoked the panel mode instead. This includes the editor, the reader, and looking at a single theme. It would be nice if we could have the sidebar in the reader, but zooming into a single reader post makes the sidebar overlap the full bleed card. This also fixes an issue in Happychat with the new editor. Because it's major CSS surgery, would appreciate a good review, many eyes, and tests in various browsers. Thank you. * Fix sizing issues with the visual editor bar. Props Andrés.
matticbot
added
the
[Size] XL
This changes the panel mode to be the base style, and the sidebar mode to be CSS that overrides the panel mode. This allows us to enable the panel mode on larger breakpoints, without having to resort to ugly duplicate CSS hacks.
As part of this, I removed a bunch of old hacks, and simply invoked the panel mode instead. This includes the editor, the reader, and looking at a single theme. It would be nice if we could have the sidebar in the reader, but zooming into a single reader post makes the sidebar overlap the full bleed card.
This also fixes an issue in Happychat with the new editor.
Because it's major CSS surgery, would appreciate a good review, many eyes, and tests in various browsers. Thank you.
Steps to test:
Please try the above in as many browsers as you have the energy for, and verify that things look right. And by "looking right" I mean no obvious layout issues. The chat will be in panel mode on some pages, that is intended.