FunctionalHacker/hugo-toha
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

added skill popup with breakdown

Browse source
This commit is contained in:
Fabio Fenoglio 2021-12-11 11:24:00 +01:00
parent 150772a72b
commit 6774d18d0e
2 changed files with 102 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

56
layouts/partials/cards/skill-popup.html Normal file
View file

@ -0,0 +1,56 @@
{{ 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 }}

55
layouts/partials/cards/skill.html
View file

@ -1,22 +1,59 @@
{{ $skillID := replace (lower .name) " " "-" }}
{{ if .id }}
{{ $skillID = .id }}
{{ end }}
{{ $logoImage := "" }}
{{ if .logo }}
{{ $logoImage = resources.Get .logo }}
{{/* svg don't support "Fit" operation */}}
{{ if ne $logoImage.MediaType.SubType "svg" }}
{{ $logoImage = $logoImage.Fit "24x24" }}
{{ end }}
{{ end }}
<div class="col-xs-12 col-sm-6 col-lg-4 pt-2">
<a class="skill-card-link" {{ if .url }}href="{{ .url }}" title="{{ .name }}" target="_blank" rel="noopener"{{ end }}>
<a class="skill-card-link {{ if .popup }} skill-card-link-with-popup {{end}}"
{{ if and (.url) (not .popup) }}href="{{ .url }}" title="{{ .name }}" target="_blank" rel="noopener"{{ end }}
{{ if .popup }}data-toggle="modal" data-target="#skill-{{ $skillID }}-modal"{{ end }}
>
<div class="card">
<div class="card-head d-flex">
{{ if .logo }}
{{ $logoImage := resources.Get .logo }}
{{/* svg don't support "Fit" operation */}}
{{ if ne $logoImage.MediaType.SubType "svg" }}
{{ $logoImage = $logoImage.Fit "24x24" }}
{{ end }}
{{ if $logoImage }}
<img class="card-img-xs" src="{{ $logoImage.RelPermalink }}" alt="{{ .name }}" />
{{ end }}
<h5 class="card-title">{{ .name }}</h5>
</div>
<div class="card-body">
<p class="card-text">{{ .summary | markdownify }}</p>
{{ if or .popup .icons }}
<div class="row skill-card-bottom-row">
<div class="col-12 col-md-8 skill-card-icons">
{{ if .icons }}
{{ range $icon := .icons }}
{{ $iconImage := "" }}
{{ $iconImage = resources.Get $icon }}
{{ if ne $iconImage.MediaType.SubType "svg" }}
{{ $iconImage = $iconImage.Fit "32x32" }}
{{ end }}
<img class="" src="{{ $iconImage.RelPermalink }}" />
{{ end }}
{{ end }}
</div>
{{ if and .popup ( .popup.showButton | default true ) }}
<div class="col-12 col-md-4 skill-card-buttons">
<button type="button" class="btn btn-link">
<i class="fas fa-search"></i>
</button>
</div>
{{ end }}
</div>
{{ end }}
</div>
</div>
</a>
</div>
{{ if .popup }}
{{ partial "partials/cards/skill-popup.html" (dict "skill" .) }}
{{ end }}