Skip to content

Commit

Permalink
Updated Layout to support Left/Right rail and CSSGrid. (#183)
Browse files Browse the repository at this point in the history
  • Loading branch information
@AlexSkrypnyk
AlexSkrypnyk committed Jun 4, 2024
1 parent 78c789f commit d0311f5
Show file tree
Hide file tree
Showing 12 changed files with 305 additions and 173 deletions.
9 changes: 7 additions & 2 deletions components/00-base/_variables.components.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -857,8 +857,13 @@ $ct-banner-dark-featured-image-shadow-color: ct-color-dark('background') !defaul
//
// Layout.
//
$ct-layout-light-background-color: inherit !default;
$ct-layout-dark-background-color: inherit !default;
$ct-layout-columns: $ct-grid-columns;
$ct-layout-rail-left-columns: 3;
$ct-layout-rail-right-columns: 3;
$ct-layout-column-gap: ct-spacing(2);
$ct-layout-column-gap-left-only: $ct-layout-column-gap;
$ct-layout-column-gap-right-only: $ct-layout-column-gap;
$ct-layout-breakpoint: l;

//
// Form/Fieldset.
Expand Down
4 changes: 3 additions & 1 deletion components/00-base/base.stories.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,13 +105,15 @@
$_color: grey;

width: 100%;
display: block;
display: grid;
background-color: color.adjust($_color, $alpha: -0.7);
padding: 1em;
text-align: center;
font-family: sans-serif;
border: dotted ct-particle(0.125) $_color;
color: color.adjust($_color, $alpha: -0.1);
height: 100%;
place-items: center;

.ct-theme-dark & {
background-color: color.adjust($_color, $alpha: -0.7);
Expand Down
2 changes: 1 addition & 1 deletion components/00-base/base.utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -252,7 +252,7 @@ export const generateSlots = (names) => {

if (showSlots) {
for (const i in names) {
obj[names[i]] = `<div class="story-slot story-slot--${names[i]}">{{ ${names[i]} }}</div>`;
obj[names[i]] = `<div class="story-slot story-slot--${names[i]}"><code>{{ ${names[i]} }}</code></div>`;
}
}

Expand Down
2 changes: 1 addition & 1 deletion components/00-base/grid/grid.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@
}

.col,
[class*='col-'] {
[class^='col-'] {
margin-bottom: ct-spacing(3);
container-type: inline-size;
}
Expand Down
24 changes: 0 additions & 24 deletions components/00-base/layout/content-layout--single-column-contained.twig
View file

This file was deleted.

20 changes: 0 additions & 20 deletions components/00-base/layout/content-layout--single-column.twig
View file

This file was deleted.

101 changes: 91 additions & 10 deletions components/00-base/layout/layout.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,25 +5,106 @@
.ct-layout {
$root: &;

&__sidebar {
&__rail_top_left,
&__rail_top_right,
&__rail_bottom_left,
&__rail_bottom_right {
@include ct-print-hide();
}

&__inner {
display: grid;
grid-template-columns: repeat($ct-layout-columns, 1fr);

@include ct-breakpoint($ct-layout-breakpoint) {
grid-template-rows: repeat(2, 1fr);
grid-column-gap: $ct-layout-column-gap;

#{$root}--no-top-left#{$root}--no-bottom-left & {
grid-column-gap: $ct-layout-column-gap-right-only;
}

@include ct-breakpoint-upto('m') {
margin-bottom: ct-spacing(3);
#{$root}--no-top-right#{$root}--no-bottom-right & {
grid-column-gap: $ct-layout-column-gap-left-only;
}
}
}

&__rail_top_left {
grid-column: 1 / span $ct-layout-columns;
grid-row: 1 / span 1;

@include ct-breakpoint($ct-layout-breakpoint) {
grid-column: 1 / span $ct-layout-rail-left-columns;
grid-row: 1 / span 1;

#{$root}--no-bottom-left & {
grid-row: 1 / span 2;
}
}
}

&__rail_top_right {
grid-column: 1 / span $ct-layout-columns;
grid-row: 2 / span 1;

@include ct-breakpoint($ct-layout-breakpoint) {
grid-column: ($ct-layout-columns - $ct-layout-rail-right-columns + 1) / span $ct-layout-rail-right-columns;
grid-row: 1 / span 1;

#{$root}--no-bottom-right & {
grid-row: 1 / span 2;
}
}
}

&__main {
@include ct-print() {
flex-basis: 100% !important;
max-width: 100%;
margin-left: 0;
grid-column: 1 / span $ct-layout-columns;
grid-row: 3 / span 1;

@include ct-breakpoint($ct-layout-breakpoint) {
grid-column: ($ct-layout-rail-left-columns + 1) / span ($ct-layout-columns - $ct-layout-rail-left-columns - $ct-layout-rail-right-columns);
grid-row: 1 / span 2;

#{$root}--no-top-left#{$root}--no-bottom-left & {
grid-column: 1 / span ($ct-layout-columns - $ct-layout-rail-right-columns);
}

#{$root}--no-top-right#{$root}--no-bottom-right & {
grid-column: ($ct-layout-rail-left-columns + 1) / span ($ct-layout-columns - $ct-layout-rail-left-columns);
}

#{$root}--no-top-left#{$root}--no-bottom-left#{$root}--no-top-right#{$root}--no-bottom-right & {
grid-column: 1 / span $ct-layout-columns;
}
}
}

&__rail_bottom_left {
grid-column: 1 / span $ct-layout-columns;
grid-row: 4 / span 1;

@include ct-breakpoint($ct-layout-breakpoint) {
grid-column: 1 / span $ct-layout-rail-left-columns;
grid-row: 2 / span 1;

#{$root}--no-top-left & {
grid-row: 1 / span 2;
}
}
}

@include ct-component-theme($root) using($root, $theme) {
#{$root}__inner {
background: ct-component-var($root, $theme, background-color);
&__rail_bottom_right {
grid-column: 1 / span $ct-layout-columns;
grid-row: 5 / span 1;

@include ct-breakpoint($ct-layout-breakpoint) {
grid-column: ($ct-layout-columns - $ct-layout-rail-right-columns + 1) / span $ct-layout-rail-right-columns;
grid-row: 2 / span 1;

#{$root}--no-top-right & {
grid-row: 1 / span 2;
}
}
}
}
57 changes: 12 additions & 45 deletions components/00-base/layout/layout.stories.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,4 @@
import CivicThemeLayout from './layout.twig';
import CivicThemeLayoutSingleColumn from './content-layout--single-column.twig';
import CivicThemeLayoutSingleColumnContained from './content-layout--single-column-contained.twig';
import { generateSlots, knobBoolean, knobRadios, knobText, placeholder, shouldRender } from '../base.utils';

export default {
Expand All @@ -12,29 +10,12 @@ export default {

export const Layout = (props = {}) => {
const knobs = {
theme: knobRadios(
'Theme',
{
Light: 'light',
Dark: 'dark',
},
'light',
props.theme,
props.knobTab,
),
content: knobBoolean('Show content', true, props.show_content, props.knobTab) ? placeholder('Content placeholder') : '',
sidebar: knobBoolean('Show sidebar', false, props.show_sidebar, props.knobTab) ? placeholder('Sidebar placeholder') : '',
rail_top_left: knobBoolean('Show top left rail', true, props.rail_top_left, props.knobTab) ? placeholder('Top left rail') : '',
rail_bottom_left: knobBoolean('Show bottom left rail', true, props.rail_bottom_left, props.knobTab) ? placeholder('Bottom left rail') : '',
content: knobBoolean('Show content', true, props.content, props.knobTab) ? placeholder('Content') : '',
rail_top_right: knobBoolean('Show top right rail', true, props.rail_top_right, props.knobTab) ? placeholder('Top right rail') : '',
rail_bottom_right: knobBoolean('Show bottom right rail', true, props.rail_bottom_right, props.knobTab) ? placeholder('Bottom right rail') : '',
is_contained: knobBoolean('Is contained', false, props.is_contained, props.knobTab),
layout: knobRadios(
'Layout',
{
'Single Column': 'single_column',
'Single Column Contained': 'single_column_contained',
},
'single_column',
props.layout,
props.knobTab,
),
vertical_spacing: knobRadios(
'Vertical spacing',
{
Expand All @@ -47,29 +28,15 @@ export const Layout = (props = {}) => {
props.vertical_spacing,
props.knobTab,
),
content_attributes: knobText('Content attributes', '', props.content_attributes, props.knobTab),
sidebar_attributes: knobText('Sidebar attributes', '', props.sidebar_attributes, props.knobTab),
modifier_class: knobText('Additional class', '', props.modifier_class, props.knobTab),
};

if (knobs.content) {
switch (knobs.layout) {
case 'single_column':
knobs.content = CivicThemeLayoutSingleColumn({
content: knobs.content,
});
break;

case 'single_column_contained':
knobs.content = CivicThemeLayoutSingleColumnContained({
content: knobs.content,
});
break;

default:
knobs.content = '';
}
}
const attributesTab = 'Attributes';
knobs.content_attributes = knobs.content ? knobText('Content attributes', '', props.content_attributes, attributesTab) : '';
knobs.rail_top_left_attributes = knobs.rail_top_left ? knobText('Top left rail attributes', '', props.rail_top_left_attributes, attributesTab) : '';
knobs.rail_top_right_attributes = knobs.rail_top_right ? knobText('Top right rail attributes', '', props.rail_top_right_attributes, attributesTab) : '';
knobs.rail_bottom_left_attributes = knobs.rail_bottom_left ? knobText('Bottom left rail attributes', '', props.rail_bottom_left_attributes, attributesTab) : '';
knobs.rail_bottom_right_attributes = knobs.rail_bottom_right ? knobText('Bottom right rail attributes', '', props.rail_bottom_right_attributes, attributesTab) : '';
knobs.modifier_class = knobText('Additional class', '', props.modifier_class, props.knobTab);

return shouldRender(props)
? CivicThemeLayout({
Expand Down
Loading

1 comment on commit d0311f5

@github-actions
Copy link

Choose a reason for hiding this comment

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

🎉 Published on https://civictheme-uikit.netlify.app as production
🚀 Deployed on https://665ef4da9dd3e6062fb8bf0b--civictheme-uikit.netlify.app

Please sign in to comment.