Ecosystem/basicswap
1
0
Fork 0
mirror of https://github.com/basicswap/basicswap.git synced 2025-03-12 09:38:03 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

ui/ux: Update

Browse source 
- Fixed UI (wallet) reseed wallet button styling/footer.
- Fixed (wallet page) coin icon sizes.
- Added BSX version in footer (unlock).
- Added version (Global for all pages) in render_template (http_server.py).
- Added (BSX) in title (header/unlock/error/info).
- Fixed dots dark/light mode (footer).
- Added UX lock Rate / Amount Variable / Rate Variable discriptions (offer_new_1).
This commit is contained in:
gerlofvanek 2023-08-02 17:38:15 +02:00
parent 8f4b962285
commit af876fa166
9 changed files with 73 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
basicswap/http_server.py
View file

@ -131,7 +131,7 @@ class HttpHandler(BaseHTTPRequestHandler):
self.server.last_form_id[name] = form_id
return form_data
def render_template(self, template, args_dict, status_code=200):
def render_template(self, template, args_dict, status_code=200, version=__version__):
swap_client = self.server.swap_client
if swap_client.ws_server:
args_dict['ws_url'] = swap_client.ws_server.url
@ -175,6 +175,8 @@ class HttpHandler(BaseHTTPRequestHandler):
if self.server.msg_id_counter >= 0x7FFFFFFF:
self.server.msg_id_counter = 0
args_dict['version'] = version
self.putHeaders(status_code, 'text/html')
return bytes(template.render(
title=self.server.title,
@ -381,11 +383,11 @@ class HttpHandler(BaseHTTPRequestHandler):
template = env.get_template('index.html')
return self.render_template(template, {
'refresh': 30,
'version': __version__,
'summary': summary,
'use_tor_proxy': swap_client.use_tor_proxy
})
def page_404(self, url_split):
swap_client = self.server.swap_client
summary = swap_client.getSummary()

2
basicswap/templates/error.html
View file

@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<link rel=icon sizes="32x32" type="image/png" href="/static/images/favicon-32.png">
<title>{{ title }}</title>
<title>(BSX) BasicSwap - v{{ version }}</title>
</head>
<body>
<h2>{{ title_str }}</h2>

8
basicswap/templates/footer.html
View file

@ -21,15 +21,15 @@
<div class="w-full md:w-1/2 mb-6 md:mb-0">
<div class="flex items-center">
<div class="flex items-center">
<p class="mr-1 text-sm text-gray-90 dark:text-white font-medium ">© 2023~</p>
<p class="text-sm text-coolGray-400 dark:text-white font-medium">{{ title }}</p> <span class="w-1 h-1 mx-1.5 bg-gray-500 rounded-full"></span>
<p class="text-sm text-coolGray-400 dark:text-white font-medium">GUI 2.0.2 </p> <span class="w-1 h-1 mx-1.5 bg-gray-500 rounded-full"></span>
<p class="text-sm text-gray-90 dark:text-white font-medium">© 2023~ (BSX) BasicSwap</p> <span class="w-1 h-1 mx-1.5 bg-gray-500 dark:bg-white rounded-full"></span>
<p class="text-sm text-coolGray-400 font-medium">BSX: v{{ version }}</p> <span class="w-1 h-1 mx-1.5 bg-gray-500 dark:bg-white rounded-full"></span>
<p class="text-sm text-coolGray-400 font-medium">GUI: v2.0.2</p> <span class="w-1 h-1 mx-1.5 bg-gray-500 dark:bg-white rounded-full"></span>
<p class="mr-2 text-sm font-bold dark:text-white text-gray-90 ">Made with </p>
<svg 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="#f80b0b" stroke-linejoin="round">
<path d="M21.243,3.757 c-2.343-2.343-6.142-2.343-8.485,0c-0.289,0.289-0.54,0.6-0.757,0.927c-0.217-0.327-0.469-0.639-0.757-0.927 c-2.343-2.343-6.142-2.343-8.485,0c-2.343,2.343-2.343,6.142,0,8.485L12,21.485l9.243-9.243C23.586,9.899,23.586,6.1,21.243,3.757z"></path>
</g>
</svg> <span class="ml-2 text-sm font-bold dark:text-white text-gray-90 ">by TV and CRZ</span></div><!-- fix dots -->
</svg> <span class="ml-2 text-sm font-bold dark:text-white text-gray-90 ">by TV and CRZ</span></div>
</div>
</div>
<div class="w-full md:w-1/2">

2
basicswap/templates/header.html
View file

@ -86,7 +86,7 @@
</script>
<link rel=icon sizes="32x32" type="image/png" href="/static/images/favicon/favicon-32.png">
<title>{{ title }}</title>
<title>(BSX) BasicSwap - v{{ version }}</title>
</head>
<body class="dark:bg-gray-700">
<section>

2
basicswap/templates/index.html
View file

@ -3,7 +3,7 @@
<section class="relative py-24 overflow-hidden">
<div class="container px-4 mx-auto mb-16 md:mb-0">
<div class="md:w-1/2 pl-4">
<span class="inline-block py-1 px-3 mb-4 text-xs leading-5 bg-blue-500 text-white font-medium rounded-full shadow-sm">BasicSwap version: {{ version }}</span>
<span class="inline-block py-1 px-3 mb-4 text-xs leading-5 bg-blue-500 text-white font-medium rounded-full shadow-sm">(BSX) BasicSwap v{{ version }}</span>
<h3 class="mb-6 text-4xl md:text-5xl leading-tight text-coolGray-900 font-bold tracking-tighter dark:text-white">Welcome to BasicSwap DEX</h3>
<p class="mb-12 text-lg md:text-xl text-coolGray-500 dark:text-gray-300 font-medium">Swap cryptocurrencies in <span class="underline">total privacy</span> with no middlemen, fees, <br> or restrictions. </p>
<div class="flex flex-wrap mb-10 text-center md:text-left">

2
basicswap/templates/info.html
View file

@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<link rel=icon sizes="32x32" type="image/png" href="/static/images/favicon-32.png">
<title>{{ title }}</title>
<title>(BSX) BasicSwap - v{{ version }}</title>
</head>
<body>
<h2>{{ title_str }}</h2>

40
basicswap/templates/offer_new_1.html
View file

@ -326,10 +326,17 @@
</div>
<input class="pl-10 hover:border-blue-500 pl-10 bg-gray-50 text-gray-900 appearance-none pr-10 dark:bg-gray-500 dark:text-white border border-gray-300 dark:border-gray-400 dark:text-gray-50 dark:placeholder-white text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0" type="text" id="rate" name="rate" value="{{ data.rate }}" onchange="set_rate('rate');">
</div>
<div class="form-check form-check-inline mt-5">
<input class="form-check-input hover:border-blue-500 w-5 h-5 form-check-input text-blue-600 bg-gray-50 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-1 dark:bg-gray-500 dark:border-gray-400" type="checkbox" id="rate_lock" name="rate_lock" value="rl" checked=checked>
<label class="form-check-label ml-2 text-sm font-medium text-gray-800 dark:text-white" for="inlineCheckbox1">Lock Rate</label>
</div>
<div class="flex form-check form-check-inline mt-5">
<div class="flex items-center h-5">
<input class="form-check-input hover:border-blue-500 w-5 h-5 form-check-input text-blue-600 bg-gray-50 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-1 dark:bg-gray-500 dark:border-gray-400" type="checkbox" id="rate_lock" name="rate_lock" value="rl" checked=checked>
</div>
<div class="ml-2 text-sm">
<label class="form-check-label text-sm font-medium text-gray-800 dark:text-white" for="inlineCheckbox1">Lock Rate</label>
<p id="helper-checkbox-text" class="text-xs font-normal text-gray-500 dark:text-gray-300">Automatically adjusts the <b>You Get</b> value based on the rate you’ve entered. Without it, the rate value is automatically adjusted based on the number of coins you put in <b>You Get.</b></p>
</div>
</div>
</div>
</div>
</div>
@ -343,14 +350,27 @@
<p class="text-sm text-coolGray-800 dark:text-white font-semibold">Options</p>
</div>
<div class="w-full md:flex-1 p-3">
<div class="form-check form-check-inline">
<input class="hover:border-blue-500 w-5 h-5 form-check-input text-blue-600 bg-gray-50 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-1 dark:bg-gray-500 dark:border-gray-400" type="checkbox" id="amt_var" name="amt_var" value="av" {% if data.amt_var==true %} checked="checked" {% endif %}>
<label class="form-check-label ml-2 text-sm font-medium text-gray-800 dark:text-white" for="inlineCheckbox2">Amount Variable</label>
<div class="flex form-check form-check-inline">
<div class="flex items-center h-5">
<input class="hover:border-blue-500 w-5 h-5 form-check-input text-blue-600 bg-gray-50 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-1 dark:bg-gray-500 dark:border-gray-400" type="checkbox" id="amt_var" name="amt_var" value="av" {% if data.amt_var==true %} checked="checked" {% endif %}>
</div>
<div class="form-check form-check-inline mt-2">
<input class="hover:border-blue-500 w-5 h-5 form-check-input text-blue-600 bg-gray-50 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-1 dark:bg-gray-500 dark:border-gray-400" type="checkbox" id="rate_var" name="rate_var" value="rv" {% if data.rate_var==true %} checked="checked" {% endif %}>
<label class="form-check-label ml-2 text-sm font-medium text-gray-800 dark:text-white" for="inlineCheckbox3">Rate Variable</label>
<div class="ml-2 text-sm">
<label class="form-check-label text-sm font-medium text-gray-800 dark:text-white" for="inlineCheckbox2">Amount Variable</label>
<p id="helper-checkbox-text" class="text-xs font-normal text-gray-500 dark:text-gray-300">Allow bids with a different amount to the offer.</p>
</div>
</div>
<div class="flex mt-2 form-check form-check-inline">
<div class="flex items-center h-5">
<input class="hover:border-blue-500 w-5 h-5 form-check-input text-blue-600 bg-gray-50 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-1 dark:bg-gray-500 dark:border-gray-400" type="checkbox" id="rate_var" name="rate_var" value="rv" {% if data.rate_var==true %} checked="checked" {% endif %}>
</div>
<div class="ml-2 text-sm">
<label class="form-check-label text-sm font-medium text-gray-800 dark:text-white" for="inlineCheckbox3">Rate Variable</label>
<p id="helper-checkbox-text" class="text-xs font-normal text-gray-500 dark:text-gray-300">Allow bids with a different rate to the offer.</p>
</div>
</div>
</div>
</div>
</div>

5
basicswap/templates/unlock.html
View file

@ -23,7 +23,7 @@
document.documentElement.classList.toggle('dark', isDarkMode);
</script>
<link rel=icon sizes="32x32" type="image/png" href="/static/images/favicon/favicon-32.png">
<title>{{ title }}</title>
<title>(BSX) BasicSwap - v{{ version }}</title>
</head>
<body class="dark:bg-gray-700">
<section class="py-24 md:py-32">
@ -102,6 +102,9 @@
<span class="text-xs font-medium dark:text-white" contenteditable="false">Need help?</span>
<a class="inline-block text-xs font-medium text-blue-500 hover:text-blue-600 hover:underline" href="https://academy.particl.io/en/latest/faq/get_support.html" target="_blank" contenteditable="false">Help / Tutorials</a>
</p>
<p class="text-center">
<span class="text-xs font-medium text-coolGray-500 dark:text-gray-500" contenteditable="false">{{ title }} - GUI 2.0.2</span>
</p>
<input type="hidden" name="formid" value="{{ form_id }}">
</form>
</div>

36
basicswap/templates/wallet.html
View file

@ -39,7 +39,7 @@
<div class="w-full md:w-1/2 p-3">
<h2 class="text-4xl font-bold text-white tracking-tighter">
<span class="inline-block align-middle">
<img class="mr-2" src="/static/images/coins/{{ w.name }}.png" alt="{{ w.name }}">
<img class="mr-2 h-16" src="/static/images/coins/{{ w.name }}.png" alt="{{ w.name }}">
</span>{{ w.name }} Wallet - <span id="total-usd-value"></span>
</h2>
<p class="font-normal text-coolGray-200 dark:text-white pl-2 pt-5">Manage your {{ w.ticker }} wallet. {% if refresh %} (Page Refresh: {{ refresh }} seconds) {% endif %}</p>
@ -206,15 +206,33 @@
</table>
</div>
</div>
<div class="p-6 pt-10 bg-white bg-opacity-60 rounded-b-md">
<div class="w-full md:w-0/12">
<div class="flex flex-wrap justify-end -m-1.5">
<div class="w-full md:w-auto p-1.5 ml-2">
<input class="flex flex-wrap justify-center px-4 py-2.5 font-medium text-sm text-red-500 hover:text-red-600 border border-red-400 hover:border-red-500 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none" type="submit" name="reseed_{{ w.cid }}" value="Reseed wallet" onclick="return confirmReseed();">
</div>
</div>
</div>
</section>
<section>
<div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden">
<div class="pb-6 border-coolGray-100">
<div class="flex flex-wrap items-center justify-between -m-2">
<div class="w-full pt-2">
<div class="container mt-5 mx-auto">
<div class="pt-6 pb-6 bg-coolGray-100 dark:bg-gray-500 rounded-xl">
<div class="px-6">
<div class="flex flex-wrap justify-end">
<div class="w-full md:w-auto p-1.5">
<input class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-white hover:text-red border border-red-500 hover:border-red-500 hover:bg-red-600 bg-red-500 rounded-md shadow-button focus:ring-0 focus:outline-none" type="submit" name="reseed_{{ w.cid }}" value="Reseed wallet" onclick="return confirmReseed();">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
{% else %}
</tr>
{% if w.cid == '1' %}