lukechilds
/
umbrel-dashboard
mirror of https://github.com/lukechilds/umbrel-dashboard.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

responsiveness

readme
Mayank 5 years ago
parent
f0dd052b4c
commit
e2f9379707
9 changed files with 72 additions and 64 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 18
      src/components/BitcoinWallet.vue
  2. 4
      src/components/Blockchain.vue
  3. 4
      src/components/CardWidget.vue
  4. 2
      src/components/Channels/Channel.vue
  5. 24
      src/components/LightningWallet.vue
  6. 6
      src/layouts/DashboardLayout.vue
  7. 10
      src/views/Bitcoin.vue
  8. 18
      src/views/Dashboard.vue
  9. 2
      src/views/Lightning.vue

18
src/components/BitcoinWallet.vue
View File

@ -13,7 +13,7 @@
:loading="state.loading || (transactions.length > 0 && transactions[0]['type'] === 'loading')"
>
<!-- Back Button -->
<div class="px-3 px-sm-4 pt-2 pb-3" v-if="state.mode != 'balance'">
<div class="px-3 px-lg-4 pt-2 pb-3" v-if="state.mode != 'balance'">
<a href="#" class="card-link text-muted" v-on:click.stop.prevent="reset">
<svg
width="7"
@ -39,7 +39,7 @@
<!-- No transactions -->
<div
class="d-flex flex-column justify-content-center px-3 px-sm-4 zero-transactions-container"
class="d-flex flex-column justify-content-center px-3 px-lg-4 zero-transactions-container"
v-if="transactions.length === 0"
>
<svg
@ -73,7 +73,7 @@
<b-list-group-item
v-for="(tx, index) in transactions"
:key="index"
class="flex-column align-items-start px-3 px-sm-4"
class="flex-column align-items-start px-3 px-lg-4"
:href="getTxUrl(tx.hash)"
target="_blank"
>
@ -179,13 +179,13 @@
</div>
<!-- Link to Bitcoin Network Page -->
<!-- <div class="px-3 px-sm-4 pt-2" v-if="!isBitcoinPage">
<!-- <div class="px-3 px-lg-4 pt-2" v-if="!isBitcoinPage">
<router-link to="/bitcoin" class="card-link">Manage</router-link>
</div>-->
</div>
<!-- SCREEN/MODE: Withdraw Screen -->
<div class="px-3 px-sm-4" v-if="state.mode === 'withdraw'" key="mode-withdraw">
<div class="px-3 px-lg-4" v-if="state.mode === 'withdraw'" key="mode-withdraw">
<label class="sr-onlsy" for="input-withdrawal-amount">Sats</label>
<b-input
id="input-withdrawal-amount"
@ -211,7 +211,7 @@
</div>
<!-- SCREEN/MODE: Review Withdrawal -->
<div class="px-3 px-sm-4" v-if="state.mode === 'review-withdraw'" key="mode-review-withdraw">
<div class="px-3 px-lg-4" v-if="state.mode === 'review-withdraw'" key="mode-review-withdraw">
<div class="text-center pb-4">
<h3 class="mb-0">{{ Number(state.withdraw.amount).toLocaleString() }}</h3>
<span class="d-block mb-3 text-muted">Sats</span>
@ -250,7 +250,7 @@
<!-- SCREEN/MODE: Successfully Withdrawn -->
<div
class="px-3 px-sm-4 mode-withdrawn"
class="px-3 px-lg-4 mode-withdrawn"
v-if="state.mode === 'withdrawn'"
key="mode-withdrawn"
>
@ -283,7 +283,7 @@
<!-- SCREEN/MODE: Show Deposit Address -->
<div
class="px-3 px-sm-4 mode-deposit"
class="px-3 px-lg-4 mode-deposit"
v-if="this.state.mode === 'deposit'"
key="mode-deposit"
>
@ -321,7 +321,7 @@
</transition>
<!-- Error message -->
<small class="text-danger mb-2 d-block px-3 px-sm-4" v-if="state.error">
<small class="text-danger mb-2 d-block px-3 px-lg-4" v-if="state.error">
{{
state.error
}}

4
src/components/Blockchain.vue
View File

@ -6,7 +6,7 @@
<transition-group name="blockchain" mode="out-in" tag="ul">
<li
href="#"
class="flex-column align-items-start px-3 px-sm-4 blockchain-block"
class="flex-column align-items-start px-3 px-lg-4 blockchain-block"
v-for="block in blocks"
:key="block.height"
>
@ -62,7 +62,7 @@
<ul>
<li
href="#"
class="flex-column align-items-start px-3 px-sm-4 blockchain-block"
class="flex-column align-items-start px-3 px-lg-4 blockchain-block"
v-for="(fake, index) in [1,2,3]"
:key="index"
>

4
src/components/CardWidget.vue
View File

@ -3,7 +3,7 @@
<div class="card-custom-loading-bar" v-if="loading"></div>
<!-- <template v-slot:header></template> -->
<div>
<div class="card-custom-header py-4 px-3 px-sm-4">
<div class="card-custom-header py-4 px-3 px-lg-4">
<div class="d-flex w-100 justify-content-between align-items-center">
<h6 class="mb-0 font-weight-normal text-muted">{{ header }}</h6>
<status
@ -52,7 +52,7 @@
</div>
</div>
<div class="card-custom-body">
<div class="card-app-info px-3 px-sm-4" v-if="title || numericTitle">
<div class="card-app-info px-3 px-lg-4" v-if="title || numericTitle">
<div class="d-flex w-100 justify-content-between mb-4">
<div>
<div v-if="title">

2
src/components/Channels/Channel.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="py-3 px-3 px-sm-4 channel">
<div class="py-3 px-3 px-lg-4 channel">
<b-row>
<b-col col cols="12" xl="3">
<!-- on large screens -->

24
src/components/LightningWallet.vue
View File

@ -13,7 +13,7 @@
:loading="state.loading || (transactions.length > 0 && transactions[0]['type'] === 'loading')"
>
<!-- Back Button -->
<div class="px-3 px-sm-4 pt-2 pb-3" v-if="state.mode != 'balance'">
<div class="px-3 px-lg-4 pt-2 pb-3" v-if="state.mode != 'balance'">
<a href="#" class="card-link text-muted" v-on:click.stop.prevent="reset">
<svg
width="7"
@ -39,7 +39,7 @@
<!-- No transactions -->
<div
class="d-flex flex-column justify-content-center px-3 px-sm-4 zero-transactions-container"
class="d-flex flex-column justify-content-center px-3 px-lg-4 zero-transactions-container"
v-if="transactions.length === 0"
>
<!-- Piggy bank icon -->
@ -73,7 +73,7 @@
<b-list-group-item
v-for="(tx, index) in transactions"
:key="index"
class="flex-column align-items-start px-3 px-sm-4"
class="flex-column align-items-start px-3 px-lg-4"
href="#"
@click.prevent="showTransactionInfo(tx)"
>
@ -202,13 +202,13 @@
</div>
<!-- Link to Lightning Network Page -->
<!-- <div class="px-3 px-sm-4 pt-2" v-if="!isLightningPage">
<!-- <div class="px-3 px-lg-4 pt-2" v-if="!isLightningPage">
<router-link to="/lightning" class="card-link">Manage</router-link>
</div>-->
</div>
<!-- SCREEN/MODE: Paste Invoice Screen -->
<div class="px-3 px-sm-4 mode-send" v-else-if="state.mode === 'send'" key="mode-send">
<div class="px-3 px-lg-4 mode-send" v-else-if="state.mode === 'send'" key="mode-send">
<label class="sr-onlsy" for="input-sats">Paste Invoice</label>
<b-input
id="input-sats"
@ -236,7 +236,7 @@
</div>
<!-- SCREEN/MODE: Successfully paid invoice -->
<div class="px-3 px-sm-4 mode-sent" v-else-if="state.mode === 'sent'" key="mode-sent">
<div class="px-3 px-lg-4 mode-sent" v-else-if="state.mode === 'sent'" key="mode-sent">
<!-- Big green checkmark -->
<div class="checkmark mb-4">
<svg
@ -267,7 +267,7 @@
<!-- SCREEN/MODE: Create Invoice (Receive) -->
<div
class="px-3 px-sm-4 mode-receive"
class="px-3 px-lg-4 mode-receive"
v-else-if="state.mode === 'receive'"
key="mode-receive"
>
@ -300,7 +300,7 @@
<!-- SCREEN/MODE: Show Generated Invoice -->
<div
class="px-3 px-sm-4 mode-invoice"
class="px-3 px-lg-4 mode-invoice"
v-else-if="this.state.mode === 'invoice'"
key="mode-invoice"
>
@ -350,7 +350,7 @@
</div>
<!-- SCREEN/MODE: Received (invoice settled) -->
<div class="px-3 px-sm-4 mode-sent" v-else-if="state.mode === 'received'" key="mode-sent">
<div class="px-3 px-lg-4 mode-sent" v-else-if="state.mode === 'received'" key="mode-sent">
<!-- Big green checkmark -->
<div class="checkmark mb-4">
<svg
@ -383,7 +383,7 @@
<!-- SCREEN/MODE: payment info -->
<div
class="px-3 px-sm-4 mode-payment-success"
class="px-3 px-lg-4 mode-payment-success"
v-else-if="state.mode === 'payment-success'"
key="payment-success"
>
@ -423,7 +423,7 @@
<!-- SCREEN/MODE: invoice expired -->
<div
class="px-3 px-sm-4 mode-invoice-expired"
class="px-3 px-lg-4 mode-invoice-expired"
v-else-if="this.state.mode === 'invoice-expired'"
key="mode-invoice-info"
>
@ -454,7 +454,7 @@
</transition>
<!-- Error message -->
<small class="text-danger mb-2 d-block px-3 px-sm-4" v-if="state.error">{{ state.error }}</small>
<small class="text-danger mb-2 d-block px-3 px-lg-4" v-if="state.error">{{ state.error }}</small>
<!-- Buttons for all screens/modes -->
<div class="mt-2">

6
src/layouts/DashboardLayout.vue
View File

@ -65,15 +65,17 @@
</transition>
<b-row class="mx-0">
<b-col col lg="3" xl="2" class="d-none d-lg-block d-xl-block pl-0">
<b-col col lg="3" xl="2" class="d-none d-lg-block d-xl-block pl-0 pr-0 pr-xl-2">
<authenticated-vertical-navbar />
</b-col>
<b-col col lg="9" xl="10">
<!-- Content -->
<div class="pr-xl-2">
<transition name="change-page" mode="out-in">
<!-- Content -->
<router-view></router-view>
</transition>
</div>
<!-- Footer -->
<footer class="d-flex justify-content-end text-muted pr-3">

10
src/views/Bitcoin.vue
View File

@ -75,7 +75,7 @@
<b-dropdown-item variant="danger" href="#" disabled>Resync Blockchain</b-dropdown-item>
</template>
<div class>
<div class="px-3 px-sm-4 mb-3">
<div class="px-3 px-lg-4 mb-3">
<div class="w-100 d-flex justify-content-between mb-2">
<span class="align-self-end">Synchronized</span>
<h3 class="font-weight-normal mb-0">
@ -97,23 +97,23 @@
>{{ currentBlock.toLocaleString() }} of {{ blockHeight.toLocaleString() }} blocks</small>
</div>
<!-- low storage mode -->
<!-- <div class="d-flex w-100 justify-content-between px-3 px-sm-4 mb-4">
<!-- <div class="d-flex w-100 justify-content-between px-3 px-lg-4 mb-4">
<div>
<span class="d-block">Low Storage Mode</span>
<small class="text-muted d-block">Discard old blocks</small>
</div>
<toggle-switch class="align-self-center"></toggle-switch>
</div>-->
<p class="px-3 px-sm-4 mb-3">Latest Blocks</p>
<p class="px-3 px-lg-4 mb-3">Latest Blocks</p>
<blockchain :numBlocks="3"></blockchain>
<div class="px-3 px-sm-4 py-2"></div>
<div class="px-3 px-lg-4 py-2"></div>
</div>
</card-widget>
</b-col>
<b-col col cols="12" xl="4">
<card-widget header="Network">
<div class>
<div class="px-3 px-sm-4 pb-2">
<div class="px-3 px-lg-4 pb-2">
<b-row>
<!-- <b-col col cols="6" md="3" xl="6" v-for="stat in stats" :key="stat.title">
<bitcoin-network-stat

18
src/views/Dashboard.vue
View File

@ -25,19 +25,21 @@
:loading="syncPercent !== 100 || blocks.length === 0"
>
<div class>
<!-- <div class="d-flex w-100 justify-content-between px-3 px-sm-4">
<!-- <div class="d-flex w-100 justify-content-between px-3 px-lg-4">
<p class="mb-1">Connected Peers</p>
<p>8</p>
</div>-->
<!-- <p class="px-3 px-sm-4">Latest Blocks</p> -->
<!-- <p class="px-3 px-lg-4">Latest Blocks</p> -->
<blockchain></blockchain>
<div class="px-3 px-sm-4 py-3">
<div class="px-3 px-lg-4 py-3">
<router-link to="/bitcoin" class="card-link">Manage</router-link>
</div>
</div>
</card-widget>
</b-col>
<b-col col cols="12" md="6" xl="4">
<b-col col cols="12" xl="4">
<b-row>
<b-col col cols="12" md="6" xl="12">
<card-widget
header="Bitcoin Wallet"
:status="{text: 'Active', variant: 'success', blink: false}"
@ -50,10 +52,12 @@
sub-title="Sats"
icon="icon-app-bitcoin.svg"
>
<div class="px-3 px-sm-4 pt-2 pb-3">
<div class="px-3 px-lg-4 pt-2 pb-3">
<router-link to="/bitcoin" class="card-link">Manage</router-link>
</div>
</card-widget>
</b-col>
<b-col col cols="12" md="6" xl="12">
<card-widget
header="Tor"
:status="{text: 'Running', variant: 'success', blink: false}"
@ -61,10 +65,12 @@
sub-title="Traffic relayed through Tor"
icon="icon-app-tor.svg"
>
<div class="px-3 px-sm-4 pt-2 pb-3">
<div class="px-3 px-lg-4 pt-2 pb-3">
<router-link to="/settings" class="card-link">Manage</router-link>
</div>
</card-widget>
</b-col>
</b-row>
<!-- <card-widget
header="Example App"
status="Running"

2
src/views/Lightning.vue
View File

@ -114,7 +114,7 @@
>+ Open Channel</b-button>
</template>
<div class>
<div class="px-3 px-sm-4">
<div class="px-3 px-lg-4">
<b-row>
<b-col col cols="6" xl="3" v-for="stat in stats" :key="stat.title">
<bitcoin-network-stat

Write Preview
Loading…
Cancel
Save