1325097 - When in the editor, alter the "twocolumns" and "threecolumns" classes to have a subtle border

Status: RESOLVED FIXED

Description

[Eric Shepherd [:sheppy]]

When editing, there are options to apply the classes "twocolumns" or "threecolumns" to the content, using the toolbar. These classes do the obvious: they create a <div> which displays its content in either two or three columns.

While editing, it is hard to see where these special blocks are, and to see where the columns are, especially if you have only a small amount of information displayed. It would be helpful to have a subtle border, perhaps a very light grey or pale blue, drawn around the borders of each column while in the editor.

We already have a custom version of the "hidden" class while editing, so this ought not to be difficult to do.

Comment 1

[Eric Shepherd [:sheppy]]

I've submitted a PR for this: https://github.com/mozilla/kuma/pull/4080

It adds a light blue border around the columns in both two and three column modes both on desktop and mobile when editing only.

Comment 2

[[github robot]]

Commits pushed to master at https://github.com/mozilla/kuma

https://github.com/mozilla/kuma/commit/71a80ceade125cc4891e16f917f96187b9eafaaa
bug 1325097: Make columns more visible in editor

Updated the twocolumns and threecolumns classes so they draw with a pale
blue dotted border around the columns when in the editor, for ease of
layout work. The format is in a variable ($editor-box-border) so it can
be reused in other similar cases if needed.

https://github.com/mozilla/kuma/commit/136cd575cd68aa31a4ee0d052b154ff9f9fd2396
Merge pull request #4115 from jwhitlock/column_editor_1325097

bug 1325097: Make columns more visible in editor

Comment 3

[John Whitlock [:jwhitlock]]

Pushed to staging

Comment 4

[John Whitlock [:jwhitlock]]

Fix pushed to production