mirror of
https://github.com/Qortal/qortal-ui.git
synced 2025-02-11 17:55:51 +00:00
Vaadin updates
This commit is contained in:
AlphaX-Projects
GitHub
parent
b937267dd2
commit
c2cebdb8ad
@ -7,10 +7,8 @@ import '@material/mwc-button'
|
||||
import '@material/mwc-textfield'
|
||||
import '@material/mwc-dialog'
|
||||
import '@polymer/paper-spinner/paper-spinner-lite.js'
|
||||
import '@vaadin/grid/vaadin-grid.js'
|
||||
import '@vaadin/grid'
|
||||
import '@vaadin/grid/vaadin-grid-filter-column.js'
|
||||
import '@vaadin/grid/vaadin-grid-sort-column.js'
|
||||
import '@vaadin/grid/theme/material/all-imports.js'
|
||||
import '@github/time-elements'
|
||||
|
||||
const parentEpml = new Epml({ type: 'WINDOW', source: window.parent })
|
||||
@ -40,6 +38,10 @@ class GroupManagement extends LitElement {
|
||||
* {
|
||||
--mdc-theme-primary: rgb(3, 169, 244);
|
||||
--paper-input-container-focus-color: var(--mdc-theme-primary);
|
||||
--lumo-primary-text-color: rgb(0, 167, 245);
|
||||
--lumo-primary-color-50pct: rgba(0, 167, 245, 0.5);
|
||||
--lumo-primary-color-10pct: rgba(0, 167, 245, 0.1);
|
||||
--lumo-primary-color: hsl(199, 100%, 48%);
|
||||
}
|
||||
|
||||
#group-management-page {
|
||||
|
||||
@ -33,7 +33,7 @@
|
||||
margin: 0;
|
||||
font-family: "Roboto", sans-serif;
|
||||
background-color: #fff;
|
||||
overflow: hidden;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@ -43,4 +43,4 @@
|
||||
<script src="q-chat.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</html>
|
||||
@ -7,8 +7,7 @@ import '@material/mwc-button'
|
||||
import '@material/mwc-textfield'
|
||||
import '@material/mwc-dialog'
|
||||
import '@polymer/paper-spinner/paper-spinner-lite.js'
|
||||
import '@vaadin/grid/vaadin-grid.js'
|
||||
import '@vaadin/grid/theme/material/all-imports.js'
|
||||
import '@vaadin/grid'
|
||||
|
||||
const parentEpml = new Epml({ type: 'WINDOW', source: window.parent })
|
||||
|
||||
@ -34,8 +33,11 @@ class NameRegistration extends LitElement {
|
||||
--mdc-theme-primary: rgb(3, 169, 244);
|
||||
--mdc-theme-secondary: var(--mdc-theme-primary);
|
||||
--paper-input-container-focus-color: var(--mdc-theme-primary);
|
||||
--lumo-primary-text-color: rgb(0, 167, 245);
|
||||
--lumo-primary-color-50pct: rgba(0, 167, 245, 0.5);
|
||||
--lumo-primary-color-10pct: rgba(0, 167, 245, 0.1);
|
||||
--lumo-primary-color: hsl(199, 100%, 48%);
|
||||
}
|
||||
|
||||
#name-registration-page {
|
||||
background: #fff;
|
||||
padding: 12px 24px;
|
||||
@ -62,6 +64,10 @@ class NameRegistration extends LitElement {
|
||||
height: 100%;
|
||||
max-height: 42px;
|
||||
}
|
||||
|
||||
.red {
|
||||
--mdc-theme-primary: #F44336;
|
||||
}
|
||||
`
|
||||
}
|
||||
|
||||
|
||||
@ -40,6 +40,10 @@ class NodeManagement extends LitElement {
|
||||
* {
|
||||
--mdc-theme-primary: rgb(3, 169, 244);
|
||||
--paper-input-container-focus-color: var(--mdc-theme-primary);
|
||||
--lumo-primary-text-color: rgb(0, 167, 245);
|
||||
--lumo-primary-color-50pct: rgba(0, 167, 245, 0.5);
|
||||
--lumo-primary-color-10pct: rgba(0, 167, 245, 0.1);
|
||||
--lumo-primary-color: hsl(199, 100%, 48%);
|
||||
}
|
||||
|
||||
paper-spinner-lite {
|
||||
|
||||
@ -12,8 +12,7 @@ import '@material/mwc-textfield'
|
||||
import '@material/mwc-dialog'
|
||||
import '@material/mwc-slider'
|
||||
import '@polymer/paper-spinner/paper-spinner-lite.js'
|
||||
import '@vaadin/grid/vaadin-grid.js'
|
||||
import '@vaadin/grid/theme/material/all-imports.js'
|
||||
import '@vaadin/grid'
|
||||
|
||||
const parentEpml = new Epml({ type: 'WINDOW', source: window.parent })
|
||||
|
||||
@ -36,34 +35,38 @@ class Puzzles extends LitElement {
|
||||
|
||||
static get styles() {
|
||||
return css`
|
||||
* {
|
||||
--mdc-theme-primary: rgb(3, 169, 244);
|
||||
--mdc-theme-secondary: var(--mdc-theme-primary);
|
||||
--paper-input-container-focus-color: var(--mdc-theme-primary);
|
||||
}
|
||||
#puzzle-page {
|
||||
background: #fff;
|
||||
padding: 12px 24px;
|
||||
}
|
||||
* {
|
||||
--mdc-theme-primary: rgb(3, 169, 244);
|
||||
--mdc-theme-secondary: var(--mdc-theme-primary);
|
||||
--paper-input-container-focus-color: var(--mdc-theme-primary);
|
||||
--lumo-primary-text-color: rgb(0, 167, 245);
|
||||
--lumo-primary-color-50pct: rgba(0, 167, 245, 0.5);
|
||||
--lumo-primary-color-10pct: rgba(0, 167, 245, 0.1);
|
||||
--lumo-primary-color: hsl(199, 100%, 48%);
|
||||
}
|
||||
#puzzle-page {
|
||||
background: #fff;
|
||||
padding: 12px 24px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin:0;
|
||||
}
|
||||
h2 {
|
||||
margin:0;
|
||||
}
|
||||
|
||||
h2, h3, h4, h5 {
|
||||
color:#333;
|
||||
font-weight: 400;
|
||||
}
|
||||
h2, h3, h4, h5 {
|
||||
color:#333;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.red {
|
||||
--mdc-theme-primary: #F44336;
|
||||
}
|
||||
.red {
|
||||
--mdc-theme-primary: #F44336;
|
||||
}
|
||||
|
||||
.clue {
|
||||
font-family: monospaced;
|
||||
font-size: smaller;
|
||||
}
|
||||
`
|
||||
.clue {
|
||||
font-family: monospaced;
|
||||
font-size: smaller;
|
||||
}
|
||||
`
|
||||
}
|
||||
|
||||
constructor() {
|
||||
@ -85,7 +88,7 @@ class Puzzles extends LitElement {
|
||||
<h3 style="margin: 0; flex: 1; padding-top: 8px; display: inline;">Puzzles</h3>
|
||||
</div>
|
||||
<div class="divCard">
|
||||
<vaadin-grid theme="large" id="puzzlesGrid" ?hidden="${this.isEmptyArray(this.puzzles)}" .items="${this.puzzles}" aria-label="Puzzles" all-rows-visible>
|
||||
<vaadin-grid theme="compact" id="puzzlesGrid" ?hidden="${this.isEmptyArray(this.puzzles)}" .items="${this.puzzles}" aria-label="Puzzles" all-rows-visible>
|
||||
<vaadin-grid-column auto-width header="Reward" .renderer=${(root, column, data) => {
|
||||
if (data.item.isSolved) {
|
||||
render(html`<span style="font-size: smaller;">SOLVED by ${data.item.winner}</span>`, root)
|
||||
|
||||
@ -4,8 +4,7 @@ import { Epml } from '../../../../epml'
|
||||
|
||||
import '@material/mwc-icon'
|
||||
import '@material/mwc-button'
|
||||
import '@vaadin/grid/vaadin-grid.js'
|
||||
import '@vaadin/grid/theme/material/all-imports.js'
|
||||
import '@vaadin/grid'
|
||||
|
||||
const parentEpml = new Epml({ type: 'WINDOW', source: window.parent })
|
||||
|
||||
@ -24,6 +23,10 @@ class DataManagement extends LitElement {
|
||||
* {
|
||||
--mdc-theme-primary: rgb(3, 169, 244);
|
||||
--paper-input-container-focus-color: var(--mdc-theme-primary);
|
||||
--lumo-primary-text-color: rgb(0, 167, 245);
|
||||
--lumo-primary-color-50pct: rgba(0, 167, 245, 0.5);
|
||||
--lumo-primary-color-10pct: rgba(0, 167, 245, 0.1);
|
||||
--lumo-primary-color: hsl(199, 100%, 48%);
|
||||
}
|
||||
|
||||
#pages {
|
||||
|
||||
@ -5,8 +5,7 @@ import { Epml } from '../../../epml.js'
|
||||
import '@material/mwc-icon'
|
||||
import '@material/mwc-button'
|
||||
import '@material/mwc-textfield'
|
||||
import '@vaadin/grid/vaadin-grid.js'
|
||||
import '@vaadin/grid/theme/material/all-imports.js'
|
||||
import '@vaadin/grid'
|
||||
|
||||
const parentEpml = new Epml({ type: 'WINDOW', source: window.parent })
|
||||
|
||||
@ -33,6 +32,10 @@ class Websites extends LitElement {
|
||||
* {
|
||||
--mdc-theme-primary: rgb(3, 169, 244);
|
||||
--paper-input-container-focus-color: var(--mdc-theme-primary);
|
||||
--lumo-primary-text-color: rgb(0, 167, 245);
|
||||
--lumo-primary-color-50pct: rgba(0, 167, 245, 0.5);
|
||||
--lumo-primary-color-10pct: rgba(0, 167, 245, 0.1);
|
||||
--lumo-primary-color: hsl(199, 100%, 48%);
|
||||
}
|
||||
|
||||
#pages {
|
||||
|
||||
@ -8,8 +8,7 @@ import '@material/mwc-textfield'
|
||||
import '@material/mwc-dialog'
|
||||
import '@material/mwc-slider'
|
||||
import '@polymer/paper-spinner/paper-spinner-lite.js'
|
||||
import '@vaadin/grid/vaadin-grid.js'
|
||||
import '@vaadin/grid/theme/material/all-imports.js'
|
||||
import '@vaadin/grid'
|
||||
|
||||
const parentEpml = new Epml({ type: 'WINDOW', source: window.parent })
|
||||
|
||||
@ -35,6 +34,10 @@ class RewardShare extends LitElement {
|
||||
--mdc-theme-primary: rgb(3, 169, 244);
|
||||
--mdc-theme-secondary: var(--mdc-theme-primary);
|
||||
--paper-input-container-focus-color: var(--mdc-theme-primary);
|
||||
--lumo-primary-text-color: rgb(0, 167, 245);
|
||||
--lumo-primary-color-50pct: rgba(0, 167, 245, 0.5);
|
||||
--lumo-primary-color-10pct: rgba(0, 167, 245, 0.1);
|
||||
--lumo-primary-color: hsl(199, 100%, 48%);
|
||||
}
|
||||
|
||||
#reward-share-page {
|
||||
|
||||
@ -11,9 +11,8 @@ import '@material/mwc-tab'
|
||||
import '@material/mwc-list/mwc-list-item'
|
||||
import '@material/mwc-select'
|
||||
import '@polymer/paper-spinner/paper-spinner-lite.js'
|
||||
import '@vaadin/grid/vaadin-grid.js'
|
||||
import '@vaadin/grid'
|
||||
import '@vaadin/grid/vaadin-grid-sorter'
|
||||
import '@vaadin/grid/theme/material/all-imports.js'
|
||||
|
||||
const parentEpml = new Epml({ type: 'WINDOW', source: window.parent })
|
||||
|
||||
@ -41,328 +40,330 @@ class TradePortal extends LitElement {
|
||||
|
||||
static get styles() {
|
||||
return css`
|
||||
* {
|
||||
--mdc-theme-primary: rgb(3, 169, 244);
|
||||
--mdc-theme-secondary: var(--mdc-theme-primary);
|
||||
--paper-input-container-focus-color: var(--mdc-theme-primary);
|
||||
--lumo-primary-text-color: rgb(0, 167, 245);
|
||||
--lumo-primary-color-50pct: rgba(0, 167, 245, 0.5);
|
||||
--lumo-primary-color-10pct: rgba(0, 167, 245, 0.1);
|
||||
--lumo-primary-color: hsl(199, 100%, 48%);
|
||||
}
|
||||
|
||||
#tabs-1 {
|
||||
--mdc-tab-height: 50px;
|
||||
border-left: 1px solid rgb(102, 102, 102);
|
||||
border-top: 1px solid rgb(102, 102, 102);
|
||||
border-right: 1px solid rgb(102, 102, 102);
|
||||
}
|
||||
|
||||
#tab-buy[active] {
|
||||
--mdc-theme-primary: rgba(55, 160, 51, 0.9);
|
||||
}
|
||||
|
||||
#tabs-1-content {
|
||||
height: 100%;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
#tabs-1-content > div {
|
||||
height: 100%;
|
||||
border: 1px solid rgb(102, 102, 102);
|
||||
}
|
||||
|
||||
#tabs-1-content .card {
|
||||
border: none;
|
||||
}
|
||||
|
||||
#tabs-1-content .btn-clear {
|
||||
--mdc-icon-button-size: 40px;
|
||||
}
|
||||
|
||||
#tab-sell[active] {
|
||||
--mdc-theme-primary: rgb(255, 89, 89);
|
||||
}
|
||||
|
||||
#trade-portal-page {
|
||||
background: #fff;
|
||||
padding: 12px 24px;
|
||||
}
|
||||
|
||||
.divCard {
|
||||
border: 1px solid #eee;
|
||||
padding: 1em;
|
||||
box-shadow: 0 0.3px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 1px -1px rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5 {
|
||||
color: #333;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
flex: 0 1 auto;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0px 15px;
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
background-color: rgb(106, 108, 117);
|
||||
min-height: 40px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
#trade-portal {
|
||||
max-width: 100vw;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.box {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#first-trade-section {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
#first-trade-section > div {
|
||||
}
|
||||
|
||||
#second-trade-section {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
#second-trade-section > div {
|
||||
}
|
||||
|
||||
#third-trade-section {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
#third-trade-section > div {
|
||||
}
|
||||
|
||||
.trade-chart {
|
||||
background-color: #eee;
|
||||
border: 2px #ddd solid;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.open-trades {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.no-last-seen {
|
||||
background: rgb(255, 89, 89);
|
||||
padding: 9px 1.3px;
|
||||
border-radius: 50%;
|
||||
width: 1rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.open-market-container {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.buy-sell {
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 1em;
|
||||
border: 1px #666 solid;
|
||||
flex: 1 1 auto;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
justify-content: space-evenly;
|
||||
min-height: inherit;
|
||||
}
|
||||
|
||||
.cancel {
|
||||
--mdc-theme-primary: rgb(255, 89, 89);
|
||||
}
|
||||
|
||||
.border-wrapper {
|
||||
border: 1px #666 solid;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.you-have {
|
||||
color: #555;
|
||||
font-size: 15px;
|
||||
text-align: right;
|
||||
margin-top: 2px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.historic-trades {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.my-open-orders {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.my-historic-trades {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
width: auto !important;
|
||||
}
|
||||
|
||||
.buy-button {
|
||||
--mdc-theme-primary: rgba(55, 160, 51, 0.9);
|
||||
}
|
||||
|
||||
.sell-button {
|
||||
--mdc-theme-primary: rgb(255, 89, 89);
|
||||
}
|
||||
|
||||
.full-width {
|
||||
background-color: #fff;
|
||||
border: 2px #ddd solid;
|
||||
height: 100px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
vaading-grid {
|
||||
font-size: .8em;
|
||||
}
|
||||
|
||||
vaadin-grid-column {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.loadingContainer {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.loading,
|
||||
.loading:after {
|
||||
border-radius: 50%;
|
||||
width: 5em;
|
||||
height: 5em;
|
||||
}
|
||||
|
||||
.loading {
|
||||
margin: 45% auto;
|
||||
border-width: .6em;
|
||||
border-style: solid;
|
||||
border-color: rgba(3, 169, 244, 0.2) rgba(3, 169, 244, 0.2) rgba(3, 169, 244, 0.2) rgb(3, 169, 244);
|
||||
font-size: 10px;
|
||||
position: relative;
|
||||
text-indent: -9999em;
|
||||
transform: translateZ(0px);
|
||||
animation: 1.1s linear 0s infinite normal none running loadingAnimation;
|
||||
}
|
||||
|
||||
mwc-select#coinSelectionMenu {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
mwc-select#coinSelectionMenu mwc-list-item {
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
.coinName::before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
height: 26px;
|
||||
width: 45px;
|
||||
position: absolute;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
left: 10px;
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
.ltc.coinName:before {
|
||||
background-image: url('/img/qortltc.png');
|
||||
}
|
||||
|
||||
.doge.coinName:before {
|
||||
background-image: url('/img/qortdoge.png');
|
||||
}
|
||||
|
||||
.coinName {
|
||||
display: inline-block;
|
||||
height: 26px;
|
||||
padding-left: 45px;
|
||||
}
|
||||
|
||||
@-webkit-keyframes loadingAnimation {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes loadingAnimation {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 701px) {
|
||||
* {
|
||||
--mdc-theme-primary: rgb(3, 169, 244);
|
||||
--mdc-theme-secondary: var(--mdc-theme-primary);
|
||||
--paper-input-container-focus-color: var(--mdc-theme-primary);
|
||||
}
|
||||
|
||||
#tabs-1 {
|
||||
--mdc-tab-height: 50px;
|
||||
border-left: 1px solid rgb(102, 102, 102);
|
||||
border-top: 1px solid rgb(102, 102, 102);
|
||||
border-right: 1px solid rgb(102, 102, 102);
|
||||
}
|
||||
|
||||
#tab-buy[active] {
|
||||
--mdc-theme-primary: rgba(55, 160, 51, 0.9);
|
||||
}
|
||||
|
||||
#tabs-1-content {
|
||||
height: 100%;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
#tabs-1-content > div {
|
||||
height: 100%;
|
||||
border: 1px solid rgb(102, 102, 102);
|
||||
}
|
||||
|
||||
#tabs-1-content .card {
|
||||
border: none;
|
||||
}
|
||||
|
||||
#tabs-1-content .btn-clear {
|
||||
--mdc-icon-button-size: 40px;
|
||||
}
|
||||
|
||||
#tab-sell[active] {
|
||||
--mdc-theme-primary: rgb(255, 89, 89);
|
||||
}
|
||||
|
||||
#trade-portal-page {
|
||||
background: #fff;
|
||||
padding: 12px 24px;
|
||||
}
|
||||
|
||||
.divCard {
|
||||
border: 1px solid #eee;
|
||||
padding: 1em;
|
||||
box-shadow: 0 0.3px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 1px -1px rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5 {
|
||||
color: #333;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
flex: 0 1 auto;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0px 15px;
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
background-color: rgb(106, 108, 117);
|
||||
min-height: 40px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
#trade-portal {
|
||||
max-width: 100vw;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.box {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
height: 100%;
|
||||
}
|
||||
#trade-portal {}
|
||||
|
||||
#first-trade-section {
|
||||
display: grid;
|
||||
grid-template-columns:1fr 1fr 2fr;
|
||||
grid-auto-rows: max(450px);
|
||||
column-gap: 0.5em;
|
||||
row-gap: 0.4em;
|
||||
justify-items: stretch;
|
||||
align-items: stretch;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
#first-trade-section > div {
|
||||
}
|
||||
|
||||
#second-trade-section {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr;
|
||||
grid-auto-rows: max(450px);
|
||||
column-gap: 0.5em;
|
||||
row-gap: 0.4em;
|
||||
justify-items: stretch;
|
||||
align-items: stretch;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
#second-trade-section > div {
|
||||
}
|
||||
|
||||
#third-trade-section {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
#third-trade-section > div {
|
||||
}
|
||||
|
||||
.trade-chart {
|
||||
background-color: #eee;
|
||||
border: 2px #ddd solid;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.open-trades {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.no-last-seen {
|
||||
background: rgb(255, 89, 89);
|
||||
padding: 9px 1.3px;
|
||||
border-radius: 50%;
|
||||
width: 1rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.open-market-container {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.buy-sell {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-auto-rows: max(450px);
|
||||
column-gap: 0.5em;
|
||||
row-gap: 0.4em;
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 1em;
|
||||
border: 1px #666 solid;
|
||||
flex: 1 1 auto;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
justify-content: space-evenly;
|
||||
min-height: inherit;
|
||||
}
|
||||
|
||||
.cancel {
|
||||
--mdc-theme-primary: rgb(255, 89, 89);
|
||||
}
|
||||
|
||||
.border-wrapper {
|
||||
border: 1px #666 solid;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.you-have {
|
||||
color: #555;
|
||||
font-size: 15px;
|
||||
text-align: right;
|
||||
margin-top: 2px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.historic-trades {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.my-open-orders {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.my-historic-trades {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
width: auto !important;
|
||||
}
|
||||
|
||||
.buy-button {
|
||||
--mdc-theme-primary: rgba(55, 160, 51, 0.9);
|
||||
}
|
||||
|
||||
.sell-button {
|
||||
--mdc-theme-primary: rgb(255, 89, 89);
|
||||
}
|
||||
|
||||
.full-width {
|
||||
background-color: #fff;
|
||||
border: 2px #ddd solid;
|
||||
height: 100px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
vaading-grid{
|
||||
font-size: .8em;
|
||||
}
|
||||
|
||||
vaadin-grid-column {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.loadingContainer {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.loading,
|
||||
.loading:after {
|
||||
border-radius: 50%;
|
||||
width: 5em;
|
||||
height: 5em;
|
||||
}
|
||||
|
||||
.loading {
|
||||
margin: 45% auto;
|
||||
border-width: .6em;
|
||||
border-style: solid;
|
||||
border-color: rgba(3, 169, 244, 0.2) rgba(3, 169, 244, 0.2) rgba(3, 169, 244, 0.2) rgb(3, 169, 244);
|
||||
font-size: 10px;
|
||||
position: relative;
|
||||
text-indent: -9999em;
|
||||
transform: translateZ(0px);
|
||||
animation: 1.1s linear 0s infinite normal none running loadingAnimation;
|
||||
}
|
||||
|
||||
mwc-select#coinSelectionMenu {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
mwc-select#coinSelectionMenu mwc-list-item {
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
.coinName::before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
height: 26px;
|
||||
width: 45px;
|
||||
position: absolute;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
left: 10px;
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
.ltc.coinName:before {
|
||||
background-image: url('/img/qortltc.png');
|
||||
}
|
||||
|
||||
.doge.coinName:before {
|
||||
background-image: url('/img/qortdoge.png');
|
||||
}
|
||||
|
||||
.coinName {
|
||||
display: inline-block;
|
||||
height: 26px;
|
||||
padding-left: 45px;
|
||||
}
|
||||
|
||||
@-webkit-keyframes loadingAnimation {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes loadingAnimation {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 701px) {
|
||||
* {
|
||||
}
|
||||
|
||||
#trade-portal {}
|
||||
|
||||
#first-trade-section {
|
||||
display: grid;
|
||||
grid-template-columns:1fr 1fr 2fr;
|
||||
grid-auto-rows: max(450px);
|
||||
column-gap: 0.5em;
|
||||
row-gap: 0.4em;
|
||||
justify-items: stretch;
|
||||
align-items: stretch;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
#second-trade-section {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr;
|
||||
grid-auto-rows: max(450px);
|
||||
column-gap: 0.5em;
|
||||
row-gap: 0.4em;
|
||||
justify-items: stretch;
|
||||
align-items: stretch;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.buy-sell {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-auto-rows: max(450px);
|
||||
column-gap: 0.5em;
|
||||
row-gap: 0.4em;
|
||||
}
|
||||
|
||||
}
|
||||
`;
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
||||
constructor() {
|
||||
|
||||
@ -7,8 +7,7 @@ import '@material/mwc-icon'
|
||||
import '@material/mwc-button'
|
||||
import '@material/mwc-dialog'
|
||||
import '@polymer/paper-spinner/paper-spinner-lite.js'
|
||||
import '@vaadin/grid/vaadin-grid.js'
|
||||
import '@vaadin/grid/theme/material/all-imports.js'
|
||||
import '@vaadin/grid'
|
||||
import '@github/time-elements'
|
||||
|
||||
const parentEpml = new Epml({ type: 'WINDOW', source: window.parent })
|
||||
@ -30,444 +29,457 @@ class MultiWallet extends LitElement {
|
||||
}
|
||||
|
||||
static get styles() {
|
||||
return [
|
||||
css`
|
||||
#pages {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
/* margin: 20px; */
|
||||
padding: 10px 5px 5px 5px;
|
||||
margin: 0px 20px 20px 20px;
|
||||
}
|
||||
return [
|
||||
css`
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
--lumo-primary-text-color: rgb(0, 167, 245);
|
||||
--lumo-primary-color-50pct: rgba(0, 167, 245, 0.5);
|
||||
--lumo-primary-color-10pct: rgba(0, 167, 245, 0.1);
|
||||
--lumo-primary-color: hsl(199, 100%, 48%);
|
||||
}
|
||||
|
||||
#pages > button {
|
||||
user-select: none;
|
||||
padding: 5px;
|
||||
margin: 0 5px;
|
||||
border-radius: 10%;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
font: inherit;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
#pages {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 10px 5px 5px 5px;
|
||||
margin: 0px 20px 20px 20px;
|
||||
}
|
||||
|
||||
#pages > button:not([disabled]):hover,
|
||||
#pages > button:focus {
|
||||
color: #ccc;
|
||||
background-color: #eee;
|
||||
}
|
||||
#pages > button {
|
||||
user-select: none;
|
||||
padding: 5px;
|
||||
margin: 0 5px;
|
||||
border-radius: 10%;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
font: inherit;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#pages > button[selected] {
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
background-color: #ccc;
|
||||
}
|
||||
#pages > button:not([disabled]):hover,
|
||||
#pages > button:focus {
|
||||
color: #ccc;
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
#pages > button[disabled] {
|
||||
opacity: 0.5;
|
||||
cursor: default;
|
||||
}
|
||||
.red {
|
||||
color: var(--paper-red-500);
|
||||
}
|
||||
.green {
|
||||
color: var(--paper-green-500);
|
||||
}
|
||||
paper-spinner-lite {
|
||||
height: 75px;
|
||||
width: 75px;
|
||||
--paper-spinner-color: var(--primary-color);
|
||||
--paper-spinner-stroke-width: 2px;
|
||||
}
|
||||
.unconfirmed {
|
||||
font-style: italic;
|
||||
}
|
||||
.roboto {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
}
|
||||
.mono {
|
||||
font-family: 'Roboto Mono', monospace;
|
||||
}
|
||||
.weight-100 {
|
||||
font-weight: 100;
|
||||
}
|
||||
#pages > button[selected] {
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
background-color: #ccc;
|
||||
}
|
||||
|
||||
.text-white-primary {
|
||||
color: var(--white-primary);
|
||||
}
|
||||
.text-white-secondary {
|
||||
color: var(--white-secondary);
|
||||
}
|
||||
.text-white-disabled {
|
||||
color: var(--white-disabled);
|
||||
}
|
||||
.text-white-hint {
|
||||
color: var(--white-divider);
|
||||
}
|
||||
#pages > button[disabled] {
|
||||
opacity: 0.5;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
table {
|
||||
border: none;
|
||||
}
|
||||
table td,
|
||||
th {
|
||||
white-space: nowrap;
|
||||
text-align: left;
|
||||
font-size: 14px;
|
||||
padding: 0 12px;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
}
|
||||
table tr {
|
||||
height: 48px;
|
||||
}
|
||||
table tr:hover td {
|
||||
background: #eee;
|
||||
}
|
||||
table tr th {
|
||||
color: #666;
|
||||
font-size: 12px;
|
||||
}
|
||||
table tr td {
|
||||
margin: 0;
|
||||
}
|
||||
.white-bg {
|
||||
height: 100vh;
|
||||
background: #fff;
|
||||
}
|
||||
span {
|
||||
font-size: 18px;
|
||||
word-break: break-all;
|
||||
}
|
||||
.title {
|
||||
font-weight: 600;
|
||||
font-size: 12px;
|
||||
line-height: 32px;
|
||||
opacity: 0.66;
|
||||
}
|
||||
#transactionList {
|
||||
padding: 0;
|
||||
}
|
||||
#transactionList > * {
|
||||
}
|
||||
.color-in {
|
||||
color: #02977e;
|
||||
background-color: rgba(0, 201, 167, 0.2);
|
||||
font-weight: 700;
|
||||
font-size: 0.60938rem;
|
||||
border-radius: 0.25rem !important;
|
||||
padding: 0.2rem 0.5rem;
|
||||
margin-left: 4px;
|
||||
}
|
||||
.color-out {
|
||||
color: #b47d00;
|
||||
background-color: rgba(219, 154, 4, 0.2);
|
||||
font-weight: 700;
|
||||
font-size: 0.60938rem;
|
||||
border-radius: 0.25rem !important;
|
||||
padding: 0.2rem 0.5rem;
|
||||
margin-left: 4px;
|
||||
}
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.red {
|
||||
color: var(--paper-red-500);
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: white;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
.green {
|
||||
color: var(--paper-green-500);
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 0;
|
||||
font-weight: 400;
|
||||
color: #707584;
|
||||
font: 24px/24px 'Open Sans', sans-serif;
|
||||
}
|
||||
paper-spinner-lite {
|
||||
height: 75px;
|
||||
width: 75px;
|
||||
--paper-spinner-color: var(--primary-color);
|
||||
--paper-spinner-stroke-width: 2px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 0 0 5px;
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
line-height: 18px;
|
||||
}
|
||||
.unconfirmed {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* Styles for Larger Screen Sizes */
|
||||
@media (min-width: 765px) {
|
||||
.wrapper {
|
||||
display: grid;
|
||||
grid-template-columns: 0.5fr 3.5fr;
|
||||
}
|
||||
}
|
||||
.roboto {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
}
|
||||
|
||||
.mono {
|
||||
font-family: 'Roboto Mono', monospace;
|
||||
}
|
||||
|
||||
.weight-100 {
|
||||
font-weight: 100;
|
||||
}
|
||||
|
||||
|
||||
.text-white-primary {
|
||||
color: var(--white-primary);
|
||||
}
|
||||
|
||||
.text-white-secondary {
|
||||
color: var(--white-secondary);
|
||||
}
|
||||
.text-white-disabled {
|
||||
color: var(--white-disabled);
|
||||
}
|
||||
.text-white-hint {
|
||||
color: var(--white-divider);
|
||||
}
|
||||
|
||||
table {
|
||||
border: none;
|
||||
}
|
||||
table td,
|
||||
th {
|
||||
white-space: nowrap;
|
||||
text-align: left;
|
||||
font-size: 14px;
|
||||
padding: 0 12px;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
}
|
||||
table tr {
|
||||
height: 48px;
|
||||
}
|
||||
table tr:hover td {
|
||||
background: #eee;
|
||||
}
|
||||
table tr th {
|
||||
color: #666;
|
||||
font-size: 12px;
|
||||
}
|
||||
table tr td {
|
||||
margin: 0;
|
||||
}
|
||||
.white-bg {
|
||||
height: 100vh;
|
||||
background: #fff;
|
||||
}
|
||||
span {
|
||||
font-size: 18px;
|
||||
word-break: break-all;
|
||||
}
|
||||
.title {
|
||||
font-weight: 600;
|
||||
font-size: 12px;
|
||||
line-height: 32px;
|
||||
opacity: 0.66;
|
||||
}
|
||||
#transactionList {
|
||||
padding: 0;
|
||||
}
|
||||
#transactionList > * {
|
||||
}
|
||||
.color-in {
|
||||
color: #02977e;
|
||||
background-color: rgba(0, 201, 167, 0.2);
|
||||
font-weight: 700;
|
||||
font-size: 0.60938rem;
|
||||
border-radius: 0.25rem !important;
|
||||
padding: 0.2rem 0.5rem;
|
||||
margin-left: 4px;
|
||||
}
|
||||
.color-out {
|
||||
color: #b47d00;
|
||||
background-color: rgba(219, 154, 4, 0.2);
|
||||
font-weight: 700;
|
||||
font-size: 0.60938rem;
|
||||
border-radius: 0.25rem !important;
|
||||
padding: 0.2rem 0.5rem;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: white;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 0;
|
||||
font-weight: 400;
|
||||
color: #707584;
|
||||
font: 24px/24px 'Open Sans', sans-serif;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 0 0 5px;
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
/* Styles for Larger Screen Sizes */
|
||||
@media (min-width: 765px) {
|
||||
.wrapper {
|
||||
margin: 0 auto;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
border-radius: 8px;
|
||||
background-color: #fff;
|
||||
display: grid;
|
||||
grid-template-columns: 0.5fr 3.5fr;
|
||||
}
|
||||
}
|
||||
|
||||
.wallet {
|
||||
width: 170px;
|
||||
height: 100vh;
|
||||
border-top-left-radius: inherit;
|
||||
border-bottom-left-radius: inherit;
|
||||
.wrapper {
|
||||
margin: 0 auto;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
border-radius: 8px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.wallet {
|
||||
width: 170px;
|
||||
height: 100vh;
|
||||
border-top-left-radius: inherit;
|
||||
border-bottom-left-radius: inherit;
|
||||
border-right: 1px solid #eee;
|
||||
}
|
||||
}
|
||||
|
||||
.transactions-wrapper {
|
||||
width: 100%;
|
||||
padding: 50px 0 0 0;
|
||||
height: 100%;
|
||||
}
|
||||
.transactions-wrapper {
|
||||
width: 100%;
|
||||
padding: 50px 0 0 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.wallet-header {
|
||||
margin: 0 20px;
|
||||
}
|
||||
.wallet-header {
|
||||
margin: 0 20px;
|
||||
}
|
||||
|
||||
.wallet-address {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 18px;
|
||||
color: var(--mdc-theme-primary, #444750);
|
||||
margin: 4px 0 20px;
|
||||
}
|
||||
.wallet-address {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 18px;
|
||||
color: var(--mdc-theme-primary, #444750);
|
||||
margin: 4px 0 20px;
|
||||
}
|
||||
|
||||
.wallet-balance {
|
||||
display: inline-block;
|
||||
font-weight: 600;
|
||||
font-size: 32px;
|
||||
color: var(--mdc-theme-primary, #444750);
|
||||
}
|
||||
.wallet-balance {
|
||||
display: inline-block;
|
||||
font-weight: 600;
|
||||
font-size: 32px;
|
||||
color: var(--mdc-theme-primary, #444750);
|
||||
}
|
||||
|
||||
#transactions {
|
||||
margin-top: 60px;
|
||||
margin-left: 20px;
|
||||
margin-right: 20px;
|
||||
border-top: 1px solid #e5e5e5;
|
||||
padding-top: 0px;
|
||||
height: 100%;
|
||||
}
|
||||
#transactions {
|
||||
margin-top: 60px;
|
||||
margin-left: 20px;
|
||||
margin-right: 20px;
|
||||
border-top: 1px solid #e5e5e5;
|
||||
padding-top: 0px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.show {
|
||||
animation: fade-in 0.3s 1;
|
||||
}
|
||||
.show {
|
||||
animation: fade-in 0.3s 1;
|
||||
}
|
||||
|
||||
.transaction-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
padding-left: 40px;
|
||||
margin-bottom: 45px;
|
||||
margin-right: 50px;
|
||||
}
|
||||
.transaction-item::before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
border: 2px solid #e1e1e1;
|
||||
border-radius: 50%;
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
left: 0;
|
||||
top: 10px;
|
||||
box-sizing: border-box;
|
||||
vertical-align: middle;
|
||||
color: #666666;
|
||||
}
|
||||
.transaction-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
padding-left: 40px;
|
||||
margin-bottom: 45px;
|
||||
margin-right: 50px;
|
||||
}
|
||||
.transaction-item::before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
border: 2px solid #e1e1e1;
|
||||
border-radius: 50%;
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
left: 0;
|
||||
top: 10px;
|
||||
box-sizing: border-box;
|
||||
vertical-align: middle;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.credit::before {
|
||||
content: '+';
|
||||
font-size: 25px;
|
||||
line-height: 19px;
|
||||
padding: 0 4px 0;
|
||||
}
|
||||
.credit::before {
|
||||
content: '+';
|
||||
font-size: 25px;
|
||||
line-height: 19px;
|
||||
padding: 0 4px 0;
|
||||
}
|
||||
|
||||
.debit::before {
|
||||
content: '-';
|
||||
font-size: 20px;
|
||||
line-height: 21px;
|
||||
padding: 0 5px;
|
||||
}
|
||||
.debit::before {
|
||||
content: '-';
|
||||
font-size: 20px;
|
||||
line-height: 21px;
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
.transaction-item .details {
|
||||
font-size: 14px;
|
||||
line-height: 14px;
|
||||
color: #999;
|
||||
}
|
||||
.transaction-item .details {
|
||||
font-size: 14px;
|
||||
line-height: 14px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.transaction-item_details {
|
||||
width: 270px;
|
||||
}
|
||||
.transaction-item_details {
|
||||
width: 270px;
|
||||
}
|
||||
|
||||
.transaction-item_amount .amount {
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
line-height: 45px;
|
||||
position: relative;
|
||||
margin: 0;
|
||||
display: inline-block;
|
||||
}
|
||||
.transaction-item_amount .amount {
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
line-height: 45px;
|
||||
position: relative;
|
||||
margin: 0;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.currency-box {
|
||||
display: flex;
|
||||
background-color: #fff;
|
||||
text-align: center;
|
||||
padding: 12px;
|
||||
cursor: pointer;
|
||||
transition: 0.1s ease-in-out;
|
||||
}
|
||||
.currency-box:not(:last-child) {
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
.currency-box {
|
||||
display: flex;
|
||||
background-color: #fff;
|
||||
text-align: center;
|
||||
padding: 12px;
|
||||
cursor: pointer;
|
||||
transition: 0.1s ease-in-out;
|
||||
}
|
||||
.currency-box:not(:last-child) {
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.active {
|
||||
background: #ddd;
|
||||
}
|
||||
.active {
|
||||
background: #ddd;
|
||||
}
|
||||
|
||||
.currency-image {
|
||||
display: inline-block;
|
||||
height: 42px;
|
||||
width: 42px;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
border-radius: 3px;
|
||||
filter: grayscale(100%);
|
||||
}
|
||||
.currency-box.active .currency-image,
|
||||
.currency-box:hover .currency-image {
|
||||
filter: none;
|
||||
}
|
||||
.currency-box:hover {
|
||||
background: #bbb;
|
||||
}
|
||||
.currency-box.active,
|
||||
.currency-box:hover .currency-text {
|
||||
font-weight: 500;
|
||||
}
|
||||
.currency-image {
|
||||
display: inline-block;
|
||||
height: 42px;
|
||||
width: 42px;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
border-radius: 3px;
|
||||
filter: grayscale(100%);
|
||||
}
|
||||
.currency-box.active .currency-image,
|
||||
.currency-box:hover .currency-image {
|
||||
filter: none;
|
||||
}
|
||||
.currency-box:hover {
|
||||
background: #bbb;
|
||||
}
|
||||
.currency-box.active,
|
||||
.currency-box:hover .currency-text {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.currency-text {
|
||||
margin: auto 0;
|
||||
margin-left: 8px;
|
||||
font-size: 20px;
|
||||
color: #777;
|
||||
}
|
||||
.currency-text {
|
||||
margin: auto 0;
|
||||
margin-left: 8px;
|
||||
font-size: 20px;
|
||||
color: #777;
|
||||
}
|
||||
|
||||
.qort .currency-image {
|
||||
background-image: url('/img/qort.png');
|
||||
}
|
||||
.qort .currency-image {
|
||||
background-image: url('/img/qort.png');
|
||||
}
|
||||
|
||||
.btc .currency-image {
|
||||
background-image: url('/img/btc.png');
|
||||
}
|
||||
.btc .currency-image {
|
||||
background-image: url('/img/btc.png');
|
||||
}
|
||||
|
||||
.ltc .currency-image {
|
||||
background-image: url('/img/ltc.png');
|
||||
}
|
||||
.ltc .currency-image {
|
||||
background-image: url('/img/ltc.png');
|
||||
}
|
||||
|
||||
.doge .currency-image {
|
||||
background-image: url('/img/doge.png');
|
||||
}
|
||||
.doge .currency-image {
|
||||
background-image: url('/img/doge.png');
|
||||
}
|
||||
|
||||
.card-list {
|
||||
margin-top: 20px;
|
||||
}
|
||||
.card-list {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.card-list .currency-image {
|
||||
cursor: pointer;
|
||||
margin-right: 15px;
|
||||
transition: 0.1s;
|
||||
}
|
||||
.card-list .currency-image {
|
||||
cursor: pointer;
|
||||
margin-right: 15px;
|
||||
transition: 0.1s;
|
||||
}
|
||||
|
||||
.card-list .currency-image:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
.card-list .currency-image:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
/* animations */
|
||||
@keyframes fade-in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
/* animations */
|
||||
@keyframes fade-in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* media queries */
|
||||
@media (max-width: 863px) {
|
||||
.wallet {
|
||||
width: 100%;
|
||||
height: max-content;
|
||||
border-top-right-radius: inherit;
|
||||
padding-bottom: 25px;
|
||||
}
|
||||
.cards {
|
||||
margin-top: 25px;
|
||||
}
|
||||
.currency-box:nth-of-type(2) {
|
||||
margin-right: 0;
|
||||
}
|
||||
/* media queries */
|
||||
@media (max-width: 863px) {
|
||||
.wallet {
|
||||
width: 100%;
|
||||
height: max-content;
|
||||
border-top-right-radius: inherit;
|
||||
padding-bottom: 25px;
|
||||
}
|
||||
.cards {
|
||||
margin-top: 25px;
|
||||
}
|
||||
.currency-box:nth-of-type(2) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 764px) {
|
||||
.wallet {
|
||||
width: 100%;
|
||||
height: max-content;
|
||||
border-top-right-radius: inherit;
|
||||
padding-bottom: 25px;
|
||||
}
|
||||
.cards {
|
||||
margin-top: 25px;
|
||||
}
|
||||
.currency-box {
|
||||
width: calc(50% - 25px);
|
||||
max-width: 260px;
|
||||
display: inline-block;
|
||||
margin-right: 25px;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
.currency-box:nth-of-type(2) {
|
||||
margin-right: 0;
|
||||
}
|
||||
@media (max-width: 764px) {
|
||||
.wallet {
|
||||
width: 100%;
|
||||
height: max-content;
|
||||
border-top-right-radius: inherit;
|
||||
padding-bottom: 25px;
|
||||
}
|
||||
.cards {
|
||||
margin-top: 25px;
|
||||
}
|
||||
.currency-box {
|
||||
width: calc(50% - 25px);
|
||||
max-width: 260px;
|
||||
display: inline-block;
|
||||
margin-right: 25px;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
.currency-box:nth-of-type(2) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 530px) {
|
||||
h3 {
|
||||
line-height: 24px;
|
||||
}
|
||||
.cards {
|
||||
text-align: center;
|
||||
}
|
||||
.currency-box {
|
||||
width: calc(100% - 25px);
|
||||
max-width: 260px;
|
||||
}
|
||||
.currency-box:nth-of-type(2) {
|
||||
margin-right: 25px;
|
||||
}
|
||||
.currency-box:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.wallet-balance {
|
||||
font-size: 22px;
|
||||
}
|
||||
@media (max-width: 530px) {
|
||||
h3 {
|
||||
line-height: 24px;
|
||||
}
|
||||
.cards {
|
||||
text-align: center;
|
||||
}
|
||||
.currency-box {
|
||||
width: calc(100% - 25px);
|
||||
max-width: 260px;
|
||||
}
|
||||
.currency-box:nth-of-type(2) {
|
||||
margin-right: 25px;
|
||||
}
|
||||
.currency-box:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.wallet-balance {
|
||||
font-size: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 390px) {
|
||||
.wallet {
|
||||
height: max-content;
|
||||
padding: 50px 25px;
|
||||
}
|
||||
.transactions-wrapper {
|
||||
padding: 50px 25px;
|
||||
}
|
||||
h2 {
|
||||
font: 18px/24px 'Open Sans', sans-serif;
|
||||
}
|
||||
@media (max-width: 390px) {
|
||||
.wallet {
|
||||
height: max-content;
|
||||
padding: 50px 25px;
|
||||
}
|
||||
`,
|
||||
]
|
||||
.transactions-wrapper {
|
||||
padding: 50px 25px;
|
||||
}
|
||||
h2 {
|
||||
font: 18px/24px 'Open Sans', sans-serif;
|
||||
}
|
||||
}
|
||||
`,
|
||||
]
|
||||
}
|
||||
|
||||
constructor() {
|
||||
@ -676,20 +688,20 @@ class MultiWallet extends LitElement {
|
||||
</template>
|
||||
</dom-module>
|
||||
<div style="padding-left:12px;" ?hidden="${!this.isEmptyArray(transactions)}">Address has no transactions yet.</div>
|
||||
<vaadin-grid theme="${coin}" id="${coin}TransactionsGrid" ?hidden="${this.isEmptyArray(this.wallets.get(this._selectedWallet).transactions)}" page-size="20" all-rows-visible>
|
||||
<vaadin-grid theme="large" id="${coin}TransactionsGrid" ?hidden="${this.isEmptyArray(this.wallets.get(this._selectedWallet).transactions)}" page-size="25" all-rows-visible>
|
||||
<vaadin-grid-column
|
||||
auto-width
|
||||
.renderer=${(root, column, data) => {
|
||||
if (!currentBlockHeight) {
|
||||
return render(html``, root)
|
||||
}
|
||||
const confirmed = data.item.confirmations >= requiredConfirmations
|
||||
if (confirmed) {
|
||||
render(html`<mwc-icon title="${data.item.confirmations} Confirmations" style="color: #00C851">check</mwc-icon>`, root)
|
||||
} else {
|
||||
render(html`<mwc-icon title="${data.item.confirmations || 0}/${requiredConfirmations} Confirmations" style="color: #777">schedule</mwc-icon>`, root)
|
||||
}
|
||||
}}
|
||||
if (!currentBlockHeight) {
|
||||
return render(html``, root)
|
||||
}
|
||||
const confirmed = data.item.confirmations >= requiredConfirmations
|
||||
if (confirmed) {
|
||||
render(html`<mwc-icon title="${data.item.confirmations} Confirmations" style="color: #00C851">check</mwc-icon>`, root)
|
||||
} else {
|
||||
render(html`<mwc-icon title="${data.item.confirmations || 0}/${requiredConfirmations} Confirmations" style="color: #777">schedule</mwc-icon>`, root)
|
||||
}
|
||||
}}
|
||||
>
|
||||
</vaadin-grid-column>
|
||||
<vaadin-grid-column
|
||||
@ -697,8 +709,8 @@ class MultiWallet extends LitElement {
|
||||
resizable
|
||||
header="Type"
|
||||
.renderer=${(root, column, data) => {
|
||||
render(html` ${data.item.type} ${data.item.creatorAddress === this.wallets.get('qort').wallet.address ? html`<span class="color-out">OUT</span>` : html`<span class="color-in">IN</span>`} `, root)
|
||||
}}
|
||||
render(html` ${data.item.type} ${data.item.creatorAddress === this.wallets.get('qort').wallet.address ? html`<span class="color-out">OUT</span>` : html`<span class="color-in">IN</span>`} `, root)
|
||||
}}
|
||||
>
|
||||
</vaadin-grid-column>
|
||||
<vaadin-grid-column auto-width resizable header="Sender" path="creatorAddress"></vaadin-grid-column>
|
||||
@ -710,9 +722,9 @@ class MultiWallet extends LitElement {
|
||||
resizable
|
||||
header="Time"
|
||||
.renderer=${(root, column, data) => {
|
||||
const time = new Date(data.item.timestamp)
|
||||
render(html` <time-ago datetime=${time.toISOString()}> </time-ago> `, root)
|
||||
}}
|
||||
const time = new Date(data.item.timestamp)
|
||||
render(html` <time-ago datetime=${time.toISOString()}> </time-ago> `, root)
|
||||
}}
|
||||
>
|
||||
</vaadin-grid-column>
|
||||
</vaadin-grid>
|
||||
@ -723,16 +735,16 @@ class MultiWallet extends LitElement {
|
||||
renderBTCLikeTransactions(transactions, coin) {
|
||||
return html`
|
||||
<div style="padding-left:12px;" ?hidden="${!this.isEmptyArray(transactions)}">Address has no transactions yet.</div>
|
||||
<vaadin-grid id="${coin}TransactionsGrid" ?hidden="${this.isEmptyArray(this.wallets.get(this._selectedWallet).transactions)}" page-size="20" all-rows-visible>
|
||||
<vaadin-grid theme="large" id="${coin}TransactionsGrid" ?hidden="${this.isEmptyArray(this.wallets.get(this._selectedWallet).transactions)}" page-size="25" all-rows-visible>
|
||||
<vaadin-grid-column auto-width resizable header="Transaction Hash" path="txHash"></vaadin-grid-column>
|
||||
<vaadin-grid-column
|
||||
auto-width
|
||||
resizable
|
||||
header="Total Amount"
|
||||
.renderer=${(root, column, data) => {
|
||||
const amount = (Number(data.item.totalAmount) / 1e8).toFixed(8)
|
||||
render(html`${amount}`, root)
|
||||
}}
|
||||
const amount = (Number(data.item.totalAmount) / 1e8).toFixed(8)
|
||||
render(html`${amount}`, root)
|
||||
}}
|
||||
>
|
||||
</vaadin-grid-column>
|
||||
<vaadin-grid-column
|
||||
@ -740,9 +752,9 @@ class MultiWallet extends LitElement {
|
||||
resizable
|
||||
header="Time"
|
||||
.renderer=${(root, column, data) => {
|
||||
const time = new Date(data.item.timestamp * 1000)
|
||||
render(html` <time-ago datetime=${time.toISOString()}> </time-ago> `, root)
|
||||
}}
|
||||
const time = new Date(data.item.timestamp * 1000)
|
||||
render(html` <time-ago datetime=${time.toISOString()}> </time-ago> `, root)
|
||||
}}
|
||||
>
|
||||
</vaadin-grid-column>
|
||||
</vaadin-grid>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user