WEBDIENSTE/rengine
1
0
Fork 0
mirror of https://github.com/yogeshojha/rengine.git synced 2026-09-27 20:24:54 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix card selection when clicked on button for see details, add ripple effect when cards are selected

Browse Source
This commit is contained in:
Yogesh Ojha
2024-09-03 06:33:32 +05:30
parent 363043fa58
commit dbcb5ee5cf
2 changed files with 67 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/static/custom/bountyhub.js
+33 -10
View File
@@ -53,7 +53,7 @@ document.addEventListener('DOMContentLoaded', function() {
const card = document.createElement('div');
card.className = 'col-md-6 col-lg-4 col-xl-3 mb-3';
card.innerHTML = `
<div class="card h-100 shadow-sm position-relative overflow-hidden bbp-card card-selectable" onclick="toggleCardSelection(this)">
<div class="card h-100 shadow-sm position-relative overflow-hidden bbp-card card-selectable">
<div class="card-body py-2 px-3">
<div class="d-flex align-items-center mb-2">
@@ -84,7 +84,7 @@ document.addEventListener('DOMContentLoaded', function() {
<div><i class="bi bi-calendar me-1"></i> Since ${new Date(attributes.started_accepting_at).toLocaleDateString('en-US', { month: 'short', year: 'numeric' })}</div>
<div><i class="bi bi-globe me-1"></i> ${attributes.currency.toUpperCase()}</div>
</div>
<a href="#" class="btn btn-outline-primary btn-sm w-100 mt-2">See details</a>
<a href="#" class="btn btn-outline-primary btn-sm w-100 mt-2" id="btn-see-details">See details</a>
</div>
</div>
`;
@@ -111,21 +111,44 @@ document.addEventListener('DOMContentLoaded', function() {
}
// below has everything to do with card selection and import button
const container = document.getElementById('program_cards');
const importBtn = document.getElementById('importProgramsBtn');
container.addEventListener('click', function(event) {
const card = event.target.closest('.card-selectable');
if (card) {
toggleCardSelection(event, card);
}
});
function toggleCardSelection(event, card) {
if (event.target.closest('#btn-see-details')) {
// If it's the "See details" button, don't toggle selection, maybe we need other actions in the future here
return;
}
function toggleCardSelection(card) {
card.classList.toggle('card-selected');
updateImportButton();
}
// lets create func and listeners if cards are selected
const importBtn = document.getElementById('importProgramsBtn');
const container = document.getElementById('program_cards');
function updateImportButton() {
const selectedCards = container.querySelectorAll('.card-selected');
importBtn.disabled = selectedCards.length === 0;
const count = selectedCards.length;
if (count === 0) {
importBtn.disabled = true;
importBtn.innerHTML = '<i class="fe-download-cloud"></i> Import Programs';
importBtn.classList.remove('button-updated');
} else {
importBtn.disabled = false;
importBtn.innerHTML = `<i class="fe-download-cloud"></i> Import ${count} Program${count !== 1 ? 's' : ''}`;
// Trigger the animation
importBtn.classList.remove('button-updated');
void importBtn.offsetWidth; // Trigger reflow
importBtn.classList.add('button-updated');
}
}
window.toggleCardSelection = toggleCardSelection;
});
web/static/custom/custom.css
+34
View File
@@ -702,4 +702,38 @@ mark{
.import-programs-btn:disabled {
animation: disableButton 0.3s ease forwards;
}
/* update on counter increase */
@keyframes gentlePulse {
0% {
box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.7);
}
70% {
box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(0, 123, 255, 0);
}
}
@keyframes colorTransition {
0% {
background-color: #007bff;
}
100% {
background-color: #007bff;
}
}
.import-programs-btn {
transition: all 0.3s ease;
}
.import-programs-btn:not(:disabled) {
animation: gentlePulse 1.5s infinite;
}
.import-programs-btn.button-updated {
animation: gentlePulse 1.5s infinite, colorTransition 0.5s ease;
}