diff --git a/README.md b/README.md index 38c63ba..1afdd86 100644 --- a/README.md +++ b/README.md @@ -199,6 +199,7 @@ Here is the check list for portfolio mode, - [x] Skill Cards - [x] Markdown Support + - [x] Skills breakdown popup - [x] **Experiences** diff --git a/i18n/bn.toml b/i18n/bn.toml index b66b430..53c7768 100644 --- a/i18n/bn.toml +++ b/i18n/bn.toml @@ -118,3 +118,6 @@ other = "নোট সমূহ" [disclaimer_text] other = "দায় বিজ্ঞপ্তি" + +[close] +other = "বন্ধ" diff --git a/i18n/de.toml b/i18n/de.toml index 979c7c6..a06670b 100644 --- a/i18n/de.toml +++ b/i18n/de.toml @@ -121,3 +121,6 @@ other = "Notizen" [disclaimer_text] other = "Haftungshinweis" + +[close] +other = "Aus" diff --git a/i18n/en.toml b/i18n/en.toml index e388159..b5acf15 100644 --- a/i18n/en.toml +++ b/i18n/en.toml @@ -121,3 +121,6 @@ other = "Notes" [disclaimer_text] other = "Liability Notice" + +[close] +other = "Close" diff --git a/i18n/es.toml b/i18n/es.toml index a2ab49b..f2ab6a7 100644 --- a/i18n/es.toml +++ b/i18n/es.toml @@ -121,3 +121,6 @@ other = "Notas" [disclaimer_text] other = "Aviso de responsabilidad" + +[close] +other = "Cerrar" \ No newline at end of file diff --git a/i18n/fr.toml b/i18n/fr.toml index 4b9135f..811f488 100644 --- a/i18n/fr.toml +++ b/i18n/fr.toml @@ -121,3 +121,6 @@ other = "Remarques" [disclaimer_text] other = "Avis de responsabilité" + +[close] +other = "Fermer" \ No newline at end of file diff --git a/i18n/hi.toml b/i18n/hi.toml index 2b01f97..4349fe9 100644 --- a/i18n/hi.toml +++ b/i18n/hi.toml @@ -121,3 +121,6 @@ other = "टिप्पणियाँ" [disclaimer_text] other = "दायित्व सूचना" + +[close] +other = "बंद कर देना" \ No newline at end of file diff --git a/i18n/id.toml b/i18n/id.toml index 20b8d95..e35f220 100644 --- a/i18n/id.toml +++ b/i18n/id.toml @@ -121,3 +121,6 @@ other = "Catatan" [disclaimer_text] other = "Pemberitahuan Kewajiban" + +[close] +other = "Menutup" \ No newline at end of file diff --git a/i18n/it.toml b/i18n/it.toml index b59a57a..566705a 100644 --- a/i18n/it.toml +++ b/i18n/it.toml @@ -121,3 +121,6 @@ other = "Appunti" [disclaimer_text] other = "Avviso di responsabilità" + +[close] +other = "Chiudi" diff --git a/i18n/jp.toml b/i18n/jp.toml index f243656..d9ff86c 100644 --- a/i18n/jp.toml +++ b/i18n/jp.toml @@ -118,3 +118,6 @@ other = "ノート" [disclaimer_text] other = "責任通知" + +[close] +other = "選ぶ" \ No newline at end of file diff --git a/i18n/ko.toml b/i18n/ko.toml index e9c9f4b..1ffe963 100644 --- a/i18n/ko.toml +++ b/i18n/ko.toml @@ -121,3 +121,6 @@ other = "메모" [disclaimer_text] other = "책임 고지" + +[close] +other = "닫다" \ No newline at end of file diff --git a/i18n/nl.toml b/i18n/nl.toml index 070504e..445a6d8 100644 --- a/i18n/nl.toml +++ b/i18n/nl.toml @@ -119,4 +119,7 @@ other = "Bekijk certificaat" other = "Opmerkingen" [disclaimer_text] -other = "Haftungshinweis" \ No newline at end of file +other = "Haftungshinweis" + +[close] +other = "Dichtbij" \ No newline at end of file diff --git a/i18n/ru.toml b/i18n/ru.toml index 76fbe25..661e7e3 100644 --- a/i18n/ru.toml +++ b/i18n/ru.toml @@ -121,3 +121,6 @@ other = "Ноты" [disclaimer_text] other = "Уведомление об ответственности" + +[close] +other = "Закрыть" \ No newline at end of file diff --git a/i18n/vn.toml b/i18n/vn.toml index a88524e..60fba40 100644 --- a/i18n/vn.toml +++ b/i18n/vn.toml @@ -121,3 +121,6 @@ other = "Ghi chú" [disclaimer_text] other = "Thông báo trách nhiệm" + +[close] +other = "Gần" \ No newline at end of file diff --git a/i18n/zh-cn.toml b/i18n/zh-cn.toml index a186830..e52ea2a 100644 --- a/i18n/zh-cn.toml +++ b/i18n/zh-cn.toml @@ -121,3 +121,6 @@ other = "笔记" [disclaimer_text] other = "免责声明" + +[close] +other = "关闭" \ No newline at end of file diff --git a/i18n/zh-tw.toml b/i18n/zh-tw.toml index f1bb3a3..02808be 100644 --- a/i18n/zh-tw.toml +++ b/i18n/zh-tw.toml @@ -121,3 +121,6 @@ other = "筆記" [disclaimer_text] other = "免責聲明" + +[close] +other = "关闭" \ No newline at end of file diff --git a/layouts/partials/cards/skill-popup.html b/layouts/partials/cards/skill-popup.html new file mode 100644 index 0000000..4ca6e81 --- /dev/null +++ b/layouts/partials/cards/skill-popup.html @@ -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 }} + +{{ end }} \ No newline at end of file diff --git a/layouts/partials/cards/skill.html b/layouts/partials/cards/skill.html index cba5529..02f684f 100644 --- a/layouts/partials/cards/skill.html +++ b/layouts/partials/cards/skill.html @@ -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 }}
- +
- {{ 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 }} {{ .name }} {{ end }}
{{ .name }}

{{ .summary | markdownify }}

+ + {{ if or .popup .icons }} +
+
+ {{ if .icons }} + {{ range $icon := .icons }} + {{ $iconImage := "" }} + {{ $iconImage = resources.Get $icon }} + {{ if ne $iconImage.MediaType.SubType "svg" }} + {{ $iconImage = $iconImage.Fit "32x32" }} + {{ end }} + + {{ end }} + {{ end }} +
+ {{ if and .popup ( .popup.showButton | default true ) }} +
+ +
+ {{ end }} +
+ {{ end }}
+{{ if .popup }} +{{ partial "partials/cards/skill-popup.html" (dict "skill" .) }} +{{ end }} \ No newline at end of file diff --git a/layouts/partials/misc/circular-progress.html b/layouts/partials/misc/circular-progress.html new file mode 100644 index 0000000..8935c44 --- /dev/null +++ b/layouts/partials/misc/circular-progress.html @@ -0,0 +1,29 @@ +{{ if isset .ctx "percentage" }} +{{ $predefinedColor:= true}} +{{ if hasPrefix .ctx.color "#"}} + {{ $predefinedColor = false }} +{{ end }} +{{ $size := "" }} +{{ if .size }} +{{ $size = .size }} +{{ end }} +
+ + + + + + +
+
+{{ end }} \ No newline at end of file diff --git a/layouts/partials/misc/skills-breakdown.html b/layouts/partials/misc/skills-breakdown.html new file mode 100644 index 0000000..800bf86 --- /dev/null +++ b/layouts/partials/misc/skills-breakdown.html @@ -0,0 +1,96 @@ +{{ if .breakdown }} + {{ $parentId := .parentId }} + {{ $level := .level }} +
+
+ {{ 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) }} +
+
+
+
+ {{ 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 }} + {{ .name }} + {{ end }} +
+
+ {{ 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 }} +
+
+
+ {{ end }} + + {{ with .summary }} +

+ {{ . | markdownify }} +

+ {{ end }} +
+
+ {{ if $hasChildrenSections }} + + + + + {{ end }} +
+
+
+ + {{ if $hasChildrenSections }} +
+
+
+
+ +
+
+ {{ partial "partials/misc/skills-breakdown.html" (dict "breakdown" .breakdown "parentId" $entryId "level" (add $level 1)) }} +
+
+
+
+ {{ end }} +
+ {{ end }} +
+
+{{ end }} \ No newline at end of file diff --git a/static/css/layouts/main.css b/static/css/layouts/main.css index bc96652..32e5290 100644 --- a/static/css/layouts/main.css +++ b/static/css/layouts/main.css @@ -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; +} \ No newline at end of file diff --git a/static/css/sections/about.css b/static/css/sections/about.css index 19fd6ce..de7fac8 100644 --- a/static/css/sections/about.css +++ b/static/css/sections/about.css @@ -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%; diff --git a/static/css/sections/skills.css b/static/css/sections/skills.css index 3fdc05f..942c040 100644 --- a/static/css/sections/skills.css +++ b/static/css/sections/skills.css @@ -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 */