365DevNet/365devnet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor modal components for improved usability and responsiveness

Browse Source 
- Updated modal content styles in Certifications, Education, and Skills components to allow for scrollable content on mobile devices.
- Removed body overflow control during modal display, enabling better user experience by allowing background scrolling.
- Enhanced Work Experience component with click-to-expand functionality for mobile users, improving accessibility and interaction.
This commit is contained in:
becarta
2025-06-15 18:21:02 +02:00
parent c6c9677b00
commit 8f2c5c5df4
4 changed files with 44 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/components/widgets/ModernWorkExperience.astro
View File

@@ -109,7 +109,7 @@ const getYearRange = (dateStr: string = '') => {
return (
<div
class="work-card group bg-white/95 dark:bg-slate-900/95 backdrop-blur-sm rounded-2xl p-6 transition-all duration-300 cursor-default border border-gray-100 dark:border-slate-800 hover:transform hover:scale-[1.02] hover:shadow-xl relative overflow-hidden"
class="work-card group bg-white/95 dark:bg-slate-900/95 backdrop-blur-sm rounded-2xl p-6 transition-all duration-300 cursor-pointer border border-gray-100 dark:border-slate-800 hover:transform hover:scale-[1.02] hover:shadow-xl relative overflow-hidden"
>
<!-- Top gradient bar -->
<div class={`absolute top-0 left-0 right-0 h-1 bg-gradient-to-r ${gradient}`}></div>
@@ -152,6 +152,10 @@ const getYearRange = (dateStr: string = '') => {
<p class="text-sm text-gray-700 dark:text-gray-300 leading-relaxed">
{item.description}
</p>
<!-- Mobile expand indicator -->
<div class="mobile-expand-hint md:hidden text-xs text-gray-400 dark:text-gray-500 mt-2 opacity-70">
Tap to read more
</div>
</div>
)}
@@ -201,12 +205,14 @@ const getYearRange = (dateStr: string = '') => {
max-height: 100px;
}
.work-card:hover .work-description {
.work-card:hover .work-description,
.work-card:active .work-description,
.work-card.expanded .work-description {
max-height: 400px; /* More room on mobile */
}
.work-card:active .work-description {
max-height: 400px; /* Also trigger on touch */
.work-card.expanded .mobile-expand-hint {
display: none;
}
}
@@ -246,4 +252,28 @@ const getYearRange = (dateStr: string = '') => {
font-size: 0.8rem;
}
}
</style>
</style>
<script is:inline>
// Add click-to-expand functionality for mobile
document.addEventListener('DOMContentLoaded', function() {
const workCards = document.querySelectorAll('.work-card');
workCards.forEach(card => {
card.addEventListener('click', function() {
// Only toggle on mobile/tablet (screens smaller than md breakpoint)
if (window.innerWidth < 768) {
this.classList.toggle('expanded');
}
});
card.addEventListener('touchend', function(e) {
// Prevent double-firing and only on small screens
if (window.innerWidth < 768) {
e.preventDefault();
this.classList.toggle('expanded');
}
});
});
});
</script>