Skip to content

Commit

Permalink
fix some bugs in responsive roadmap design
Browse files Browse the repository at this point in the history
  • Loading branch information
@JuanJoseBotero
JuanJoseBotero committed Nov 7, 2024
1 parent 99ed755 commit 5f3176f
Show file tree
Hide file tree
Showing 2 changed files with 88 additions and 28 deletions.
105 changes: 80 additions & 25 deletions roadMap/static/scripts/roadmap.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,6 +89,11 @@ function submitForm(checkbox, step){

function loadProgress(){
let count = 0
const paso1 = document.querySelectorAll('.paso1');
const paso2 = document.querySelectorAll('.paso2');
const paso3 = document.querySelectorAll('.paso3');
const paso4 = document.querySelectorAll('.paso4');
const paso5 = document.querySelectorAll('.paso5');
const checkboxes = document.querySelectorAll('input[type="checkbox"][name="remarkablePoint"]');
for(count = 0; count < checkboxes.length; count++){
if(!checkboxes[count].checked){
Expand All @@ -97,35 +102,85 @@ function loadProgress(){
}
console.log(count);
if(count >= 15){
document.getElementById('paso1').classList.add('active');
document.getElementById('paso2').classList.add('active');
document.getElementById('paso3').classList.add('active');
document.getElementById('paso4').classList.add('active');
document.getElementById('paso5').classList.add('active');
paso1.forEach(element => {
element.classList.add('active');
});
paso2.forEach(element => {
element.classList.add('active');
});
paso3.forEach(element => {
element.classList.add('active');
});
paso4.forEach(element => {
element.classList.add('active');
});
paso5.forEach(element => {
element.classList.add('active');
});
}else if(count >= 12){
document.getElementById('paso1').classList.add('active');
document.getElementById('paso2').classList.add('active');
document.getElementById('paso3').classList.add('active');
document.getElementById('paso4').classList.add('active');
document.getElementById('paso5').classList.remove('active');
paso1.forEach(element => {
element.classList.add('active');
});
paso2.forEach(element => {
element.classList.add('active');
});
paso3.forEach(element => {
element.classList.add('active');
});
paso4.forEach(element => {
element.classList.add('active');
});
paso5.forEach(element => {
element.classList.remove('active');
});
}else if(count >= 9){
document.getElementById('paso1').classList.add('active');
document.getElementById('paso2').classList.add('active');
document.getElementById('paso3').classList.add('active');
document.getElementById('paso4').classList.remove('active');
document.getElementById('paso5').classList.remove('active');
paso1.forEach(element => {
element.classList.add('active');
});
paso2.forEach(element => {
element.classList.add('active');
});
paso3.forEach(element => {
element.classList.add('active');
});
paso4.forEach(element => {
element.classList.remove('active');
});
paso5.forEach(element => {
element.classList.remove('active');
});
}else if(count >= 6){
document.getElementById('paso1').classList.add('active');
document.getElementById('paso2').classList.add('active');
document.getElementById('paso3').classList.remove('active');
document.getElementById('paso4').classList.remove('active');
document.getElementById('paso5').classList.remove('active');
paso1.forEach(element => {
element.classList.add('active');
});
paso2.forEach(element => {
element.classList.add('active');
});
paso3.forEach(element => {
element.classList.remove('active');
});
paso4.forEach(element => {
element.classList.remove('active');
});
paso5.forEach(element => {
element.classList.remove('active');
});
}else if(count >= 3){
document.getElementById('paso1').classList.add('active');
document.getElementById('paso2').classList.remove('active');
document.getElementById('paso3').classList.remove('active');
document.getElementById('paso4').classList.remove('active');
document.getElementById('paso5').classList.remove('active');
paso1.forEach(element => {
element.classList.add('active');
});
paso2.forEach(element => {
element.classList.remove('active');
});
paso3.forEach(element => {
element.classList.remove('active');
});
paso4.forEach(element => {
element.classList.remove('active');
});
paso5.forEach(element => {
element.classList.remove('active');
});
}
}

Expand Down
11 changes: 8 additions & 3 deletions roadMap/static/styles/roadmapstyles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ body{
}

.contenedorTitulo{
background-color: #102C57;
background-color: #1B263B;
display: flex;
align-items: center;
justify-content: center;
Expand Down Expand Up @@ -205,6 +205,7 @@ body{
top: 30px;
right: 55%;
transition: background-color 0.5s ease;
z-index: -1;
}

.progress{
Expand Down Expand Up @@ -253,12 +254,12 @@ body{
height: 0px;
}

.active{
.active.progress{
background-color: #415A77;
transition: background-color 0.5s ease;
}

.active::after{
.active.containerProgress::after{
background-color: #415A77;
transition: background-color 0.5s ease;
}
Expand Down Expand Up @@ -305,6 +306,10 @@ body{
z-index: -1;
display: block;
}
.active.progress::after{
background-color: #415A77;
transition: background-color 0.5s ease;
}
.paso2{
z-index: 5;
}
Expand Down

0 comments on commit 5f3176f

Please sign in to comment.