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

Inserter: add tabs. #1582

Merged
merged 5 commits into from
Jun 29, 2017
Merged

Inserter: add tabs. #1582

merged 5 commits into from
Jun 29, 2017

Conversation

mtias
Copy link
Member

@mtias mtias commented Jun 29, 2017

Adds recent, blocks, and embeds.

See #1325.

@mtias mtias added the [Feature] Inserter The main way to insert blocks using the + button in the editing interface label Jun 29, 2017
@mtias
Copy link
Member Author

mtias commented Jun 29, 2017

Sounds like we'd want fixed min-height with this change.

@mtias mtias requested review from youknowriad and jasmussen June 29, 2017 11:06
@jasmussen
Copy link
Contributor

Pushed a little polish. Props @jwold. It's now good looking.

There's an issue, though:

screen shot 2017-06-29 at 13 47 38

All the blocks fade out when you use the in-stream inserter. @mtias can you take a look?

@@ -137,6 +138,14 @@ input[type="search"].editor-inserter__search {
width: 100%;

&.is-active {
border-bottom: 2px solid #f00;
background: $white;
border-bottom: 2px solid $blue-medium-500;
Copy link
Contributor

@paulwilde paulwilde Jun 29, 2017

Choose a reason for hiding this comment

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

Not a big deal, but this is cleaner if it were just border-bottom-color: $blue-medium-500.

Copy link
Contributor

Choose a reason for hiding this comment

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

👍 👍

@paulwilde
Copy link
Contributor

See #1574 regarding the fade out bug. It's unrelated to this pull request.

@paulwilde
Copy link
Contributor

I'm seeing a couple of visual issues.

Firstly on Safari 10.1.2 there is some top/bottom margin. Adding margin: 0; to .editor-inserter__tab fixes the issue.

screen shot 2017-06-29 at 13 27 15

Secondly, the active state turns the text colour to white.

@paulwilde
Copy link
Contributor

paulwilde commented Jun 29, 2017

I personally prefer it visually if the active tab and content bleed together. I have the CSS written that achieves this and fixes the bugs mentioned above if interested.

screen shot 2017-06-29 at 13 35 22

@jasmussen
Copy link
Contributor

Thanks for the feedback, addressed most of it.

I think we should address the white bleeding in to the tab separately, as we are likely to move the tabbar around a bit: #1325 (comment)

I also relaxed the margins and paddings a bit:

screen shot 2017-06-29 at 15 16 25

@mtias mtias force-pushed the add/inserter-tabs branch from ed07033 to 4660263 Compare June 29, 2017 13:29
mtias and others added 5 commits June 29, 2017 15:35
- Recent, blocks, and embeds.
- Displays different sets of blocks.

Don't show category header for single category display.
Address feedback.
Also restyle the separator heading.
@mtias mtias force-pushed the add/inserter-tabs branch from 44cc9f1 to 04932b1 Compare June 29, 2017 13:35
@mtias mtias merged commit 339a20d into master Jun 29, 2017
@mtias mtias deleted the add/inserter-tabs branch June 29, 2017 13:36
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Inserter The main way to insert blocks using the + button in the editing interface
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants