Skip to content

Commit b48d67f

Browse files
jondricekjondricek
committed
feat: update excel table on data and tools page
1 parent 310da58 commit b48d67f

File tree

1 file changed

+97
-15
lines changed

1 file changed

+97
-15
lines changed

‎modules/resources/templates/attack-data-and-tools.html‎

Lines changed: 97 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -320,21 +320,76 @@ <h3 class="mt-5">ATT&amp;CK in Excel</h3>
320320
<h5 class="fw-bold mb-3" style="font-size:1.1rem;">ATT&CK Excel Files by Version</h5>
321321
<ul class="nav nav-tabs mb-2" role="tablist">
322322
{% set versions = parsed.excel_files_by_version.keys()|list %}
323-
{% for version in versions %}
324-
{% if loop.first %}
325-
<li class="nav-item">
326-
<a class="nav-link active" id="tab-{{ version|replace('.', '-') }}" data-toggle="tab" href="#pane-{{ version|replace('.', '-') }}" role="tab" aria-controls="pane-{{ version|replace('.', '-') }}" aria-selected="true">
327-
{{ version }}
328-
</a>
329-
</li>
330-
{% else %}
331-
<li class="nav-item">
332-
<a class="nav-link" id="tab-{{ version|replace('.', '-') }}" data-toggle="tab" href="#pane-{{ version|replace('.', '-') }}" role="tab" aria-controls="pane-{{ version|replace('.', '-') }}" aria-selected="false">
333-
{{ version }}
334-
</a>
335-
</li>
336-
{% endif %}
337-
{% endfor %}
323+
{% set visible_count = 3 %}
324+
{% if versions|length <= visible_count %}
325+
{% for version in versions %}
326+
{% if loop.first %}
327+
<li class="nav-item">
328+
<a class="nav-link active" id="tab-{{ version|replace('.', '-') }}" data-toggle="tab" href="#pane-{{ version|replace('.', '-') }}" role="tab" aria-selected="true">
329+
{{ version }}
330+
</a>
331+
</li>
332+
{% else %}
333+
<li class="nav-item">
334+
<a class="nav-link" id="tab-{{ version|replace('.', '-') }}" data-toggle="tab" href="#pane-{{ version|replace('.', '-') }}" role="tab" aria-selected="false">
335+
{{ version }}
336+
</a>
337+
</li>
338+
{% endif %}
339+
{% endfor %}
340+
{% else %}
341+
{% for version in versions[:visible_count] %}
342+
{% if loop.first %}
343+
<li class="nav-item">
344+
<a class="nav-link active" id="tab-{{ version|replace('.', '-') }}" data-toggle="tab" href="#pane-{{ version|replace('.', '-') }}" role="tab" aria-selected="true">
345+
{{ version }}
346+
</a>
347+
</li>
348+
{% else %}
349+
<li class="nav-item">
350+
<a class="nav-link" id="tab-{{ version|replace('.', '-') }}" data-toggle="tab" href="#pane-{{ version|replace('.', '-') }}" role="tab" aria-selected="false">
351+
{{ version }}
352+
</a>
353+
</li>
354+
{% endif %}
355+
{% endfor %}
356+
<li class="nav-item dropdown">
357+
<!-- Localized override for the "Older versions" dropdown so it looks like a page-level dropdown
358+
rather than inheriting the top navigation (.nav/.navbar) styles in style-attack.css.
359+
We intentionally scope the CSS here (template-only change) and add an extra class on
360+
the dropdown menu. -->
361+
<style>
362+
/* Scoped to this dropdown; uses !important to override global navbar rules */
363+
.older-versions-dropdown {
364+
background-color: white !important;
365+
box-shadow: 0 8px 16px rgba(0,0,0,0.08);
366+
}
367+
.older-versions-dropdown .dropdown-item {
368+
color: #39434c !important;
369+
}
370+
.older-versions-dropdown .dropdown-item.active {
371+
background-color: white !important;
372+
}
373+
.older-versions-dropdown .dropdown-item:hover,
374+
.older-versions-dropdown .dropdown-item:focus {
375+
color: #4f7cac !important;
376+
}
377+
</style>
378+
379+
<a class="nav-link dropdown-toggle" id="older-versions-dropdown" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
380+
Older versions
381+
</a>
382+
<ul class="dropdown-menu older-versions-dropdown" aria-labelledby="older-versions-dropdown">
383+
{% for version in versions[visible_count:] %}
384+
<li>
385+
<a class="dropdown-item" id="tab-{{ version|replace('.', '-') }}" data-toggle="tab" href="#pane-{{ version|replace('.', '-') }}" role="tab" aria-selected="false">
386+
{{ version }}
387+
</a>
388+
</li>
389+
{% endfor %}
390+
</ul>
391+
</li>
392+
{% endif %}
338393
</ul>
339394
<div class="tab-content card card-body p-3" style="background: #f8f9fa;">
340395
{% for version in versions %}
@@ -371,5 +426,32 @@ <h5 class="fw-bold mb-3" style="font-size:1.1rem;">ATT&CK Excel Files by Version
371426
{% block scripts %}
372427
{{ super() }}
373428
<!--SCRIPTS-->
429+
430+
<!-- Script to manage active states for dropdown tabs -->
431+
<script>
432+
$(document).ready(function() {
433+
// Handle tab switching for all tabs (including dropdown items)
434+
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
435+
var activeTab = $(e.target);
436+
var previousTab = $(e.relatedTarget);
437+
438+
// Remove active class from all dropdown items
439+
$('.dropdown-item[data-toggle="tab"]').removeClass('active');
440+
441+
// If the newly active tab is a dropdown item, add active class
442+
if (activeTab.hasClass('dropdown-item')) {
443+
activeTab.addClass('active');
444+
}
445+
446+
});
447+
448+
// Optional: Close dropdown when an item is clicked
449+
$('.dropdown-item[data-toggle="tab"]').on('click', function() {
450+
$(this).closest('.dropdown').removeClass('show');
451+
$(this).closest('.dropdown-menu').removeClass('show');
452+
});
453+
});
454+
</script>
455+
374456
<script src="/theme/scripts/sidebar-load-all.js"></script>
375457
{% endblock %}

0 commit comments

Comments
 (0)