Skip to content

Commit

Permalink
Merge pull request #1159 from gethinode/develop
Browse files Browse the repository at this point in the history 
Enhance styling options of cards and card groups
  • Loading branch information
@markdumay
markdumay authored Sep 4, 2024
2 parents 6283970 + 96b9a3b commit 4de91bb
Show file tree
Hide file tree
Showing 6 changed files with 157 additions and 128 deletions.
30 changes: 30 additions & 0 deletions data/structures/card-group.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,12 +96,14 @@ arguments:
screens.
wrapper:
type: string
default: p-0
optional: true
comment: >-
Class attributes of the wrapper element, e.g. `p-4 px-xxl-0`.
responsive:
type: bool
optional: true
default: true
comment: >-
Flag indicating if the number of columns should be responsive, defaults to
`true`.
Expand Down Expand Up @@ -132,5 +134,33 @@ arguments:
hook:
type: string
optional: true
default: assets/card.html
comment: Render hook for the card partial.
group: partial
bento:
type: bool
optional: true
default: false
comment: >-
Trigger to use a bento-style layout instead of default grid layout.
release: v0.27.0
valign:
type: select
optional: true
comment: >-
Defines the vertical card alignment, only applicable in bento layout.
release: v0.27.0
options:
values:
- start
- center
- end
styles:
type:
- '[]map[string]interface {}'
optional: true
comment: >-
Styles to apply to the individual cards. Supported elements are `ratio`,
`orientation`, `portrait`, and `width`. The styles are rotated when the
amount of cards exceeds the available amount of styles.
release: v0.27.0
2 changes: 2 additions & 0 deletions data/structures/card.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,6 +101,7 @@ arguments:
options:
values:
- full
- title
- none
footer:
type: select
Expand Down Expand Up @@ -227,6 +228,7 @@ arguments:
- stacked
- horizontal
- horizontal-sm
- overlay
- none
subtle:
type: bool
Expand Down
240 changes: 117 additions & 123 deletions layouts/partials/assets/card-group.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,66 +4,67 @@
Visit gethinode.com/license for more details.
-->

<!-- Validate arguments -->
{{ if partial "utilities/IsInvalidArgs.html" (dict "structure" "card-group" "child" "card" "args" .) }}
{{- errorf "partial [assets/card-group.html] - Invalid arguments" -}}
<!-- Define inline partials -->
{{ define "partials/assets/style.html" }}
{{ $style := "" }}
{{ if gt (len .styles) 0 }}
{{ $def := index .styles (mod .index (len .styles)) }}
{{ $style = index $def .key }}
{{ end }}
{{ return ($style | default .default ) }}
{{ end }}

<!-- Initialize arguments -->
{{ $args := partial "utilities/InitArgs.html" (dict "structure" "card-group" "child" "card" "args" .) }}
{{ if $args.err }}
{{ partial "utilities/LogErr.html" (dict
"partial" "assets/card-group.html"
"msg" "Invalid arguments"
"details" $args.errmsg
"file" page.File
)}}
{{ end }}

<!-- Initialize arguments and default values -->
{{- $page := .page -}}
<!-- Initialize local variables -->
{{ $list := $args.list }}
{{- $class := $args.class -}}
{{- $orientation := $args.orientation -}}
{{ $cardWrapper := "" }}

{{- $breakpoint := partial "utilities/GetBreakpoint.html" -}}
{{ $pages := .list }}
{{ $cards := .cards }}
{{- $paginate := .paginate | default false -}}
{{- $moreURL := .href -}}
{{- $moreTitle := .hrefTitle -}}
{{- $gutter := .gutter | default 4 -}}
{{- $separator := .separator | default false -}}
{{- $class := .class -}}
{{- $color := .color -}}
{{- $padding := .padding -}}
{{- $header := .header -}}
{{- $body := .body -}}
{{- $footer := .footer -}}
{{- $orientation := .orientation -}}
{{- $ratio := .ratio -}}
{{- $portrait := .portrait | default false -}}
{{- $wrapper := .wrapper | default "p-0" -}}
{{- $style := .style -}}
{{- $align := .align -}}
{{- $subtle := .subtle }}
{{- $loading := .loading -}}
{{- $button := .button -}}
{{- $buttonLabel := .buttonLabel -}}
{{- $buttonType := .buttonType -}}
{{- $iconRounded := .iconRounded }}
{{- $scroll := .scroll | default false }}
{{- $spacer := .spacer | default false }}
{{- $hook := .hook | default "assets/card.html" }}
{{- $cols := string .cols | default "3" -}}
{{ $colsMap := dict
"auto" ""
"1" "row-cols-1"
"2" (printf "row-cols-1 row-cols-%s-1 row-cols-%s-2" $breakpoint.prev $breakpoint.current)
"3" (printf "row-cols-1 row-cols-%s-2 row-cols-%s-3" $breakpoint.prev $breakpoint.current)
"4" (printf "row-cols-1 row-cols-%s-2 row-cols-%s-4" $breakpoint.prev $breakpoint.current)
"5" (printf "row-cols-1 row-cols-%s-3 row-cols-%s-5" $breakpoint.prev $breakpoint.current)
}}
{{ $sizesMap := dict
"auto" "100vw"
"1" "100vw"
"2" (printf "(min-width: %s) 50vw, 100vw" $breakpoint.currentSize)
"3" (printf "(min-width: %s) 33.3vw, (min-width: %s) 50vw, 100vw" $breakpoint.currentSize $breakpoint.prevSize)
"4" (printf "(min-width: %s) 25vw, (min-width: %s) 50vw, 100vw" $breakpoint.currentSize $breakpoint.prevSize)
"5" (printf "(min-width: %s) 20vw, (min-width: %s) 33.3vw, 100vw" $breakpoint.currentSize $breakpoint.prevSize)
}}

<!-- Override arguments -->
{{ $isPages := in (slice "page.Pages" "resource.Resources") (printf "%T" $pages) }}
<!-- Apply optional pagination -->
{{ $isPages := in (slice "page.Pages" "resource.Resources") (printf "%T" $list) }}
{{ $paginator := "" }}
{{ if and $isPages $paginate }}
{{ with .pagination }}
{{ $paginator = $page.Paginate $pages . }}
{{ if and $isPages $args.paginate }}
{{ with $args.pagination }}
{{ $paginator = $args.page.Paginate $list . }}
{{ else }}
{{ $paginator = $page.Paginate $pages }}
{{ $paginator = $args.page.Paginate $list }}
{{ end }}
{{ $pages = first $paginator.PagerSize (after (mul (sub $paginator.PageNumber 1) $paginator.PagerSize) $pages) }}
{{ end }}

{{ $cardWrapper := "" }}
{{ if $scroll }}
{{ $cardWrapper = printf "card-block card-block-%d" (int $cols) }}
{{ $list = first $paginator.PageSize (after (mul (sub $paginator.PageNumber 1) $paginator.PageSize) $list) }}
{{ end }}

{{ if not $spacer }}{{ $class = printf "%s h-100" $class }}{{ end }}

{{ $list := slice }}
<!-- Initialize list elements -->
{{ $elements := slice }}
{{ if $isPages }}
{{ range $index, $element := $pages }}
{{ range $index, $element := $list }}
{{ $params := dict }}
<!-- regular page -->
{{- if and $element.RelPermalink $element.File -}}
Expand All @@ -82,102 +83,95 @@
) -}}
{{- end -}}

{{- $list = $list | append $params }}
{{- $elements = $elements | append $params }}
{{ end }}
{{ else if $pages }}
{{ $list = $list | append $pages }}
{{ else if $list }}
{{ $elements = $elements | append $list }}
{{ end }}

{{- $count := len $list -}}
<!-- Limit list to max elements -->
{{- $count := len $elements -}}
{{- $max := $count -}}
{{- $max = math.Min (.max | default $count) $count -}}
{{- $responsive := .responsive | default true -}}
{{- $max = math.Min ($args.max | default $count) $count -}}
{{- if not $args.paginate -}}
{{- $elements = first $max $elements -}}
{{- end -}}

{{/* Initialize grid and layout */}}
{{- $sizes := "100vw" }}
{{- $colGrid := "" -}}
{{ if not $scroll }}
{{ $colGrid = printf "row-cols-%s" $cols }}
{{- if eq $cols "1" }}
{{ $colGrid = "row-cols-1" -}}
{{- else if eq $cols "2" }}
{{ if $responsive }}
{{ $colGrid = printf "row-cols-1 row-cols-%s-1 row-cols-%s-2" $breakpoint.prev $breakpoint.current }}
{{ end -}}
{{ $sizes = printf "(min-width: %s) 50vw, 100vw" $breakpoint.currentSize }}
{{- else if eq $cols "3" }}
{{ if $responsive }}
{{ $colGrid = printf "row-cols-1 row-cols-%s-2 row-cols-%s-3" $breakpoint.prev $breakpoint.current }}
{{ end -}}
{{ $sizes = printf "(min-width: %s) 33.3vw, (min-width: %s) 50vw, 100vw" $breakpoint.currentSize $breakpoint.prevSize }}
{{- else if eq $cols "4" }}
{{ if $responsive }}
{{ $colGrid = printf "row-cols-1 row-cols-%s-2 row-cols-%s-4" $breakpoint.prev $breakpoint.current }}
{{ end -}}
{{ $sizes = printf "(min-width: %s) 25vw, (min-width: %s) 50vw, 100vw" $breakpoint.currentSize $breakpoint.prevSize }}
{{- else if eq $cols "5" }}
{{ if $responsive }}
{{ $colGrid = printf "row-cols-1 row-cols-%s-3 row-cols-%s-5" $breakpoint.prev $breakpoint.current }}
{{ end -}}
{{ $sizes = printf "(min-width: %s) 20vw, (min-width: %s) 33.3vw, 100vw" $breakpoint.currentSize $breakpoint.prevSize }}
{{ end -}}
{{ if not $args.scroll }}
{{ $colGrid = index $colsMap $args.cols }}
{{ if $args.responsive }}{{ $sizes = index $sizesMap $args.cols }}{{ end }}
{{ else }}
{{ if in (slice "2" "3" "4" "5") $cols }}
{{ $sizes = replace (printf "%.1fvw" (div 100.0 (int $cols))) ".0" "" }}
{{ if in (slice "2" "3" "4" "5") $args.cols }}
{{ $sizes = replace (printf "%.1fvw" (div 100.0 (int $args.cols))) ".0" "" }}
{{ end }}
{{ end }}

{{- if not $paginate -}}
{{- $list = first $max $list -}}
{{- end -}}
{{- if and (eq $args.cols "1") (eq $orientation "horizontal") }}{{ $orientation = "horizontal-sm" }}{{ end -}}

{{- if and (eq $cols "1") (eq $orientation "horizontal") }}{{ $orientation = "horizontal-sm" }}{{ end -}}
{{ if not $args.spacer }}
{{ $class = printf "%s h-100" $class }}
{{ end }}

<!-- Main code -->
<div class="container-fluid {{ $wrapper }} {{ if $scroll }}card-container-wrapper{{ end }}">
<div class="row g-{{ $gutter }} {{ if $scroll }}d-flex flex-row flex-nowrap card-container scrollbar-horizontal pb-4 w-100 {{ end }} {{ $colGrid }}">
{{ range $index, $element := $list }}
{{- $params := (dict
"class" (printf " %s" $class)
"color" $color
"footer" $footer
"body" $body
"header" $header
"loading" $loading
"sizes" $sizes
"orientation" $orientation
"padding" $padding
"ratio" $ratio
"portrait" $portrait
"subtle" $subtle
"style" $style
"align" $align
"button" $button
"buttonLabel" $buttonLabel
"buttonType" $buttonType
"iconRounded" $iconRounded
) -}}
{{- $params = merge $element $params }}
<div class="{{ $args.wrapper }}">
<div class="container-fluid {{ if $args.scroll }}card-container-wrapper{{ end }} p-0">
<div class="row g-{{ $args.gutter }} {{ if $args.scroll }}d-flex flex-row flex-nowrap card-container scrollbar-horizontal pb-4 w-100 {{ end }}
{{ if $args.bento }}{{ with $args.valign }}align-items-{{ . }}{{ end }}{{ else }}{{ $colGrid }}{{ end }}">
{{ range $index, $element := $elements }}
{{- $params := (dict
"class" (printf " %s" $class)
"color" $args.color
"footer" $args.footer
"body" $args.body
"header" $args.header
"loading" $args.loading
"sizes" $sizes
"orientation" (partial "assets/style.html" (dict "styles" $args.styles "index" $index "key" "orientation" "default" $orientation))
"padding" $args.padding
"ratio" (partial "assets/style.html" (dict "styles" $args.styles "index" $index "key" "ratio" "default" $args.ratio))
"portrait" (partial "assets/style.html" (dict "styles" $args.styles "index" $index "key" "portrait" "default" $args.portrait))
"subtle" $args.subtle
"style" $args.style
"align" $args.align
"button" $args.button
"buttonLabel" $args.buttonLabel
"buttonType" $args.buttonType
"iconRounded" $args.iconRounded
) -}}
{{- $params = merge $element $params }}

{{ if $args.scroll }}
{{ $width := (partial "assets/style.html" (dict "styles" $args.styles "index" $index "key" "width" "default" "3")) }}
{{ $size := $args.cols }}
{{ if and (gt $args.cols 1) (eq $width "6") }}{{ $size = sub (int $args.cols) 1 }}{{ end }}
{{ $cardWrapper = printf "card-block card-block-%d" (int $size) }}
{{ end }}

<div class="{{ with $cardWrapper }}{{ . }}{{ else }}col{{ end }}">
{{ if $spacer }}<div class="spacer"></div>{{ end }}
{{- partial $hook $params -}}
</div>
{{- if and (lt $index (sub $max 1)) $separator -}}
<div class="col d-block d-sm-none">
<hr>
<!--add col-$width -->
<div class="{{ with $cardWrapper }}{{ . }}{{ else }}col{{ end }}">
{{ if $args.spacer }}<div class="spacer"></div>{{ end }}
{{- partial $args.hook $params -}}
</div>
{{- if and (lt $index (sub $max 1)) $args.separator -}}
<div class="col d-block d-sm-none">
<hr>
</div>
{{- end -}}
{{- end -}}
{{- end -}}
{{ if $cards }}{{- print $cards | safeHTML }}{{ end }}
{{ if $args.cards }}{{- print $args.cards | safeHTML }}{{ end }}
</div>
</div>

{{ if $paginator }}
{{- if gt $paginator.TotalPages 1 -}}
<div class="pt-3">{{ partial "assets/pagination.html" (dict "page" $page "format" "terse") }}</div>
<div class="pt-3">{{ partial "assets/pagination.html" (dict "page" $args.page "format" "terse") }}</div>
{{- end -}}
{{ else }}
{{ if and (gt $count $max) $moreTitle }}
<a class="btn btn-outline-primary mt-4" href="{{ $moreURL| safeURL }}" role="button">{{ $moreTitle }}</a>
{{ if and (gt $count $max) $args.hrefTitle }}
<a class="btn btn-outline-primary mt-4" href="{{ $args.href| safeURL }}" role="button">{{ $args.hrefTitle }}</a>
{{ end }}
{{ end }}
</div>
7 changes: 5 additions & 2 deletions layouts/partials/assets/card.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,8 @@
{{ end }}

{{- if eq $orientation "none" }}{{ $thumbnail = "" }}{{ $icon = "" }}{{ end -}}
{{- if eq $body "none" }}{{ $description = "" }}{{ end -}}
{{- if eq $body "title" }}{{ $description = "" }}{{ end -}}
{{- if eq $body "none" }}{{ $title = "" }}{{ $description = "" }}{{ end -}}

<!-- Inline partial to render the card's body -->
{{- define "partials/card-body.html" -}}
Expand Down Expand Up @@ -216,6 +217,7 @@
</div>
{{- else -}}
<!-- Render stacked / default card -->
{{ $overlay := eq $orientation "overlay" }}
<div class="card {{ $colorStyle }} {{ $class }} text-{{ $align }}">
{{- if $thumbnail -}}
{{- partial $hook (dict "url" $thumbnail "ratio" (or $ratio "16x9") "portrait" $portrait "anchor" $anchor "sizes" $sizes "wrapper" "card-img-wrap" "class" "card-img-top card-img-bg" "title" (or $alt $title) "loading" $loading) -}}
Expand All @@ -229,7 +231,8 @@
{{ end }}
</div>
{{- end -}}
<div class="card-body d-flex flex-column p-{{ $padding }}">
<div class="card-body d-flex flex-column p-{{ $padding }} {{ if $overlay }}card-img-overlay card-overlay-gradient p-4{{ end }}" {{ if $overlay }}data-bs-theme="dark"{{ end }}>
{{ if $overlay }}<div class="flex-grow-1"></div>{{ end }}
{{ if $page }}{{- partial "card-caption.html" (dict "page" $page "keywords" $header "color" $color) -}}{{ end }}
{{- partial "card-body.html" (dict "title" $title "href" $href "color" $color "description" $description) -}}
{{ if $page }}{{- partial "card-caption.html" (dict "page" $page "keywords" $footer "color" $color) -}}{{ end }}
Expand Down
4 changes: 2 additions & 2 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading

0 comments on commit 4de91bb

Please sign in to comment.