Merge pull request #155 from sGerli/master

Move to hash, search to vue router, fix text overflow issues

src/components/Navbar.vue

@@ -99,6 +99,10 @@ export default {
  margin: 0;
  position: relative;
  top: 2px;
+ @media screen and (min-width: 768px) {
+ margin-right: auto;
+ margin-left: auto;
+ }
 
  // Make text smaller on small screens
  @media screen and (max-width: 430px) {
@@ -119,7 +123,9 @@ export default {
 
  // Items in the right
  &.right {
- margin-left: auto;
+ @media screen and (max-width: 767px) {
+ margin-left: auto;
+ }
 
  // Search Icon
  .search a {

src/components/pages/Search.vue

@@ -36,7 +36,7 @@
 
 <script>
 import algoliasearch from 'algoliasearch/lite'
-import { history as historyRouter } from 'instantsearch.js/es/lib/routers'
+import { searchRouting } from '../../router/search-router'
 import { simple as simpleMapping } from 'instantsearch.js/es/lib/stateMappings'
 
 export default {
@@ -54,7 +54,7 @@ export default {
  '252f4938082b8693a8a9fc0157d1d24f'
  ),
  routing: {
- router: historyRouter(),
+ router: searchRouting.router,
  stateMapping: simpleMapping()
  }
  }

src/components/pages/widgets/AppTitleBar.vue

@@ -9,14 +9,14 @@
  </div>
 
  <div class="app-button-container float-right">
- <button type="button" v-bind:class="heartClass" v-on:click="toggle_heart_button_state">
- <svg class="svg-icon icon-thumbs-up" width="25px" height="25px" viewBox="0 0 25 25">
- <use xlink:href="#iconThumbsUp"></use>
- </svg>
+ <button type="button" v-bind:class="heartClass" v-on:click="toggle_heart_button_state" ref="heartsButton">
+  <svg class="svg-icon icon-thumbs-up" width="25px" height="25px" viewBox="0 0 25 25">
+  <use xlink:href="#iconThumbsUp"></use>
+  </svg>
 
- {{ hearts }}
+  {{ hearts }}
  </button>
- <get-app-button v-bind:app="app" v-bind:state="added"></get-app-button>
+ <get-app-button v-bind:app="app" v-bind:state="added" ref="addButton"></get-app-button>
  </div>
  </div>
  <div class="card subsection-extra card-inverse text-left p-2" v-if=" app.companions != undefined && (app.companions.ios != null || app.companions.android != null) && app.type != 'watchface'">
@@ -198,9 +198,10 @@ export default {
  padding-left: 5px;
  margin-top: 2px;
  margin-bottom: 2px;
- min-width: 196px;
+ min-width: 206px;
+ text-align: right;
  @media screen and (max-width: 430px) {
- min-width: 146px;
+ min-width: 156px;
  }
  .btn {
  @media screen and (max-width: 430px) {

src/router/index.js

@@ -1,3 +1,4 @@
+import qs from 'qs'
 import Vue from 'vue'
 import Router from 'vue-router'
 import Home from '@/components/Home'
@@ -57,5 +58,12 @@ const routes = [
 
 export default new Router({
  routes: routes,
- mode: 'history'
+ parseQuery (query) {
+ return qs.parse(query)
+ },
+ stringifyQuery (query) {
+ const result = qs.stringify(query)
+
+ return result ? '?' + result : ''
+ }
 })

src/router/search-router.js

@@ -0,0 +1,37 @@
+import vueRouter from './index'
+
+export const searchRouting = {
+ router: {
+ read () {
+ return vueRouter.currentRoute.query
+ },
+ write (routeState) {
+ vueRouter.push({
+ query: routeState
+ })
+ },
+ createURL (routeState) {
+ return vueRouter.resolve({
+ query: routeState
+ }).href
+ },
+ onUpdate (cb) {
+ this._onPopState = ({state}) => {
+ const routeState = state
+ // at initial load, the state is read from the URL without
+ // update. Therefore the state object is not there. In this
+ // case we fallback and read the URL.
+ if (!routeState) {
+ cb(this.read())
+ } else {
+ cb(routeState)
+ }
+ }
+ window.addEventListener('popstate', this._onPopState)
+ },
+ dispose () {
+ window.removeEventListener('popstate', this._onPopState)
+ this.write()
+ }
+ }
+}