From c39f6bd914e9cc2c9a3c3a1f60ef42a5d738cc15 Mon Sep 17 00:00:00 2001
From: Ergys Dona <ergys.dona@cern.ch>
Date: Thu, 30 Aug 2018 17:42:42 +0200
Subject: [PATCH] URSH: Replace qtip with input field

---
 ursh/indico_ursh/templates/url_shortener.html | 21 ++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/ursh/indico_ursh/templates/url_shortener.html b/ursh/indico_ursh/templates/url_shortener.html
index 4843c21..fdb3a40 100644
--- a/ursh/indico_ursh/templates/url_shortener.html
+++ b/ursh/indico_ursh/templates/url_shortener.html
@@ -1,6 +1,6 @@
 {% extends 'layout/base.html' %}
 
-{% block page_class %}fixed-width-standalone-text-page{% endblock %}
+{% block page_class %}fixed-width-standalone-page{% endblock %}
 
 {% block title -%}
     {% trans %}URL Shortener{% endtrans %}
@@ -10,15 +10,26 @@
     <div class="page-content">
         <p>
             {% trans -%}
-                In this page, you can generate short links for any indico URL.<br>
-                <b>Tip:</b> you can also generate short links by using the quick-links in various places within indico!
+                In this page, you can generate short links for any Indico URL.
+                Just enter the URL below and click "Shorten".
             {%- endtrans %}
         </p>
-        <div class="i-has-action">
+        <div id="ursh-shorten-request-form" class="i-has-action">
             <input id="ursh-shorten-input" name="ursh-shorten-original-url" type="url" style="font-family:monospace;"
                    spellcheck="false" autocomplete="off" autocapitalize="off"
-                   placeholder="{% trans %}Enter an Indico URL to shorten{% endtrans %}">
+                   placeholder="{% trans %}Enter an Indico URL to shorten{% endtrans %}...">
             <button id="ursh-shorten-button" type="button" class="i-button">{% trans %}Shorten{% endtrans %}</button>
         </div>
+        <div id="ursh-shorten-response-form" class="i-has-action" style="margin-top:1em;display:none">
+            <input id="ursh-shorten-output" name="ursh-shorten-short-url" type="url" style="font-family:monospace;"
+                   spellcheck="false" autocomplete="off" autocapitalize="off" readonly>
+            <button type="button" class="i-button icon-clipboard" title="{% trans %}Copy to clipboard{% endtrans %}"></button>
+        </div>
+        <p>
+            {% trans -%}
+                <b>Tip:</b> you can also generate short links by using the quick-links in various places within Indico!
+                Just look for the <span class="icon-link"></span> icon.
+            {%- endtrans %}
+        </p>
     </div>
 {%- endblock %}