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

nav

readme
Mayank 5 years ago
parent
e35010c57e
commit
98645790ca
5 changed files with 225 additions and 4 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. 5
      src/App.vue
  2. 7
      src/global-styles/_variables.scss
  3. 6
      src/router/index.js
  4. 209
      src/views/Dashboard.vue
  5. 2
      src/views/Home.vue

5
src/App.vue
View File

@ -13,7 +13,10 @@ export default {
name: "App",
mounted() {
const isDarkMode = this.$store.getters.isDarkMode;
document.body.style.background = isDarkMode ? "#1C1C26" : "#ffffff";
//onboarding
// document.body.style.background = isDarkMode ? "#1C1C26" : "#ffffff";
//dashboard
document.body.style.background = isDarkMode ? "#1C1C26" : "#F7F9FB";
}
};
</script>

7
src/global-styles/_variables.scss
View File

@ -6,7 +6,7 @@ $green: #00CD98;
$red: #F46E6E;
$spacer: 1.5rem;
$body-color: $black;
$font-family-sans-serif: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
$font-family-sans-serif: -apple-system, Roboto, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
$h1-font-size: $font-size-base * 5;
$h2-font-size: $font-size-base * 3;
$h3-font-size: $font-size-base * 2;
@ -14,4 +14,7 @@ $headings-font-weight: 900;
$list-group-item-padding-y: 1.5rem;
$list-group-item-padding-x: 1.5rem;
$list-group-border-color: rgba($black, .08);
$link-hover-decoration: none;
$link-hover-decoration: none;
$card-border-radius: 1rem;
$card-cap-bg: null;
$card-border-color: rgba($black, 0);

6
src/router/index.js
View File

@ -1,6 +1,7 @@
import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/Home.vue";
import Dashboard from "../views/Dashboard.vue";
Vue.use(VueRouter);
@ -9,6 +10,11 @@ const routes = [
path: "/",
name: "home",
component: Home
},
{
path: "/dashboard",
name: "dashboard",
component: Dashboard
}
];

209
src/views/Dashboard.vue
View File

@ -0,0 +1,209 @@
<template>
<div>
<b-navbar toggleable="lg" type="light" variant="default" class="nav-horizontal">
<div style="width: 280px;">
<b-navbar-brand href="#">
<img src="@/assets/logo.svg" alt="Umbrel" height="50" />
</b-navbar-brand>
</div>
<b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
<b-collapse id="nav-collapse" is-nav>
<b-navbar-nav>
<b-nav-form>
<svg
width="23"
height="24"
viewBox="0 0 23 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M18.709 9.99571C18.709 14.9774 14.7313 18.9914 9.85449 18.9914C4.97766 18.9914 1 14.9774 1 9.99571C1 5.01405 4.97766 1 9.85449 1C14.7313 1 18.709 5.01405 18.709 9.99571Z"
stroke="#C3C6D1"
stroke-width="2"
/>
<rect
width="2.06535"
height="9.12065"
rx="1.03267"
transform="matrix(0.702406 -0.711777 0.701711 0.712461 14.7881 17.4702)"
fill="#C3C6D1"
/>
</svg>
<b-form-input
size="sm"
class="input-search ml-1"
placeholder="Search for transactions, addresses, etc."
></b-form-input>
</b-nav-form>
</b-navbar-nav>
<!-- Right aligned nav items -->
<b-navbar-nav class="ml-auto">
<b-nav-item-dropdown right>
<!-- Using 'button-content' slot -->
<template v-slot:button-content>User</template>
<b-dropdown-item href="#">Profile</b-dropdown-item>
<b-dropdown-item href="#">Sign Out</b-dropdown-item>
</b-nav-item-dropdown>
</b-navbar-nav>
</b-collapse>
</b-navbar>
<b-row>
<b-col col sm="2">
<div class="nav-vertical">
<div class="balance-container w-100 px-3 py-4 mb-3">
<p class="text-muted">Balance</p>
<h3>
162,500
<small style="font-size: 1rem;">Sats</small>
</h3>
</div>
<b-nav vertical class="px-1">
<b-nav-item class="my-1" active>
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="mr-2"
>
<rect x="12" y="4" width="3" height="13" rx="1.5" fill="#5351FB" />
<rect x="7" y="9" width="3" height="8" rx="1.5" fill="#5351FB" />
<path
d="M5 19H20C20.5523 19 21 19.4477 21 20C21 20.5523 20.5523 21 20 21H4C3.44772 21 3 20.5523 3 20V4C3 3.44772 3.44772 3 4 3C4.55228 3 5 3.44772 5 4V19Z"
fill="#5351FB"
/>
<rect x="17" y="11" width="3" height="6" rx="1.5" fill="#5351FB" />
</svg>
Home
</b-nav-item>
<b-nav-item class="my-1" disabled>
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="mr-2"
>
<path
d="M16.7901 12.6924C17.654 12.1339 18.3215 11.2341 18.5774 10.1255C19.0368 8.13571 18.0121 6.17606 16.2631 5.47999L16.6682 3.72553L14.5245 3.23063L14.1327 4.92791L11.9891 4.43302L12.3809 2.73574L10.2373 2.24085L9.84545 3.93812L8.77368 3.69068L8.25121 5.95374L9.32302 6.20119L7.23316 15.2534L6.16135 15.0059L5.63888 17.269L6.71069 17.5165L6.18822 19.7795L8.33184 20.2744L8.85431 18.0114L10.9979 18.5062L10.4755 20.7693L12.6191 21.2642L13.1548 18.944C15.0319 19.0851 16.8119 17.7729 17.2713 15.7831C17.5272 14.6745 17.3217 13.5731 16.7901 12.6924V12.6924ZM16.4338 9.63058C16.2177 10.5665 15.3208 11.1614 14.4342 10.9567L10.6829 10.0906L11.4666 6.69608L15.2179 7.56214C16.1045 7.76681 16.6499 8.69463 16.4338 9.63058ZM13.1281 16.6143L9.37675 15.7482L10.1604 12.3537L13.9118 13.2197C14.7983 13.4244 15.3437 14.3522 15.1276 15.2882C14.9115 16.2241 14.0146 16.819 13.1281 16.6143V16.6143Z"
fill="#C3C6D1"
/>
</svg>
Bitcoin
</b-nav-item>
<b-nav-item class="my-1" disabled>
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="mr-2"
>
<path
d="M17.9477 9.7013C17.9126 9.63688 17.8617 9.58329 17.8002 9.54601C17.7387 9.50873 17.6688 9.48908 17.5977 9.48908H12.3271L13.2107 2.46492C13.2202 2.37092 13.199 2.27633 13.1505 2.19638C13.1021 2.11643 13.0291 2.05579 12.9435 2.0242C12.8579 1.99261 12.7645 1.99193 12.6785 2.02226C12.5924 2.05258 12.5187 2.11215 12.4691 2.19138L6.0596 13.8743C6.02212 13.9377 6.00157 14.0104 6.00009 14.0848C5.9986 14.1593 6.01622 14.2328 6.05114 14.2977C6.08606 14.3627 6.13701 14.4169 6.19873 14.4545C6.26045 14.4922 6.33072 14.5121 6.40228 14.5121H11.5941L10.8938 21.5468C10.8869 21.6405 10.9104 21.7339 10.9604 21.8121C11.0104 21.8904 11.0841 21.9489 11.1698 21.9785C11.2555 22.0082 11.3483 22.0071 11.4334 21.9755C11.5184 21.944 11.5909 21.8837 11.6392 21.8044L17.9429 10.1227C17.9794 10.0592 17.9991 9.98672 18 9.91269C18.0008 9.83866 17.9828 9.76572 17.9477 9.7013Z"
fill="#C3C6D1"
/>
</svg>
Lightning
</b-nav-item>
</b-nav>
</div>
</b-col>
<b-col col sm="10">
<div class="p-2">
<div class="my-3">
<h1>welcome back, mayank</h1>
<p>This is your Umbrel's dashboard.</p>
</div>
<b-row>
<b-col col sm="4">
<b-card header-tag="header" footer-tag="footer">
<template v-slot:header>
<h6 class="mb-0">Bitcoin Core</h6>
<small>Running</small>
</template>
<div>
<div>
<h3 class="mb-1">100%</h3>
<p>Synchronized</p>
</div>
<b-card-text>Header and footers using slots.</b-card-text>
<b-button href="#" variant="primary">Go somewhere</b-button>
</div>
<template v-slot:footer>
<em>Footer Slot</em>
</template>
</b-card>
</b-col>
<b-col col sm="4"></b-col>
</b-row>
</div>
</b-col>
</b-row>
</div>
</template>
<script>
// import Vue from "vue";
export default {
data() {
return {};
},
computed: {
isDarkMode() {
return this.$store.getters.isDarkMode;
}
},
methods: {},
components: {}
};
</script>
<style lang="scss" scoped>
.nav-horizontal,
.nav-vertical {
background: #fff;
}
.nav-vertical {
// width: 280px;
height: calc(100vh - 84px);
}
.balance-container {
border-top: solid 1px #eeeff3;
border-bottom: solid 1px #eeeff3;
}
.input-search {
border: none !important;
outline: none !important;
box-shadow: none !important;
width: 60vw;
max-width: 600px;
font-size: 1em;
}
::-webkit-input-placeholder {
/* Edge */
color: #c3c6d1;
}
:-ms-input-placeholder {
/* Internet Explorer 10-11 */
color: #c3c6d1;
}
::placeholder {
color: #c3c6d1;
}
</style>

2
src/views/Home.vue
View File

@ -1,7 +1,7 @@
<template>
<div>
<div class="d-flex flex-column align-items-center justify-content-center min-vh-100 p-2">
<img src="@/assets/logo.svg" class="mb-2 logo" />
<img alt="Umbrel" src="@/assets/logo.svg" class="mb-2 logo" />
<h1
:class="[isDarkMode ? 'text-white' : '', 'text-center mb-2']"

Write Preview
Loading…
Cancel
Save