From e1898616c62b19c846b2fd53b04390a3bcec72d7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rapha=C3=ABl=20Vinot?= <raphael@vinot.info>
Date: Thu, 30 Jul 2020 17:45:07 +0200
Subject: [PATCH] chg: Reorganize tree view

---
 website/web/static/tree.css               |  8 ++++----
 website/web/templates/hostname_popup.html | 20 ++++++++++----------
 website/web/templates/macros.html         |  2 +-
 website/web/templates/tree.html           | 15 +++++++++------
 4 files changed, 24 insertions(+), 21 deletions(-)

diff --git a/website/web/static/tree.css b/website/web/static/tree.css
index bf9b3fb6..6c4fe9ba 100644
--- a/website/web/static/tree.css
+++ b/website/web/static/tree.css
@@ -69,7 +69,7 @@
 #legend_container {
   position: fixed;
   bottom: 5px;
-  left: 5px;
+  right: 5px;
   padding-top: 5px;
   padding-right: 5px;
   padding-bottom: 5px;
@@ -79,7 +79,7 @@
 #legend {
   position: fixed;
   bottom: 5px;
-  left: 5px;
+  right: 5px;
   background: white;
   border: 2px solid;
   padding-top: 5px;
@@ -90,7 +90,7 @@
 
 #tree-details_container {
   position: fixed;
-  bottom: 5px;
+  top: 5px;
   right: 5px;
   padding-top: 5px;
   padding-right: 5px;
@@ -100,7 +100,7 @@
 
 #tree-details {
   position: fixed;
-  bottom: 5px;
+  top: 5px;
   right: 5px;
   background: white;
   border: 2px solid;
diff --git a/website/web/templates/hostname_popup.html b/website/web/templates/hostname_popup.html
index 12af2ea0..44c315bd 100644
--- a/website/web/templates/hostname_popup.html
+++ b/website/web/templates/hostname_popup.html
@@ -53,7 +53,7 @@
   {# Headers #}
   <center>
     <h3>{{ hostname }}</h3>
-    <button type="button" class="btn btn-info" onclick="whereAmI('{{ hostname_uuid }}')">Flag node on tree</button>
+    <button type="button" class="btn btn-info" onclick="whereAmI('{{ hostname_uuid }}')">Locate in tree</button>
     <a href="{{ url_for('hostnode_details_text', tree_uuid=tree_uuid, node_uuid=hostname_uuid) }}" class="btn btn-info" role="button">Download URLs as text</a>
   </center>
   {# Start list of URLs #}
@@ -61,15 +61,7 @@
     {% for url in urls %}
     {# URL Display #}
     <li class="list-group-item">
-      <div class="h3">
-        {# Copy full URL to clipbard #}
-        <button type="button" class="btn btn-default btn-copy js-copy"
-                data-toggle="tooltip" data-placement="bottom" data-copy="{{ url['url_object'].name }}" title="Copy to clipboard">
-          <svg class="bi bi-clipboard" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-            <path fill-rule="evenodd" d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/>
-            <path fill-rule="evenodd" d="M9.5 1h-3a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/>
-          </svg>
-        </button>
+      <div class="h3" title={{ url['url_path'] }}>
         {# HTTPs or not  #}
         {% if url['encrypted'] %}
         <svg class="bi bi-lock" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
@@ -82,6 +74,14 @@
         {%endif%}
         {# URL #}
         ... /{{ shorten_string(url['url_path'], 50)}}
+        {# Copy full URL to clipbard #}
+        <button type="button" class="btn btn-default btn-copy js-copy"
+                data-toggle="tooltip" data-placement="bottom" data-copy="{{ url['url_object'].name }}" data-original-title="Copy to clipboard">
+          <svg class="bi bi-clipboard" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+            <path fill-rule="evenodd" d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/>
+            <path fill-rule="evenodd" d="M9.5 1h-3a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/>
+          </svg>
+        </button>
       </div>
       <ul class="list-group">
 
diff --git a/website/web/templates/macros.html b/website/web/templates/macros.html
index a407c9b3..b6e43cd1 100644
--- a/website/web/templates/macros.html
+++ b/website/web/templates/macros.html
@@ -113,7 +113,7 @@
       <img src="{{ path }}" alt="{{ key }}" width="21" height="21"/>
       {% endfor %}
       {% if urlnode.redirect_url %}
-      Redirect to: {{ shorten_string(urlnode.redirect_url, 50) }}
+      <div title='{{ urlnode.redirect_url }}'>Redirect to: {{ shorten_string(urlnode.redirect_url, 50) }}</div>
       {%endif%}
     {% else %}
     <img src="{{ path }}" alt="{{ key }}" width="21" height="21"/>
diff --git a/website/web/templates/tree.html b/website/web/templates/tree.html
index 3c1c35ee..6c1aaa04 100644
--- a/website/web/templates/tree.html
+++ b/website/web/templates/tree.html
@@ -90,6 +90,12 @@
         <li>
           <a href="#unflag" role="button" onclick="UnflagAllNodes();">Unflag all nodes</a>
         </li>
+        <li>
+          <a href="{{ url_for('image', tree_uuid=tree_uuid) }}" role="button">Download screenshot</a>
+        </li>
+        <li>
+          <a href="#screenshotModal" data-toggle="modal" data-target="#screenshotModal" role="button">Show screenshot</a>
+        </li>
         {% if enable_mail_notification %}
         <li>
           <a href="#emailModal" data-toggle="modal" data-target="#emailModal" role="button">Notify by mail</a>
@@ -152,7 +158,7 @@
   <img src="{{ url_for('static', filename='wtf.png') }}"
       alt="Content type not set/unknown" height="20" width="20"> Content type not set/unknown<br>
   </div>
-  <div style="width: 70px;">
+  <div style="width: 70px; float: right;">
     <center>
     <button type="button" class="btn btn-link" data-toggle="collapse" data-target="#legend">
       <img src="{{ url_for('static', filename='up.jpg') }}" alt="Maximize legend" height="40" width="40">
@@ -171,7 +177,7 @@
       </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='down.jpg') }}"
+            <img src="{{ url_for('static', filename='up.jpg') }}"
                  alt="Minimize tree details" height="25" width="25">
         </button>
       </div>
@@ -187,14 +193,11 @@
         <b>{{k.title()}}</b>: {{ v }}<br>
       {%endfor%}
     {%endif%}
-    <b>Screenshot</b>:
-    <a href="{{ url_for('image', tree_uuid=tree_uuid) }}" class="btn btn-info" role="button">Download</a>
-    <a href="#screenshotModal" data-toggle="modal" data-target="#screenshotModal" class="btn btn-info" role="button">Show screenshot</a>
   </div>
   <div style="width: 70px; float: right;">
     <center>
     <button type="button" class="btn btn-link" data-toggle="collapse" data-target="#tree-details">
-      <img src="{{ url_for('static', filename='up.jpg') }}" alt="Minimize tree details" height="40" width="40">
+      <img src="{{ url_for('static', filename='down.jpg') }}" alt="Minimize tree details" height="40" width="40">
       <b>Tree details</b>
     </button>
     </center>