Ux improvements

src/components/pages/AppDetails.vue

@@ -36,10 +36,6 @@
  Website Link <i class="fa fa-angle-right float-right" aria-hidden="true"></i>
  </div>
  </a>
- <!--a v-if="app.appInfo.supportUrl != ''" v-bind:href="app.appInfo.supportUrl" class="app-button">
- <div>Support <i class="fa fa-angle-right float-right" aria-hidden="true"></i>
- </div>
- </a-->
  <a v-if="app.source != null" v-on:click="openExternal(app.source)" class="app-button" >
  <div>Source code <i class="fa fa-angle-right float-right" aria-hidden="true"></i></div>
  </a>

src/components/pages/AppView.vue

@@ -128,6 +128,7 @@ header.main {
 
  // Buttons at the bottom of the app-details container
  a.app-button {
+ cursor: pointer;
  div {
  width: calc(100% + 2rem);
  padding: 1rem;
@@ -147,6 +148,7 @@ header.main {
  &:hover, &:focus {
  text-decoration: none;
  outline: none;
+ color: darken($pebble-color, 5%);
  }
  }
 }

src/components/pages/widgets/GetAppButton.vue

@@ -77,7 +77,13 @@ export default {
  this.openExternal(this.app.companions[this.$store.state.userParameters.platform].url)
  },
  check_app () {
- if (!this.hardwareSupported || !this.platformSupported || this.added === true || this.loading) return
+ if (this.added === true || this.loading) return
+ if (!this.hardwareSupported) {
+ return this.hardware_compatibility_modal()
+ }
+ if (!this.platformSupported) {
+ return this.platform_compatibility_modal()
+ }
  if (this.permissions.length > 0) {
  this.$bvModal.show('modal-permissions')
  return
@@ -97,6 +103,20 @@ export default {
  this.permissions = this.app.capabilities
  this.permissions.splice(this.permissions.indexOf('configurable'))
  }
+ },
+ hardware_compatibility_modal () {
+ this.$bvToast.toast('Sorry! This app is not compatible with your Pebble smartwatch.', {
+ title: 'Unable to add to locker',
+ autoHideDelay: 5000,
+ appendToast: true
+ })
+ },
+ platform_compatibility_modal () {
+ this.$bvToast.toast('Sorry! This app is not compatible with your smartphone.', {
+ title: 'Unable to add to locker',
+ autoHideDelay: 5000,
+ appendToast: true
+ })
  }
  },
  watch: {

src/components/pages/widgets/SingleCard.vue

@@ -136,7 +136,10 @@ export default {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
- margin: 7px 6px 5px 6px;
+ margin: 7px 6px 0px 6px;
+ }
+ .card-text {
+ margin-bottom: 5px;
  }
 
  // Make it smaller on small screens

src/store/userParameters.js

@@ -12,7 +12,8 @@ export const hardwareEnum = {
  aplite: 'aplite', // OG Pebble and Pebble Steel
  basalt: 'basalt', // Pebble Time and Pebble Time Steel
  chalk: 'chalk', // Pebble Round
- diorite: 'diorite' // Pebble 2
+ diorite: 'diorite', // Pebble 2
+ emery: 'emery' // Pebble Time 2
 }
 
 const state = {