hugo-toha/layouts/partials/cards/skill-popup.html
2021-12-11 11:24:00 +01:00

56 lines
No EOL
2 KiB
HTML

{{ if .skill.popup }}
{{ $skillID := replace (lower .skill.name) " " "-" }}
{{ if .skill.id }}
{{ $skillID = .skill.id }}
{{ end }}
{{ $logoImage := "" }}
{{ if .skill.logo }}
{{ $logoImage = resources.Get .skill.logo }}
{{/* svg don't support "Fit" operation */}}
{{ if ne $logoImage.MediaType.SubType "svg" }}
{{ $logoImage = $logoImage.Fit "24x24" }}
{{ end }}
{{ end }}
<div class="modal skill-modal" id="skill-{{ $skillID }}-modal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">
{{ if $logoImage }}
<img class="card-img-xs mr-2" src="{{ $logoImage.RelPermalink }}" alt="{{ .skill.name }}" />
{{ end }}
{{ .skill.name }}
</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="{{ i18n "close" }}">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<div class="container">
{{ with .skill.popup.summary }}
<div class="row">
<div class="col-12">
<p class="skill-popup-summary text-muted">
{{ . | markdownify }}
</p>
</div>
</div>
{{ end }}
{{ if .skill.popup.breakdown }}
<div class="row">
<div class="col-12">
{{ partial "partials/misc/skills-breakdown.html" (dict "breakdown" .skill.popup.breakdown "parentId" $skillID "level" 0) }}
</div>
</div>
{{ end }}
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n "close" }}</button>
</div>
</div>
</div>
</div>
{{ end }}