ui: Add page descriptions.

2 years ago · e5749a397f
parent a520ebf23f
commit e5749a397f
13 changed files with 34 additions and 15 deletions
--- a/basicswap/templates/active.html
+++ b/basicswap/templates/active.html
@ -30,7 +30,7 @@
        <div class="relative z-20 flex flex-wrap items-center">
          <div class="w-full md:w-1/2 p-3">
            <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">Swaps in Progress</h2>
-            <p class="font-semibold text-coolGray-200"></p>
+            <p class="font-semibold text-coolGray-200">Your swaps that are currently in progress.</p>
          </div>
          <div class="w-full md:w-1/2 p-3 p-6 container flex flex-wrap items-center justify-end items-center mx-auto"> 
            {% if refresh %}
--- a/basicswap/templates/explorers.html
+++ b/basicswap/templates/explorers.html
@ -30,7 +30,7 @@
        <div class="relative z-20 flex flex-wrap items-center -m-3">
          <div class="w-full md:w-1/2 p-3">
            <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">Explorers</h2>
-            <p class="font-semibold text-coolGray-200"></p>
+            <p class="font-semibold text-coolGray-200">Query blockchain explorers with quick commands.</p>
          </div>
        </div>
      </div>
--- a/basicswap/templates/offer_confirm.html
+++ b/basicswap/templates/offer_confirm.html
@ -42,7 +42,7 @@
        <div class="relative z-20 flex flex-wrap items-center -m-3">
          <div class="w-full md:w-1/2 p-3">
            <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">Confirm your offer information</h2>
-            <p class="font-semibold text-coolGray-200">Place a new offer on BasicSwap’s order book.</p>
+            <p class="font-semibold text-coolGray-200">Place an order on the order book.</p>
          </div>
        </div>
      </div>
--- a/basicswap/templates/offer_new_1.html
+++ b/basicswap/templates/offer_new_1.html
@ -30,7 +30,7 @@
        <div class="relative z-20 flex flex-wrap items-center -m-3">
          <div class="w-full md:w-1/2 p-3">
            <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">Place an new offer</h2>
-            <p class="font-semibold text-coolGray-200">Place a new offer on BasicSwap’s order book.</p>
+            <p class="font-semibold text-coolGray-200">Place an order on the order book.</p>
          </div>
        </div>
      </div>
--- a/basicswap/templates/offer_new_2.html
+++ b/basicswap/templates/offer_new_2.html
@ -36,7 +36,7 @@
        <div class="relative z-20 flex flex-wrap items-center -m-3">
          <div class="w-full md:w-1/2 p-3">
            <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">Setup offer parameters</h2>
-            <p class="font-semibold text-coolGray-200">Place a new offer on BasicSwap’s order book.</p>
+            <p class="font-semibold text-coolGray-200">Place an order on the order book.</p>
          </div>
        </div>
      </div>
--- a/basicswap/templates/offers.html
+++ b/basicswap/templates/offers.html
@ -117,7 +117,7 @@
                    },
                    legend: {
                      show: true,
-                      showForSingleSeries: true,
+                      showForSingleSeries: false,
                      showForNullSeries: true,
                      showForZeroSeries: true,
                      position: "right",
--- a/basicswap/templates/rpc.html
+++ b/basicswap/templates/rpc.html
@ -30,7 +30,7 @@
        <div class="relative z-20 flex flex-wrap items-center -m-3">
          <div class="w-full md:w-1/2 p-3">
            <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">RPC Console</h2>
-            <p class="font-semibold text-coolGray-200"></p>
+            <p class="font-semibold text-coolGray-200">Manage your BasicSwap client and coins settings.</p>
          </div>
        </div>
      </div>
--- a/basicswap/templates/settings.html
+++ b/basicswap/templates/settings.html
@ -28,7 +28,7 @@
        <div class="relative z-20 flex flex-wrap items-center -m-3">
          <div class="w-full md:w-1/2 p-3">
            <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">Settings</h2>
-            <p class="font-semibold text-coolGray-200">Manage your BasicSwap and Coins settings</p>
+            <p class="font-semibold text-coolGray-200">Manage your BasicSwap client and coins settings.</p>
          </div>
        </div>
      </div>
--- a/basicswap/templates/smsgaddresses.html
+++ b/basicswap/templates/smsgaddresses.html
@ -30,7 +30,7 @@
        <div class="relative z-20 flex flex-wrap items-center -m-3">
          <div class="w-full md:w-1/2 p-3">
            <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">Active SMSG Addresses</h2>
-            <p class="font-semibold text-coolGray-200"></p>
+            <p class="font-semibold text-coolGray-200">Check your SMSG address history and add new addresses.</p>
          </div>
        </div>
      </div>
--- a/basicswap/templates/tor.html
+++ b/basicswap/templates/tor.html
@ -30,7 +30,7 @@
        <div class="relative z-20 flex flex-wrap items-center -m-3">
          <div class="w-full md:w-1/2 p-3">
            <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">Tor</h2>
-            <p class="font-semibold text-coolGray-200">Tor connection information</p>
+            <p class="font-semibold text-coolGray-200">Tor connection information.</p>
          </div>
          <div class="w-full md:w-1/2 p-3 p-6 container flex flex-wrap items-center justify-end items-center mx-auto"> 
            {% if refresh %}
--- a/basicswap/templates/watched.html
+++ b/basicswap/templates/watched.html
@ -30,7 +30,26 @@
        <div class="relative z-20 flex flex-wrap items-center -m-3">
          <div class="w-full md:w-1/2 p-3">
            <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">Watched Outputs</h2>
-            <p class="font-semibold text-coolGray-200">{% if refresh %} Page Refresh: {{ refresh }} seconds {% endif %}</p>
+            <p class="font-semibold text-coolGray-200">Watch when your outputs involved in a swap get spent on the blockchain.</p>
+          </div>
+          <div class="w-full md:w-1/2 p-3 p-6 container flex flex-wrap items-center justify-end items-center mx-auto"> 
+            {% if refresh %}
+            <a id="refresh" href="/watched" class="flex flex-wrap justify-center px-5 py-4 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
+              <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
+                <g fill="#ffffff">
+                  <path fill="#ffffff" d="M12,3c1.989,0,3.873,0.65,5.43,1.833l-3.604,3.393l9.167,0.983L22.562,0l-3.655,3.442 C16.957,1.862,14.545,1,12,1C5.935,1,1,5.935,1,12h2C3,7.037,7.037,3,12,3z"></path>
+                  <path data-color="color-2" d="M12,21c-1.989,0-3.873-0.65-5.43-1.833l3.604-3.393l-9.167-0.983L1.438,24l3.655-3.442 C7.043,22.138,9.455,23,12,23c6.065,0,11-4.935,11-11h-2C21,16.963,16.963,21,12,21z"></path>
+                </g>
+              </svg> <span>Refresh {{ refresh }} seconds</span> </a>
+              {% else %}
+            <a id="refresh" href="/watched" class="flex flex-wrap justify-center px-5 py-4 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
+              <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
+                <g fill="#ffffff">
+                  <path fill="#ffffff" d="M12,3c1.989,0,3.873,0.65,5.43,1.833l-3.604,3.393l9.167,0.983L22.562,0l-3.655,3.442 C16.957,1.862,14.545,1,12,1C5.935,1,1,5.935,1,12h2C3,7.037,7.037,3,12,3z"></path>
+                  <path data-color="color-2" d="M12,21c-1.989,0-3.873-0.65-5.43-1.833l3.604-3.393l-9.167-0.983L1.438,24l3.655-3.442 C7.043,22.138,9.455,23,12,23c6.065,0,11-4.935,11-11h-2C21,16.963,16.963,21,12,21z"></path>
+                </g>
+              </svg> <span>Refresh</span> </a> 
+            {% endif %} 
          </div>
        </div>
      </div>
--- a/basicswap/ui/page_bids.py
+++ b/basicswap/ui/page_bids.py
@ -173,9 +173,9 @@ def page_bids(self, url_split, post_string, sent=False, available=False, receive
        'page_type_sent': 'Bids Sent' if sent else '',
        'page_type_available': 'Bids Available' if available else '',
        'page_type_received': 'Received Bids' if received else '',
-        'page_type_sent_description': '' if sent else '',
-        'page_type_available_description': '' if available else '',
-        'page_type_received_description': '' if received else '',
+        'page_type_sent_description': 'All the bids you have placed on offers.' if sent else '',
+        'page_type_available_description': 'Bids available for you to accept.' if available else '',
+        'page_type_received_description': 'All the bids placed on your offers.' if received else '',
        'messages': messages,
        'filters': filters,
        'data': page_data,
--- a/basicswap/ui/page_offers.py
+++ b/basicswap/ui/page_offers.py
@ -637,7 +637,7 @@ def page_offers(self, url_split, post_string, sent=False):
    template = server.env.get_template('offers.html')
    return self.render_template(template, {
        'page_type': 'Your Offers' if sent else 'Network Order Book',
-        'page_type_description': '' if sent else '',
+        'page_type_description': 'Your entire offer history.' if sent else 'Consult available offers in the order book and initiate a coin swap.',
        'messages': messages,
        'show_chart': False if sent else swap_client.settings.get('show_chart', True),
        'chart_api_key': chart_api_key,