CIRCL
/
lookyloo
mirror of https://github.com/CIRCL/lookyloo
2
0
Fork 0
Code Issues Releases Wiki Activity

new: Improve view of metainfo

pull/42/head
Raphaël Vinot 2019-04-19 14:41:04 +02:00
parent f7ff6551c6
commit 974c501865
2 changed files with 66 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
website/web/static/tree.css
View File

@ -20,20 +20,18 @@
right: 5px; right: 5px;
background: white; background: white;
border: 2px solid; border: 2px solid;
} height: 1030px;
.thumbnail:hover {
position:relative;
width:100%;
height:auto;
display:block;
z-index:999;
}
.thumbnail {
overflow: hidden; overflow: hidden;
} }
#screenshot .img-thumbnail {
width: auto;
height: auto;
max-height: 100%;
max-width: 100%;
display: block;
}
#lookyloo-icon { #lookyloo-icon {
position: fixed; position: fixed;
top: 5px; top: 5px;
@ -68,6 +66,16 @@
padding-left: 5px; padding-left: 5px;
} }
#tree-details_container {
position: absolute;
bottom: 5px;
right: 5px;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
}
#tree-details { #tree-details {
position: fixed; position: fixed;
bottom: 5px; bottom: 5px;

45
website/web/templates/tree.html
View File

@ -5,6 +5,13 @@
{% block scripts %} {% block scripts %}
{{ super() }} {{ super() }}
<script src='{{ url_for('static', filename='tree.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>
{% endblock %} {% endblock %}
{% block content %} {% block content %}
@ -14,8 +21,8 @@
</script> </script>
<div id=lookyloo-icon></div> <div id=lookyloo-icon></div>
<div id=screenshot> <div id=screenshot class="collapse">
<img src="{{ url_for('image', tree_uuid=tree_uuid) }}" class="thumbnail" height="300" width="200" overflow="hidden"/> <img src="{{ url_for('image', tree_uuid=tree_uuid) }}" class="img-fluid"/>
</div> </div>
<div id="legend_container" class="container"> <div id="legend_container" class="container">
@ -72,7 +79,7 @@
<img src="{{ url_for('static', filename='wtf.png') }}" <img src="{{ url_for('static', filename='wtf.png') }}"
alt="Content type not set/unknown" height="20" width="20"> Content type not set/unknown</br> alt="Content type not set/unknown" height="20" width="20"> Content type not set/unknown</br>
</div> </div>
<div> <div style="width: 100px">
<div style="display: inline;"> <div style="display: inline;">
<button type="button" class="btn btn-link" data-toggle="collapse" data-target="#legend"> <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="Minimize legend" height="40" width="40">
@ -84,7 +91,21 @@
</div> </div>
</div> </div>
<div id=tree-details><center><b>Tree details</b></center></br> <div id="tree-details_container" class="container">
<div id=tree-details class="collapse show">
<div>
<center>
<div style="display: inline">
<b>Tree details</b>
</div>
<div style="display: inline;">
<button type="button" class="btn btn-link" data-toggle="collapse" data-target="#tree-details">
<img src="{{ url_for('static', filename='minimize1.jpg') }}" alt="Minimize tree details" height="25" width="25">
</button>
</div>
</center>
</div>
<hr/>
<b>Root URL</b>: {{ root_url }}</br> <b>Root URL</b>: {{ root_url }}</br>
<b>Start time</b>: {{ start_time }}</br> <b>Start time</b>: {{ start_time }}</br>
<b>User Agent</b>: {{ user_agent }}</br> <b>User Agent</b>: {{ user_agent }}</br>
@ -93,7 +114,21 @@
<b>{{k.title()}}</b>: {{ v }}</br> <b>{{k.title()}}</b>: {{ v }}</br>
{%endfor%} {%endfor%}
{%endif%} {%endif%}
<center><a href="{{ url_for('image', tree_uuid=tree_uuid) }}">Download Image</a></center> <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>
</div>
<div style="width: 100px;float: right;">
<div style="display: inline;">
<button type="button" class="btn btn-link" data-toggle="collapse" data-target="#tree-details">
<img src="{{ url_for('static', filename='maximize1.jpg') }}" alt="Minimize tree details" height="40" width="40">
</button>
</div>
<div style="display: inline">
<b>Tree details</b>
</div>
</div>
</div> </div>
{% endblock content %} {% endblock content %}