mirror of
https://github.com/basicswap/basicswap.git
synced 2025-05-04 11:52:18 +00:00
Merge pull request #265 from nahuhh/offertweaks
bids/offers: responsive and styling tweaks
This commit is contained in:
Gerlof van Ek
GitHub
commit
fcdb2e7dfe
5 changed files with 132 additions and 127 deletions
basicswap
|
|
@ -192,7 +192,13 @@ const safeParseInt = (value) => {
|
|||
return isNaN(parsed) ? 0 : parsed;
|
||||
};
|
||||
|
||||
const formatAddress = (address, displayLength = 15) => {
|
||||
const formatAddress = (address, displayLength = 20) => {
|
||||
if (!address) return '';
|
||||
if (address.length <= displayLength) return address;
|
||||
return `${address.slice(8, displayLength)}...`;
|
||||
};
|
||||
|
||||
const formatAddressSMSG = (address, displayLength = 14) => {
|
||||
if (!address) return '';
|
||||
if (address.length <= displayLength) return address;
|
||||
return `${address.slice(0, displayLength)}...`;
|
||||
|
|
@ -218,17 +224,17 @@ const getTimeStrokeColor = (expireTime) => {
|
|||
const getStatusClass = (status) => {
|
||||
switch (status) {
|
||||
case 'Completed':
|
||||
return 'bg-green-100 text-green-800 dark:bg-green-500 dark:text-white';
|
||||
return 'bg-green-300 text-black dark:bg-green-600 dark:text-white';
|
||||
case 'Expired':
|
||||
return 'bg-gray-100 text-gray-800 dark:bg-gray-400 dark:text-white';
|
||||
case 'Abandoned':
|
||||
return 'bg-red-100 text-red-800 dark:bg-red-500 dark:text-white';
|
||||
return 'bg-gray-200 text-black dark:bg-gray-400 dark:text-white';
|
||||
case 'Error':
|
||||
return 'bg-red-300 text-black dark:bg-red-600 dark:text-white';
|
||||
case 'Failed':
|
||||
return 'bg-rose-100 text-rose-800 dark:bg-rose-500 dark:text-white';
|
||||
return 'bg-red-300 text-black dark:bg-red-600 dark:text-white';
|
||||
case 'Failed, refunded':
|
||||
return 'bg-gray-100 text-orange-800 dark:bg-gray-400 dark:text-red-500';
|
||||
return 'bg-gray-200 text-black dark:bg-gray-400 dark:text-red-500';
|
||||
default:
|
||||
return 'bg-blue-100 text-blue-800 dark:bg-blue-500 dark:text-white';
|
||||
return 'bg-blue-300 text-black dark:bg-blue-500 dark:text-white';
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -617,8 +623,8 @@ const createTableRow = async (bid) => {
|
|||
return `
|
||||
<tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
|
||||
<!-- Time Column -->
|
||||
<td class="py-3 px-6">
|
||||
<div class="flex items-center">
|
||||
<td class="py-3 pl-6 pr-3">
|
||||
<div class="flex items-center min-w-max">
|
||||
<svg class="w-5 h-5 mr-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||
<g stroke-linecap="round" stroke-width="2" fill="none" stroke="${timeColor}" stroke-linejoin="round">
|
||||
<circle cx="12" cy="12" r="11"></circle>
|
||||
|
|
@ -629,58 +635,59 @@ const createTableRow = async (bid) => {
|
|||
</div>
|
||||
</td>
|
||||
|
||||
|
||||
<!-- Details Column -->
|
||||
<td class="py-3 px-6">
|
||||
<td class="p-3 hidden lg:flex">
|
||||
<div class="flex flex-col">
|
||||
<div class="flex items-center">
|
||||
<span class="text-xs font-medium mr-2">${state.currentTab === 'sent' ? 'Out' : 'In'}</span>
|
||||
<div class="flex items-center min-w-max">
|
||||
<div class="relative" data-tooltip-target="tooltip-identity-${uniqueId}">
|
||||
<a href="/identity/${bid.addr_from}" class="text-xs">
|
||||
${identity?.label || formatAddress(bid.addr_from)}
|
||||
<a href="/identity/${bid.addr_from}" class="text-xs font-mono">
|
||||
<span class="mr-2">
|
||||
${state.currentTab === 'sent' ? 'Out' : 'In'}
|
||||
</span>
|
||||
${identity?.label || formatAddressSMSG(bid.addr_from)}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-xs opacity-75">
|
||||
<a href="/bid/${bid.bid_id}">
|
||||
Bid: ${formatAddress(bid.bid_id)}
|
||||
</a>
|
||||
<div class="font-mono text-xs opacity-75">
|
||||
<a href="/offer/${bid.offer_id}">
|
||||
Offer: ${formatAddress(bid.offer_id)}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<!-- Send Coin Column -->
|
||||
<td class="py-3 px-6">
|
||||
<div class="flex items-center">
|
||||
<img class="w-6 h-6 mr-2"
|
||||
src="/static/images/coins/${bid.coin_from.replace(' ', '-')}.png"
|
||||
alt="${bid.coin_from}"
|
||||
<td class="p-3">
|
||||
<div class="flex items-center min-w-max">
|
||||
<img class="w-8 h-8 mr-2"
|
||||
src="/static/images/coins/${state.currentTab === 'sent' ? bid.coin_to.replace(' ', '-') : bid.coin_from.replace(' ', '-')}.png"
|
||||
alt="${state.currentTab === 'sent' ? bid.coin_to : bid.coin_from}"
|
||||
onerror="this.src='/static/images/coins/default.png'">
|
||||
<div>
|
||||
<div class="text-sm font-medium monospace">${bid.amount_from}</div>
|
||||
<div class="text-xs opacity-75 monospace">${bid.coin_from}</div>
|
||||
<div class="text-sm font-medium monospace">${state.currentTab === 'sent' ? bid.amount_to : bid.amount_from}</div>
|
||||
<div class="text-xs opacity-75 monospace">${state.currentTab === 'sent' ? bid.coin_to : bid.coin_from}</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<!-- Receive Coin Column -->
|
||||
<td class="py-3 px-6">
|
||||
<div class="flex items-center">
|
||||
<img class="w-6 h-6 mr-2"
|
||||
src="/static/images/coins/${bid.coin_to.replace(' ', '-')}.png"
|
||||
alt="${bid.coin_to}"
|
||||
<td class="p-3">
|
||||
<div class="flex items-center min-w-max">
|
||||
<img class="w-8 h-8 mr-2"
|
||||
src="/static/images/coins/${state.currentTab === 'sent' ? bid.coin_from.replace(' ', '-') : bid.coin_to.replace(' ', '-')}.png"
|
||||
alt="${state.currentTab === 'sent' ? bid.coin_from : bid.coin_to}"
|
||||
onerror="this.src='/static/images/coins/default.png'">
|
||||
<div>
|
||||
<div class="text-sm font-medium monospace">${bid.amount_to}</div>
|
||||
<div class="text-xs opacity-75 monospace">${bid.coin_to}</div>
|
||||
<div class="text-sm font-medium monospace">${state.currentTab === 'sent' ? bid.amount_from : bid.amount_to}</div>
|
||||
<div class="text-xs opacity-75 monospace">${state.currentTab === 'sent' ? bid.coin_from : bid.coin_to}</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<!-- Status Column -->
|
||||
<td class="py-3 px-6">
|
||||
<div class="relative" data-tooltip-target="tooltip-status-${uniqueId}">
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
|
||||
<td class="p-3">
|
||||
<div class="flex justify-center" data-tooltip-target="tooltip-status-${uniqueId}">
|
||||
<span class="w-full xl:w-4/5 flex bold justify-center items-center px-2.5 py-1 rounded-full text-xs font-medium
|
||||
${getStatusClass(bid.bid_state)}">
|
||||
${bid.bid_state}
|
||||
</span>
|
||||
|
|
@ -688,11 +695,13 @@ const createTableRow = async (bid) => {
|
|||
</td>
|
||||
|
||||
<!-- Actions Column -->
|
||||
<td class="py-3 px-6">
|
||||
<a href="/bid/${bid.bid_id}"
|
||||
class="inline-block w-24 py-2 px-3 text-center text-sm font-medium text-white bg-blue-500 rounded-lg hover:bg-blue-600 transition-colors">
|
||||
View Bid
|
||||
</a>
|
||||
<td class="py-3 pr-6 pl-3">
|
||||
<div class="flex justify-center">
|
||||
<a href="/bid/${bid.bid_id}"
|
||||
class="inline-block w-24 py-2 px-3 text-center text-sm font-medium text-white bg-blue-500 rounded-lg hover:bg-blue-600 transition-colors">
|
||||
View Bid
|
||||
</a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
|
|
|
|||
|
|
@ -2527,7 +2527,7 @@ if (refreshButton) {
|
|||
|
||||
try {
|
||||
const cachedPrices = CacheManager.get('prices_coingecko');
|
||||
let previousPrices = cachedPrices ? cachedPrices.value : null;
|
||||
const previousPrices = cachedPrices ? cachedPrices.value : null;
|
||||
CacheManager.clear();
|
||||
window.isManualRefresh = true;
|
||||
const endpoint = isSentOffers ? '/json/sentoffers' : '/json/offers';
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
{% include 'header.html' %}
|
||||
{% from 'style.html' import breadcrumb_line_svg, page_back_svg, page_forwards_svg, filter_clear_svg, filter_apply_svg, circular_arrows_svg, input_arrow_down_svg, arrow_right_svg %}
|
||||
|
||||
<div class="container mx-auto">
|
||||
<div class="xl:container mx-auto">
|
||||
<section class="py-3 px-4 mt-6">
|
||||
<div class="lg:container mx-auto">
|
||||
<div class="xl:container mx-auto">
|
||||
<div class="relative py-8 px-8 bg-coolGray-900 dark:bg-blue-500 rounded-md overflow-hidden">
|
||||
<img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt="">
|
||||
<img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt="">
|
||||
|
|
@ -49,7 +49,10 @@
|
|||
<div class="flex flex-wrap justify-center -m-1.5">
|
||||
<div class="w-full md:w-auto p-1.5">
|
||||
<div class="relative">
|
||||
<input type="text" id="searchInput" name="search" autocomplete="off" placeholder="Search bid ID, offer ID, address or label..." class="hover:border-blue-500 dark:hover:bg-gray-50 text-gray-900 pl-4 pr-10 dark:bg-gray-500 dark:text-white border border-gray-300 dark:border-gray-400 dark:text-gray-50 dark:placeholder-gray-400 text-sm rounded-lg outline-none block w-96 p-2.5 focus:ring-blue-500 focus:border-blue-500 focus:ring-0 dark:focus:bg-gray-500 dark:focus:text-white">
|
||||
<input type="text"
|
||||
id="searchInput"
|
||||
name="search" autocomplete="off" placeholder="Search bid ID, offer ID, address or label..."
|
||||
class="w-full md:w-auto hover:border-blue-500 dark:hover:bg-gray-50 text-gray-900 pl-4 pr-10 dark:bg-gray-500 dark:text-white border border-gray-300 dark:border-gray-400 dark:text-gray-50 dark:placeholder-gray-400 text-sm rounded-lg outline-none block w-96 p-2.5 focus:ring-blue-500 focus:border-blue-500 focus:ring-0 dark:focus:bg-gray-500 dark:focus:text-white">
|
||||
<div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
|
||||
<svg class="w-5 h-5 text-gray-500 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
|
||||
|
|
@ -162,42 +165,42 @@
|
|||
</section>
|
||||
|
||||
<div id="bidstab">
|
||||
<div class="rounded-lg px-6" id="sent" role="tabpanel" aria-labelledby="sent-tab">
|
||||
<div class="rounded-lg lg:px-6" id="sent" role="tabpanel" aria-labelledby="sent-tab">
|
||||
<div id="sent-content">
|
||||
<div class="lg:container mx-auto lg:px-0 px-6">
|
||||
<div class="xl:container mx-auto lg:px-0">
|
||||
<div class="pt-0 pb-6 bg-coolGray-100 dark:bg-gray-500 rounded-xl">
|
||||
<div class="px-0">
|
||||
<div class="w-auto overflow-auto lg:overflow-hidden">
|
||||
<table class="w-full min-w-max">
|
||||
<table class="w-full lg:min-w-max">
|
||||
<thead class="uppercase">
|
||||
<tr class="text-left">
|
||||
<th class="p-0">
|
||||
<div class="py-3 px-6 rounded-tl-xl bg-coolGray-200 dark:bg-gray-600">
|
||||
<div class="py-3 pl-16 rounded-tl-xl bg-coolGray-200 dark:bg-gray-600">
|
||||
<span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Date/Time</span>
|
||||
</div>
|
||||
</th>
|
||||
<th class="p-0">
|
||||
<div class="py-3 px-6 bg-coolGray-200 dark:bg-gray-600">
|
||||
<th class="p-0 hidden lg:block">
|
||||
<div class="p-3 bg-coolGray-200 dark:bg-gray-600">
|
||||
<span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Details</span>
|
||||
</div>
|
||||
</th>
|
||||
<th class="p-0">
|
||||
<div class="py-3 px-6 bg-coolGray-200 dark:bg-gray-600">
|
||||
<div class="p-3 bg-coolGray-200 dark:bg-gray-600">
|
||||
<span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">You Send</span>
|
||||
</div>
|
||||
</th>
|
||||
<th class="p-0">
|
||||
<div class="py-3 px-6 bg-coolGray-200 dark:bg-gray-600">
|
||||
<div class="p-3 bg-coolGray-200 dark:bg-gray-600">
|
||||
<span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">You Receive</span>
|
||||
</div>
|
||||
</th>
|
||||
<th class="p-0">
|
||||
<div class="py-3 px-6 bg-coolGray-200 dark:bg-gray-600">
|
||||
<div class="p-3 text-center bg-coolGray-200 dark:bg-gray-600">
|
||||
<span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Status</span>
|
||||
</div>
|
||||
</th>
|
||||
<th class="p-0">
|
||||
<div class="py-3 px-6 rounded-tr-xl bg-coolGray-200 dark:bg-gray-600">
|
||||
<div class="p-3 pr-6 text-center rounded-tr-xl bg-coolGray-200 dark:bg-gray-600">
|
||||
<span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Actions</span>
|
||||
</div>
|
||||
</th>
|
||||
|
|
@ -252,42 +255,42 @@
|
|||
</div>
|
||||
|
||||
<!-- Received Bids Tab -->
|
||||
<div class="hidden rounded-lg px-6" id="received" role="tabpanel" aria-labelledby="received-tab">
|
||||
<div class="hidden rounded-lg lg:px-6" id="received" role="tabpanel" aria-labelledby="received-tab">
|
||||
<div id="received-content">
|
||||
<div class="lg:container mx-auto lg:px-0">
|
||||
<div class="xl:container mx-auto lg:px-0">
|
||||
<div class="pt-0 pb-6 bg-coolGray-100 dark:bg-gray-500 rounded-xl">
|
||||
<div class="px-0">
|
||||
<div class="w-auto overflow-auto lg:overflow-hidden">
|
||||
<table class="w-full min-w-max">
|
||||
<table class="w-full lg:min-w-max">
|
||||
<thead class="uppercase">
|
||||
<tr class="text-left">
|
||||
<th class="p-0">
|
||||
<div class="py-3 px-6 rounded-tl-xl bg-coolGray-200 dark:bg-gray-600">
|
||||
<div class="p-3 pl-16 rounded-tl-xl bg-coolGray-200 dark:bg-gray-600">
|
||||
<span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Date/Time</span>
|
||||
</div>
|
||||
</th>
|
||||
<th class="p-0">
|
||||
<div class="py-3 px-6 bg-coolGray-200 dark:bg-gray-600">
|
||||
<div class="p-3 bg-coolGray-200 dark:bg-gray-600">
|
||||
<span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Details</span>
|
||||
</div>
|
||||
</th>
|
||||
<th class="p-0">
|
||||
<div class="py-3 px-6 bg-coolGray-200 dark:bg-gray-600">
|
||||
<div class="p-3 bg-coolGray-200 dark:bg-gray-600">
|
||||
<span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">You Send</span>
|
||||
</div>
|
||||
</th>
|
||||
<th class="p-0">
|
||||
<div class="py-3 px-6 bg-coolGray-200 dark:bg-gray-600">
|
||||
<div class="p-3 bg-coolGray-200 dark:bg-gray-600">
|
||||
<span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">You Receive</span>
|
||||
</div>
|
||||
</th>
|
||||
<th class="p-0">
|
||||
<div class="py-3 px-6 bg-coolGray-200 dark:bg-gray-600">
|
||||
<div class="p-3 text-center bg-coolGray-200 dark:bg-gray-600">
|
||||
<span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Status</span>
|
||||
</div>
|
||||
</th>
|
||||
<th class="p-0">
|
||||
<div class="py-3 px-6 rounded-tr-xl bg-coolGray-200 dark:bg-gray-600">
|
||||
<div class="p-3 pr-6 text-center rounded-tr-xl bg-coolGray-200 dark:bg-gray-600">
|
||||
<span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Actions</span>
|
||||
</div>
|
||||
</th>
|
||||
|
|
|
|||
|
|
@ -137,7 +137,7 @@ function getWebSocketConfig() {
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<section class="py-4 px-3 flex flex-wrap overflow-hidden container-to-blur">
|
||||
<section class="py-4 px-3 flex-wrap overflow-hidden container-to-blur">
|
||||
<div class="lg:container mx-auto">
|
||||
<div class="flex flex-wrap justify-center lg:justify-start xl:justify-center" id="coin-container">
|
||||
{% set coin_data = {
|
||||
|
|
@ -335,37 +335,29 @@ function getWebSocketConfig() {
|
|||
<span class="text-sm text-gray-600 dark:text-gray-300 font-semibold">Details</span>
|
||||
</div>
|
||||
</th>
|
||||
{% if sent_offers %}
|
||||
<th class="p-0">
|
||||
<div class="py-3 px-4 bg-coolGray-200 dark:bg-gray-600 text-left">
|
||||
{% if sent_offers %}
|
||||
<span class="text-sm text-gray-600 dark:text-gray-300 font-semibold">Max Recv</span>
|
||||
</div>
|
||||
</th>
|
||||
{% else %}
|
||||
<th class="p-0">
|
||||
<div class="py-3 px-4 bg-coolGray-200 dark:bg-gray-600 text-left">
|
||||
{% else %}
|
||||
<span class="text-sm text-gray-600 dark:text-gray-300 font-semibold">Max Send</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
</th>
|
||||
{% endif %}
|
||||
<th class="p-0">
|
||||
<div class="py-3 px-4 bg-coolGray-200 dark:bg-gray-600 text-center">
|
||||
<span class="text-sm text-gray-600 dark:text-gray-300 font-semibold">Swap</span>
|
||||
</div>
|
||||
</th>
|
||||
{% if sent_offers %}
|
||||
<th class="p-0">
|
||||
<div class="py-3 px-4 bg-coolGray-200 dark:bg-gray-600 text-right">
|
||||
{% if sent_offers %}
|
||||
<span class="text-sm text-gray-600 dark:text-gray-300 font-semibold pr-2">Your Liq.</span>
|
||||
</div>
|
||||
</th>
|
||||
{% else %}
|
||||
<th class="p-0">
|
||||
<div class="py-3 px-4 bg-coolGray-200 dark:bg-gray-600 text-right">
|
||||
{% else %}
|
||||
<span class="text-sm text-gray-600 dark:text-gray-300 font-semibold pr-2">Max Recv</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
</th>
|
||||
{% endif %}
|
||||
<th class="p-0" data-sortable="true" data-column-index="5">
|
||||
<div class="py-3 px-4 bg-coolGray-200 dark:bg-gray-600 text-right flex items-center justify-end">
|
||||
<span class="text-sm text-gray-600 dark:text-gray-300 font-semibold">Rate</span>
|
||||
|
|
@ -377,6 +369,7 @@ function getWebSocketConfig() {
|
|||
<span class="text-sm text-gray-600 dark:text-gray-300 font-semibold">Market +/-</span>
|
||||
<span class="sort-icon ml-1 text-gray-600 dark:text-gray-400" id="sort-icon-6">↓</span>
|
||||
</div>
|
||||
</th>
|
||||
<th class="p-0">
|
||||
<div class="py-3 px-4 bg-coolGray-200 dark:bg-gray-600 rounded-tr-xl">
|
||||
<span class="text-sm text-gray-600 dark:text-gray-300 font-semibold">Trade</span>
|
||||
|
|
|
|||
Loading…
Reference in a new issue