Feature/2.x/785 padding horizontal causes unwanted indenting #847
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,92 @@ | ||
| ## Section classes | ||
|
|
||
| These classes are combinable, and should answer all common layout needs. | ||
|
|
||
| ### `.section` | ||
|
|
||
| <details> | ||
| <summary>Contained content and inline padding</summary> | ||
| <pre> | ||
|
|
||
| +------------------------------------------------------------------------------+ | ||
| |P A+------------------------------------+A P| | ||
| |P A| |A P| | ||
| |P A| CONTENT |A P| | ||
| |P A| |A P| | ||
| |P A+------------------------------------+A P| | ||
| +------------------------------------------------------------------------------+ | ||
|
|
||
| </pre> | ||
| </details> | ||
|
|
||
| ### `.section.section--uncontained` | ||
|
|
||
| <details> | ||
| <summary>Inner element has occupies 100% parent width</summary> | ||
| <pre> | ||
|
|
||
| +------------------------------------------------------------------------------+ | ||
| |P+--------------------------------------------------------------------------+P| | ||
| |P| |P| | ||
| |P| CONTENT |P| | ||
| |P| |P| | ||
| |P+--------------------------------------------------------------------------+P| | ||
| +------------------------------------------------------------------------------+ | ||
|
|
||
| </pre> | ||
| </details> | ||
|
|
||
| ### `.section.section--bleed` | ||
|
|
||
| <details> | ||
| <summary>Outer element has no inline padding</summary> | ||
| <pre> | ||
|
|
||
| +------------------------------------------------------------------------------+ | ||
| | A+------------------------------------+A | | ||
| | A| |A | | ||
| | A| CONTENT |A | | ||
| | A| |A | | ||
| | A+------------------------------------+A | | ||
| +------------------------------------------------------------------------------+ | ||
|
|
||
| </pre> | ||
| </details> | ||
|
|
||
| ### `.section.section--expanded` | ||
|
|
||
| <details> | ||
| <summary>Outer element has block padding</summary> | ||
| <pre> | ||
|
|
||
| +------------------------------------------------------------------------------+ | ||
| |PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP| | ||
| |P A+------------------------------------+A P| | ||
| |P A| |A P| | ||
| |P A| CONTENT |A P| | ||
| |P A| |A P| | ||
| |P A+------------------------------------+A P| | ||
| |PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP| | ||
| +------------------------------------------------------------------------------+ | ||
|
|
||
| </pre> | ||
| </details> | ||
|
|
||
| ### `.section.section--wrapped` | ||
|
|
||
| <details> | ||
| <summary><code>.section .section--wrapped</code></summary> | ||
| <pre> | ||
|
|
||
| +------------------------------------------------------------------------------+ | ||
| | A+------------------------------------+A | | ||
| | A|PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP|A | | ||
| | A|P P|A | | ||
| | A|P CONTENT P|A | | ||
| | A|P P|A | | ||
| | A|PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP|A | | ||
| | A+------------------------------------+A | | ||
| +------------------------------------------------------------------------------+ | ||
|
|
||
| </pre> | ||
| </details> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,57 @@ | ||
| --- | ||
| $schema: https://git.drupalcode.org/project/drupal/-/raw/10.1.x/core/modules/sdc/src/metadata.schema.json | ||
| name: LGD Section | ||
| description: Provides common section markup and classes to localgov_base. | ||
| status: stable | ||
| props: | ||
| type: object | ||
| properties: | ||
| section_inner_attributes: | ||
| type: object | ||
| title: Section inner attributes | ||
| description: A ready-for render Drupal attributes object for the INNER element of the section markup. | ||
| section_inner_classes: | ||
| type: array | ||
| title: Section inner classes | ||
| description: An array of html classes to be added to the INNER element of the section markup. Classes may also be provided directly to section_inner_attributes. | ||
| section_outer_attributes: | ||
| type: ['object', 'string'] | ||
| additionalProperties: true | ||
| title: Section outer attributes | ||
| description: A ready-for render Drupal attributes object for the OUTER element of the section markup. | ||
| section_outer_classes: | ||
| type: array | ||
| title: Section outer classes | ||
| description: An array of html classes to be added to the OUTER element of the section markup. Classes may also be provided directly to section_outer_attributes. | ||
| section_outer_element: | ||
| type: string | ||
| title: Section outer element | ||
| description: Name of HTML tag to use for the section's outermost element. Seldom needs changing. | ||
| section_library: | ||
| type: string | ||
| title: Section library | ||
| description: Library, if any, to attach to the section. | ||
| section_types: | ||
| type: array | ||
| title: Section types | ||
| description: > | ||
| One or more of the following keywords: | ||
|
|
||
| - bleed | ||
| - expanded | ||
| - restricted | ||
| - separated | ||
| - separated-block | ||
| - separated-inline | ||
| - uncontained | ||
| - wrapped | ||
| - wrapped-block | ||
| - wrapped-inline | ||
| - demo | ||
|
|
||
| These will be used to apply specific classes to the outer html element. | ||
| slots: | ||
| section_content: | ||
| type: object | ||
| title: Section content | ||
| description: Content for the section! |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,85 @@ | ||
| .lgd-section { | ||
| padding-inline: var(--spacing, 1rem); | ||
| } | ||
|
|
||
| .lgd-section__inner { | ||
| margin: 0 auto; | ||
| max-width: var(--width-container, 73.75rem); | ||
|
Member
There was a problem hiding this comment. I'm not sure exactly why, but this max-width is making our section__inn 1180px by default (e.g. breadcrumbs) but in the current theme (e.g. demo.localgovdrupal.org) they are equating to 1148px. It's probably because the padding-inline is now on the outer container instead of the inner container.
Contributor
Author
There was a problem hiding this comment. This is true for every region/thing that's not restricted width (see screenshot). I based it on the header which is 1180px width in the current version of the theme. In any case, we'd just need to set a single variable to change it to 1148 or any other value. 
|
||
| } | ||
|
|
||
| /* BLEED: outer element has no inline padding */ | ||
| .lgd-section--bleed { | ||
| padding-inline: 0; | ||
| } | ||
|
|
||
| /* RESTRICTED: inner element uses narrower max-width. */ | ||
| .lgd-section--restricted > .lgd-section__inner { | ||
| max-width: var(--width-restricted-width-section, 48rem); | ||
| } | ||
|
|
||
| /** | ||
| * SEPARATED: margin-top between .lgd-section--separated and any other | ||
| * .lgd-section--*, and inner element has inline margin. | ||
| */ | ||
| .lgd-section--separated { | ||
| margin-inline: var(--spacing); | ||
|
|
||
| & + .lgd-section, | ||
| .lgd-section + & { | ||
| margin-top: var(--vertical-rhythm-spacing); | ||
| } | ||
| } | ||
|
|
||
| /** | ||
| * SEPARATED BLOCK: margin-top between .lgd-section--separated and any other | ||
| * .lgd-section--*. | ||
| */ | ||
| .lgd-section--separated-block + .lgd-section, | ||
| .lgd-section + .lgd-section--separated-block { | ||
| margin-top: var(--vertical-rhythm-spacing); | ||
| } | ||
|
|
||
| /* SEPARATED INLINE: outer element has inline margin. */ | ||
| .lgd-section--separated-inline { | ||
| margin-inline: var(--spacing); | ||
| } | ||
|
|
||
| /* UNCONTAINED: inner element has occupies 100% parent width */ | ||
| .lgd-section--uncontained > .lgd-section__inner { | ||
| max-width: none; | ||
| } | ||
|
|
||
| /* UNCENTERED: inner element has no inline margin. */ | ||
| .lgd-section--uncentered > .lgd-section__inner { | ||
| margin-inline: 0; | ||
| } | ||
|
|
||
| /* WRAPPED: inner element has block and inner padding */ | ||
| .lgd-section--wrapped > .lgd-section__inner { | ||
| padding-block: var(--vertical-rhythm-spacing, 1.5rem); | ||
| padding-inline: var(--spacing, 1rem); | ||
| } | ||
|
|
||
| /* WRAPPED BLOCK: inner element has block padding */ | ||
| .lgd-section--wrapped-block > .lgd-section__inner { | ||
| padding-block: var(--spacing, 1rem); | ||
| } | ||
|
|
||
| /* WRAPPED INLINE: inner element has inline padding */ | ||
| .lgd-section--wrapped-inline > .lgd-section__inner { | ||
| padding-inline: var(--spacing, 1rem); | ||
| } | ||
|
|
||
| /* EXPANDED: outer element has block padding */ | ||
| .lgd-section--expanded { | ||
| padding-block: var(--vertical-rhythm-spacing, 1.5rem); | ||
| } | ||
|
|
||
| /* DEMO: visualise inner and outer elements with background colours */ | ||
| .lgd-section--demo { | ||
| outline: 1px dotted pink; | ||
| } | ||
|
|
||
| .lgd-section--demo > .lgd-section__inner { | ||
| outline: 1px dotted azure; | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,56 @@ | ||
| {# Set up wrapper div attributes #} | ||
|
|
||
| {% set default_section_types = [ | ||
| 'bleed', | ||
| 'expanded', | ||
| 'restricted', | ||
| 'separated', | ||
| 'separated-block', | ||
| 'separated-inline', | ||
| 'uncontained', | ||
| 'uncentered', | ||
| 'wrapped', | ||
| 'wrapped-block', | ||
| 'wrapped-inline', | ||
| 'demo', | ||
| ] %} | ||
|
|
||
| {# Create section type classes from section_types prop. #} | ||
| {% set section_type_classes = section_types|default([])|filter( | ||
| section_type => section_type in default_section_types | ||
| )|map(section_type => 'lgd-section--' ~ section_type)|merge(['lgd-section']) %} | ||
|
|
||
| {# Set up outer div attributes. #} | ||
| {% set section_outer_attributes = section_outer_attributes|default(create_attribute()) %} | ||
| {% set section_outer_classes = section_outer_classes|default([])|merge(section_type_classes) %} | ||
|
|
||
| {# Set up inner div attributes. #} | ||
| {% set section_inner_attributes = section_inner_attributes|default(create_attribute()) %} | ||
| {% set section_inner_classes = section_inner_classes|default([])|merge([ | ||
| 'lgd-section__inner', | ||
| ]) %} | ||
|
|
||
| {# | ||
| Set the outer section's element. | ||
|
|
||
| Some implementations may want to use other elements like e.g. <section>, | ||
| <aside>, etc. though this component should mainly be used for page-level | ||
| layout. | ||
| #} | ||
| {% set section_outer_element = section_outer_element ?? 'div' %} | ||
|
|
||
| {# Set up library, if any #} | ||
| {% if section_library is not empty %} | ||
| {{ attach_library(section_library) }} | ||
| {% endif %} | ||
|
|
||
| {# Render the section #} | ||
| {% if block("section_content") is defined %} | ||
| <{{ section_outer_element }}{{ section_outer_attributes.addClass(section_outer_classes) }}> | ||
| <div{{ section_inner_attributes.addClass(section_inner_classes) }}> | ||
| {% block section_content %} | ||
| {{ section_content }} | ||
| {% endblock %} | ||
| </div> | ||
| </{{ section_outer_element }}> | ||
| {% endif %} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
margin auto here is causing all the section__inner items to be center aligned, this is affecting the main content block on service pages
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This one should be fixed on the current branch.