Add optional skills breakdown modal

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**
 

i18n/bn.toml

@@ -118,3 +118,6 @@ other = "নোট সমূহ"
 
 [disclaimer_text]
 other = "দায় বিজ্ঞপ্তি"
+
+[close]
+other = "বন্ধ"

i18n/de.toml

@@ -121,3 +121,6 @@ other = "Notizen"
 
 [disclaimer_text]
 other = "Haftungshinweis"
+
+[close]
+other = "Aus"

i18n/en.toml

@@ -121,3 +121,6 @@ other = "Notes"
 
 [disclaimer_text]
 other = "Liability Notice"
+
+[close]
+other = "Close"

i18n/es.toml

@@ -121,3 +121,6 @@ other = "Notas"
 
 [disclaimer_text]
 other = "Aviso de responsabilidad"
+
+[close]
+other = "Cerrar"

i18n/fr.toml

@@ -121,3 +121,6 @@ other = "Remarques"
 
 [disclaimer_text]
 other = "Avis de responsabilité"
+
+[close]
+other = "Fermer"

i18n/hi.toml

@@ -121,3 +121,6 @@ other = "टिप्पणियाँ"
 
 [disclaimer_text]
 other = "दायित्व सूचना"
+
+[close]
+other = "बंद कर देना"

i18n/id.toml

@@ -121,3 +121,6 @@ other = "Catatan"
 
 [disclaimer_text]
 other = "Pemberitahuan Kewajiban"
+
+[close]
+other = "Menutup"

i18n/it.toml

@@ -121,3 +121,6 @@ other = "Appunti"
 
 [disclaimer_text]
 other = "Avviso di responsabilità"
+
+[close]
+other = "Chiudi"

i18n/jp.toml

@@ -118,3 +118,6 @@ other = "ノート"
 
 [disclaimer_text]
 other = "責任通知"
+
+[close]
+other = "選ぶ"

i18n/ko.toml

@@ -121,3 +121,6 @@ other = "메모"
 
 [disclaimer_text]
 other = "책임 고지"
+
+[close]
+other = "닫다"

i18n/nl.toml

@@ -119,4 +119,7 @@ other = "Bekijk certificaat"
 other = "Opmerkingen"
 
 [disclaimer_text]
-other = "Haftungshinweis"
+other = "Haftungshinweis"
+
+[close]
+other = "Dichtbij"

i18n/ru.toml

@@ -121,3 +121,6 @@ other = "Ноты"
 
 [disclaimer_text]
 other = "Уведомление об ответственности"
+
+[close]
+other = "Закрыть"

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"

i18n/zh-cn.toml

@@ -121,3 +121,6 @@ other = "笔记"
 
 [disclaimer_text]
 other = "免责声明"
+
+[close]
+other = "关闭"

i18n/zh-tw.toml

@@ -121,3 +121,6 @@ other = "筆記"
 
 [disclaimer_text]
 other = "免責聲明"
+
+[close]
+other = "关闭"

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 }}
+  <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 }}

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 }}
 <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 }}

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 }}
+<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 }}

layouts/partials/misc/skills-breakdown.html

@@ -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 }}

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;
+}