diff --git a/.babelrc b/.babelrc deleted file mode 100644 index 84c2e57..0000000 --- a/.babelrc +++ /dev/null @@ -1,16 +0,0 @@ -{ - "env": { - "test": { - "presets": [ - [ - "@babel/preset-env", - { - "targets": { - "node": "current" - } - } - ] - ] - } - } -} diff --git a/README.md b/README.md index 80990b9..b3874a2 100644 --- a/README.md +++ b/README.md @@ -7,9 +7,9 @@

Minimalistic and modern user interface to display your HNT miner's data.

-
+ HM Dashboard is a low resource and bandwidth alternative to [Helium Explorer](https://explorer.helium.com/). ## 🖥 APIs @@ -18,9 +18,8 @@ HM Dashboard currently uses [Helium APIs](https://docs.helium.com/api/). ## 💥 Community Contribution -This project is intended to receive community participation, if there's an optimizations, features, or fixes you have or can think of, -feel free to open a pull request or create an issue 🙂 - +This project is intended to receive community participation, if there's an optimizations, features, or fixes you have or +can think of, feel free to open a pull request or create an issue 🙂 ## 🗺 Roadmap @@ -30,21 +29,25 @@ feel free to open a pull request or create an issue 🙂 ### v1 +Release Date: September 9th, 2021 + - Initial release with Miner summary - Receive feedback from community and users ### v2 +Release Date: September 12th, 2021 + - Fix any bugs/errors - Add Settings - Add Witnesses section - Add Rewards section -- Add CI with Github -- Add Cypress testing for the UI -- Add Jest testing for the API calls ### v3 +Release Date: TBA + +- Receive feedback from community and users - TBA ## 🛠 Build Setup diff --git a/assets/json/hotspots.json b/assets/json/hotspots.json new file mode 100644 index 0000000..efe97f6 --- /dev/null +++ b/assets/json/hotspots.json @@ -0,0 +1,3 @@ +{ + "miners": ["Unique Misty Tiger", "Fit Opal Koala", "Dizzy Ruby Stallion"] +} diff --git a/assets/scss/dark-mode.scss b/assets/scss/dark-mode.scss index f7a1fa1..9cf657e 100644 --- a/assets/scss/dark-mode.scss +++ b/assets/scss/dark-mode.scss @@ -26,8 +26,8 @@ html { .button { background-color: transparent; - border-color: $dark-mode-button-color !important; - color: $dark-mode-button-color !important; + border-color: $dark-mode-button-color; + color: $dark-mode-button-color; &:hover:not([disabled]):not(.is-dark) { background-color: $dark-mode-button-color; @@ -100,9 +100,14 @@ html { border-color: $dark-mode-light-border-color; } + nav.navbar { background-color: $dark-mode-navbar-background-color; + .navbar-menu { + background-color: $dark-mode-navbar-background-color; + } + .navbar-item { color: $dark-mode-link-color; @@ -124,8 +129,8 @@ html { } } - .navbar-menu { - background-color: $dark-mode-navbar-hover-color; + .modal-card, .modal-card-head, .modal-card-body { + background-color: $dark-mode-model-card-background-color; } .navbar-menu.is-active .navbar-item:hover { @@ -133,11 +138,6 @@ html { color: $dark-mode-color; } - .navbar-item:hover { - background-color: $dark-mode-navbar-hover-color; - border-color: white; - } - .navbar-dropdown { background-color: $dark-mode-navbar-hover-color; @@ -203,5 +203,9 @@ html { fill: $dark-mode-color; } } + + .loading-background { + background-color: rgba(34, 36, 54, 0.5) + } } } diff --git a/assets/scss/theme-default.scss b/assets/scss/theme-default.scss index fabf4ea..c6466f7 100644 --- a/assets/scss/theme-default.scss +++ b/assets/scss/theme-default.scss @@ -55,7 +55,7 @@ $state-colors: ('primary', $white, $white), $dark-mode-color: #e5e5e5; $dark-mode-background-color: #222436; $dark-mode-navbar-background-color: #1C1E33; -$dark-mode-navbar-hover-color: transparent; +$dark-mode-navbar-hover-color: #7499F2; $dark-mode-lighter-background-color: $grey-darker; $dark-mode-border-color: $white-ter; $dark-mode-border: 1px solid $dark-mode-border-color; @@ -65,13 +65,13 @@ $dark-mode-link-color: $white; $dark-mode-overlay-background-color: rgba($black, .85); $dark-mode-button-color: $white-ter; $dark-mode-button-hover-color: $black-ter; +$dark-mode-model-card-background-color: $dark-mode-background-color; $dark-mode-card-header-button-color: $grey; $dark-mode-card-header-button-hover-color: $black-ter; $dark-mode-dropdown-background-color: #1E2033; $dark-mode-dropdown-hovered-background: #1D1F33; $dark-mode-footer-background-color: #202235; - //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// $success: rgba(70, 201, 58, 0.1); @@ -138,6 +138,12 @@ $colors: mergeColorMaps( ); $toast-border-radius: 0em; +@media screen and (max-width: 768px) { + .toast { + margin: 1em 1em; + } +} + .toast.is-success div { color: rgb(70, 201, 58); } @@ -154,6 +160,16 @@ $toast-border-radius: 0em; color: rgb(59, 222, 200) } +.settings-button { + background-color: rgb(255, 71, 87) !important; + border-color: rgb(255, 71, 87) !important; + color: $dark-mode-color !important; +} + +.settings-button:hover { + color: #2d3140 !important; +} + #hm { color: rgba(26, 92, 255, 0.7) } diff --git a/components/general/DarkModeToggle.vue b/components/general/DarkModeToggle.vue deleted file mode 100644 index a0f726e..0000000 --- a/components/general/DarkModeToggle.vue +++ /dev/null @@ -1,25 +0,0 @@ - - - - diff --git a/components/general/Footer.vue b/components/general/Footer.vue index 09bb250..218ab94 100644 --- a/components/general/Footer.vue +++ b/components/general/Footer.vue @@ -14,7 +14,7 @@ import { Component, Vue } from 'nuxt-property-decorator' @Component export default class Footer extends Vue { - get isHomePage() { + get isHomePage(): boolean { return this.$store.getters.isHomePage } } diff --git a/components/general/NavBar.vue b/components/general/NavBar.vue index e46bb50..e231102 100644 --- a/components/general/NavBar.vue +++ b/components/general/NavBar.vue @@ -30,10 +30,22 @@ diff --git a/components/sections/Home.vue b/components/sections/Home.vue index 7c00adf..ef8dded 100644 --- a/components/sections/Home.vue +++ b/components/sections/Home.vue @@ -4,7 +4,7 @@

HM Dashboard

-
+ -import { Component, Vue } from 'nuxt-property-decorator' +import {Component, Vue} from 'nuxt-property-decorator' +import hotspots from '@/assets/json/hotspots.json' @Component export default class Home extends Vue { private userInput = '' - mounted() { + mounted(): void { this.$store.dispatch('startup', true) + document.title = `HM Dashboard` } - get hasVisitedMiners() { - return Object.keys(this.$store.getters.miners).length > 0 - } - - get hasFavourites() { - return Object.keys(this.$store.getters.favourites).length > 0 - } + get filteredDataArray(): ({ type: string; items: string[]; }[] | { type: string; items: any; })[] { + if (this.userInput === '' && this.$store.getters.favourites && this.$store.getters.recentlyViewed.length === 0) { + return [{ + type: 'Suggested Hotspots', items: hotspots.miners + }] + } - get filteredDataArray() { if (this.userInput === '') { const results = [] + if (Object.keys(this.$store.getters.recentlyViewed.favourites).length === 0) { + results.push([{ + type: 'Suggested Hotspots', items: hotspots.miners + }]) + } + if (Object.keys(this.$store.getters.favourites).length > 0) { results.push({ type: 'Favourites', items: Object.values(this.$store.getters.favourites).filter((option: any) => { @@ -99,9 +105,10 @@ export default class Home extends Vue { } } - private async addMiner() { + private async addMiner(): Promise { const miner = await this.$store.dispatch('addMiner', this.userInput) - if (miner !== null) { + if (miner !== null + ) { await this.$router.push(`/${miner}`) } } @@ -113,6 +120,10 @@ export default class Home extends Vue { min-height: 80vh; } +.form { + max-width: 615px; +} + .title { font-size: 96px; } @@ -121,11 +132,19 @@ export default class Home extends Vue { .title { font-size: 72px; } + + .form { + max-width: 465px; + } } -@media screen and (max-width: 824px) { +@media screen and (max-width: 768px) { .title { font-size: 3rem; } + + .form { + max-width: unset; + } } diff --git a/components/sections/hotspot/Activity.vue b/components/sections/hotspot/Activity.vue deleted file mode 100644 index 095da20..0000000 --- a/components/sections/hotspot/Activity.vue +++ /dev/null @@ -1,13 +0,0 @@ - - - - - diff --git a/components/sections/hotspot/Location.vue b/components/sections/hotspot/Location.vue new file mode 100644 index 0000000..11f61b7 --- /dev/null +++ b/components/sections/hotspot/Location.vue @@ -0,0 +1,45 @@ + + + + diff --git a/components/sections/hotspot/Nearby.vue b/components/sections/hotspot/Nearby.vue deleted file mode 100644 index c346eee..0000000 --- a/components/sections/hotspot/Nearby.vue +++ /dev/null @@ -1,13 +0,0 @@ - - - - - diff --git a/components/sections/hotspot/Rewards.vue b/components/sections/hotspot/Rewards.vue new file mode 100644 index 0000000..85e157d --- /dev/null +++ b/components/sections/hotspot/Rewards.vue @@ -0,0 +1,48 @@ + + + + diff --git a/components/sections/hotspot/Summary.vue b/components/sections/hotspot/Summary.vue index ec065c3..be3f22d 100644 --- a/components/sections/hotspot/Summary.vue +++ b/components/sections/hotspot/Summary.vue @@ -1,7 +1,7 @@