Skip to content

Commit bd18e1a

Browse files
NiharikaHariNiharikaHari
committed
fix: Archive shows on resources page instead of a new page
1 parent db9189f commit bd18e1a

2 files changed

Lines changed: 162 additions & 3 deletions

File tree

‎_includes/nav.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,14 +48,14 @@
4848
<li><a href="{{ site.baseurl }}/resources/#publications">publications</a></li>
4949
<li><a href="{{ site.baseurl }}/resources/#newsletter">newsletters</a></li>
5050
<li><a href="{{ site.baseurl }}/resources/#financials">financials</a></li>
51-
<li><a href="{{ site.baseurl }}/projects">archive</a></li>
51+
<li><a href="{{ site.baseurl }}/resources/#archive">archive</a></li>
5252
</ul>
5353
</li>
5454
<ul class="inner-nav">
5555
<li><a href="{{ site.baseurl }}/resources/#publications">publications</a></li>
5656
<li><a href="{{ site.baseurl }}/resources/#newsletter">newsletters</a></li>
5757
<li><a href="{{ site.baseurl }}/resources/#financials">financials</a></li>
58-
<li><a href="{{ site.baseurl }}/projects">archive</a></li>
58+
<li><a href="{{ site.baseurl }}/resources/#archive">archive</a></li>
5959
</ul>
6060
<li class="{% if page.url == '/get-involved/' %}active{% endif %}">
6161
<a href="{{ site.baseurl }}/get-involved/">get involved</a>

‎resources.html‎

Lines changed: 160 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
<button class="tab-btn active" data-tab="publications">Publications</button>
99
<button class="tab-btn" data-tab="newsletter">Newsletter</button>
1010
<button class="tab-btn" data-tab="financials">Financials</button>
11-
<a class="tab-btn" href="{{ site.baseurl }}/projects">Archive</a>
11+
<button class="tab-btn" data-tab="archive">Archive</button>
1212
</nav>
1313

1414
<!-- PUBLICATIONS -->
@@ -176,6 +176,62 @@ <h2 class="subcat-title">{{ subcat }}</h2>
176176
{% endfor %}
177177
</div>
178178
</section>
179+
180+
{% assign archive_page = site.pages | where: "title", "Projects" | first %}
181+
<section class="tab-content" id="tab-archive">
182+
<div class="archive-tab">
183+
<div class="container">
184+
<div class="grid">
185+
<div class="sidebar">
186+
<h2 class="about title" id="all">All Projects</h2>
187+
<ul>
188+
{% for category in archive_page.categories %}
189+
<li class="about_nav" id="{{ category.ide }}">{{ category.title }}</li>
190+
{% endfor %}
191+
</ul>
192+
</div>
193+
194+
<div class="projects">
195+
{% for post in site.categories['project'] %}
196+
<div id="{{ post.ide }}" class="project {{ post.tag }}">
197+
<a href="{{ site.baseurl }}/projects/{{ post.ide }}">
198+
<img src="/img/projects/{{ post.ide }}-thumb.jpg" alt="{{ post.title }} thumbnail" />
199+
</a>
200+
</div>
201+
{% endfor %}
202+
</div>
203+
204+
<div class="description">
205+
<div id="our-work-description">
206+
<p class="simple-content">
207+
Our goal is to design better policy using games and simulations. Our work involves three
208+
inter-related
209+
threads: <br><b>PolicyLab</b> where we undertake research at the intersection of art, social
210+
sciences, and technology to design games and simulations; <br><b>School of Policy</b> where we
211+
train policymakers and civil society groups in the use of these tools; <br><b>Policy in Play</b>
212+
where we design artefacts such as graphic novels and games to make policy more accessible.
213+
</p><br>
214+
<p class="simple-content">
215+
Some of our current projects include: Building a game for the UN for students of economics and
216+
sustainability studies to understand the Inclusive Wealth Indicator (IWI), an indicator proposed
217+
as a complement to the GDP and HDI; ₹ubbish! a game on waste management in Bangalore; SimCity -
218+
building simulations to understand and plan for cities in the Indian context; and building a
219+
game for the Institute of Plasma Research, a Government of India undertaking.
220+
</p>
221+
</div>
222+
223+
{% for category in archive_page.categories %}
224+
<div class="category-desc" id="{{ category.ide }}-content">
225+
<p class="simple-content">{{ category.description }}</p>
226+
</div>
227+
{% endfor %}
228+
229+
<a href="/docs/brochures/FoVBrochure.pdf" class="mailid">Download our brochure here.</a><br/><br>
230+
</div>
231+
</div>
232+
</div>
233+
</div>
234+
</section>
179235
<style>
180236
.tabs {
181237
width: 100%;
@@ -367,6 +423,80 @@ <h2 class="subcat-title">{{ subcat }}</h2>
367423
font-weight: 400;
368424
}
369425

426+
.archive-tab {
427+
padding: var(--p4-rem);
428+
max-width: 1400px;
429+
}
430+
431+
.archive-tab .content {
432+
min-height: 600px;
433+
padding: 2rem 1rem;
434+
}
435+
436+
.archive-tab .grid {
437+
display: grid;
438+
grid-template-columns: 1fr 2fr 1.5fr;
439+
gap: 2rem;
440+
}
441+
442+
.archive-tab .sidebar h2 {
443+
margin-bottom: 1rem;
444+
}
445+
446+
.archive-tab .about_nav {
447+
cursor: pointer;
448+
margin-bottom: 0.5rem;
449+
}
450+
451+
.archive-tab .about_nav.active {
452+
font-weight: bold;
453+
}
454+
455+
.archive-tab .projects {
456+
display: flex;
457+
flex-wrap: wrap;
458+
gap: 1.5rem;
459+
padding-top: var(--p4-rem);
460+
}
461+
462+
.archive-tab .project {
463+
flex: 1 1 calc(50% - 1.5rem);
464+
}
465+
466+
.archive-tab .project img {
467+
width: 100%;
468+
display: block;
469+
padding-bottom: 1rem;
470+
cursor: pointer;
471+
}
472+
473+
.archive-tab .description {
474+
padding-top: var(--p4-rem);
475+
}
476+
477+
.archive-tab .category-desc {
478+
display: none;
479+
}
480+
481+
.archive-tab .mailid {
482+
font-size: 0.9rem;
483+
display: inline-block;
484+
margin-top: 1rem;
485+
font-weight: 600;
486+
text-decoration: underline;
487+
text-underline-position: from-font;
488+
}
489+
490+
@media (max-width: 768px) {
491+
.archive-tab .grid {
492+
grid-template-columns: 1fr;
493+
}
494+
495+
.archive-tab .project {
496+
flex: 1 1 100%;
497+
}
498+
}
499+
370500
@media (max-width: 768px) {
371501

372502
.tabs {
@@ -446,6 +576,35 @@ <h2 class="subcat-title">{{ subcat }}</h2>
446576
}
447577
});
448578
});
579+
580+
const archiveSection = document.getElementById('tab-archive');
581+
if (archiveSection) {
582+
const categoryButtons = archiveSection.querySelectorAll('.about_nav');
583+
categoryButtons.forEach(button => {
584+
button.addEventListener('click', function () {
585+
archiveSection.querySelectorAll('.project').forEach(el => el.style.display = 'none');
586+
archiveSection.querySelectorAll('.' + button.id).forEach(el => el.style.display = 'block');
587+
588+
archiveSection.querySelectorAll('.about_nav').forEach(el => el.classList.remove('active'));
589+
button.classList.add('active');
590+
591+
archiveSection.querySelectorAll('.category-desc').forEach(el => el.style.display = 'none');
592+
archiveSection.querySelector('#' + button.id + '-content').style.display = 'block';
593+
archiveSection.querySelector('#our-work-description').style.display = 'none';
594+
});
595+
});
596+
597+
const allButton = archiveSection.querySelector('#all');
598+
if (allButton) {
599+
allButton.addEventListener('click', function () {
600+
archiveSection.querySelectorAll('.project').forEach(el => el.style.display = 'block');
601+
archiveSection.querySelectorAll('.about_nav').forEach(el => el.classList.remove('active'));
602+
allButton.classList.add('active');
603+
archiveSection.querySelector('#our-work-description').style.display = 'block';
604+
archiveSection.querySelectorAll('.category-desc').forEach(el => el.style.display = 'none');
605+
});
606+
}
607+
}
449608
});
450609

451610

0 commit comments

Comments
 (0)