Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Editor: Fix footer styling issues #12078

Merged
merged 3 commits into from
Mar 15, 2017
Merged

Editor: Fix footer styling issues #12078

merged 3 commits into from
Mar 15, 2017

Conversation

timmyc
Copy link
Contributor

@timmyc timmyc commented Mar 13, 2017

This is a follow up to #11536 - which moved the "saved ago in words" notice to the footer area of the editor. When viewing the editor in smaller viewports, this text was being hidden behind the editor:

before-footer

After
In this branch I've opted to style the saved ago text identical to the word count component which is also shown in the footer, and as a result, a transparent footer is created in smaller viewports, much like the transparent toolbar at the top of the editor:

after-footer

The transparent effect only happens in smaller viewports or when the sidebar is toggled on, due to the flexbox treatment on the actionbar. I'm wondering if we should just remove this text from the <ActionBar /> and create a new editor footer component that houses the saved ago and word counts.

I have also hidden the saved ago text on <480 viewports entirely.

@matticbot
Copy link
Contributor

@matticbot matticbot added the [Size] M Medium sized issue label Mar 13, 2017
@timmyc timmyc force-pushed the fix/editor/firefox-height branch from 7da01bb to 789a363 Compare March 14, 2017 18:31
@timmyc timmyc requested a review from mtias March 14, 2017 18:34
@timmyc timmyc added [Feature] Post/Page Editor The editor for editing posts and pages. [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. and removed [Status] In Progress labels Mar 14, 2017
@@ -9,11 +9,33 @@
@include breakpoint( "<660px" ) {
margin-bottom: 8px;
}
}

.editor-status-label.editor-action-bar__saved-status {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can't you target this with .editor-action-bar .editor-status-label instead of creating a new class?

@timmyc
Copy link
Contributor Author

timmyc commented Mar 15, 2017

Updated in daeee4b @mtias

@mtias
Copy link
Member

mtias commented Mar 15, 2017

Nice, much simpler.

@mtias mtias added [Status] Ready to Merge and removed [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. labels Mar 15, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Post/Page Editor The editor for editing posts and pages. [Size] M Medium sized issue
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants