|
|
@ -1,16 +1,13 @@ |
|
|
|
<template> |
|
|
|
<div class="channel-list-container"> |
|
|
|
<div class="channel-list"> |
|
|
|
<b-row |
|
|
|
v-for="(channel, index) in [...channels, ...channels]" |
|
|
|
:key="index" |
|
|
|
class="py-3 px-4 channel" |
|
|
|
align-v="center" |
|
|
|
> |
|
|
|
<b-col col cols="12" xl="3"> |
|
|
|
<!-- on large screens --> |
|
|
|
<div class="d-none d-xl-block"> |
|
|
|
<!-- <div> |
|
|
|
<transition-group name="list" appear> |
|
|
|
<div v-for="(channel, index) in channels" :key="index" class="py-3 px-4 channel"> |
|
|
|
<b-row align-v="center"> |
|
|
|
<b-col col cols="12" xl="3"> |
|
|
|
<!-- on large screens --> |
|
|
|
<div class="d-none d-xl-block"> |
|
|
|
<!-- <div> |
|
|
|
<svg |
|
|
|
width="8" |
|
|
|
height="8" |
|
|
@ -22,16 +19,16 @@ |
|
|
|
<circle cx="4" cy="4" r="4" fill="#00CD98" :class="`fill-${variant}`" /> |
|
|
|
</svg> |
|
|
|
<small class>Channel {{index + 1}}</small> |
|
|
|
</div>--> |
|
|
|
<status variant="success" size="sm">Online</status> |
|
|
|
<span |
|
|
|
class="text-muted d-block" |
|
|
|
>{{ channel.initiator ? `Opened by you` : `Opened by peer` }}</span> |
|
|
|
</div> |
|
|
|
</div>--> |
|
|
|
<status variant="success" size="sm">Online</status> |
|
|
|
<span |
|
|
|
class="text-muted d-block" |
|
|
|
>{{ channel.initiator ? `Opened by you` : `Opened by peer` }}</span> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- on small screens --> |
|
|
|
<div class="d-xl-none d-flex justify-content-between align-items-center mb-1"> |
|
|
|
<!-- <div> |
|
|
|
<!-- on small screens --> |
|
|
|
<div class="d-xl-none d-flex justify-content-between align-items-center mb-1"> |
|
|
|
<!-- <div> |
|
|
|
<svg |
|
|
|
width="8" |
|
|
|
height="8" |
|
|
@ -43,34 +40,36 @@ |
|
|
|
<circle cx="4" cy="4" r="4" fill="#00CD98" :class="`fill-${variant}`" /> |
|
|
|
</svg> |
|
|
|
<small class="text-muted">Channel {{index + 1}}</small> |
|
|
|
</div>--> |
|
|
|
<status variant="success" size="sm">Online</status> |
|
|
|
<small |
|
|
|
class="text-muted d-block" |
|
|
|
>{{ channel.initiator ? `Opened by you` : `Opened by peer` }}</small> |
|
|
|
</div> |
|
|
|
</b-col> |
|
|
|
<b-col col cols="12" xl="9"> |
|
|
|
<div class="channel"> |
|
|
|
<div class="channel-balances d-flex justify-content-between"> |
|
|
|
<span |
|
|
|
class="text-primary font-weight-" |
|
|
|
>{{ Number(channel.localBalance).toLocaleString() }} Sats</span> |
|
|
|
<span |
|
|
|
class="text-success font-weight-" |
|
|
|
>{{ Number(channel.remoteBalance).toLocaleString() }} Sats</span> |
|
|
|
</div> |
|
|
|
<div |
|
|
|
class="channel-bar my-1" |
|
|
|
:style="{background: getChannelBarGradient(Number(channel.localBalance), Number(channel.remoteBalance))}" |
|
|
|
></div> |
|
|
|
<div class="channel-balances d-flex justify-content-between"> |
|
|
|
<small class="text-muted">Max Send</small> |
|
|
|
<small class="text-muted">Max Receive</small> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</b-col> |
|
|
|
</b-row> |
|
|
|
</div>--> |
|
|
|
<status variant="success" size="sm">Online</status> |
|
|
|
<small |
|
|
|
class="text-muted d-block" |
|
|
|
>{{ channel.initiator ? `Opened by you` : `Opened by peer` }}</small> |
|
|
|
</div> |
|
|
|
</b-col> |
|
|
|
<b-col col cols="12" xl="9"> |
|
|
|
<div class="channel"> |
|
|
|
<div class="channel-balances d-flex justify-content-between"> |
|
|
|
<span |
|
|
|
class="text-primary font-weight-" |
|
|
|
>{{ Number(channel.localBalance).toLocaleString() }} Sats</span> |
|
|
|
<span |
|
|
|
class="text-success font-weight-" |
|
|
|
>{{ Number(channel.remoteBalance).toLocaleString() }} Sats</span> |
|
|
|
</div> |
|
|
|
<div |
|
|
|
class="channel-bar my-1" |
|
|
|
:style="{background: getChannelBarGradient(Number(channel.localBalance), Number(channel.remoteBalance))}" |
|
|
|
></div> |
|
|
|
<div class="channel-balances d-flex justify-content-between"> |
|
|
|
<small class="text-muted">Max Send</small> |
|
|
|
<small class="text-muted">Max Receive</small> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</b-col> |
|
|
|
</b-row> |
|
|
|
</div> |
|
|
|
</transition-group> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
@ -150,7 +149,7 @@ export default { |
|
|
|
} |
|
|
|
} |
|
|
|
.channel-list { |
|
|
|
max-height: 20rem; |
|
|
|
height: 20rem; //to do: change to max-height |
|
|
|
overflow-y: scroll; |
|
|
|
-webkit-overflow-scrolling: touch; //momentum scroll on iOS |
|
|
|
} |
|
|
@ -166,4 +165,27 @@ export default { |
|
|
|
border-radius: 5px; |
|
|
|
background: red; |
|
|
|
} |
|
|
|
|
|
|
|
//list transitions |
|
|
|
|
|
|
|
.list-enter-active, |
|
|
|
.list-leave-active { |
|
|
|
transition: transform 0.8s, opacity 0.8s ease; |
|
|
|
} |
|
|
|
.list-enter { |
|
|
|
transform: translate3d(0, 10px, 0); |
|
|
|
opacity: 0; |
|
|
|
} |
|
|
|
.list-enter-to { |
|
|
|
transform: translate3d(0, 0, 0); |
|
|
|
opacity: 1; |
|
|
|
} |
|
|
|
.list-leave { |
|
|
|
transform: translate3d(0, 0, 0); |
|
|
|
opacity: 1; |
|
|
|
} |
|
|
|
.list-leave-to { |
|
|
|
transform: translate3d(0, 10px, 0); |
|
|
|
opacity: 0; |
|
|
|
} |
|
|
|
</style> |
|
|
|