From 3d201b3b6a67534694ffec6babdca4944e8aa09c Mon Sep 17 00:00:00 2001
From: Devyani Ravi <devyaniravi2003@gmail.com>
Date: Fri, 27 Sep 2024 15:31:51 +0000
Subject: [PATCH] fix phases to drop down
---
docs/.vuepress/components/IterativeCycle.vue | 149 +++++++++++++------
1 file changed, 102 insertions(+), 47 deletions(-)
diff --git a/docs/.vuepress/components/IterativeCycle.vue b/docs/.vuepress/components/IterativeCycle.vue
index 28967b0..bd8e49d 100644
--- a/docs/.vuepress/components/IterativeCycle.vue
+++ b/docs/.vuepress/components/IterativeCycle.vue
@@ -10,21 +10,21 @@
</select>
</div>
- <!-- Phases Display -->
+ <!-- Cycles Display -->
<div v-if="selectedModule !== null" class="cycle">
<h2>{{ modules[selectedModule].title }}</h2>
- <div v-if="modules[selectedModule].phases" class="phase-selector">
- <label for="phase">Select Phase:</label>
- <select id="phase" v-model="selectedPhase" class="phase-dropdown">
- <option v-for="(phase, index) in modules[selectedModule].phases" :key="index" :value="index">
- {{ phase.title }}
- </option>
- </select>
- </div>
-
- <div v-if="selectedPhase !== null" class="phase">
- <h3>{{ modules[selectedModule].phases[selectedPhase].title }}</h3>
- <p>{{ modules[selectedModule].phases[selectedPhase].description }}</p>
+ <div v-for="(cycle, index) in modules[selectedModule].cycles" :key="index" class="cycle-container">
+ <button @click="toggleCycle(index)" class="cycle-button">
+ {{ cycle.title }}
+ </button>
+ <div v-if="isCycleOpen(index)" class="cycle-details">
+ <h3>Phases:</h3>
+ <ul>
+ <li v-for="(phase, phaseIndex) in cycle.phases" :key="phaseIndex">
+ <strong>{{ phase.title }}:</strong> {{ phase.description }}
+ </li>
+ </ul>
+ </div>
</div>
</div>
</div>
@@ -35,50 +35,87 @@ export default {
data() {
return {
selectedModule: 0, // Default module selected
- selectedPhase: 0, // Default phase selected
+ openCycles: [], // Track which cycles are open
modules: [
{
title: 'Module 1: DBTL Cycles',
- phases: [
- { title: 'Design Cycle 1', description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' },
- { title: 'Build Cycle 1', description: 'Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.' },
- { title: 'Test Cycle 1', description: 'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.' },
- { title: 'Learn Cycle 1', description: 'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.' },
- { title: 'Design Cycle 2', description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' },
- { title: 'Build Cycle 2', description: 'Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.' },
- { title: 'Test Cycle 2', description: 'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.' },
- { title: 'Learn Cycle 2', description: 'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.' },
- { title: 'Design Cycle 3', description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' },
- { title: 'Build Cycle 3', description: 'Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.' },
- { title: 'Test Cycle 3', description: 'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.' },
- { title: 'Learn Cycle 3', description: 'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.' },
+ cycles: [
+ {
+ title: 'Cycle 1',
+ phases: [
+ { title: 'Design', description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' },
+ { title: 'Build', description: 'Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.' },
+ { title: 'Test', description: 'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.' },
+ { title: 'Learn', description: 'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.' },
+ ]
+ },
+ {
+ title: 'Cycle 2',
+ phases: [
+ { title: 'Design', description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' },
+ { title: 'Build', description: 'Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.' },
+ { title: 'Test', description: 'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.' },
+ { title: 'Learn', description: 'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.' },
+ ]
+ },
+ {
+ title: 'Cycle 3',
+ phases: [
+ { title: 'Design', description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' },
+ { title: 'Build', description: 'Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.' },
+ { title: 'Test', description: 'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.' },
+ { title: 'Learn', description: 'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.' },
+ ]
+ }
]
},
{
title: 'Module 2: Design & Build',
- phases: [
- { title: 'Design', description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' },
- { title: 'Build', description: 'Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.' }
+ cycles: [
+ {
+ title: 'Cycle 1',
+ phases: [
+ { title: 'Design', description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' },
+ { title: 'Build', description: 'Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.' }
+ ]
+ }
]
},
{
title: 'Module 3: Design Only',
- phases: [
- { title: 'Design', description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' }
+ cycles: [
+ {
+ title: 'Cycle 1',
+ phases: [
+ { title: 'Design', description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' }
+ ]
+ }
]
},
{
title: 'Module 4: Design Only',
- phases: [
- { title: 'Design', description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' }
+ cycles: [
+ {
+ title: 'Cycle 1',
+ phases: [
+ { title: 'Design', description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' }
+ ]
+ }
]
}
]
};
},
- watch: {
- selectedModule() {
- this.selectedPhase = 0; // Reset phase selection when module changes
+ methods: {
+ toggleCycle(index) {
+ if (this.openCycles.includes(index)) {
+ this.openCycles = this.openCycles.filter(i => i !== index);
+ } else {
+ this.openCycles.push(index);
+ }
+ },
+ isCycleOpen(index) {
+ return this.openCycles.includes(index);
}
}
};
@@ -101,8 +138,7 @@ export default {
text-align: center;
}
-.module-dropdown,
-.phase-dropdown {
+.module-dropdown {
padding: 10px;
font-size: 16px;
border: 1px solid #3498db;
@@ -111,8 +147,7 @@ export default {
transition: border-color 0.3s ease;
}
-.module-dropdown:focus,
-.phase-dropdown:focus {
+.module-dropdown:focus {
border-color: #2980b9;
}
@@ -120,13 +155,29 @@ export default {
margin-top: 20px;
}
-.phase-selector {
- margin-bottom: 20px;
+.cycle-container {
+ margin: 10px 0;
}
-.phase {
- margin-top: 20px;
- padding: 15px;
+.cycle-button {
+ width: 100%;
+ padding: 10px;
+ font-size: 16px;
+ background-color: #3498db;
+ color: white;
+ border: none;
+ border-radius: 5px;
+ cursor: pointer;
+ transition: background-color 0.3s ease;
+}
+
+.cycle-button:hover {
+ background-color: #2980b9;
+}
+
+.cycle-details {
+ margin-top: 10px;
+ padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
background-color: #ffffff;
@@ -143,7 +194,11 @@ h3 {
margin-bottom: 10px;
}
-p {
+ul {
+ margin-left: 20px;
+}
+
+li {
color: #555;
}
</style>
--
GitLab