Skip to content

Commit

Permalink
Merge pull request #444 from mitre-attack/faq-page-updates
Browse files Browse the repository at this point in the history
Sidebar changes
  • Loading branch information
jondricek authored Aug 10, 2023
2 parents c1d56b8 + 1d3c3ea commit e7b46e6
Show file tree
Hide file tree
Showing 38 changed files with 749 additions and 119 deletions.
32 changes: 32 additions & 0 deletions attack-theme/static/scripts/resizer.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
var resizer = document.querySelector(".resizer");
var sidebar = document.querySelector(".sidebar");
$(document).ready(function (){
resizeSidebar( resizer, sidebar );
});


function resizeSidebar( resizer, sidebar ) {
var x = 0;
var w = 0;

function resizeSidebar_mousedownHandler( event ) {
x = event.clientX;
var sidebarWidth = window.getComputedStyle( sidebar ).width;
w = parseInt( sidebarWidth );
document.addEventListener("mousemove", resizeSidebar_mousemoveHandler);
document.addEventListener("mouseup", resizeSidebar_mouseupHandler);
}

function resizeSidebar_mousemoveHandler( event ) {
var dx = event.clientX - x;
var newsidebarWidth = w + dx;
sidebar.style.width = `${ newsidebarWidth }px`;
}

function resizeSidebar_mouseupHandler() {
document.removeEventListener("mouseup", resizeSidebar_mouseupHandler);
document.removeEventListener("mousemove", resizeSidebar_mousemoveHandler);
}

resizer.addEventListener("mousedown", resizeSidebar_mousedownHandler);
}
31 changes: 30 additions & 1 deletion attack-theme/static/style/_layouts.scss
Original file line number Diff line number Diff line change
Expand Up @@ -143,6 +143,36 @@ a {
}
}

.brand-button {
color: #ffffff;
font-size: 16px;
border-radius: 5px;
cursor: pointer;
position: relative;
overflow: hidden;
font-family: Arial;
background: #c63e1f;
display: inline-flex;
align-items: center;
padding: 0;

}

.brand-button-text {
position: relative;
padding: 10px 18px;
}

.brand-button-icon {
position: relative;
border-right: 1px solid rgba(255, 255, 255, 0.16);
padding: 10px 10px;
}

.brand-button:hover {
background: #B82200;
}

// placeholder for base style of all navy colored buttons
%button-style {
color: on-color(secondary);
Expand Down Expand Up @@ -1016,7 +1046,6 @@ pre {

/* attackcon page */
.attackcons {
border: 1px solid border-color(body);
border-top-width: 0px;
.sponsors-block {
background: #efefef;
Expand Down
16 changes: 14 additions & 2 deletions attack-theme/static/style/_nav.scss
Original file line number Diff line number Diff line change
Expand Up @@ -203,12 +203,21 @@
/******/
}
/******/

.resizer {
width: 2px;
top: 0;
right: 0;
cursor: col-resize;
height: 100%;
position: absolute;
background-color: #dfdfdf;
}
.sidebar.nav {
// max-height: 60vh;
overflow-y: auto;
z-index: 0; //behind the header
max-width: fit-content;
min-width: fit-content;
max-width: 20vw;

// Remove overflow and sticky position for mobile view
@media screen and (max-width: 47.9875rem) {
Expand All @@ -223,6 +232,9 @@
}

.sidenav-wrapper {
@media screen and (max-width: 47.9875rem) {
display: block;
}
height: 100%;
display: flex;
flex-direction: column;
Expand Down
10 changes: 5 additions & 5 deletions attack-theme/templates/general/attack-index.html
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,8 @@
<div class="col jumbotron-fluid">
<div class="container home-banner">
<div class="row pt-5">
{% if parsed.attack_branding %}
<div class="col mb-5 home-left-col">
{% if parsed.attack_branding %}
<div class="col mb-5 home-left-col">
<p class="text-justify">MITRE ATT&CK<sup>&reg;</sup> is a globally-accessible knowledge base of adversary tactics and techniques based on real-world observations. The ATT&CK knowledge base is used as a foundation for the development of specific threat models and methodologies in the private sector, in government, and in the cybersecurity product and service community.</p>
<p class="text-justify">With the creation of ATT&CK, MITRE is fulfilling its mission to solve problems for a safer world &mdash; by bringing communities together to develop more effective cybersecurity. ATT&CK is open and available to any person or organization for use at no charge.</p>
</div>
Expand All @@ -29,15 +29,15 @@
</tr>
<tr>
<td>
<a href="/resources/contribute" role="button">Contribute</a>
<a href="/resources/contribute" role="button">Contribute</a>
</td>
<td>
<a href="https://medium.com/mitre-attack" role="button" target="_blank" >Blog <img src="/theme/images/external-site-dark.jpeg" alt="External site" class="external-icon" /></a>
</td>
</tr>
<tr>
<td>
<a href="/resources/faq" role="button">FAQ</a>
<a href="/resources/faq" role="button">FAQ</a>
</td>
<td>
<div class="btn-group">
Expand Down Expand Up @@ -70,7 +70,7 @@
</p>
<p class="text-justify pb-2">
With the creation of ATT&CK, MITRE is fulfilling its mission to solve problems for a safer world &mdash; by bringing communities together to develop more effective cybersecurity. ATT&CK is open and available to any person or organization for use at no charge.
</p>
</p>
<div class="p-line">
<p class="py-3">
This is a custom instance of the ATT&CK Website built from <a href="https://github.com/mitre-attack/attack-website">source code published by ATT&CK on GitHub</a>. It is not affiliated with ATT&CK in any official capacity. The official instance of the ATT&CK website can be found at <a href="https://attack.mitre.org">attack.mitre.org</a>.
Expand Down
121 changes: 121 additions & 0 deletions attack-theme/templates/general/attackcon-overview.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,121 @@
{% extends "general/two-column.html" %}
{% set active_page = "resources" -%}
{% set title = "MITRE ATT&CKcon - " + page.title + " | MITRE ATT&CK&reg;" -%}
{% set con = page.data | from_json %}
{% import 'macros/navigation.html' as navigation %}

{% block innerleft %}
<div id="v-tab" role="tablist" aria-orientation="vertical" class="h-100">
{{navigation.sidenav(RESOURCE_NAV, output_file)}}
</div>
{% endblock %}

{% block innerright %}
{{ super () }}
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="/">Home</a></li>
<li class="breadcrumb-item"><a href="/resources">Resources</a></li>
<li class="breadcrumb-item"><a href="/resources/attackcon">ATT&CKcon</a></li>
<li class="breadcrumb-item">{{ con.title }}</a></li>
</ol>

<div class="tab-content attackcons p-4 mb-3">
{% set conID = "-".join(con.date.split(' ')) %}
<div class="container pb-3 uniform-block">
{% if "banner_img" in con %}
<p>
<img src="{{ con.banner_img }}" width="100%">
</p>
{% endif %}

{% if "description" in con %}
<p>{{con.description}}</p>
{% endif %}
{% if "blogpost" in con %}
<p><a target="_blank" href="{{con.blogpost}}">Click here to read our blog post about {{con.title}}! <img src="/theme/images/external-site-dark.jpeg" alt="External site" class="external-icon"></a></p>
{% endif %}

<div class="presentations card-block" id="presentations">
<h2>Presentations</h2>
{% for presentation in con.presentations %}
{% set isPanel = "moderator" in presentation %}
<div class="card w-100 mt-1">
<div class="card-header collapsed" id="{{conID}}-{{loop.index}}-header" data-toggle="collapse" data-target="#{{conID}}-{{loop.index}}-body" aria-expanded="false" aria-controls="{{conID}}-{{loop.index}}-body">
<h5 class="mb-0">{{loop.index}}. {{presentation.title}}
<small>
{% if not isPanel %}
({% for presenterGroup in presentation.presenters %}{% if loop.index > 1 %}; {% endif %}{{ " and ".join(presenterGroup.names)}}{% if "organization" in presenterGroup %}, {{presenterGroup.organization}}{% endif %}{% endfor %})
{% else %}
(Moderated by {{presentation.moderator.name}}, {{presentation.moderator.organization}})
{% endif %}
</small>
</h5>
</div>
<div id="{{conID}}-{{loop.index}}-body" class="collapse" aria-labelledby="{{conID}}-{{loop.index}}-header">
<div class="card-body">
{% if not isPanel %}
<p class="card-text">{{presentation.description}}</p>
{% else %}
<p class="card-text">Panelists:</p>
<ul class="card-text">
{% for panelist in presentation.panelists %}
<li>
{{panelist}}
</li>
{% endfor %}
</ul>
<p class="card-text">{{presentation.moderator.name}} moderates a panel that discusses:</p>
<ul class="card-text">
{% for topic in presentation.topics %}
<li>
{{topic}}
</li>
{% endfor %}
</ul>
{% endif %}

{% if "video" in presentation %}
<a class="card-link" target="_blank" href="{{presentation.video}}">video <img src="/theme/images/external-site-dark.jpeg" alt="External site" class="external-icon"></a>
{% else %}
<span class="card-link">(no video)</span>
{% endif %}

{% if "slides" in presentation %}
<a class="card-link" target="_blank" href="{{presentation.slides}}">slides <img src="/theme/images/external-site-dark.jpeg" alt="External site" class="external-icon"></a>
{% else %}
<span class="card-link">(no slides)</span>
{% endif %}
</div>
</div>
</div>

{% endfor %}
</div>
{% if "sponsors_img" in con %}
<div>
<h2>Sponsors</h2>
<img src="{{ con.sponsors_img }}" width="100%">
</div>
{% elif "sponsors_img_list" in con %}
<div>
<h2>Sponsors</h2>
<div class="sponsors-block">
{% for sponsor_img in con.sponsors_img_list %}
<div class="img-container">
<img src="{{sponsor_img}}">
</div>
{% endfor %}
</div>
</div>
{% endif %}
</div>
</div>

{% endblock %}

<!--startindex-->
{% block scripts %}
{{ super() }}
<!--SCRIPTS-->
<script src="/theme/scripts/navigation.js"></script>
{% endblock %}
5 changes: 4 additions & 1 deletion attack-theme/templates/general/base-template.html
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
{% set title = title|default('MITRE ATT&CK&reg;') -%}
{% import 'macros/search.html' as search %}
{% import 'macros/navigation_menu.html' as navigation_menu %}
{% set RESOURCE_NAV = ${RESOURCE_NAV} -%}

<!DOCTYPE html>
<html lang='en'>
Expand All @@ -26,7 +27,7 @@
{% include "general/google-site-verification.html" %}

<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no'>
<meta name='viewport' content='width=device-width, initial-scale=1,shrink-to-fit=no'>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel='shortcut icon' href='/theme/favicon.ico' type='image/x-icon'>
<title>{{ title }}</title>
Expand All @@ -37,6 +38,7 @@
<link rel='stylesheet' href='/theme/style/bootstrap-select.min.css' />
{% assets "style/style.scss", filters="pyscss", output="style.min.css" %}
<link rel="stylesheet" type="text/css" href="{{ SITEURL }}/{{ ASSET_URL }}">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
{% endassets %}
{% endblock %}
</head>
Expand Down Expand Up @@ -159,6 +161,7 @@
<script src="/theme/scripts/site.js?{{ range(1, 9002) | random }}"></script>
<script src="/theme/scripts/settings.js?{{ range(1, 9002) | random }}"></script>
<script src="/theme/scripts/search_bundle.js"></script>
<script src="/theme/scripts/resizer.js"></script>
{% endblock %}
</body>
</html>
68 changes: 68 additions & 0 deletions attack-theme/templates/general/faq-overview.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
{% extends "general/two-column.html" %}
{% set active_page = "resources" -%}
{% set title = "FAQ - " + page.title + " | MITRE ATT&CK&reg;" -%}
{% set parsed = page.data | from_json %}
{% import 'macros/navigation.html' as navigation %}

{% block innerleft %}
<div id="v-tab" role="tablist" aria-orientation="vertical" class="h-100">
{{navigation.sidenav(RESOURCE_NAV, output_file)}}
</div>
{% endblock %}

{% block innerright %}
<!--stopindex-->
<div class="px-3">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="/">Home</a></li>
<li class="breadcrumb-item"><a href="/resources">Resources</a></li>
<li class="breadcrumb-item">FAQ</li>
</ol>
</div>
<div class="container pb-3 uniform-block">
<h1 class="text-center">Frequently Asked Questions</h1>
<div class="card-block faq">
<div class="clearfix pb-3">
<h2>{{parsed.name}}</h2>
<div>
<h3>Table of Contents</h3>
<ol>
<h5>
{% for qa in parsed.questions %}

<li>
<a href="#{{qa.id}}-header">{{qa.question}}</a>
</li>
{% endfor %}
</h5>
</ol>
<hr color="black">
</div>
<div>
<ol>
{% for qa in parsed.questions %}
<div>
<div class="card-title" id="{{qa.id}}-header">
<li>
{{qa.question}}
</li>
</div>
<div class="card-data">
{{qa.answer}}
</div>
<hr>

</div>
{% endfor %}
</ol>
</div>
</div>
</div>
</div>
{% endblock %}
<!--startindex-->
{% block scripts %}
{{ super() }}
<!--SCRIPTS-->
<script src="/theme/scripts/navigation.js"></script>
{% endblock %}
Loading

0 comments on commit e7b46e6

Please sign in to comment.