sample cards for caches

.idea/modules.xml

@@ -1,10 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="ProjectModuleManager">
-    <modules>
-      <module fileurl="file://$PROJECT_DIR$/.idea/modules/de.hhn.labsw.labswp_2019_sose_geocaching.iml" filepath="$PROJECT_DIR$/.idea/modules/de.hhn.labsw.labswp_2019_sose_geocaching.iml" />
-      <module fileurl="file://$PROJECT_DIR$/.idea/modules/de.hhn.labsw.labswp_2019_sose_geocaching.main.iml" filepath="$PROJECT_DIR$/.idea/modules/de.hhn.labsw.labswp_2019_sose_geocaching.main.iml" />
-      <module fileurl="file://$PROJECT_DIR$/.idea/modules/de.hhn.labsw.labswp_2019_sose_geocaching.test.iml" filepath="$PROJECT_DIR$/.idea/modules/de.hhn.labsw.labswp_2019_sose_geocaching.test.iml" />
-    </modules>
-  </component>
-</project>

.idea/modules/LabSWPS.de.hhn.labsw.labswp_2019_sose_geocaching.iml

@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<module external.linked.project.id="labswp_2019_sose_geocaching" external.linked.project.path="$MODULE_DIR$/../.." external.root.project.path="$MODULE_DIR$/../.." external.system.id="GRADLE" external.system.module.group="de.hhn.labsw" external.system.module.version="0.0.1-SNAPSHOT" type="JAVA_MODULE" version="4">
-  <component name="NewModuleRootManager" inherit-compiler-output="true">
-    <exclude-output />
-    <content url="file://$MODULE_DIR$/../..">
-      <excludeFolder url="file://$MODULE_DIR$/../../.gradle" />
-      <excludeFolder url="file://$MODULE_DIR$/../../build" />
-    </content>
-    <orderEntry type="inheritedJdk" />
-    <orderEntry type="sourceFolder" forTests="false" />
-  </component>
-</module>

.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+  </component>
+</project>

frontend/quasar.conf.js

@@ -47,7 +47,8 @@ module.exports = function (ctx) {
         'QCardActions',
         'QCheckbox',
         'QSeparator',
-        'QInput'
+        'QInput',
+        'QImg'
       ],
 
       directives: [

frontend/src/pages/Index.vue

@@ -1,49 +1,35 @@
 <template>
-  <div class="q-pa-md">
+  <div class="q-pa-md row items-start q-col-gutter-md">
-    <q-table
-      title="Treats"
-      :data="todos"
-      :columns="columns"
-      row-key="title"
-      selection="single"
-      :selected.sync="selected"
-      :filter="filter"
-      grid
-      hide-header
-    >
-      <template v-slot:top-right>
-        <q-input borderless dense debounce="300" v-model="filter" placeholder="Search">
-          <template v-slot:append>
-            <q-icon name="search" />
-          </template>
-        </q-input>
-      </template>
 
-      <template v-slot:item="props">
+    <div class="col-6">
-        <div
+      <q-card class="my-card">
-          class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3 grid-style-transition"
+        <q-img src="https://cdn.quasar-framework.org/img/parallax2.jpg">
-          :style="props.selected ? 'transform: scale(0.98);' : ''"
+          <div class="absolute-bottom">
-        >
+            <div class="text-h6">Geocache</div>
-          <q-card :class="props.selected ? 'bg-grey-2' : ''">
+          </div>
-            <q-card-section>
+        </q-img>
-              <q-checkbox :dense="denseOn" v-model="props.selected" :label="props.row.title" />
+        <q-card-actions align="around">
-            </q-card-section>
+          <q-btn flat round color="red" icon="favorite" />
-            <q-separator />
+          <q-btn flat round color="teal" icon="bookmark" />
-            <q-list dense>
+          <q-btn flat round color="primary" icon="share" />
-              <q-item v-for="col in props.cols.filter(col => col.name !== 'desc')" :key="col.name">
+        </q-card-actions>
-                <q-item-section>
+      </q-card>
-                  <q-item-label>{{ col.label }}</q-item-label>
+    </div>
-                </q-item-section>
+
-                <q-item-section side>
+    <div class="col-6" v-for="n in 10" :key="n">
-                  <q-item-label caption>{{ col.value }}</q-item-label>
+      <q-card class="my-card">
-                </q-item-section>
+        <q-img src="https://cdn.quasar-framework.org/img/parallax2.jpg">
-              </q-item>
+          <div class="absolute-bottom">
-            </q-list>
+            <div class="text-h6">Geocache</div>
-          </q-card>
+          </div>
-        </div>
+        </q-img>
-      </template>
+        <q-card-actions vertical align="around">
+          <q-btn flat color="red" >Action 1</q-btn>
+          <q-btn flat>Action 2</q-btn>
+        </q-card-actions>
+      </q-card>
+    </div>
 
-    </q-table>
   </div>
 </template>