RanchiMall/taprootwallet
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

visual enhancements

Browse Source
This commit is contained in:
sairaj mote 2023-10-26 00:43:10 +05:30
parent 843f2e0d42
commit 967da78409
4 changed files with 63 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
css/main.css
View File

@ -844,12 +844,24 @@ theme-toggle {
}
#search {
width: min(100%, 52rem);
width: min(100%, 56rem);
margin: 0 auto;
}
#search_wrapper {
width: min(100%, 46rem);
--gap: 0.5rem;
}
#search_query_input {
width: 100%;
--border-radius: 5rem;
border: solid thin rgba(var(--text-color), 0.3);
border-radius: 5rem;
}
#check_address_button {
border-radius: 5rem;
}
#address_balance_card {
@ -946,6 +958,10 @@ theme-toggle {
content: ",";
}
#tx_details {
margin-top: 1rem;
}
#tx_status {
display: flex;
align-items: center;
@ -1030,13 +1046,13 @@ theme-toggle {
}
.primary-action {
padding: 0.8rem;
padding: 0.5rem 0.7rem 0.5rem 0.5rem;
gap: 0.5rem;
white-space: normal;
font-size: 0.9rem;
border-radius: 0.5rem;
background-color: transparent;
border: thin solid rgba(var(--text-color), 0.3);
border: thin solid rgba(var(--accent-color-rgb), 0.2);
text-align: start;
}
@ -1223,7 +1239,7 @@ theme-toggle {
}
#generate_address_popup,
#convert_to_taproot_popup {
--width: 28rem;
--width: min(36rem, 100%);
}
#send_tx_form::part(form) {
gap: 1rem;

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

21
css/main.scss
View File

@ -783,11 +783,21 @@ theme-toggle {
overflow: auto;
}
#search {
width: min(100%, 52rem);
width: min(100%, 56rem);
margin: 0 auto;
}
#search_wrapper {
width: min(100%, 46rem);
--gap: 0.5rem;
}
#search_query_input {
width: 100%;
--border-radius: 5rem;
border: solid thin rgba(var(--text-color), 0.3);
border-radius: 5rem;
}
#check_address_button {
border-radius: 5rem;
}
#address_balance_card {
@ -887,6 +897,9 @@ theme-toggle {
margin-right: 0.5rem;
}
}
#tx_details {
margin-top: 1rem;
}
#tx_status {
display: flex;
align-items: center;
@ -967,13 +980,13 @@ theme-toggle {
}
.primary-action {
padding: 0.8rem;
padding: 0.5rem 0.7rem 0.5rem 0.5rem;
gap: 0.5rem;
white-space: normal;
font-size: 0.9rem;
border-radius: 0.5rem;
background-color: transparent;
border: thin solid rgba(var(--text-color), 0.3);
border: thin solid rgba(var(--accent-color-rgb), 0.2);
text-align: start;
}
#flo_id_warning {
@ -1138,7 +1151,7 @@ theme-toggle {
}
#generate_address_popup,
#convert_to_taproot_popup {
--width: 28rem;
--width: min(36rem, 100%);
}
#send_tx_form {
&::part(form) {

46
index.html
View File

@ -1034,9 +1034,10 @@
const { block, time, size, fee, inputs, outputs, confirmations, total_input_value, total_output_value } = result;
console.debug('tx', result);
renderElem(getRef('tx_details'), html`
<h3>Transaction Details</h3>
<div class="flex align-center gap-1 space-between flex-wrap">
<time>${getFormattedTime(time)}</time>
${!block ? html`<h4>Transaction details</h4>` : ''}
<div class=${`flex gap-0-5 space-between flex-wrap ${block ? 'flex-direction-column' : 'align-center'}`}>
${block ? html`<h4>Transaction details</h4>` : ''}
<p>${getFormattedTime(time)}</p>
${!block ? html` <h4 id="tx_status">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"/><path d="M12.5 7H11v6l5.25 3.15.75-1.23-4.5-2.67z"/></svg>
Unconfirmed
@ -1067,7 +1068,7 @@
<div class="amount-shown" data-btc-amount="${fee}">${getConvertedAmount(fee, true)}</div>
</div>
</div>
<details class="margin-bottom-1-5 justify-self-center w-100">
<details class="margin-bottom-1-5 justify-self-center w-100" style="margin-top: -1rem">
<summary>
More details
<svg class="icon down-arrow" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M24 24H0V0h24v24z" fill="none" opacity=".87"/><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"/></svg>
@ -1184,28 +1185,31 @@
function renderSearch(state) {
const { params: { query } } = state
renderElem(getRef('page_container'), html`
<div id="search" class="flex flex-direction-column gap-1-5">
<menu class="flex gap-0-5">
<li>
<button class="button button--colored primary-action" onclick="openPopup('generate_address_popup')">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"> <path d="M0 0h24v24H0V0z" fill="none" /> <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z" /> </svg>
Create new address
</button>
</li>
<li>
<button class="button button--colored primary-action" onclick="openPopup('convert_to_taproot_popup')">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"> <path d="M0 0h24v24H0V0z" fill="none" /> <path d="M6.99 11L3 15l3.99 4v-3H14v-2H6.99v-3zM21 9l-3.99-4v3H10v2h7.01v3L21 9z" /> </svg>
Retrieve Taproot address
</button>
</li>
</menu>
<div id="search" class="flex flex-direction-column gap-1">
<h2>Search</h2>
<section class="flex flex-direction-column gap-1">
<sm-form class="flex" style="--gap: 0.5rem;">
<sm-form id="search_wrapper" class="flex">
<sm-input type="search" id="search_query_input" placeholder="Search BTC address or transaction ID" required="" aria-label="Search BTC address or transaction ID" aria-required="true" role="textbox" invalid="">
<svg slot="icon" class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"> <path d="M0 0h24v24H0V0z" fill="none"></path> <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path> </svg>
</sm-input>
<button id="check_address_button" onclick=${handleSearch} class="button button--primary cta" style="height: 3.2rem;" type="submit" disabled="">Search</button>
<button id="check_address_button" onclick=${handleSearch} class="button button--primary cta" type="submit" aria-label="search" disabled>
<svg slot="icon" class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"> <path d="M0 0h24v24H0V0z" fill="none"></path> <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path> </svg>
</button>
</sm-form>
<menu class="flex gap-0-5">
<li>
<button class="button button--colored primary-action" onclick="openPopup('generate_address_popup')">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"> <path d="M0 0h24v24H0V0z" fill="none" /> <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z" /> </svg>
Create new address
</button>
</li>
<li>
<button class="button button--colored primary-action" onclick="openPopup('convert_to_taproot_popup')">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"> <path d="M0 0h24v24H0V0z" fill="none" /> <path d="M6.99 11L3 15l3.99 4v-3H14v-2H6.99v-3zM21 9l-3.99-4v3H10v2h7.01v3L21 9z" /> </svg>
Retrieve Taproot address
</button>
</li>
</menu>
<div id="address_details" class="hidden flex flex-direction-column gap-1">
<div id="address_balance_card" class="grid gap-1 hidden">
<div class="flex">