mirror of https://github.com/CIRCL/lookyloo
chg: Make a menu
Raphaël Vinot
parent
121e4b3ebf
commit
38e4475b94
|
|
@ -14,6 +14,48 @@
|
|||
stroke-width: 2px;
|
||||
}
|
||||
|
||||
#menu_container {
|
||||
position: fixed;
|
||||
top: 5px;
|
||||
left: 5px;
|
||||
padding-top: 5px;
|
||||
padding-right: 5px;
|
||||
padding-bottom: 5px;
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
#menu {
|
||||
position: fixed;
|
||||
top: 5px;
|
||||
left: 5px;
|
||||
background: white;
|
||||
border: 2px solid;
|
||||
padding-top: 5px;
|
||||
padding-right: 5px;
|
||||
padding-bottom: 5px;
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
#menu_container .menu-header {
|
||||
width: 200px;
|
||||
height: 110px;
|
||||
resize: both;
|
||||
}
|
||||
|
||||
#menu_container ul.components {
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
#menu_container ul li a {
|
||||
padding: 10px;
|
||||
font-size: 1.1em;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#menu_container ul li a:hover {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
#screenshot {
|
||||
position: fixed;
|
||||
top: 5px;
|
||||
|
|
@ -24,18 +66,6 @@
|
|||
overflow: hidden;
|
||||
}
|
||||
|
||||
#lookyloo-icon {
|
||||
position: fixed;
|
||||
top: 5px;
|
||||
left: 5px;
|
||||
background-image: url("lookyloo.jpeg");
|
||||
background-size: cover;
|
||||
width: 200px;
|
||||
height: 110px;
|
||||
resize: both;
|
||||
border: 2px solid;
|
||||
}
|
||||
|
||||
#legend_container {
|
||||
position: fixed;
|
||||
bottom: 5px;
|
||||
|
|
|
|||
|
|
@ -10,13 +10,6 @@
|
|||
<script src='{{ url_for('static', filename='d3.v5.min.js') }}'></script>
|
||||
<script src='{{ url_for('static', filename='FileSaver.js') }}'></script>
|
||||
<script src='{{ url_for('static', filename='tree.js') }}'></script>
|
||||
<script>
|
||||
$('#screenshot_view_button').click(function(){
|
||||
$(this).text(function(i, old){
|
||||
return old=='View' ? 'Hide' : 'View';
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
$('#modulesModal').on('show.bs.modal', function(e) {
|
||||
var button = $(e.relatedTarget);
|
||||
|
|
@ -50,6 +43,7 @@
|
|||
|
||||
{% block content %}
|
||||
{{super()}}
|
||||
|
||||
<script>
|
||||
var treeUUID = "{{ tree_uuid }}";
|
||||
var treeData = {{ tree_json | safe }};
|
||||
|
|
@ -57,14 +51,55 @@
|
|||
|
||||
{{ render_messages(container=True, dismissible=True) }}
|
||||
|
||||
<a id="lookyloo-icon" href="/" ></a>
|
||||
<div id=screenshot class="collapse">
|
||||
<img src="{{ url_for('image', tree_uuid=tree_uuid) }}" class="img-fluid"/>
|
||||
<!-- Containers -->
|
||||
|
||||
<div id="menu_container" class="container">
|
||||
<div id=menu class="collapse show">
|
||||
<div class="menu_header">
|
||||
<a href="/" >
|
||||
<img src="{{ url_for('static', filename='lookyloo.jpeg') }}" alt="Lookyloo icon" height="110">
|
||||
</a>
|
||||
</div>
|
||||
<center>
|
||||
<div style="display: inline">
|
||||
<b>Menu</b>
|
||||
</div>
|
||||
<div style="display: inline;">
|
||||
<button type="button" class="btn btn-link" data-toggle="collapse" data-target="#menu">
|
||||
<img src="{{ url_for('static', filename='minimize2.jpg') }}" alt="Minimize menu" height="25" width="25">
|
||||
</button>
|
||||
</div>
|
||||
</center>
|
||||
<ul class="list-unstyled components">
|
||||
<li>
|
||||
<a href="#modulesModal" data-remote="{{ url_for('trigger_modules', tree_uuid=tree_uuid, force=False) }}"
|
||||
data-toggle="modal" data-target="#modulesModal" role="button">Show third party reports</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#statsModal" data-remote="{{ url_for('stats', tree_uuid=tree_uuid) }}"
|
||||
data-toggle="modal" data-target="#statsModal" role="button">Show Statistics</a>
|
||||
</li>
|
||||
{% if enable_mail_notification %}
|
||||
<li>
|
||||
<a href="#emailModal" data-toggle="modal" data-target="#emailModal" role="button">Notify by mail</a>
|
||||
</li>
|
||||
{%endif%}
|
||||
</ul>
|
||||
</div>
|
||||
<div style="width: 100px">
|
||||
<div style="display: inline;">
|
||||
<button type="button" class="btn btn-link" data-toggle="collapse" data-target="#menu">
|
||||
<img src="{{ url_for('static', filename='maximize2.jpg') }}" alt="Maximize" height="40" width="40">
|
||||
</button>
|
||||
</div>
|
||||
<div style="display: inline">
|
||||
<b>Menu</b>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="legend_container" class="container">
|
||||
<div id=legend class="collapse show">
|
||||
<div>
|
||||
<center>
|
||||
<div style="display: inline">
|
||||
<b>Legend</b>
|
||||
|
|
@ -75,7 +110,6 @@
|
|||
</button>
|
||||
</div>
|
||||
</center>
|
||||
</div>
|
||||
<hr/>
|
||||
<img src="{{ url_for('static', filename='javascript.png') }}"
|
||||
alt="JavaScript" height="20" width="20"> Javascript <br>
|
||||
|
|
@ -119,7 +153,7 @@
|
|||
<div style="width: 100px">
|
||||
<div style="display: inline;">
|
||||
<button type="button" class="btn btn-link" data-toggle="collapse" data-target="#legend">
|
||||
<img src="{{ url_for('static', filename='maximize2.jpg') }}" alt="Minimize legend" height="40" width="40">
|
||||
<img src="{{ url_for('static', filename='maximize2.jpg') }}" alt="Maximize legend" height="40" width="40">
|
||||
</button>
|
||||
</div>
|
||||
<div style="display: inline">
|
||||
|
|
@ -155,18 +189,7 @@
|
|||
{%endif%}
|
||||
<b>Screenshot</b>:
|
||||
<a href="{{ url_for('image', tree_uuid=tree_uuid) }}" class="btn btn-info" role="button">Download</a>
|
||||
<button id="screenshot_view_button" type="button" class="btn btn-info"
|
||||
data-toggle="collapse" data-target="#screenshot">View</button>
|
||||
<br>
|
||||
<br>
|
||||
|
||||
<a href="#modulesModal" data-remote="{{ url_for('trigger_modules', tree_uuid=tree_uuid, force=False) }}"
|
||||
data-toggle="modal" data-target="#modulesModal" class="btn btn-info" role="button">Show third party reports</a>
|
||||
<a href="#statsModal" data-remote="{{ url_for('stats', tree_uuid=tree_uuid) }}"
|
||||
data-toggle="modal" data-target="#statsModal" class="btn btn-info" role="button">Show Statistics</a>
|
||||
{% if enable_mail_notification %}
|
||||
<a href="#emailModal" data-toggle="modal" data-target="#emailModal" class="btn btn-info" role="button">Notify by mail</a>
|
||||
{%endif%}
|
||||
<a href="#screenshotModal" data-toggle="modal" data-target="#screenshotModal" class="btn btn-info" role="button">Show screenshot</a>
|
||||
</div>
|
||||
<div style="width: 100px;float: right;">
|
||||
<div style="display: inline;">
|
||||
|
|
@ -180,6 +203,8 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modals -->
|
||||
|
||||
<div class="modal fade" id="statsModal" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog modal-xl" role="document">
|
||||
<div class="modal-content">
|
||||
|
|
@ -199,6 +224,25 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal fade" id="screenshotModal" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog modal-xl" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="modulesModalLabel">Screenshot</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<img src="{{ url_for('image', tree_uuid=tree_uuid) }}" class="img-fluid"/>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal fade" id="modulesModal" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog modal-xl" role="document">
|
||||
<div class="modal-content">
|
||||
|
|
@ -247,6 +291,4 @@
|
|||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{% endblock content %}
|
||||
|
|
|
|||
Loading…
Reference in New Issue