Polish permalink UI and make it responsive #9010
Conversation
There was a problem hiding this comment.
Tested the demo content at 320px width (iPhone SE) and it all worked. There were horizontal scrollbars under that width but I think that's fine… 320px is a reasonable minimum width expectation.
I have one question/thought about one comment, otherwise looks good! 👍
| left: 0; | ||
| right: 0; | ||
|
|
||
| // Stack with block borders beyond mobile. |
There was a problem hiding this comment.
I'm not quite sure what this comment means, and it references code aimed at a mobile viewport but talks about what happens outside the mobile viewport. I get that it means mobile behaves one way and others differently, but I think this comment could be clarified 😄
There was a problem hiding this comment.
Solid point, will rearrange and clarify that a bit.
THANKs for all the fixes and review!
There was a problem hiding this comment.
Addressed your comment in f5c3696
| @@ -49,7 +49,7 @@ class PostPermalinkEditor extends Component { | |||
| className="editor-post-permalink-editor" | |||
| onSubmit={ this.onSavePermalink } | |||
| > | |||
| <span> | |||
| <span className="editor-post-permalink-editor__container"> | |||
There was a problem hiding this comment.
It's close, but this is not quite following the naming standards. Specifically, the part preceding the __ isn't concerned at all with the file name, only the top-level folder and the immediate parent folder. It should be editor-post-permalink__editor-container.
There was a problem hiding this comment.
Looking again at those standards, we need to update them to be less... editor-specific.
There was a problem hiding this comment.
Addressed feedback for now, perhaps we can revisit the editor naming separately?
|
Not sure why the tests fail here. |
| min-width: 20%; | ||
| margin: 0 5px; | ||
| .editor-post-permalink input[type="text"].editor-post-permalink-editor__edit { | ||
| // Input fields are created with inherent widths. |
There was a problem hiding this comment.
This was the cause of the failing test; fixing it now.
|
Yaay thank you! |
This PR fixes three things:
GIFs:
To test, please verify that permalink editing works on all breakpoints. Please also test the demo content to see that the hover styles of various blocks at various breakpoints did not regress as part of the horizontal scrollbar fix.
This addresses feedback in #6480 (comment).