added reusable and nested skills-breakdown component
This commit is contained in:
Fabio Fenoglio
parent
a2f2b0977b
commit
150772a72b
2 changed files with 171 additions and 0 deletions
96
layouts/partials/misc/skills-breakdown.html
Normal file
96
layouts/partials/misc/skills-breakdown.html
Normal file
|
|
@ -0,0 +1,96 @@
|
||||||
|
{{ if .breakdown }}
|
||||||
|
{{ $parentId := .parentId }}
|
||||||
|
{{ $level := .level }}
|
||||||
|
<div class="container p-0 skill-list">
|
||||||
|
<div id="skill-list-accordion-{{ $parentId }}">
|
||||||
|
{{ range $index, $section := .breakdown }}
|
||||||
|
{{ $entryId := (printf "%s-%d" $parentId $index) }}
|
||||||
|
{{ $hasChildrenSections := (isset . "breakdown") }}
|
||||||
|
{{/* a suitable auto-open policy might be something like: $isOpened := or (eq $index 0) (and (gt $level 0) (lt $level 2)) */}}
|
||||||
|
{{ $isOpened := (.expandBreakdown | default false) }}
|
||||||
|
<div class="skill-row {{ if $hasChildrenSections }}skill-row-with-children{{end}}">
|
||||||
|
<div class="skill-row-header" id="heading-{{ $entryId }}" data-toggle="collapse" data-target="#collapse-{{ $entryId }}"
|
||||||
|
{{ if $isOpened }} aria-expanded="true" {{ end }}
|
||||||
|
aria-controls="collapse-{{ $entryId }}"
|
||||||
|
>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-12 col-md-2 col-lg-1 pb-2">
|
||||||
|
{{ if isset . "percentage" }}
|
||||||
|
{{ partial "partials/misc/circular-progress.html" (dict "ctx" . "size" "xs") }}
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
{{ if .logo }}
|
||||||
|
{{ $logoImage := "" }}
|
||||||
|
{{ $logoImage = resources.Get .logo }}
|
||||||
|
{{ if ne $logoImage.MediaType.SubType "svg" }}
|
||||||
|
{{ $logoImage = $logoImage.Fit "32x32" }}
|
||||||
|
{{ end }}
|
||||||
|
<img class="card-img-sm mr-2" src="{{ $logoImage.RelPermalink }}" alt="{{ .name }}" />
|
||||||
|
{{ end }}
|
||||||
|
</div>
|
||||||
|
<div class="col-12 col-md-9 col-lg-10 pb-2">
|
||||||
|
{{ with .name }}
|
||||||
|
{{ . }}
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
{{ if isset . "progress" }}
|
||||||
|
{{ $progressClass := "" }}
|
||||||
|
{{ if isset . "progressClass" }}
|
||||||
|
{{ $progressClass = .progressClass }}
|
||||||
|
{{ else }}
|
||||||
|
{{ if le .progress 30 }}
|
||||||
|
{{ $progressClass = "bg-danger" }}
|
||||||
|
{{ else if le .progress 75 }}
|
||||||
|
{{ $progressClass = "bg-warning" }}
|
||||||
|
{{ else }}
|
||||||
|
{{ $progressClass = "bg-success" }}
|
||||||
|
{{ end }}
|
||||||
|
{{ end }}
|
||||||
|
<div class="progress skill-progress">
|
||||||
|
<div
|
||||||
|
class="progress-bar {{ $progressClass }}"
|
||||||
|
role="progressbar"
|
||||||
|
aria-valuemin="0"
|
||||||
|
aria-valuemax="100"
|
||||||
|
style="width: {{ .progress }}%"
|
||||||
|
aria-valuenow="{{ .progress }}"
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
{{ with .summary }}
|
||||||
|
<p class="text-muted">
|
||||||
|
{{ . | markdownify }}
|
||||||
|
</p>
|
||||||
|
{{ end }}
|
||||||
|
</div>
|
||||||
|
<div class="col-12 col-md-1 text-right skill-panel-indicator-cell">
|
||||||
|
{{ if $hasChildrenSections }}
|
||||||
|
<a class="skill-panel-indicator">
|
||||||
|
<span class="is-opened fas fa-caret-up"></span>
|
||||||
|
<span class="is-closed fas fa-caret-down"></span>
|
||||||
|
</a>
|
||||||
|
{{ end }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{{ if $hasChildrenSections }}
|
||||||
|
<div id="collapse-{{ $entryId }}" class="collapse {{ if $isOpened }}show{{ end }}" aria-labelledby="heading-{{ $entryId }}" data-parent="#skill-list-accordion-{{ $parentId }}">
|
||||||
|
<div class="skill-row-body">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-12 col-sm-1">
|
||||||
|
<!-- EMPTY -->
|
||||||
|
</div>
|
||||||
|
<div class="col-12 col-sm-11">
|
||||||
|
{{ partial "partials/misc/skills-breakdown.html" (dict "breakdown" .breakdown "parentId" $entryId "level" (add $level 1)) }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{{ end }}
|
||||||
|
</div>
|
||||||
|
{{ end }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{{ end }}
|
||||||
|
|
@ -18,6 +18,10 @@
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.skills-section .skill-card-link-with-popup {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
.skills-section .card .card-img-xs {
|
.skills-section .card .card-img-xs {
|
||||||
margin-right: 0.5rem;
|
margin-right: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
@ -33,6 +37,77 @@
|
||||||
padding-left: 0.7rem;
|
padding-left: 0.7rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.skills-section .skill-card-bottom-row {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
padding-left: 1em;
|
||||||
|
padding-right: 1em;
|
||||||
|
padding-bottom: 0.25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skills-section .skill-card-icons {
|
||||||
|
text-align: left;
|
||||||
|
padding-top: 0.25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skills-section .skill-card-icons img {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
margin-right: 0.50em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skills-section .card .skill-card-buttons {
|
||||||
|
text-align: right;
|
||||||
|
padding-top: 0;
|
||||||
|
padding-right: 0.20em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ============= Skills drill-down popup ======= */
|
||||||
|
|
||||||
|
.skill-modal .skill-popup-summary {
|
||||||
|
margin-bottom: 2.50em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skill-list .skill-progress {
|
||||||
|
height: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skill-list .skill-row p {
|
||||||
|
margin-bottom: 0.50rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skill-list .skill-row:last-child {
|
||||||
|
margin-bottom: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skill-list .skill-row.skill-row-with-children {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skill-list .skill-row.skill-row-with-children .skill-panel-indicator-cell {
|
||||||
|
padding-top: 0.50em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skill-list .skill-row.skill-row-with-children .skill-panel-indicator {
|
||||||
|
cursor: pointer;
|
||||||
|
color: #6c757d!important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skill-list .skill-row .skill-row-header[aria-expanded="true"] .is-opened {
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
|
.skill-list .skill-row .skill-row-header[aria-expanded="true"] .is-closed {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.skill-list .skill-row .skill-row-header:not([aria-expanded="true"]) .is-opened {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.skill-list .skill-row .skill-row-header:not([aria-expanded="true"]) .is-closed {
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
|
|
||||||
/* ============= Device specific fixes ======= */
|
/* ============= Device specific fixes ======= */
|
||||||
|
|
||||||
/* Large screens such as TV */
|
/* Large screens such as TV */
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue