ui: Fixes global (GUI v.0.1.1)

- Dash icon and Coin icon updates.
- Removed withids.
- ui: Notification drop-down update.
- ui: Global GUI layout and bug fixes/features.
- ui: Updated New Offer templates.
- ui: Fixed close on messages/error messages.
- ui: Start on new settings page.
- ui: Removed TV chart.
- ui: Drop-down filter with Coin icons.
This commit is contained in:
gerlofvanek
2022-10-23 13:59:06 +02:00
parent 9557da8714
commit 4fc68b5717
47 changed files with 3073 additions and 2663 deletions

View File

@@ -7,10 +7,11 @@
<meta http-equiv="refresh" content="{{ refresh }}">
{% endif %}
<link type="text/css" media="all" href="/static/css/libs/tailwind.min.css" rel="stylesheet">
<link type="text/css" media="all" href="/static/css/libs/dd.min.css" rel="stylesheet">
<link type="text/css" media="all" href="/static/css/style.css" rel="stylesheet">
<script src="/static/js/main.js"></script>
<script src="/static/js/libs/flowbite.js"></script>
<link rel=icon sizes="32x32" type="image/png" href="/static/images/favicon-32.png">
<link rel=icon sizes="32x32" type="image/png" href="/static/images/favicon/favicon-32.png">
<title>{{ title }}</title>
</head>
@@ -18,11 +19,11 @@
<section>
<nav class="relative bg-gray-800">
<div class="p-6 container flex flex-wrap items-center py-2.5justify-between items-center mx-auto">
<div class="p-6 container flex flex-wrap items-center justify-between items-center mx-auto">
<a class="flex-shrink-0 mr-12 text-2xl text-white font-semibold" href="/"> <img class="h-10" src="/static/images/logos/basicswap-logo.svg" alt="" width="auto"></a>
<ul class="hidden xl:flex">
<li>
<a class="flex mr-10 items-center py-2.5 text-gray-50 hover:text-gray-100 text-sm" href="/wallets">
<a class="flex mr-10 items-center py-3 text-gray-50 hover:text-gray-100 text-sm" href="/wallets">
<svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 24 24">
<g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round">
<path d="M6,3H3C1.895,3,1,3.895,1,5 v0c0,1.105,0.895,2,2,2"></path>
@@ -32,6 +33,18 @@
</g>
</svg> <span>Wallets</span> </a>
</li>
<li>
<a class="flex mr-10 items-center py-2.5 text-gray-50 hover:text-gray-100 text-sm" href="/offers">
<svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 24 24">
<g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round">
<rect x="3" y="1" width="18" height="22"></rect>
<line x1="12" y1="8" x2="12" y2="16" stroke="#6b7280"></line>
<line x1="8" y1="14" x2="8" y2="16" stroke="#6b7280"></line>
<line x1="16" y1="11" x2="16" y2="16" stroke="#6b7280"> </line>
</g>
</svg>
<span>Show Order Book</span> <span class="inline-flex justify-center items-center text-xs font-semibold ml-3 mr-2 px-2.5 py-1 font-small text-white bg-blue-500 rounded-full">{{ summary.num_network_offers }}</span> </a>
</li>
<li>
<a class="flex flex-wrap justify-center w-full px-4 py-2.5 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" href="/newoffer">
<svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 24 24">
@@ -46,7 +59,7 @@
</svg> <span>New Offer</span> </a>
</li>
</ul>
<ul class="hidden xl:flex lg:justify-end lg:items-center lg:space-x-6 ml-auto">
<ul class="mr-10 hidden xl:flex lg:justify-end lg:items-center lg:space-x-6 ml-auto">
<div id="dropdownNavbarLink" data-dropdown-toggle="dropdownNavbar" class="flex justify-between items-center py-2 pr-4 pl-3 w-full text-gray-50 text-sm md:border-0 md:p-0 md:w-auto text-gray-50">
<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 stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round">
@@ -62,7 +75,7 @@
</ul>
<!-- dropdown settings & tools -->
<div id="dropdownNavbar" class="hidden z-50 w-50 font-normal bg-white divide-y divide-gray-100">
<div id="dropdownNavbar" class="hidden z-50 w-50 font-normal bg-white shadow divide-y divide-gray-100">
<ul class="py-0 text-sm text-gray-700" aria-labelledby="dropdownLargeButton">
<li>
<a href="/settings" class="flex items-center block py-4 px-4 hover:bg-gray-100"> <span class="sr-only">Settings</span>
@@ -165,78 +178,99 @@
</div>
<!-- dropdown settings & tools -->
{% if debug_mode == true %}
<!-- notifications (todo) -->
<button id="dropdownNotificationButton" data-dropdown-toggle="dropdownNotification" class="inline-flex items-center text-sm font-medium text-center text-gray-500 focus:outline-none hidden" type="button">
<!-- notifications -->
<button id="dropdownNotificationButton" data-dropdown-toggle="dropdownNotification" class="inline-flex items-center text-sm font-medium text-center text-gray-500 focus:outline-none " type="button">
<svg class="h-5 w-5" viewBox="0 0 16 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14 11.18V8C13.9986 6.58312 13.4958 5.21247 12.5806 4.13077C11.6655 3.04908 10.3971 2.32615 9 2.09V1C9 0.734784 8.89464 0.48043 8.70711 0.292893C8.51957 0.105357 8.26522 0 8 0C7.73478 0 7.48043 0.105357 7.29289 0.292893C7.10536 0.48043 7 0.734784 7 1V2.09C5.60294 2.32615 4.33452 3.04908 3.41939 4.13077C2.50425 5.21247 2.00144 6.58312 2 8V11.18C1.41645 11.3863 0.910998 11.7681 0.552938 12.2729C0.194879 12.7778 0.00173951 13.3811 0 14V16C0 16.2652 0.105357 16.5196 0.292893 16.7071C0.48043 16.8946 0.734784 17 1 17H4.14C4.37028 17.8474 4.873 18.5954 5.5706 19.1287C6.26819 19.6621 7.1219 19.951 8 19.951C8.8781 19.951 9.73181 19.6621 10.4294 19.1287C11.127 18.5954 11.6297 17.8474 11.86 17H15C15.2652 17 15.5196 16.8946 15.7071 16.7071C15.8946 16.5196 16 16.2652 16 16V14C15.9983 13.3811 15.8051 12.7778 15.4471 12.2729C15.089 11.7681 14.5835 11.3863 14 11.18ZM4 8C4 6.93913 4.42143 5.92172 5.17157 5.17157C5.92172 4.42143 6.93913 4 8 4C9.06087 4 10.0783 4.42143 10.8284 5.17157C11.5786 5.92172 12 6.93913 12 8V11H4V8ZM8 18C7.65097 17.9979 7.30857 17.9045 7.00683 17.7291C6.70509 17.5536 6.45451 17.3023 6.28 17H9.72C9.54549 17.3023 9.29491 17.5536 8.99317 17.7291C8.69143 17.9045 8.34903 17.9979 8 18ZM14 15H2V14C2 13.7348 2.10536 13.4804 2.29289 13.2929C2.48043 13.1054 2.73478 13 3 13H13C13.2652 13 13.5196 13.1054 13.7071 13.2929C13.8946 13.4804 14 13.7348 14 14V15Z" fill="currentColor"></path>
</svg>
<div class="flex relative">
<!-- green -->
<div class="inline-flex relative -top-2 right-2 w-3 h-3 bg-green-500 rounded-full border-2 border-white"></div>
<!-- Red <div class="inline-flex relative -top-2 right-3 w-3 h-3 bg-red-500 rounded-full border-2 border-white"></div> -->
<!-- Todo -->
<div class="inline-flex relative -top-2 right-2 w-3 h-3 bg-green-500 rounded-full border-2 border-white"></div>
<!-- Red <div class="inline-flex relative -top-2 right-3 w-3 h-3 bg-red-500 rounded-full border-2 border-white"></div> -->
</div>
</button>
<!-- Dropdown menu -->
<div id="dropdownNotification" class="hidden z-50 w-full max-w-sm bg-white rounded divide-y divide-gray-100" aria-labelledby="dropdownNotificationButton">
<div class="block py-2 px-4 font-medium text-center text-gray-700 bg-gray-50"> Notifications </div>
<div id="dropdownNotification" class="hidden z-50 w-full max-w-sm bg-white shadow rounded divide-y divide-gray-100 drop-shadow" aria-labelledby="dropdownNotificationButton">
<div class="block py-2 px-4 font-medium text-center text-gray-700 bg-gray-50 drop-shadow"> Notifications </div>
<div class="divide-y divide-gray-100">
<a href="#" class="flex py-3 px-4 hover:bg-gray-100">
{% for entry in notifications %}
{% if entry[1] == 1 %}
<div class="flex py-3 px-4 hover:bg-gray-100">
<div class="flex-shrink-0"> <img class="w-11 h-11 rounded-full" src="/static/images/other/new_offer.png" alt="New Offer"> </div>
<div class="pl-3 w-full">
<div class="text-gray-500 text-sm mb-1.5"><span class="font-semibold text-gray-900">NEW OFFER</span> on <span class="font-medium text-gray-900">PART->XMR</span></div>
<div class="text-xs text-blue-600">a few moments ago</div>
<div class="text-gray-500 text-sm mb-1.5">
<span class="font-semibold text-gray-900">
NEW NETWORK OFFER</span><br/>
<span class="mt-2 mb-2 inline-flex px-2.5 py-1.5 text-xs font-small monospace text-center text-white bg-gray-800 rounded-lg hover:bg-gray-700 focus:ring-4 focus:outline-none focus:ring-gray-300">
<a href="/offer/{{ entry[2].offer_id }}">{{ entry[2].offer_id|truncate(42, True) }}</a>
</span></div>
<div class="text-xs text-blue-600">{{ entry[0] }}</div>
</div>
</a>
<a href="#" class="flex py-3 px-4 hover:bg-gray-100">
</div>
{% elif entry[1] == 2 %}
<div class="flex py-3 px-4 hover:bg-gray-100">
<div class="flex-shrink-0"> <img class="w-11 h-11 rounded-full" src="/static/images/other/bid_accepted.png" alt="New Accepted"> </div>
<div class="pl-3 w-full">
<div class="text-gray-500 text-sm mb-1.5"><span class="font-semibold text-gray-900">NEW BID</span> on offer <span class="font-medium text-gray-900">PART->BTC</span></div>
<div class="text-xs text-blue-600">10 minutes ago</div>
<div class="text-gray-500 text-sm mb-1.5">
<span class="font-semibold text-gray-900">
<a href="/bid/{{ entry[2].bid_id }}">NEW BID</a> ON OFFER</span><br/>
<span class="mt-2 mb-2 inline-flex px-2.5 py-1.5 text-xs font-small monospace text-center text-white bg-gray-800 rounded-lg hover:bg-gray-700 focus:ring-4 focus:outline-none focus:ring-gray-300">
<a href="/offer/{{ entry[2].offer_id }}">{{ entry[2].offer_id|truncate(42, True) }}</a>
</span></div>
<div class="text-xs text-blue-600">{{ entry[0] }}</div>
</div>
</a>
<a href="#" class="flex py-3 px-4 hover:bg-gray-100">
<div class="flex-shrink-0"> <img class="w-11 h-11 rounded-full" src="/static/images/other/bid_accepted.png" alt="Bid Accepted"> </div>
</div>
{% elif entry[1] == 3 %}
<div class="flex py-3 px-4 hover:bg-gray-100">
<div class="flex-shrink-0"> <img class="w-11 h-11 rounded-full" src="/static/images/other/new_offer.png" alt="New Offer"> </div>
<div class="pl-3 w-full">
<div class="text-gray-500 text-sm mb-1.5"><span class="font-semibold text-gray-900">BID ACCEPTED</span> on <span class="font-medium text-gray-900">PART->BTC</span> 0.0045 BTC</div>
<div class="text-xs text-blue-600">15 minutes ago</div>
<div class="text-gray-500 text-sm mb-1.5">
<span class="font-semibold text-gray-900">
BID ACCEPTED</span><br/>
<span class="mt-2 mb-2 inline-flex px-2.5 py-1.5 text-xs font-small monospace text-center text-white bg-gray-800 rounded-lg hover:bg-gray-700 focus:ring-4 focus:outline-none focus:ring-gray-300">
<a href="/bid/{{ entry[2].bid_id }}">{{ entry[2].bid_id|truncate(42, True) }}</a>
</span></div>
<div class="text-xs text-blue-600">{{ entry[0] }}</div>
</div>
</a>
<a href="#" class="flex py-3 px-4 hover:bg-gray-100">
<div class="flex-shrink-0"> <img class="w-11 h-11 rounded-full" src="/static/images/coins/Bitcoin.png" alt="Bitcoin"> </div>
</div>
{% else %}
<div class="flex py-3 px-4 hover:bg-gray-100">
<div class="flex-shrink-0"> <img class="w-11 h-11 rounded-full" src="/static/images/other/new_offer.png" alt="New Offer"> </div>
<div class="pl-3 w-full">
<div class="text-gray-500 text-sm mb-1.5"><span class="font-semibold text-gray-900">BTC DEPOSIT</span> of <span class="font-medium text-gray-900">0.000493 BTC</span> successful.</div>
<div class="text-xs text-blue-600">15 minutes ago</div>
<div class="text-gray-500 text-sm mb-1.5">
<span class="font-semibold text-gray-900">
UNKNOW EVENT</span><br/>
<span class="mt-2 mb-2 inline-flex px-2.5 py-1.5 text-xs font-small monospace text-center text-white bg-gray-800 rounded-lg hover:bg-gray-700 focus:ring-4 focus:outline-none focus:ring-gray-300">
{{ entry[1] }}
<div class="text-xs text-blue-600">{{ entry[0] }}</div>
</div>
</a>
<a href="#" class="flex py-3 px-4 hover:bg-gray-100">
<div class="flex-shrink-0"> <img class="w-11 h-11 rounded-full" src="/static/images/coins/Particl.png" alt="Particl"> </div>
<div class="pl-3 w-full">
<div class="text-gray-500 text-sm mb-1.5"><span class="font-semibold text-gray-900">PART WITHDRAW</span> of <span class="font-medium text-gray-900">39.494 PART</span> successful.</div>
<div class="text-xs text-blue-600">30 minutes ago</div>
</div>
</a>
</div>
{% endif %}
{% endfor %}
</div>
<a href="#" class="block py-2 text-sm font-medium text-center text-gray-900 bg-gray-50 hover:bg-gray-100">
<div class="inline-flex items-center ">
<!-- todo <a href="#" class="block py-2 text-sm font-medium text-center text-gray-900 bg-gray-50 hover:bg-gray-100">
<div class="inline-flex items-center ">
<svg class="mr-2 w-4 h-4 text-gray-500" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
<g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round">
<path d="M1.373,13.183a2.064,2.064,0,0,1,0-2.366C2.946,8.59,6.819,4,12,4s9.054,4.59,10.627,6.817a2.064,2.064,0,0,1,0,2.366C21.054,15.41,17.181,20,12,20S2.946,15.41,1.373,13.183Z"></path>
<circle cx="12" cy="12" r="4" stroke="#6b7280"></circle>
</g>
</svg> View all
</div>
</a>
</div>
</a>-->
</div>
{% endif %}
<!-- notifications (todo) -->
<!-- notifications -->
<!-- todo - fix line -->
<!-- todo - fix line -->
<div class="flex mr-2 items-center text-gray-50 hover:text-gray-100 text-sm ml-5">
<div class="flex-shrink-0 w-px h-10 bg-gray-600 ml-4 mr-5"></div>
<!-- dev mode icons on/off -->
{% if debug_mode == true %}
<!-- dev mode icons on/off -->
<ul class="xl:flex">
<li>
<div data-tooltip-target="tooltip-DEV" class="ml-5 flex items-center text-gray-50 hover:text-gray-100 text-sm">
@@ -254,11 +288,11 @@
</div>
</li>
</ul>
{% endif %}
<!-- dev mode icons on/off -->
{% endif %}
<!-- tor -->
{% if use_tor_proxy == true %}
<!-- tor -->
<ul class="xl:flex ml-5">
<li>
<a href="/tor">
@@ -277,8 +311,8 @@
</div>
</li>
</ul>
<!-- tor -->
{% endif %}
<!-- tor -->
</div>
@@ -352,17 +386,6 @@
</svg> <span>Swaps in Progress </span> <span class="inline-flex justify-center items-center text-xs font-semibold ml-3 mr-2 px-2.5 py-1 font-small text-white bg-blue-500 rounded-full">{{ summary.num_swapping }}</span> </a>
</li>
<div class="flex-shrink-0 w-px h-10 bg-gray-300 mr-10"></div>
<li>
<a class="flex mr-9 items-center text-sm text-gray-500 hover:text-gray-600" href="/offers">
<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 stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round">
<rect x="3" y="1" width="18" height="22"></rect>
<line x1="12" y1="8" x2="12" y2="16" stroke="#6b7280"></line>
<line x1="8" y1="14" x2="8" y2="16" stroke="#6b7280"></line>
<line x1="16" y1="11" x2="16" y2="16" stroke="#6b7280"> </line>
</g>
</svg> <span>Show Order Book</span> <span class="inline-flex justify-center items-center text-xs font-semibold ml-3 mr-2 px-2.5 py-1 font-small text-white bg-blue-500 rounded-full">{{ summary.num_network_offers }}</span> </a>
</li>
<li>
<a class="flex mr-5 items-center text-sm text-gray-500 hover:text-gray-600" href="/sentoffers">
<svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 24 24">
@@ -665,7 +688,7 @@
event_message = '<div class="p-4 w-full mt-5 text-gray-500 bg-white rounded-lg shadow"> <div class="flex"> <div class="text-sm font-normal"> <div class="mb-1 text-sm font-semibold text-gray-900"> <a href=/offer/' + json['offer_id'] + '>New offer</a></div></div></div></div>';
} else
if (json['event'] == 'new_bid') {
event_message = '<div class="p-4 w-full mt-5 text-gray-500 bg-white rounded-lg shadow"> <div class="flex"> <div class="text-sm font-normal"> <div class="mb-1 text-sm font-semibold text-gray-900 "> <a href=/bid/' + json['bid_id'] + '>New bid</a> on offer</div><div class="mb-2 mt-2 text-sm"><a class="inline-flex px-2.5 py-1.5 text-xs font-small monospace text-center text-white bg-blue-600 rounded-lg hover:bg-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300" href=/offer/' + json['offer_id'] + '>' + json['offer_id'] + '</a></div></div>';
event_message = '<div class="p-4 w-full mt-5 text-gray-500 bg-white rounded-lg shadow"> <div class="flex"> <div class="text-sm font-normal"> <div class="mb-1 text-sm font-semibold text-gray-900"> <a href=/bid/' + json['bid_id'] + '>New bid</a> on offer</div><div class="mt-2 mb-2 inline-flex px-2.5 py-1.5 text-xs font-small monospace text-center text-white bg-gray-800 rounded-lg hover:bg-gray-700 focus:ring-4 focus:outline-none focus:ring-gray-300" href=/offer/' + json['offer_id'] + '>' + json['offer_id'] + '</a></div></div>';
} else
if (json['event'] == 'bid_accepted') {
event_message = '<div class="p-4 w-full mt-5 text-gray-500 bg-white rounded-lg shadow"><div class="flex"><div class="text-sm font-normal"><div class="mb-1 text-sm font-semibold text-gray-900"><a href=/bid/' + json['bid_id'] + '>Bid accepted</a></div></div></div></div>';
@@ -679,18 +702,5 @@
};
floating_div.appendChild(messages);
document.body.appendChild(floating_div);
{% for entry in notifications %}
console.log({{ entry[0] }}, {{ entry[1] }}, {{ entry[2] }});
{% if entry[1] == 1 %}
console.log('new_offer {{ entry[2].offer_id }}');
{% elif entry[1] == 2 %}
console.log('new_bid {{ entry[2].bid_id }} on {{ entry[2].offer_id }}');
{% elif entry[1] == 3 %}
console.log('bid_accepted {{ entry[2].bid_id }}');
{% else %}
console.log('Unknown event {{ entry[1] }}');
{% endif %}
{% endfor %}
</script>
{% endif %}
</script>
{% endif %}