Skip to content

fix: improve track progress visibility and UI interactions #820

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Bivek01 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

fix: improve track progress visibility and UI interactions #820

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file modified .gitignore
View file
Open in desktop
Binary file not shown.
65 changes: 36 additions & 29 deletions static/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -580,9 +580,9 @@ updateProfileWidgets();
evt.preventDefault(); //stop the browser from reloading the page on form submit
clearAllErrors();

if (skillsTextInput.value.trim()) {
addSkill(skillsTextInput.value);
skillsTextInput.value = "";
if (skillsInput.value.trim()) {
addSkill(skillsInput.value);
skillsInput.value = "";
hideSuggestions();
}

Expand Down Expand Up @@ -707,32 +707,6 @@ updateProfileWidgets();
span.className = "project-tag project-tag--" + normalize(type).replace(/[^a-z0-9_-]/g, "-");
span.textContent = text;
return span;

//takes the array of projects from the api and draws them on the page as cards
//if array is empty it shows the "no results" message instead
function renderResults(projects, message) {
resultsSection.style.display = "block";
resultsLoadingEl.style.display = "none";
// Clear out any cards from a previous search before showing new ones
resultsGrid.innerHTML = "";

if (!projects || projects.length === 0) {
resultsGrid.style.display = "none";
resultsEmptyEl.style.display = "block";
if (message && emptyMessageEl) emptyMessageEl.textContent = message;
resultsSection.scrollIntoView({ behavior: "smooth" });
return;
}

resultsEmptyEl.style.display = "none";
resultsGrid.style.display = "grid";

projects.forEach(function (project) {
resultsGrid.appendChild(buildProjectCard(project));
});

resultsSection.scrollIntoView({ behavior: "smooth" });
main
}

function buildProjectCard(project) {
Expand Down Expand Up @@ -1247,3 +1221,36 @@ updateProfileWidgets();
});
update();
})();

(function initScrollSpy() {
var sections = document.querySelectorAll("section[id], header[id]");
var navLinks = document.querySelectorAll(".nav-link, .nav-mobile-link");

if (sections.length === 0 || navLinks.length === 0) return;

var observerOptions = {
root: null,
rootMargin: "-20% 0px -70% 0px",
threshold: 0
};

var observer = new IntersectionObserver(function (entries) {
entries.forEach(function (entry) {
if (entry.isIntersecting) {
var id = entry.target.getAttribute("id");
navLinks.forEach(function (link) {
var href = link.getAttribute("href");
if (href === "#" + id) {
link.classList.add("active");
} else if (href && href.startsWith("#")) {
link.classList.remove("active");
}
});
}
});
}, observerOptions);

sections.forEach(function (sec) {
observer.observe(sec);
});
})();
62 changes: 39 additions & 23 deletions static/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -662,12 +662,14 @@ html[data-entry-anim="true"] .form-card form > .btn-submit { animat
opacity 0.25s ease;
}

.nav-link:hover {
.nav-link:hover,
.nav-link.active {
color: #ffffff;
text-decoration: none;
}

.nav-link:hover::after {
.nav-link:hover::after,
.nav-link.active::after {
transform: translateX(-50%) scaleX(1);
opacity: 1;
}
Expand Down Expand Up @@ -788,12 +790,14 @@ html[data-entry-anim="true"] .form-card form > .btn-submit { animat
opacity 0.25s ease;
}

.nav-mobile-link:hover {
.nav-mobile-link:hover,
.nav-mobile-link.active {
color: #ffffff;
text-decoration: none;
}

.nav-mobile-link:hover::after {
.nav-mobile-link:hover::after,
.nav-mobile-link.active::after {
transform: scaleX(1);
opacity: 1;
}
Expand Down Expand Up @@ -3295,16 +3299,19 @@ input[type="text"]:not(.skill-input-wrap input):focus {
.profile-card,
.badge-card,
.achievement-card,
.history-card,
.leaderboard-card {
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(148, 163, 184, 0.12);
background: var(--surface);
border: 1px solid var(--border);
border-radius: 28px;
padding: 28px;
box-shadow: var(--shadow-sm);
}

.profile-card-header,
.badge-card-header,
.achievement-card-header,
.history-card-header,
.leaderboard-card-header {
display: flex;
align-items: center;
Expand All @@ -3316,19 +3323,21 @@ input[type="text"]:not(.skill-input-wrap input):focus {
.profile-label {
display: block;
margin-bottom: 8px;
color: rgba(148, 163, 184, 1);
color: var(--text-body);
font-size: 0.92rem;
font-weight: 500;
}

.profile-card h3 {
font-size: 3rem;
margin: 0;
color: var(--text-heading);
}

.progress-meter {
width: 100%;
height: 16px;
background: rgba(148, 163, 184, 0.14);
background: var(--surface-hover);
border-radius: 999px;
overflow: hidden;
margin-bottom: 20px;
Expand All @@ -3342,9 +3351,10 @@ input[type="text"]:not(.skill-input-wrap input):focus {
width: 0;
height: 100%;
background: linear-gradient(120deg, #6366f1, #22c55e);
color: #fff;
color: #ffffff;
font-size: 0.8rem;
font-weight: 700;
text-shadow: 0 1px 2px rgba(0,0,0,0.4);
transition: width 0.4s ease;
}

Expand All @@ -3366,7 +3376,7 @@ input[type="text"]:not(.skill-input-wrap input):focus {
justify-content: space-between;
gap: 12px;
padding: 14px 0;
border-bottom: 1px solid rgba(148, 163, 184, 0.08);
border-bottom: 1px solid var(--border);
}

.progress-stats li:last-child,
Expand All @@ -3379,14 +3389,16 @@ input[type="text"]:not(.skill-input-wrap input):focus {
.progress-stats strong,
.leaderboard-list span,
.achievement-item strong {
color: #e2e8f0;
color: var(--text-body);
font-weight: 500;
}

.progress-stats span,
.leaderboard-list strong,
.achievement-item span,
.achievement-item small {
color: rgba(148, 163, 184, 1);
color: var(--text-heading);
font-weight: 700;
}

.progress-badge-grid {
Expand All @@ -3401,18 +3413,20 @@ input[type="text"]:not(.skill-input-wrap input):focus {
gap: 12px;
padding: 14px 16px;
border-radius: 18px;
background: rgba(148, 163, 184, 0.06);
color: rgba(226, 232, 240, 1);
background: var(--surface-hover);
color: var(--text-heading);
border: 1px solid var(--border);
transition: transform 0.2s ease, background 0.2s ease;
}

.progress-badge--unlocked {
background: rgba(34, 197, 94, 0.12);
color: #d1fae5;
color: var(--text-heading);
border-color: rgba(34, 197, 94, 0.3);
}

.progress-badge--locked {
opacity: 0.6;
opacity: 0.7;
}

.badge-icon {
Expand All @@ -3422,7 +3436,7 @@ input[type="text"]:not(.skill-input-wrap input):focus {
align-items: center;
justify-content: center;
border-radius: 999px;
background: rgba(148, 163, 184, 0.14);
background: var(--surface-hover);
font-size: 0.88rem;
}

Expand All @@ -3442,7 +3456,7 @@ input[type="text"]:not(.skill-input-wrap input):focus {
}

.achievement-empty {
color: rgba(148, 163, 184, 1);
color: var(--text-light);
padding: 16px 0;
}

Expand All @@ -3452,17 +3466,19 @@ input[type="text"]:not(.skill-input-wrap input):focus {
justify-content: center;
gap: 8px;
background: transparent;
border: 1px solid rgba(148, 163, 184, 0.24);
color: #e2e8f0;
border: 1px solid var(--border);
color: var(--text-body);
border-radius: 999px;
padding: 12px 18px;
cursor: pointer;
transition: background 0.2s ease, border-color 0.2s ease;
font-weight: 500;
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.btn-ghost:hover {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(148, 163, 184, 0.4);
background: var(--surface-hover);
border-color: var(--text-light);
color: var(--text-heading);
}

.btn-mark-complete {
Expand Down
33 changes: 1 addition & 32 deletions templates/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -921,38 +921,7 @@ <h4 class="footer-col-title">About Us</h4>
<script src="/static/data/skills.js"></script>

<script src="/static/script.js"></script>
<script>
(function () {
const themeToggle = document.getElementById("theme-toggle");

if (!themeToggle) return;

const savedTheme = localStorage.getItem("theme");

if (savedTheme === "dark") {
document.documentElement.setAttribute("data-theme", "dark");
themeToggle.textContent = "☀️";
themeToggle.setAttribute("aria-pressed", "true");
}

themeToggle.addEventListener("click", function () {
const isDark =
document.documentElement.getAttribute("data-theme") === "dark";

if (isDark) {
document.documentElement.removeAttribute("data-theme");
localStorage.setItem("theme", "light");
themeToggle.textContent = "🌙";
themeToggle.setAttribute("aria-pressed", "false");
} else {
document.documentElement.setAttribute("data-theme", "dark");
localStorage.setItem("theme", "dark");
themeToggle.textContent = "☀️";
themeToggle.setAttribute("aria-pressed", "true");
}
});
})();
</script>

</body>

</html>
Loading