Merge ce7e52d083 into d93c49d82a
This commit is contained in:
Fabio Fenoglio
GitHub
commit
bc6b89a836
23 changed files with 394 additions and 10 deletions
|
|
@ -199,6 +199,7 @@ Here is the check list for portfolio mode,
|
|||
|
||||
- [x] Skill Cards
|
||||
- [x] Markdown Support
|
||||
- [x] Skills breakdown popup
|
||||
|
||||
- [x] **Experiences**
|
||||
|
||||
|
|
|
|||
|
|
@ -118,3 +118,6 @@ other = "নোট সমূহ"
|
|||
|
||||
[disclaimer_text]
|
||||
other = "দায় বিজ্ঞপ্তি"
|
||||
|
||||
[close]
|
||||
other = "বন্ধ"
|
||||
|
|
|
|||
|
|
@ -121,3 +121,6 @@ other = "Notizen"
|
|||
|
||||
[disclaimer_text]
|
||||
other = "Haftungshinweis"
|
||||
|
||||
[close]
|
||||
other = "Aus"
|
||||
|
|
|
|||
|
|
@ -121,3 +121,6 @@ other = "Notes"
|
|||
|
||||
[disclaimer_text]
|
||||
other = "Liability Notice"
|
||||
|
||||
[close]
|
||||
other = "Close"
|
||||
|
|
|
|||
|
|
@ -121,3 +121,6 @@ other = "Notas"
|
|||
|
||||
[disclaimer_text]
|
||||
other = "Aviso de responsabilidad"
|
||||
|
||||
[close]
|
||||
other = "Cerrar"
|
||||
|
|
@ -121,3 +121,6 @@ other = "Remarques"
|
|||
|
||||
[disclaimer_text]
|
||||
other = "Avis de responsabilité"
|
||||
|
||||
[close]
|
||||
other = "Fermer"
|
||||
|
|
@ -121,3 +121,6 @@ other = "टिप्पणियाँ"
|
|||
|
||||
[disclaimer_text]
|
||||
other = "दायित्व सूचना"
|
||||
|
||||
[close]
|
||||
other = "बंद कर देना"
|
||||
|
|
@ -121,3 +121,6 @@ other = "Catatan"
|
|||
|
||||
[disclaimer_text]
|
||||
other = "Pemberitahuan Kewajiban"
|
||||
|
||||
[close]
|
||||
other = "Menutup"
|
||||
|
|
@ -121,3 +121,6 @@ other = "Appunti"
|
|||
|
||||
[disclaimer_text]
|
||||
other = "Avviso di responsabilità"
|
||||
|
||||
[close]
|
||||
other = "Chiudi"
|
||||
|
|
|
|||
|
|
@ -118,3 +118,6 @@ other = "ノート"
|
|||
|
||||
[disclaimer_text]
|
||||
other = "責任通知"
|
||||
|
||||
[close]
|
||||
other = "選ぶ"
|
||||
|
|
@ -121,3 +121,6 @@ other = "메모"
|
|||
|
||||
[disclaimer_text]
|
||||
other = "책임 고지"
|
||||
|
||||
[close]
|
||||
other = "닫다"
|
||||
|
|
@ -120,3 +120,6 @@ other = "Opmerkingen"
|
|||
|
||||
[disclaimer_text]
|
||||
other = "Haftungshinweis"
|
||||
|
||||
[close]
|
||||
other = "Dichtbij"
|
||||
|
|
@ -121,3 +121,6 @@ other = "Ноты"
|
|||
|
||||
[disclaimer_text]
|
||||
other = "Уведомление об ответственности"
|
||||
|
||||
[close]
|
||||
other = "Закрыть"
|
||||
|
|
@ -121,3 +121,6 @@ other = "Ghi chú"
|
|||
|
||||
[disclaimer_text]
|
||||
other = "Thông báo trách nhiệm"
|
||||
|
||||
[close]
|
||||
other = "Gần"
|
||||
|
|
@ -121,3 +121,6 @@ other = "笔记"
|
|||
|
||||
[disclaimer_text]
|
||||
other = "免责声明"
|
||||
|
||||
[close]
|
||||
other = "关闭"
|
||||
|
|
@ -121,3 +121,6 @@ other = "筆記"
|
|||
|
||||
[disclaimer_text]
|
||||
other = "免責聲明"
|
||||
|
||||
[close]
|
||||
other = "关闭"
|
||||
56
layouts/partials/cards/skill-popup.html
Normal file
56
layouts/partials/cards/skill-popup.html
Normal 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">×</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 }}
|
||||
|
|
@ -1,22 +1,59 @@
|
|||
<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 }}>
|
||||
<div class="card">
|
||||
<div class="card-head d-flex">
|
||||
{{ if .logo }}
|
||||
{{ $logoImage := resources.Get .logo }}
|
||||
{{ $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 .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 $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 }}
|
||||
29
layouts/partials/misc/circular-progress.html
Normal file
29
layouts/partials/misc/circular-progress.html
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
{{ if isset .ctx "percentage" }}
|
||||
{{ $predefinedColor:= true}}
|
||||
{{ if hasPrefix .ctx.color "#"}}
|
||||
{{ $predefinedColor = false }}
|
||||
{{ end }}
|
||||
{{ $size := "" }}
|
||||
{{ if .size }}
|
||||
{{ $size = .size }}
|
||||
{{ end }}
|
||||
<div class="circular-progress circular-progress-{{ $size }} {{if $predefinedColor}}{{ .ctx.color }}{{end}}">
|
||||
<span class="circular-progress-left">
|
||||
<span
|
||||
class="circular-progress-bar circular-progress-percentage-{{ .ctx.percentage }}"
|
||||
{{ if not $predefinedColor }}
|
||||
style="border-color: {{.ctx.color}};"
|
||||
{{ end }}
|
||||
></span>
|
||||
</span>
|
||||
<span class="circular-progress-right">
|
||||
<span
|
||||
class="circular-progress-bar"
|
||||
{{ if not $predefinedColor }}
|
||||
style="border-color: {{.ctx.color}};"
|
||||
{{ end }}
|
||||
></span>
|
||||
</span>
|
||||
<div class="circular-progress-value"></div>
|
||||
</div>
|
||||
{{ end }}
|
||||
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 }}
|
||||
|
|
@ -458,3 +458,10 @@ mark {
|
|||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* modals need to be shifted down to compensate for the header
|
||||
but only if the modal is not centered (has class .modal-dialog-centered)
|
||||
*/
|
||||
.modal-dialog {
|
||||
padding-top: 2em;
|
||||
}
|
||||
|
|
@ -23,6 +23,16 @@
|
|||
box-shadow: none;
|
||||
position: relative;
|
||||
}
|
||||
.circular-progress-sm {
|
||||
width: 75px;
|
||||
height: 75px;
|
||||
line-height: 75px;
|
||||
}
|
||||
.circular-progress-xs {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
line-height: 25px;
|
||||
}
|
||||
|
||||
.circular-progress:after {
|
||||
content: "";
|
||||
|
|
@ -34,6 +44,12 @@
|
|||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.circular-progress-sm:after {
|
||||
border: 6px solid #f9fafc;
|
||||
}
|
||||
.circular-progress-xs:after {
|
||||
border: 4px solid #f9fafc;
|
||||
}
|
||||
|
||||
.circular-progress > span {
|
||||
width: 50%;
|
||||
|
|
@ -57,6 +73,12 @@
|
|||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
.circular-progress-sm .circular-progress-bar {
|
||||
border-width: 6px;
|
||||
}
|
||||
.circular-progress-xs .circular-progress-bar {
|
||||
border-width: 4px;
|
||||
}
|
||||
|
||||
.circular-progress .circular-progress-left .circular-progress-bar {
|
||||
left: 100%;
|
||||
|
|
@ -65,6 +87,14 @@
|
|||
border-left: 0;
|
||||
transform-origin: center left;
|
||||
}
|
||||
.circular-progress-sm .circular-progress-left .circular-progress-bar {
|
||||
border-top-right-radius: 40px;
|
||||
border-bottom-right-radius: 40px;
|
||||
}
|
||||
.circular-progress-xs .circular-progress-left .circular-progress-bar {
|
||||
border-top-right-radius: 15px;
|
||||
border-bottom-right-radius: 15px;
|
||||
}
|
||||
|
||||
.circular-progress .circular-progress-right {
|
||||
right: 0;
|
||||
|
|
@ -79,6 +109,14 @@
|
|||
-webkit-animation: circular-loading-1 1.8s linear forwards;
|
||||
animation: circular-loading-1 1.8s linear forwards;
|
||||
}
|
||||
.circular-progress-sm .circular-progress-right .circular-progress-bar {
|
||||
border-top-left-radius: 40px;
|
||||
border-bottom-left-radius: 40px;
|
||||
}
|
||||
.circular-progress-xs .circular-progress-right .circular-progress-bar {
|
||||
border-top-left-radius: 15px;
|
||||
border-bottom-left-radius: 15px;
|
||||
}
|
||||
|
||||
.circular-progress .circular-progress-value {
|
||||
width: 90%;
|
||||
|
|
|
|||
|
|
@ -18,6 +18,10 @@
|
|||
text-decoration: none;
|
||||
}
|
||||
|
||||
.skills-section .skill-card-link-with-popup {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.skills-section .card .card-img-xs {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
|
@ -33,6 +37,77 @@
|
|||
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 ======= */
|
||||
|
||||
/* Large screens such as TV */
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue