diff options
| author | Guillermo Guerrero Ibarra <wolf.fox1985@gmail.com> | 2021-08-07 20:36:45 +0300 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-08-07 20:36:45 +0300 |
| commit | c80a0e76599f76f4efa4687b73de9dfbb3f5ed6c (patch) | |
| tree | e1199f74720cab0a7c3e8baee27d283dab3cec6b | |
| parent | 39d9ad856ddae27eaaf83a10df64d0a1bc1733a4 (diff) | |
Able to customize number of columns. (#308)
* Able to customize number of columns.
* mark row with index.
* clases to rows odd/even.
* Update features.html
Co-authored-by: Guillermo Guerrero Ibarra <guillermo.guerrero@deliveroo.co.uk>
| -rw-r--r-- | README.md | 3 | ||||
| -rw-r--r-- | exampleSite/config.toml | 1 | ||||
| -rw-r--r-- | layouts/partials/features.html | 55 |
3 files changed, 36 insertions, 23 deletions
@@ -415,11 +415,12 @@ The meaning of the individual YAML keys is as follows: | `url` | An optional URL the feature icon should point to; if specified, the icon will become a clickable hyperlink | | `description` | A short text below the title text to describe the feature; Markdown is supported | -Once you have completed your features, enable them in the `config.toml` file. +Once you have completed your features, enable them in the `config.toml` file. Also the number of elements per row can be defined, by default is 3 (choose a divisor of 12 like 2, 3, 4 or 6). ```toml [params.features] enable = true + cols = 3 ``` #### Testimonials diff --git a/exampleSite/config.toml b/exampleSite/config.toml index 1bd36b2..1692d27 100644 --- a/exampleSite/config.toml +++ b/exampleSite/config.toml @@ -490,6 +490,7 @@ paginate = 10 [params.features] enable = true + cols = 3 # Default: 3, Available values 2,3,4,6 # All features are defined in their own files. You can find example items # at 'exampleSite/data/features'. # For more informtion take a look at the README. diff --git a/layouts/partials/features.html b/layouts/partials/features.html index f41f2a1..ea73ac5 100644 --- a/layouts/partials/features.html +++ b/layouts/partials/features.html @@ -3,30 +3,41 @@ {{ if gt (len .Site.Data.features) 0 }} <section class="bar background-white"> <div class="container"> - {{ range $index, $element := sort .Site.Data.features "weight" }} - {{ if eq (mod $index 3) 0 }} - <div class="col-md-12"> - <div class="row"> + {{ $elements := default 3 .Site.Params.features.cols }} + {{ $features := sort .Site.Data.features "weight" }} + + {{ $total_rows := div (len $features) $elements }} + + {{ if gt (mod (len $features) $elements) 0 }} + {{ $total_rows = add $total_rows 1 }} {{ end }} - <div class="col-md-4"> - <div class="box-simple"> - {{ with $element.url }} - <a href="{{ $element.url }}"> - {{ end }} - <div class="icon"> - <i class="{{ .icon }}"></i> - </div> - {{ with $element.url }} - </a> - {{ end }} - <h3>{{ $element.name | markdownify }}</h3> - <p>{{ $element.description | markdownify }}</p> + + {{ range $i, $sequence := seq $total_rows }} + <div class="row row-{{ $i }} row-{{ if eq (mod $i 2) 0 }}odd{{ else }}even{{ end }}"> + {{ range $j, $sequence2 := (seq $elements) }} + + {{ $feature_index := add (mul $i $elements) $j }} + {{ if lt $feature_index (len $features) }} + {{ $element := index $features $feature_index }} + + <div class="col-md-{{ div 12 $elements }} col-{{ $j }} col-{{ if eq (mod $j 2) 0 }}odd{{ else }}even{{ end }}"> + <div class="box-simple"> + {{ with $element.url }} + <a href="{{ $element.url }}"> + {{ end }} + <div class="icon"> + <i class="{{ $element.icon }}"></i> + </div> + {{ with $element.url }} + </a> + {{ end }} + <h3>{{ $element.name | markdownify }}</h3> + <p>{{ $element.description | markdownify }}</p> + </div> </div> - </div> - {{ if or (eq (mod $index 3) 2) (eq $index (sub (len $.Site.Data.features) 1 )) }} - </div> - </div> - {{ end }} + {{ end }} + {{ end }} + </div> {{ end }} </div> </section> |