From 83b59f249ff0aa9c732a5942770f1d924fd86a5c Mon Sep 17 00:00:00 2001 From: arobbins Date: Wed, 24 Jul 2024 16:12:26 -0400 Subject: [PATCH 1/9] feat(91): build initial skeleton for static project switcher and add to nav --- .../templates/_navigation.html.j2 | 11 +++- .../templates/_related_switcher.html.j2 | 40 ++++++++++++ .../templates/static/img/project.svg | 8 +++ .../templates/static/img/related.svg | 14 ++++ .../templates/static/main.css | 64 ++++++++++++++++++- .../templates/static/main.js | 16 +++++ 6 files changed, 148 insertions(+), 5 deletions(-) create mode 100644 src/mappings_explorer/templates/_related_switcher.html.j2 create mode 100644 src/mappings_explorer/templates/static/img/project.svg create mode 100644 src/mappings_explorer/templates/static/img/related.svg diff --git a/src/mappings_explorer/templates/_navigation.html.j2 b/src/mappings_explorer/templates/_navigation.html.j2 index c46e07e4..c44d96e9 100644 --- a/src/mappings_explorer/templates/_navigation.html.j2 +++ b/src/mappings_explorer/templates/_navigation.html.j2 @@ -6,9 +6,11 @@ - - - +
+ + + {% include "_related_switcher.html.j2" %} +
diff --git a/src/mappings_explorer/templates/_related_switcher.html.j2 b/src/mappings_explorer/templates/_related_switcher.html.j2 new file mode 100644 index 00000000..7fa30858 --- /dev/null +++ b/src/mappings_explorer/templates/_related_switcher.html.j2 @@ -0,0 +1,40 @@ +
+ +
+ +
+

CTID PROJECTS

+
+

Most Relevent

+
+
+ +

Summiting the Pyramid

+
+
+ +

CTI Blueprints

+
+
+ +

Attack Flow

+
+
+ +

ATT&CK Workbench

+
+
+ +

Attack Flow

+
+
+ +

ATT&CK Workbench

+
+
+
+
+

All Projects

+ +
+
diff --git a/src/mappings_explorer/templates/static/img/project.svg b/src/mappings_explorer/templates/static/img/project.svg new file mode 100644 index 00000000..5a5ce0fd --- /dev/null +++ b/src/mappings_explorer/templates/static/img/project.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/mappings_explorer/templates/static/img/related.svg b/src/mappings_explorer/templates/static/img/related.svg new file mode 100644 index 00000000..32885351 --- /dev/null +++ b/src/mappings_explorer/templates/static/img/related.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/src/mappings_explorer/templates/static/main.css b/src/mappings_explorer/templates/static/main.css index ca0558ad..e8077ca0 100644 --- a/src/mappings_explorer/templates/static/main.css +++ b/src/mappings_explorer/templates/static/main.css @@ -474,11 +474,14 @@ div.banner { } @media (min-width: 1280px) { - .mobile-nav-show, - .mobile-nav-hide { + .mobile-nav-hide, + .mobile-nav-div { display: none; } + .project-switcher-lg { + display: inline; + } } /*-------------------------------------------------------------- @@ -585,8 +588,65 @@ div.banner { background: #212c5e81; z-index: 9996 !important; } + .mobile-nav-div { + margin-top: auto; + margin-bottom: auto; + display: flex; + } + .mobile-nav-div i { + margin-top: auto; + margin-bottom: auto; + } + .project-switcher-lg { + display: none; + } } +/*-------------------------------------------------------------- + # Related Project Switcher + --------------------------------------------------------------*/ + .project-switcher { + cursor: pointer; + } + .project-switcher-expanded { + position: absolute; + top: 60px; + right: 10px; + background-color: white; + z-index: 100; + padding: 20px; + width: 375px; + height: 575px; + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); + } + .project-switcher-expanded h1 { + font-size: 24px; + font-weight: bold; + } + .project-switcher-expanded h2 { + font-size: 18px; + font-weight: bold; + text-transform: uppercase; + padding-top: 10px; + } + .project-switcher-expanded .project-grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-gap: 10px; + margin: 15px 0px; + } + .project-switcher-expanded .project-container { + text-align: center; + } + .project-switcher-expanded .project-container img { + text-align: center; + } + .project-switcher-expanded .project-container h3 { + font-size: 14px; + font-weight: 400; + text-align: center; + margin-top: 8px; + } /*-------------------------------------------------------------- # Hero Section --------------------------------------------------------------*/ diff --git a/src/mappings_explorer/templates/static/main.js b/src/mappings_explorer/templates/static/main.js index f4325928..c78b04be 100644 --- a/src/mappings_explorer/templates/static/main.js +++ b/src/mappings_explorer/templates/static/main.js @@ -37,6 +37,22 @@ document.addEventListener('DOMContentLoaded', () => { }); } + /** + * Project Switcher nav toggle + */ + + document.querySelectorAll('.project-switcher').forEach(el => { + el.addEventListener('click', function(event) { + event.preventDefault(); + projectSwitcherToggle(); + }) + }); + + function projectSwitcherToggle() { + document.querySelectorAll('.project-switcher-expanded').forEach(el => { + el.classList.toggle('d-none') + }) + } /** * Mobile nav toggle */ From 84b5c42ee5552e13e56e124833ffe2e147751ddb Mon Sep 17 00:00:00 2001 From: arobbins Date: Fri, 26 Jul 2024 10:29:39 -0400 Subject: [PATCH 2/9] feat(91): use JSON to populate project and notification sections --- .../templates/_navigation.html.j2 | 2 +- .../templates/_switcher.html.j2 | 90 +++++++++++++ .../static/img/project-logos/bell.svg | 3 + .../img/project-logos/mappings-explorer.png | Bin 0 -> 2398 bytes .../img/{ => project-logos}/project.svg | 0 .../img/{ => project-logos}/related.svg | 0 .../project-logos/top-attack-techniques.svg | 7 + .../templates/static/main.css | 46 ++++++- .../static/related_projects_src.json | 126 ++++++++++++++++++ 9 files changed, 270 insertions(+), 4 deletions(-) create mode 100644 src/mappings_explorer/templates/_switcher.html.j2 create mode 100644 src/mappings_explorer/templates/static/img/project-logos/bell.svg create mode 100644 src/mappings_explorer/templates/static/img/project-logos/mappings-explorer.png rename src/mappings_explorer/templates/static/img/{ => project-logos}/project.svg (100%) rename src/mappings_explorer/templates/static/img/{ => project-logos}/related.svg (100%) create mode 100644 src/mappings_explorer/templates/static/img/project-logos/top-attack-techniques.svg create mode 100644 src/mappings_explorer/templates/static/related_projects_src.json diff --git a/src/mappings_explorer/templates/_navigation.html.j2 b/src/mappings_explorer/templates/_navigation.html.j2 index c44d96e9..b03fbe22 100644 --- a/src/mappings_explorer/templates/_navigation.html.j2 +++ b/src/mappings_explorer/templates/_navigation.html.j2 @@ -9,7 +9,7 @@
- {% include "_related_switcher.html.j2" %} + {% include "_switcher.html.j2" %}
+
+ +
+