feat: add column size attribute (#455)

This commit is contained in:
Robert Kaussow 2022-07-11 20:46:01 +02:00 committed by GitHub
parent c39eee4368
commit 66d456f552
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 51 additions and 10 deletions

View file

@ -4,6 +4,14 @@ title: Columns
The Columns shortcode can be used to organize content side-by-side (horizontally) for better readability. The Columns shortcode can be used to organize content side-by-side (horizontally) for better readability.
## Attributes
| Name | Description | default |
| --------------- | ------------------------------------------------ | ------- |
| size (optional) | size of the first column (small\|regular\|large) | regular |
## Usage
```html ```html
{{</* columns */>}} <!-- begin columns block --> {{</* columns */>}} <!-- begin columns block -->
## Left Content ## Left Content

View file

@ -7,7 +7,7 @@
--code --code
{{- end }}" {{- end }}"
href="{{ .Destination | safeURL }}" href="{{ .Destination | safeURL }}"
{{ with .Title }}title="{{ . }}"{{ end }} {{- with .Title }}{{ printf "title=\"%s\"" . | safeHTMLAttr }}{{- end }}
> >
{{- .Text | safeHTML -}} {{- .Text | safeHTML -}}
</a> </a>

View file

@ -1,4 +1,11 @@
<div class="gdoc-columns flex flex-wrap flex-mobile-column"> {{- $size := default "regular" (.Get "size" | lower) }}
{{- if not (in (slice "regular" "large" "small") $size) }}
{{- $size = "regular" }}
{{- end }}
<div class="gdoc-columns gdoc-columns--{{ $size }} flex flex-gap flex-mobile-column">
{{ range split .Inner "<--->" }} {{ range split .Inner "<--->" }}
<div class="gdoc-columns__content gdoc-markdown--nested flex-even"> <div class="gdoc-columns__content gdoc-markdown--nested flex-even">
{{ . | $.Page.RenderString }} {{ . | $.Page.RenderString }}

View file

@ -63,6 +63,15 @@
.flex-mobile-column { .flex-mobile-column {
flex-direction: column; flex-direction: column;
&.gblog-columns {
margin: $padding-32 0;
}
.gblog-columns__content {
min-width: auto;
margin: 0;
}
} }
#menu-control:checked ~ main { #menu-control:checked ~ main {

View file

@ -70,16 +70,28 @@
// {{< columns >}} // {{< columns >}}
.gdoc-columns { .gdoc-columns {
margin-left: -$padding-16; &--regular > :first-child {
margin-right: -$padding-16; flex: 1;
&__content {
margin: $padding-16 0;
min-width: $body-min-width * 0.66;
padding: 0 $padding-16;
} }
.gdoc-page__anchor { &--small > :first-child {
flex: 0.35;
min-width: $body-min-width * 0.35;
}
&--large > :first-child {
flex: 1.65;
min-width: $body-min-width * 1.65;
}
&__content {
flex: 1 1;
margin: $padding-16 0;
min-width: $body-min-width * 0.66;
padding: 0;
}
.gdoc-post__anchor {
display: none; display: none;
} }
} }

View file

@ -29,6 +29,11 @@
background: var(--accent-color-lite); background: var(--accent-color-lite);
} }
.flex-gap {
flex-wrap: wrap;
gap: $padding-16;
}
.justify-start { .justify-start {
justify-content: flex-start; justify-content: flex-start;
} }