nestict/ihrm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[FIX] BASE: Progressbar style

Browse Source
This commit is contained in:
Horilla
2025-08-06 15:44:56 +05:30
parent 757935f715
commit 6dfae40170
4 changed files with 65 additions and 163 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
base/templates/cbv/dashboard/progress.html
View File

@@ -1,7 +1,16 @@
{% load i18n %}
<div class="text-sm text-left p-3 pl-0 text-[#666] pe-0">
<div class="flex gap-3 items-center">
<div class="w-full bg-gray-200 rounded-full h-1.5">
<div class="bg-[#81d620] h-1.5 rounded-full" style="width: {{ instance.calculate_progress }}%;"></div>
</div>
<div class="text-sm font-medium">{{ instance.calculate_progress }}%</div>
</div>
</div>
{% comment %}
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: {{ instance.calculate_progress }}%;"></div>
</div>
<br>
<div class="progress-text">{{ instance.calculate_progress }} % {% trans "Completed" %}</div>
<div class="progress-text">{{ instance.calculate_progress }} % {% trans "Completed" %}</div> {% endcomment %}

37
horilla_theme/static/horilla_theme/assets/css/v1_styles.css
View File

@@ -317,7 +317,7 @@
width: 100%;
}
.stage-placeholder {
.group-placeholder {
background-color: #e5e7eb;
border: 2px dashed #fc8578;
margin: 0.5rem 0;
@@ -1717,6 +1717,41 @@
}
}
/* Kanban folded styles */
.folded {
width: 70px !important;
transition: all 0.5s ease-in-out;
}
.folded .kanban-head {
border: none;
}
.folded .oh-kanban__section-body {
display: none;
opacity: 0;
transform: scaleY(0);
transition: all 0.5s ease-in-out;
}
.folded .kanban-title {
transform: rotate(90deg) translateX(0);
transform-origin: top left;
position: absolute;
top: 40px;
left: 40px;
width: max-content;
transition: transform 0.5s ease-in-out;
}
.folded .folderBtn {
transform: rotate(180deg);
transition: transform 0.5s ease-in-out;
}
.folded .oh-kanban__button-contaner > :not(.folderBtn) {
display: none;
}
.oh-dot {
display: inline-block;
width: 10px;

9
horilla_theme/templates/generic/horilla_nav.html
View File

@@ -14,7 +14,11 @@
<input type="text"
class="text-color-600 ps-8 p-1.5 pb-2 placeholder:text-xs w-full border border-dark-50 rounded-md focus-visible:outline-0 placeholder:text-dark-100 text-sm [transition:.3s] focus:border-primary-600"
name="search" aria-label="Search Input" placeholder="Search" autocomplete="false" autofocus="true"
onkeyup="$(this).closest('form').find('#applyFilter').click();" {{search_input_attrs|safe}} />
hx-trigger="keyup delay:500ms"
hx-get="{{search_url}}?&referrer={{request.META.HTTP_REFERER}}&{{request.GET.urlencode}}"
{% comment %} onkeyup="$(this).closest('form').find('#applyFilter').click();" {% endcomment %}
{{search_input_attrs|safe}}
/>
<i class="fas fa-search absolute left-3 top-[1px] bottom-0 m-auto flex items-center opacity-50 text-xs"></i>
{% comment %} {% if search_in %}
<input type="text" hidden name="search_field">
@@ -149,6 +153,8 @@
{% endif %}
</div>
</div>
<div id="filterTagContainerSectionNav" class="oh-titlebar-container__filters mb-2 mt-0 oh-wrapper"></div>
<script>
$(document).ready(function () {
$("#filterForm").on("htmx:configRequest", function (event) {
@@ -173,4 +179,3 @@
});
});
</script>
<div id="filterTagContainerSectionNav" class="oh-titlebar-container__filters mb-2 mt-0 oh-wrapper"></div>

171
horilla_theme/templates/pipeline/kanban_components/kanban_stage_components.html
View File

@@ -1,151 +1,9 @@
{% load static i18n recruitmentfilters %}
<style>
.folded {
width: 70px;
transition: all 0.5s ease-in-out;
}
.folded .kanban-head {
border: none;
}
.folded .oh-kanban__section-body {
display: none;
opacity: 0;
transform: scaleY(0);
transition: all 0.5s ease-in-out;
}
.folded .kanban-title {
transform: rotate(90deg) translateX(0);
transform-origin: top left;
position: absolute;
top: 40px;
left: 40px;
width: max-content;
transition: transform 0.5s ease-in-out;
}
.folded .folderBtn {
transform: rotate(180deg);
transition: transform 0.5s ease-in-out;
}
.folded .oh-kanban__button-contaner > :not(.folderBtn) {
display: none;
}
</style>
<div class="flex gap-4 flex-nowrap overflow-auto">
{% for stage in stages %}
<button
hidden
class="reload-badge"
hx-get='{% url "get-stage-count" %}?stage_id={{stage.id}}'
hx-target="#stageCount{{stage.id}}"
id="reloadBadge{{stage.id}}"
>
{{stage}}
</button>
{% comment %}
<div id="selectedCandidateRecords{{ stage.id }}" data-ids="[]"></div>
{% endcomment %}
<div
class="kanban-block relative p-2 pt-0 pb-0 bg-[#e9edf0] rounded-lg overflow-hidden overflow-y-auto h-[calc(100vh_-_240px)] w-[400px] transition-[width] duration-500 ease-in-out flex-shrink-0 oh-kanban__section pipeline_item candidate-table"
data-container="candidate"
id="kanban{{stage.id}}"
data-stage-id="{{stage.id}}"
data-sequence="{{stage.sequence}}"
data-recruitment-id="{{rec.id}}"
>
<div class="oh-kanban__section-head sticky top-0 z-[9] stage">
<div
class="kanban-head flex items-center justify-between bg-[#e9edf090] backdrop-blur-sm py-2 cursor-move column-drag-handle oh-tabs__movable-header"
>
<div class="flex gap-2 items-center">
<span
class="folderBtn fold-icon-animation transition-transform duration-500 ease-in-out"
role="button"
onclick="event.stopPropagation();toggleFold($(this));"
>
<i class="fa-solid fa-angles-left text-lg"></i>
</span>
<div class="relative kanban-title duration-500 ease-in-out">
<h5
class="text-center px-3 py-1.5 rounded-2xl text-sm font-medium text-[white] flex items-center gap-2 ps-2 {% cycle 'bg-[#f39022]' 'bg-[#22c55e]' 'bg-[#3b82f6]' 'bg-[#e11d48]' 'bg-[#8b5cf6]' 'bg-[#10b981]' 'bg-[#f59e0b]' %}"
>
<span
class="w-6 h-6 bg-white rounded-full text-[#f39022] flex items-center justify-center text-xs"
data-rec-stage-badge="{{rec.id}}"
id="stageCount{{stage.id}}"
>
{{stage.candidate_set.all|length}}
</span>
{{stage.stage}}
</h5>
</div>
</div>
<div class="flex items-center gap-4 oh-kanban__button-contaner">
<span
class="btn-toggle text-left flex items-center gap-2"
hx-target="#genericModalBody"
hx-get="{% url 'add-candidate-to-stage'%}?stage_id={{ stage.id }}"
data-toggle="oh-modal-toggle"
data-target="#genericModal"
role="button"
title="Add Candidate"
>
<i class="fa-regular fa-square-plus text-lg"></i>
</span>
<div class="inline-block dropdown-wrapper">
<a class="cursor-pointer dropdown-toggle">
<i
class="fa-solid fa-ellipsis-vertical text-black"
></i>
</a>
<!-- Dropdown Content -->
<div
class="dropdown-menu absolute right-0 min-w-[100px] bg-white rounded-lg shadow-card py-2 hidden z-50 transition-all duration-200"
>
<ul class="text-xs">
{% if perms.recruitment.change_stage or request.user|recruitment_manages:rec or request.user.employee_get in stage.stage_managers.all %}
<li>
<button
class="w-full text-left px-3 py-1 hover:text-primary-600 transition duration-300"
hx-target="#genericModalBody"
hx-get="{% url 'stage-update-pipeline' stage.id %}"
data-toggle="oh-modal-toggle"
data-target="#genericModal"
title="Edit Stage"
>
{% trans "Edit" %}
</button>
</li>
{% endif %}
{% if perms.recruitment.delete_stage %}
<li>
<span
class="w-full text-left px-3 py-1 hover:text-primary-600 transition duration-300"
data-toggle="oh-modal-toggle"
data-target="#deleteConfirmation"
hx-get="{% url 'generic-delete' %}?model=recruitment.Stage&pk={{stage.pk}}"
hx-target="#deleteConfirmationBody"
>
{% trans "Delete" %}
</span>
</li>
{% endif %}
</ul>
</div>
</div>
</div>
</div>
</div>
<div
class="oh-kanban__section-body ui-sortable candidate-container hx-sortable min-h-[calc(100%_-_100px)]"
data-stage-id="{{stage.id}}"
data-recruitment-id="{{rec.id}}"
hx-get="{% url 'candidate-card-cbv' stage.id %}"
hx-get="{% url 'candidate-card-cbv' %}?{{request.GET.urlencode}}&rec_id={{rec_id}}"
hx-trigger="load"
id="kanbanCandidates{{stage.id}}"
>
@@ -154,11 +12,7 @@
ondrop="event.stopPropagation()"
ondrag="event.stopPropagation()"
></div>
</div>
</div>
{% endfor %}
</div>
{% comment %} </div>
<script>
$(document).on("htmx:afterSettle", function (event) {
$(document).off("click.dropdown");
@@ -242,7 +96,7 @@
var row = $(ui.item);
window.candidateCurrentStage = parseInt(
row
.closest(".candidate-table")
.closest(".pipeline_item")
.attr("data-stage-id")
);
ui.item.data("origin-parent", ui.item.parent());
@@ -251,23 +105,22 @@
stop: function (event, ui) {
var row = $(ui.item);
var candidateId = row.attr("data-candidate-id");
var candidateId = row.data("instanceId");
var newStageId = parseInt(
row
.closest(".candidate-table")
.closest(".pipeline_item")
.attr("data-stage-id")
);
var targetStageId = parseInt(
row
.closest(".candidate-table")
.closest(".pipeline_item")
.attr("data-stage-id")
);
var originalStageId = window.candidateCurrentStage;
var stageOrderJson = row.attr("data-stage_order");
var stageOrderJson = row.data("groupOrder");
if (stageOrderJson) {
var parsedStageOrder = JSON.parse(stageOrderJson);
var parsedStageOrder = stageOrderJson;
var preStage = parsedStageOrder.find(
(stage) => stage.id == originalStageId
);
@@ -377,7 +230,7 @@
function handleValidDrop(stageId, candidateId, row, sortable) {
if (stageId != window.candidateCurrentStage) {
var container = row.closest(".candidate-table");
var container = row.closest(".pipeline_item");
var array = container.find(
"input[type=text][name=order]:hidden"
);
@@ -397,7 +250,7 @@
order: values,
},
success: function (response) {
row.find('[name="stage_id"]').val(stageId);
row.find('[name="group_id"]').val(stageId);
Toast.fire({
icon: "success",
title: '{% trans "Sequence updated" %}',
@@ -482,7 +335,7 @@
console.log(el.closest(".stage"));
el.closest(".kanban-block").toggleClass("folded");
};
</script>
</script> {% endcomment %}
{% comment %}
<script>
@@ -513,4 +366,4 @@
<script src="{% static 'pipeline/load.js' %}"></script>
<script src="{% static 'pipeline/badge.js' %}"></script>
{% endcomment %}
<script src="{% static 'pipeline/pipelineDrag.js' %}"></script>
{% comment %} <script src="{% static 'pipeline/pipelineDrag.js' %}"></script> {% endcomment %}