added skill popup with breakdown

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 }}
+        {{ if $logoImage }}
-          {{ $logoImage := resources.Get .logo }}
-
-          {{/*  svg don't support "Fit" operation   */}}
-          {{ if ne $logoImage.MediaType.SubType "svg" }}
-            {{ $logoImage = $logoImage.Fit "24x24" }}
-          {{ end }}
-
           <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 }}