diff --git a/basicswap/static/js/bids_available.js b/basicswap/static/js/bids_available.js index 921918e..b3b7e48 100644 --- a/basicswap/static/js/bids_available.js +++ b/basicswap/static/js/bids_available.js @@ -189,7 +189,7 @@ const formatAddress = (address, displayLength = 15) => { const getTimeStrokeColor = (expireTime) => { const now = Math.floor(Date.now() / 1000); const timeLeft = expireTime - now; - + if (timeLeft <= 300) return '#9CA3AF'; // 5 minutes or less if (timeLeft <= 1800) return '#3B82F6'; // 30 minutes or less return '#10B981'; // More than 30 minutes @@ -781,7 +781,7 @@ async function updateBidsTable(options = {}) { } const totalPages = Math.ceil(state.jsonData.length / PAGE_SIZE); - + if (resetPage && state.jsonData.length > 0) { state.currentPage = 1; } @@ -861,7 +861,7 @@ if (elements.refreshBidsButton) { updateLoadingState(true); await new Promise(resolve => setTimeout(resolve, 500)); - + try { await updateBidsTable({ resetPage: true, refreshData: true }); } finally { diff --git a/basicswap/static/js/bids_sentreceived.js b/basicswap/static/js/bids_sentreceived.js index 924aaf2..61e1522 100644 --- a/basicswap/static/js/bids_sentreceived.js +++ b/basicswap/static/js/bids_sentreceived.js @@ -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'; } }; @@ -274,10 +280,10 @@ function hasActiveFilters() { const hasNonDefaultCoinTo = coinToSelect && coinToSelect.value !== 'any'; const hasNonDefaultExpired = withExpiredSelect && withExpiredSelect.value !== 'true'; - return hasNonDefaultState || - hasSearchQuery || - hasNonDefaultCoinFrom || - hasNonDefaultCoinTo || + return hasNonDefaultState || + hasSearchQuery || + hasNonDefaultCoinFrom || + hasNonDefaultCoinTo || hasNonDefaultExpired; } @@ -305,7 +311,7 @@ function filterAndSortData(bids) { const coinFromSelect = document.getElementById('coin_from'); const selectedOption = coinFromSelect?.querySelector(`option[value="${state.filters.coin_from}"]`); const coinName = selectedOption?.textContent.trim(); - + if (coinName) { const coinToMatch = state.currentTab === 'sent' ? bid.coin_from : bid.coin_to; if (!coinMatches(coinToMatch, coinName)) { @@ -318,7 +324,7 @@ function filterAndSortData(bids) { const coinToSelect = document.getElementById('coin_to'); const selectedOption = coinToSelect?.querySelector(`option[value="${state.filters.coin_to}"]`); const coinName = selectedOption?.textContent.trim(); - + if (coinName) { const coinToMatch = state.currentTab === 'sent' ? bid.coin_to : bid.coin_from; if (!coinMatches(coinToMatch, coinName)) { @@ -334,7 +340,7 @@ function filterAndSortData(bids) { const identity = IdentityManager.cache.get(bid.addr_from); const label = identity?.data?.label || ''; const matchesLabel = label.toLowerCase().includes(searchStr); - + if (!(matchesBidId || matchesIdentity || matchesLabel)) { return false; } @@ -358,10 +364,10 @@ function updateCoinFilterImages() { function updateButtonImage(select, button) { if (!select || !button) return; - + const selectedOption = select.options[select.selectedIndex]; const imagePath = selectedOption.getAttribute('data-image'); - + if (imagePath && select.value !== 'any') { button.style.backgroundImage = `url(${imagePath})`; button.style.backgroundSize = '25px'; @@ -385,7 +391,7 @@ const updateLoadingState = (isLoading) => { const refreshButton = elements[`refresh${type}Bids`]; const refreshText = refreshButton?.querySelector(`#refresh${type}Text`); const refreshIcon = refreshButton?.querySelector('svg'); - + if (refreshButton) { refreshButton.disabled = isLoading; if (isLoading) { @@ -431,7 +437,7 @@ const updateConnectionStatus = (status) => { }; const config = statusConfig[status] || statusConfig.connected; - + ['sent', 'received'].forEach(type => { const dot = elements[`statusDot${type.charAt(0).toUpperCase() + type.slice(1)}`]; const text = elements[`statusText${type.charAt(0).toUpperCase() + type.slice(1)}`]; @@ -613,12 +619,12 @@ const createTableRow = async (bid) => { const identity = await IdentityManager.getIdentityData(bid.addr_from); const uniqueId = `${bid.bid_id}_${Date.now()}`; const timeColor = getTimeStrokeColor(bid.expire_at); - + 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> @@ -759,12 +768,12 @@ const updateTableContent = async (type) => { const initializeTooltips = () => { if (window.TooltipManager) { window.TooltipManager.cleanup(); - + const tooltipTriggers = document.querySelectorAll('[data-tooltip-target]'); tooltipTriggers.forEach(trigger => { const targetId = trigger.getAttribute('data-tooltip-target'); const tooltipContent = document.getElementById(targetId); - + if (tooltipContent) { window.TooltipManager.create(trigger, tooltipContent.innerHTML, { placement: trigger.getAttribute('data-tooltip-placement') || 'top', @@ -786,7 +795,7 @@ const fetchBids = async () => { const endpoint = state.currentTab === 'sent' ? '/json/sentbids' : '/json/bids'; const withExpiredSelect = document.getElementById('with_expired'); const includeExpired = withExpiredSelect ? withExpiredSelect.value === 'true' : true; - + console.log('Fetching bids, include expired:', includeExpired); const response = await fetch(endpoint, { @@ -814,7 +823,7 @@ const fetchBids = async () => { state.filters.with_expired = includeExpired; data = filterAndSortData(data); - + return data; } catch (error) { console.error('Error in fetchBids:', error); @@ -827,18 +836,18 @@ const updateBidsTable = async () => { console.log('Already loading, skipping update'); return; } - + try { console.log('Starting updateBidsTable for tab:', state.currentTab); console.log('Current filters:', state.filters); - + state.isLoading = true; updateLoadingState(true); const bids = await fetchBids(); - + console.log('Fetched bids:', bids.length); - + const filteredBids = bids.filter(bid => { // State filter if (state.filters.state !== -1) { @@ -860,7 +869,7 @@ const updateBidsTable = async () => { const coinFromSelect = document.getElementById('coin_from'); const selectedOption = coinFromSelect?.querySelector(`option[value="${state.filters.coin_from}"]`); const coinName = selectedOption?.textContent.trim(); - + if (coinName) { const coinToMatch = state.currentTab === 'sent' ? bid.coin_from : bid.coin_to; yourCoinMatch = coinMatches(coinToMatch, coinName); @@ -876,7 +885,7 @@ const updateBidsTable = async () => { const coinToSelect = document.getElementById('coin_to'); const selectedOption = coinToSelect?.querySelector(`option[value="${state.filters.coin_to}"]`); const coinName = selectedOption?.textContent.trim(); - + if (coinName) { const coinToMatch = state.currentTab === 'sent' ? bid.coin_to : bid.coin_from; theirCoinMatch = coinMatches(coinToMatch, coinName); @@ -896,11 +905,11 @@ const updateBidsTable = async () => { const searchStr = state.filters.searchQuery.toLowerCase(); const matchesBidId = bid.bid_id.toLowerCase().includes(searchStr); const matchesIdentity = bid.addr_from?.toLowerCase().includes(searchStr); - + const identity = IdentityManager.cache.get(bid.addr_from); const label = identity?.data?.label || ''; const matchesLabel = label.toLowerCase().includes(searchStr); - + if (!(matchesBidId || matchesIdentity || matchesLabel)) { return false; } @@ -981,7 +990,7 @@ function handleSearch(event) { if (searchTimeout) { clearTimeout(searchTimeout); } - + searchTimeout = setTimeout(() => { state.filters.searchQuery = event.target.value.toLowerCase(); updateBidsTable(); @@ -1114,7 +1123,7 @@ function setupFilterEventListeners() { if (searchTimeout) { clearTimeout(searchTimeout); } - + searchTimeout = setTimeout(() => { state.filters.searchQuery = event.target.value.toLowerCase(); updateBidsTable(); @@ -1178,7 +1187,7 @@ const setupEventListeners = () => { elements.tabButtons.forEach(tab => { const isSelected = tab.getAttribute('data-tabs-target') === targetId; tab.setAttribute('aria-selected', isSelected); - + if (isSelected) { tab.classList.add('bg-gray-100', 'dark:bg-gray-600', 'text-gray-900', 'dark:text-white'); tab.classList.remove('hover:text-gray-600', 'hover:bg-gray-50', 'dark:hover:bg-gray-500'); @@ -1263,7 +1272,7 @@ const setupEventListeners = () => { const stateValue = parseInt(filterElements.stateSelect.value); state.filters.state = isNaN(stateValue) ? -1 : stateValue; - + console.log('State filter changed:', { selectedValue: filterElements.stateSelect.value, parsedState: state.filters.state @@ -1275,8 +1284,8 @@ const setupEventListeners = () => { } [ - filterElements.sortBySelect, - filterElements.sortDirSelect, + filterElements.sortBySelect, + filterElements.sortDirSelect, filterElements.withExpiredSelect ].forEach(element => { if (element) { @@ -1299,7 +1308,7 @@ const setupEventListeners = () => { document.addEventListener('change', (event) => { const target = event.target; const filterForm = document.querySelector('.flex.flex-wrap.justify-center'); - + if (filterForm && filterForm.contains(target)) { const formData = { state: filterElements.stateSelect?.value, @@ -1347,7 +1356,7 @@ const setupRefreshButtons = () => { if (refreshButton) { refreshButton.addEventListener('click', async () => { const lowerType = type.toLowerCase(); - + if (state.isRefreshing) { console.log('Already refreshing, skipping'); return; @@ -1416,7 +1425,7 @@ document.addEventListener('DOMContentLoaded', () => { WebSocketManager.initialize(); setupEventListeners(); - setupRefreshButtons(); + setupRefreshButtons(); setupFilterEventListeners(); updateClearFiltersButton(); diff --git a/basicswap/static/js/offers.js b/basicswap/static/js/offers.js index 7f3b30e..9ec63ae 100644 --- a/basicswap/static/js/offers.js +++ b/basicswap/static/js/offers.js @@ -200,7 +200,7 @@ const WebSocketManager = { this.isPageHidden = false; this.lastVisibilityChange = Date.now(); this.isIntentionallyClosed = false; - + setTimeout(() => { this.priceUpdatePaused = false; if (!this.isConnected()) { @@ -848,7 +848,7 @@ function continueInitialization() { listingLabel.textContent = isSentOffers ? 'Total Listings: ' : 'Network Listings: '; } //console.log('Initialization completed'); - + } function initializeTooltips() { @@ -875,7 +875,7 @@ function filterAndSortData() { localStorage.setItem('offersTableSettings', JSON.stringify({ coin_to: filters.coin_to, - coin_from: filters.coin_from, + coin_from: filters.coin_from, status: filters.status, sent_from: filters.sent_from, sortColumn: currentSortColumn, @@ -936,7 +936,7 @@ function filterAndSortData() { const calculateValue = offer => { const fromUSD = parseFloat(offer.amount_from) * getPrice(offer.coin_from); const toUSD = parseFloat(offer.amount_to) * getPrice(offer.coin_to); - return (isSentOffers || offer.is_own_offer) ? + return (isSentOffers || offer.is_own_offer) ? ((toUSD / fromUSD) - 1) * 100 : ((fromUSD / toUSD) - 1) * 100; }; @@ -967,7 +967,7 @@ function filterAndSortData() { return currentSortDirection === 'desc' ? -comparison : comparison; }); } - + return filteredData; } @@ -1081,7 +1081,7 @@ async function fetchLatestPrices() { const existingCache = CacheManager.get(PRICES_CACHE_KEY, true); const fallbackData = existingCache ? existingCache.value : null; const url = `${offersConfig.apiEndpoints.coinGecko}/simple/price?ids=bitcoin,bitcoin-cash,dash,dogecoin,decred,litecoin,particl,pivx,monero,zano,wownero,zcoin&vs_currencies=USD,BTC&api_key=${offersConfig.apiKeys.coinGecko}`; - + const response = await fetch('/json/readurl', { method: 'POST', headers: { @@ -1102,7 +1102,7 @@ async function fetchLatestPrices() { } const data = await response.json(); - + if (data.Error) { if (fallbackData) { return fallbackData; @@ -1177,7 +1177,7 @@ async function fetchOffers() { const data = await offersResponse.json(); const processedData = Array.isArray(data) ? data : Object.values(data); - + jsonData = formatInitialData(processedData); originalJsonData = [...jsonData]; @@ -2502,7 +2502,7 @@ if (refreshButton) { const currentTime = Date.now(); const elapsedTime = currentTime - startTime; const remainingTime = Math.ceil((REFRESH_COOLDOWN - elapsedTime) / 1000); - + if (remainingTime <= 0) { clearInterval(countdownInterval); refreshText.textContent = 'Refresh'; @@ -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'; @@ -2660,7 +2660,7 @@ function handleTableSort(columnIndex, header) { if (window.sortTimeout) { clearTimeout(window.sortTimeout); } - + window.sortTimeout = setTimeout(() => { applyFilters(); }, 100); @@ -2719,7 +2719,7 @@ function loadSavedSettings() { const saved = localStorage.getItem('offersTableSettings'); if (saved) { const settings = JSON.parse(saved); - + ['coin_to', 'coin_from', 'status', 'sent_from'].forEach(id => { const element = document.getElementById(id); if (element && settings[id]) element.value = settings[id]; diff --git a/basicswap/templates/bids.html b/basicswap/templates/bids.html index ea27b9f..29589be 100644 --- a/basicswap/templates/bids.html +++ b/basicswap/templates/bids.html @@ -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> diff --git a/basicswap/templates/offers.html b/basicswap/templates/offers.html index baa71ee..b4afc97 100644 --- a/basicswap/templates/offers.html +++ b/basicswap/templates/offers.html @@ -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>