Sensei: Distinguish between lessons that belong to a module and lessons that do not

[donnapep]

Is your feature request related to a problem? Please describe

There is no visual distinction between lessons in a module and lessons that are not.

Describe the solution you'd like

We should move the border styles and border color settings from the course outline block to the module block to better distinguish between the two types of lessons.

If doing the above does not provide enough of a visual separation, then we may need to consider adding the _Other Lessons_ heading above lessons that are not part of a module.

Additional context

Discussion here - p1602494083011500-slack-C013QUH20TS

[yscik]

I think the Minimal block style for the module shouldn't have a border (or at least have the option to disable border), so the best bet would be adding the Other Lessons header.

[renatho]

I didn't find a good design solution yet. Some screenshots:

1) With the "Other Lessons" header

2) With the "Other Lessons" header and module border

2.1) Collapsed

2.2) Without border

2.2.1) Collapsed

3) Borders in the modules, but not in the lessons

3.1) Collapsed

3.2) Without module borders

4) With a margin between the blocks

4.1) Collapsed

4.2) Without border

4.2.1) Collapsed

5) With a different title

5.1) Collapsed

5.2) Without border

6) Title similar to the modules

6.1) Collapsed

6.2) Without border

6.3) With minimal style

6.3.4) Minimal style without border

[renatho]

Personally, I most like option 6. But I think the "Other classes" should also be styled (Probably in the Course Outline Block). Opinions? Other ideas?

[renatho]

cc @pablohoneyhoney

[yscik]

We should definitely add some spacing above the Other lessons section, so that it's distinct even if there is a collapsed module. The same style as Lessons inside the module could be good, but the bigger header as in option 5 does look better.
Maybe also a horizontal top border / separator above the Other lessons section?

[renatho]

We should definitely add some spacing above the Other lessons section, so that it's distinct even if there is a collapsed module. The same style as Lessons inside the module could be good, but the bigger header as in option 5 does look better.
Maybe also a horizontal top border / separator above the Other lessons section?

Some screenshots with this test:

7)

7.1)

7.2)

7.3)

7.4)

7.5)

7.6)

7.7)

[renatho]

I was exploring a little some approaches to separate it in the editor. I think the best approach will be changing a little how we add the lessons without modules. Instead of adding everything in the same InnerBlocks, we'll have 2 separate InnerBlocks - One for the modules and one for the lessons. To the interface don't be confusing, I'm thinking to add customized appender buttons, like "Add module", and "Add lesson without a module" (this still would need a better name).

The bad part is that we can't just add 2 InnerBlocks in the same block. We'll need to create some new blocks for that to work only as a container. It'll add some extra complexity to our code, but it works. We can create it locked, so the users can't add/remove/reorder these blocks that we'll use only like a container.

This approach will also solve the weird case, where the user can add lessons between modules, and after saving we reorder it sending the lessons to the bottom.

[donnapep]

@renatho Maybe we should post about this in the Sensei Design Slack channel and get Pablo's opinion before we get too far down a particular path.

[renatho]

@renatho Maybe we should post about this in the Sensei Design Slack channel and get Pablo's opinion before we get too far down a particular path.

Will do! :)

[matticbot]

➤ Renatho Rosa commented:

This card is blocked waiting for Designs feedback.