Use card in list items

Author: agualis

src/app/GlobalComponentsLoader.js

@@ -21,6 +21,7 @@ import {
  QScrollArea,
  QItemSide,
  QItemMain,
+ QItemTile,
  QItemSeparator,
  QLayout,
  QSpinnerMat
@@ -56,6 +57,7 @@ export function registerGlobalComponents() {
  Vue.component('QSideLink', QSideLink)
  Vue.component('QScrollArea', QScrollArea)
  Vue.component('QItemSide', QItemSide)
+ Vue.component('QItemTile', QItemTile)
  Vue.component('QItemMain', QItemMain)
  Vue.component('QItemSeparator', QItemSeparator)
  Vue.component('QLayout', QLayout)

src/app/pages/Days/Day.vue

@@ -1,13 +1,13 @@
 <template>
- <q-card v-if="!isLoading">
+ <div v-if="!isLoading">
  <div class='day'>
  <q-card-title>{{dateLabel}}</q-card-title>
 
  <div v-for="gig in day.gigs">
  <GigRow :gig ="gig" :onClick="goTo"/>
  </div>
  </div>
- </q-card>
+ </div>
 </template>
 
 <script>

src/app/pages/Days/GigRow.vue

@@ -1,11 +1,27 @@
 <template>
- <q-item @click="onClick(gig)" :key="gig.id" highlight link striped>
- {{gig.title}} - {{gig.place}}
- </q-item>
+ <!--<q-card @click="onClick(gig)" :key="gig.id" highlight link striped>-->
+ <!--{{gig.title}} <br/> {{gig.place}}-->
+ <!--</q-card>-->
+ <q-card @click="onClick(gig)" highlight>
+ <q-item>
+ <q-item-side :image="gig.image_url" />
+ <q-item-main>
+ <q-item-tile label>{{gig.title}}</q-item-tile>
+ <q-item-tile sublabel>{{gig.place}}</q-item-tile>
+ </q-item-main>
+ </q-item>
+ </q-card>
 </template>
 
 <script>
  export default {
  props: { gig: Object, onClick: Function }
  }
 </script>
+
+<style lang="stylus" type="text/stylus">
+ .q-item:hover {
+ background: alpha(#795548, 30%);
+ cursor: pointer;
+ }
+</style>

src/app/pages/GigsToday/__test__/GigsToday.spec.js

@@ -4,7 +4,6 @@ import { fakeGigsByDay, FIRST_DAY } from '../../../services/__mocks__/gigs-sampl
 import PageObject from '../../../__page_objects__/PageObject'
 import { cloneProductionStore, stubNow } from '../../../../../test/helpers'
 
-
 describe('Gigs Today', () => {
  const FIRST_DAY_GIG_TEXTS = FIRST_DAY.gigs.map(
  gig => gig.title + ' - ' + gig.place)

src/app/shared-components/Toolbar.vue

@@ -1,6 +1,6 @@
 <template>
  <q-toolbar>
- <q-btn flat @click="clickDrawer()">
+ <q-btn flat @click="clickDrawer()" big>
  <q-icon name="menu" />
  </q-btn>
  <q-toolbar-title>