Prace s mapu, zobrazeni GPX, editace kopilota, skeletony

src/components/flights/FlightsList.vue

@@ -15,34 +15,32 @@ const props = defineProps({
 </script>
 
 <template>
-  <div class="row">
-    <div class="col-12 col-md-6 col-lg-4" v-for="flight of items" :key="flight">
+  <q-list bordered separator class="q-mx-md q-my-md">
+    <q-item v-for="flight of items" :key="flight" ripple clickable :to="{name: 'flightDetail', params:{id: flight.id}}">
+      <q-item-section avatar>
 
-      <q-card class="q-my-sm q-mx-sm" >
-        <q-img :src="flight.coverPhoto.thumbnailUrl" v-if="flight.coverPhoto">
-          <div class="absolute-bottom text-center text-h6">
-            <router-link :to="{name: 'flightDetail', params:{id: flight.id}}" class="text-white">
-              {{ flightName(flight) }}
-            </router-link>
-          </div>
-        </q-img>
-        <q-card-section>
-          <div class="text-h6" v-if="!flight.coverPhoto">
-            <router-link :to="{name: 'flightDetail', params:{id: flight.id}}">
-              {{ flightName(flight) }}
-            </router-link>
-          </div>
-          <div class="text-subtitle2">{{ minutesToHumanReadable(flight.durationMinCalculated) }}</div>
-          <div class="text-secondary">
-            <q-icon name="today"/>
-            {{ formatDatetime(flight.takeoffDatetime) }}
-          </div>
-          <div class="text-secondary">
-            <q-icon name="plane"/>
-            {{ flight.aircraft.callSign }}
-          </div>
-        </q-card-section>
-      </q-card>
-    </div>
-  </div>
+        <q-avatar size="100px">
+          <div v-if="flight.coverPhoto" :style="`width: 100px; height: 100px; background-image: url('${flight.coverPhoto.thumbnailUrl}'); background-size: cover`"></div>
+        </q-avatar>
+
+
+      </q-item-section>
+      <q-item-section>
+        {{ flightName(flight) }}
+        <div class="text-secondary">
+          <q-icon name="flight_takeoff"/>
+          {{ formatDatetime(flight.takeoffDatetime) }}
+        </div>
+        <div class="text-secondary">
+          <q-icon name="schedule" />
+        {{ minutesToHumanReadable(flight.durationMinCalculated) }}
+
+        </div>
+        <div class="text-secondary">
+          <q-icon name="flight"/>
+          {{ flight.aircraft.callSign }}
+        </div>
+      </q-item-section>
+    </q-item>
+  </q-list>
 </template>