norm/Gainsight
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Nintex templates download as I was investigating some issue with their search bar. In the header file, if you have multiple '<input' (like we would normally do for language switcher options) it negates the button being clickable at all.

Browse Source
This commit is contained in:
Norm Rasmussen
2025-11-03 18:59:32 -05:00
parent 5f9cff53fc
commit be9edeee64
157 changed files with 10873 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

145
Custom_Templates/customer_templates/Nintex University/_progress_circle.html.liquid Normal file
View File

@ -0,0 +1,145 @@
<div class="progress-circles-container">
<!-- Completed Circle -->
<div class="progress-ring-wrapper">
<div class="circle-container">
<svg
class="progress-ring"
width="{{ size }}"
height="{{ size }}">
<circle
class="circle circle-bg"
stroke="{{ progress_background_color }}"
stroke-width="10"
fill="transparent"
r="52"
cx="60"
cy="60" />
<circle
class="circle circle-complete {{ name }}-complete"
stroke="{{ completed_color }}"
stroke-width="10"
fill="transparent"
r="52"
cx="60"
cy="60" />
</svg>
<div class="circle-number">{{ completed }}</div>
</div>
<div class="circle-label">
<span class="lang-en-US">Completed</span>
<span class="lang-es">Completado</span>
<span class="lang-fr">Terminé</span>
<span class="lang-de">Abgeschlossen</span>
<span class="lang-en-GB">Completed</span>
<span class="lang-nl">Voltooid</span>
<span class="lang-pt-BR">Completo</span>
</div>
</div>
<!-- In Progress Circle -->
<div class="progress-ring-wrapper">
<div class="circle-container">
<svg
class="progress-ring"
width="{{ size }}"
height="{{ size }}">
<circle
class="circle circle-bg"
stroke="{{ progress_background_color }}"
stroke-width="10"
fill="transparent"
r="52"
cx="60"
cy="60" />
<circle
class="circle circle-in-progress {{ name }}-in-progress"
stroke="{{ in_progress_color }}"
stroke-width="10"
fill="transparent"
r="52"
cx="60"
cy="60" />
</svg>
<div class="circle-number">{{ in_progress }}</div>
</div>
<div class="circle-label">
<span class="lang-en-US">In Progress</span>
<span class="lang-es">En Progreso</span>
<span class="lang-fr">En Cours</span>
<span class="lang-de">In Bearbeitung</span>
<span class="lang-en-GB">In Progress</span>
<span class="lang-nl">In Progress</span>
<span class="lang-pt-BR">Em Progresso</span>
</div>
</div>
</div>
<style>
.progress-circles-container {
display: flex;
align-items: center;
justify-content: center;
gap: 40px;
margin-bottom: 20px;
}
.progress-ring-wrapper {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.circle-container {
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.progress-ring {
position: relative;
}
.circle-number {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 1.5rem;
font-weight: bold;
color: var(--nintex--color--text-primary);
z-index: 1;
line-height: 1;
margin: 0;
padding: 0;
}
.circle-label {
font-size: 0.875rem;
font-weight: 500;
text-align: center;
margin-top: 10px;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
setCircleProgress(document.querySelector(".{{ name }}-complete"), '{{ completed | divided_by: total }}')
setCircleProgress(document.querySelector(".{{ name }}-in-progress"), '{{ in_progress | divided_by: total }}')
})
function setCircleProgress(circle, percent) {
let radius = circle.r.baseVal.value;
let circumference = radius * 2 * Math.PI;
circle.style.strokeDasharray = `${circumference} ${circumference}`;
circle.style.strokeDashoffset = `${circumference}`;
function setProgress(percent) {
circle.style.strokeDashoffset = circumference - (Number(percent) * circumference);
}
setProgress(percent)
}
</script>