mirror of
https://github.com/tiennm99/HugoBlox-kit.git
synced 2026-10-07 06:14:00 +00:00
Ian Eve Perry
628d09d791
Dates in the experience widget don't currently right align if the location string is longer than the date string. This changes the widget so the dates are always right aligned. See #858
61 lines
2.4 KiB
HTML
61 lines
2.4 KiB
HTML
{{ $ := .root }}
|
||
{{ $page := .page }}
|
||
|
||
<!-- Experience widget -->
|
||
<div class="row">
|
||
<div class="col-12 col-lg-4 section-heading">
|
||
<h1>{{ with $page.Title }}{{ . | markdownify }}{{ end }}</h1>
|
||
{{ with $page.Params.subtitle }}<p>{{ . | markdownify }}</p>{{ end }}
|
||
</div>
|
||
<div class="col-12 col-lg-8">
|
||
{{ with $page.Content }}<p>{{ . | markdownify }}</p>{{ end }}
|
||
|
||
{{ if $page.Params.experience }}
|
||
{{ $exp_len := len $page.Params.experience }}
|
||
{{ range $idx, $key := sort $page.Params.experience ".date_start" "desc" }}
|
||
<div class="row experience">
|
||
<!-- Timeline -->
|
||
<div class="col-auto text-center flex-column d-none d-sm-flex">
|
||
<div class="row h-50">
|
||
<div class="col {{if gt $idx 0}}border-right{{end}}"> </div>
|
||
<div class="col"> </div>
|
||
</div>
|
||
<div class="m-2">
|
||
<span class="badge badge-pill border {{if not .date_end}}exp-fill{{end}}"> </span>
|
||
</div>
|
||
<div class="row h-50">
|
||
<div class="col {{if lt $idx (sub $exp_len 1)}}border-right{{end}}"> </div>
|
||
<div class="col"> </div>
|
||
</div>
|
||
</div>
|
||
<!-- Content -->
|
||
<div class="col py-2">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<div class="float-right text-muted exp-meta">
|
||
<div class="text-right">
|
||
{{ (time .date_start).Format ($page.Params.date_format | default "January 2006") }} –
|
||
{{ if .date_end}}
|
||
{{ (time .date_end).Format ($page.Params.date_format | default "January 2006") }}
|
||
{{else}}
|
||
{{ i18n "present" | default "Present" }}
|
||
{{end}}
|
||
</div>
|
||
{{with .location}}
|
||
<div class="text-right">{{.}}</div>
|
||
{{end}}
|
||
</div>
|
||
<h4 class="card-title exp-title text-muted mt-0 mb-1">{{.title | markdownify | emojify}}</h4>
|
||
<h4 class="card-title exp-company text-muted my-0">
|
||
{{- with .company_url}}<a href="{{.}}" target="_blank" rel="noopener">{{end}}{{.company | markdownify | emojify}}{{with .company_url}}</a>{{end -}}
|
||
</h4>
|
||
{{with .description}}<div class="card-text">{{. | markdownify | emojify}}</div>{{end}}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{{end}}
|
||
{{end}}
|
||
</div>
|
||
</div>
|