Skip to content

Commit

Permalink
offcanvas left sidebar
Browse files Browse the repository at this point in the history
  • Loading branch information
Davide Arcuri committed Sep 12, 2024
1 parent 1244dc8 commit aed7175
Show file tree
Hide file tree
Showing 4 changed files with 117 additions and 114 deletions.
14 changes: 1 addition & 13 deletions orochi/static/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,18 +32,6 @@ a.navbar-brand {
) !important;
}

/********************************************************
MOVE DOWN FROM TITLE [OVVERRIDE DASHBOARD]
********************************************************/

.sidebar {
padding: 88px 0 0; /* Height of navbar */
}

main {
padding-top: 20px;
}

/********************************************************
COLOR FOR CHECKBOXES
********************************************************/
Expand Down Expand Up @@ -287,7 +275,7 @@ div.wunderbaum {
DATATABLE MIN HEIGHT
********************************************************/

.dataTables_scrollBody {
.dt-scroll-body {
max-height: unset !important;
height: unset !important;
}
154 changes: 82 additions & 72 deletions orochi/templates/base.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,13 @@
<div class="container-fluid pb-3">
<header
class="d-flex flex-wrap align-items-center justify-content-center justify-content-md-around py-3 mb-4 border-bottom">

{% if dumps %}
<a class="nav-link link-body-emphasis" data-bs-toggle="offcanvas" data-bs-target="#sidemenu" aria-controls="sidemenu">
<i class="fas fa-xl fa-gamepad bi d-block mx-auto mb-1"></i>{% trans "Main" %}
</a>
{% endif %}

<div class="ms-5">
<a href="/" class="d-flex align-items-center mb-2 mb-lg-0 text-black text-decoration-none">
<span id="logo"><span id="first-letter">O</span>rochi</span>
Expand Down Expand Up @@ -178,98 +185,101 @@
</header>

{% block fullpage %}
<div class="d-grid gap-3" style="grid-template-columns: 1fr 3fr;">
<div class="bg-body-tertiary border rounded-3" style="min-width: 380px;">
{% block sidebar %}{% endblock sidebar %}
</div>
<div class="bg-body-tertiary border rounded-3" style="overflow: scroll;">
{% block content %}{% endblock content %}
</div>
<div class="offcanvas offcanvas-start" tabindex="-1" id="sidemenu" aria-labelledby="sidemenuLabel">
{% block sidebar %}{% endblock sidebar %}
</div>
<div class="container-fluid bg-body-tertiary border">
{% block content %}{% endblock content %}
</div>
<div class="offcanvas offcanvas-end" tabindex="-1" id="leftNote" aria-labelledby="leftNoteLabel">

{% block offcanvas %} {% endblock offcanvas %}
</div>
{% endblock fullpage %}

{% block modal %}
{% endblock modal %}
</div>
{% endblock fullpage %}

{% block javascript %}
<script defer src="{% static 'js/handlebars/handlebars.runtime.js' %}" type="text/javascript"
language="javascript"></script>
<script defer src="{% static 'js/handlebars/plugins.js' %}" type="text/javascript" language="javascript"></script>
<script defer src="{% static 'js/handlebars/maxmind.js' %}" type="text/javascript" language="javascript"></script>
<script defer src="{% static 'js/handlebars/vt.js' %}" type="text/javascript" language="javascript"></script>
<script defer src="{% static 'js/fontawesome/all.min.js' %}" type="text/javascript" language="javascript"></script>
<script src="{% static 'js/jquery-3.5.1.js' %}" type="text/javascript" language="javascript"></script>
<script src="{% static 'js/bootstrap/bootstrap.bundle.min.js' %}" type="text/javascript"
language="javascript"></script>
<script src="{% static 'js/datatables/dataTables.js' %}" type="text/javascript" language="javascript"></script>
<script src="{% static 'js/wunderbaum/wunderbaum.umd.min.js' %}" type="text/javascript"
language="javascript"></script>
<script src="{% static 'js/datatables/dataTables.bootstrap5.js' %}" type="text/javascript"
language="javascript"></script>
<script src="{% static 'js/datatables/dataTables.checkboxes.min.js' %}" type="text/javascript"
language="javascript"></script>
<script src="{% static 'js/bootbox/bootbox.min.js' %}" type="text/javascript" language="javascript"></script>
<script src="{% static 'js/toast/toast.js' %}" type="text/javascript" language="javascript"></script>
<script src="{% static 'js/jscolor/jscolor.js' %}" type="text/javascript" language="javascript"></script>
<script src="{% static 'js/marked/marked.min.js' %}" type="text/javascript" language="javascript"></script>
<script src="{% static 'js/jsoneditor/jsoneditor.min.js' %}"></script>
<script type="text/javascript">
{% block modal %}
{% endblock modal %}

$(document).ready(function () {
{% block javascript %}
<script defer src="{% static 'js/handlebars/handlebars.runtime.js' %}" type="text/javascript"
language="javascript"></script>
<script defer src="{% static 'js/handlebars/plugins.js' %}" type="text/javascript" language="javascript"></script>
<script defer src="{% static 'js/handlebars/maxmind.js' %}" type="text/javascript" language="javascript"></script>
<script defer src="{% static 'js/handlebars/vt.js' %}" type="text/javascript" language="javascript"></script>
<script defer src="{% static 'js/fontawesome/all.min.js' %}" type="text/javascript" language="javascript"></script>
<script src="{% static 'js/jquery-3.5.1.js' %}" type="text/javascript" language="javascript"></script>
<script src="{% static 'js/bootstrap/bootstrap.bundle.min.js' %}" type="text/javascript"
language="javascript"></script>
<script src="{% static 'js/datatables/dataTables.js' %}" type="text/javascript" language="javascript"></script>
<script src="{% static 'js/wunderbaum/wunderbaum.umd.min.js' %}" type="text/javascript"
language="javascript"></script>
<script src="{% static 'js/datatables/dataTables.bootstrap5.js' %}" type="text/javascript"
language="javascript"></script>
<script src="{% static 'js/datatables/dataTables.checkboxes.min.js' %}" type="text/javascript"
language="javascript"></script>
<script src="{% static 'js/bootbox/bootbox.min.js' %}" type="text/javascript" language="javascript"></script>
<script src="{% static 'js/toast/toast.js' %}" type="text/javascript" language="javascript"></script>
<script src="{% static 'js/jscolor/jscolor.js' %}" type="text/javascript" language="javascript"></script>
<script src="{% static 'js/marked/marked.min.js' %}" type="text/javascript" language="javascript"></script>
<script src="{% static 'js/jsoneditor/jsoneditor.min.js' %}"></script>
<script type="text/javascript">

// TOOLTIP
$('[data-toggle="tooltip"]').tooltip()
$(document).ready(function () {

// PICK AUTOREFRESH FROM LOCAL STORAGE
var autorefresh = localStorage.getItem("autorefresh");
if (autorefresh == true || autorefresh == "true") {
$("#autorefresh").prop('checked', true);
}
// TOOLTIP
$('[data-toggle="tooltip"]').tooltip()

// CHANGE CHECKBOX SETS VALUE
$(document).on("change", "#autorefresh", function () {
localStorage.setItem("autorefresh", $("#autorefresh").prop("checked"))
});
// PICK AUTOREFRESH FROM LOCAL STORAGE
var autorefresh = localStorage.getItem("autorefresh");
if (autorefresh == true || autorefresh == "true") {
$("#autorefresh").prop('checked', true);
}

// CHANGELOG
$(document).on("click", "#changelog", function () {
$.get("{% url 'api:changelog' %}")
.done(function (data) {
bootbox.alert({
message: marked.parse(data.note),
size: 'large'
});
});
});
// CHANGE CHECKBOX SETS VALUE
$(document).on("change", "#autorefresh", function () {
localStorage.setItem("autorefresh", $("#autorefresh").prop("checked"))
});

// TASK STATUS
setInterval(function () {
$.ajax({
url: "{% url 'api:dask_status' %}",
success: function (data) {
$("#tasks_running").html(data);
},
timeout: 2000
// CHANGELOG
$(document).on("click", "#changelog", function () {
$.get("{% url 'api:changelog' %}")
.done(function (data) {
bootbox.alert({
message: marked.parse(data.note),
size: 'large'
});
});
}, 60000);
});

// TASK STATUS
setInterval(function () {
$.ajax({
url: "{% url 'api:dask_status' %}",
success: function (data) {
$("#tasks_running").html(data.running);
},
timeout: 2000
});
}, 60000);

// ABOUT
$(document).on("click", "#about", function () {
bootbox.alert({
message: "\
// ABOUT
$(document).on("click", "#about", function () {
bootbox.alert({
message: "\
<img src=\"{% static 'images/logo.png' %}\" width=\"100%\" class=\"rounded mx-auto d-block\" />\
<p style=\"text-align:center\">\
More info: <a href=\"https://github.com/LDO-CERT/orochi\" target=\"_blank\">Orochi</a>\
<br>\
<a href=\"https://github.com/garanews\" target=\"_blank\">@garanews</a> - <a href=\"https://github.com/dadokkio\" target=\"_blank\">@dadokkio</a>\
</p>",
size: 'large'
});
size: 'large'
});
});
</script>
{% endblock javascript %}
});
</script>
{% endblock javascript %}
</body>

</html>
61 changes: 33 additions & 28 deletions orochi/templates/website/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,13 @@
{% endblock %}

{% block sidebar %}
<h6 class="sidebar-heading d-flex justify-content-between px-3 mt-4 mb-1 text-muted">
<div class="offcanvas-header">
<h1 class="offcanvas-title" id="sidemenuLabel">
<span id="logo"><span id="first-letter">O</span>rochi</span>
</h1>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"></button>
</div>
<div class="offcanvas-body">
<span>dumps
{% if not request.user|has_group:"ReadOnly" %}
<button id="new-index" type="button" class="btn btn-outline-success btn-sm">
Expand All @@ -23,16 +29,17 @@ <h6 class="sidebar-heading d-flex justify-content-between px-3 mt-4 mb-1 text-mu
{% endif %}
</span>
<input type="text" id="filter_dump" name="filter_dump" style="width: 60%;" class="form-control form-control-sm" placeholder="Filter">
</h6>
{% include "website/partial_indices.html" %}
<hr />
<h6 class="sidebar-heading d-flex justify-content-between px-3 mt-4 mb-1 text-muted">
<span>plugins</span>
<input type="text" id="filter_plugin" name="filter_plugin" style="width: 60%;" class="form-control form-control-sm" placeholder="Filter">
</h6>
<div id="plugin_info">
<ul class="nav flex-column" id="list_plugin">
</ul>
</h6>
{% include "website/partial_indices.html" %}
<hr />
<h6 class="sidebar-heading d-flex justify-content-between px-3 mt-4 mb-1 text-muted">
<span>plugins</span>
<input type="text" id="filter_plugin" name="filter_plugin" style="width: 60%;" class="form-control form-control-sm" placeholder="Filter">
</h6>
<div id="plugin_info">
<ul class="nav flex-column" id="list_plugin">
</ul>
</div>
</div>
{% endblock sidebar %}

Expand All @@ -45,23 +52,21 @@ <h6 class="sidebar-heading d-flex justify-content-between px-3 mt-4 mb-1 text-mu
{% endblock content %}

{% block offcanvas %}
<div class="offcanvas offcanvas-end" tabindex="-1" id="leftNote" aria-labelledby="leftNoteLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="leftNoteLabel">History Log</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<ul id="chat-log">
{% for new in news %}
<li>
<dl>
<dt>{{new.date|date:"SHORT_DATETIME_FORMAT"}}</dt>
<dd>{{new.text|safe}}</dd>
</dl>
</li>
{% endfor %}
</ul>
</div>
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="leftNoteLabel">History Log</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<ul id="chat-log">
{% for new in news %}
<li>
<dl>
<dt>{{new.date|date:"SHORT_DATETIME_FORMAT"}}</dt>
<dd>{{new.text|safe}}</dd>
</dl>
</li>
{% endfor %}
</ul>
</div>
{% endblock offcanvas %}

Expand Down
2 changes: 1 addition & 1 deletion orochi/website/views.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -461,7 +461,7 @@ def analysis(request):
]
+ [
x
for x in value_columns["value"].keys()
for x in value_columns.get("value", {}).keys()
if x not in SYSTEM_COLUMNS
]
+ ["actions"]
Expand Down

0 comments on commit aed7175

Please sign in to comment.