Improve text line readability in Course Content views

Description

Goal
Improve readability of full width course content for HTML blocks in particular.

Concept Sketch:

To achieve the sketch above I did the following :

  1. .xblock.xblock-student_view.xblock-student_view-html.xmodule_display.xmodule_HtmlModule.xblock-initialized { max-width 900px; margin: 0 auto; }

  2. .bookmark-button-wrapper {max-width 900px; margin: 0 auto 10px;}

  3. .xblock .xblock h2 {max-width 900px; margin: 0 auto;}

max-width 900px is really $text-width-readability-max, but I was just in the browser.

Open Questions

  1. Max width value

  2. ORA2 and other xblocks still being rendered as full width?

  3. immediate term CSS change or more general way to set xblock "readability width enabled" vs full width?

Acceptance Criteria

  1. Verify that html text is bounded to at most 900px (confirm that value with )

  2. Verify that capa problems are also bounded in the same way as HTML blocks

  3. Verify that videos and ORA xblocks are still rendered as full width (with no max-width limits)

  4. Verify that text widht readability max also maps to the width of our sequence bar (excluding the next / previous buttons.) ~900px

Steps to Reproduce

None

Current Behavior

None

Expected Behavior

None

Reason for Variance

None

Release Notes

None

User Impact Summary

None

Status

Assignee

Andy Armstrong

Reporter

Marco Morales

Labels

None

Reach

None

Impact

None

Customer

None

Partner Manager

None

URL

None

Contributor Name

None

Groups with Read-Only Access

None

Actual Points

None

Category of Work

None

Stakeholders

None

Story Points

2

Epic Link

Components

Sprint

None

Priority

Unset
Configure