Nastrel nove podoby detailu letu

src/components/flightPlans/FlightPlanRoute.vue

@@ -83,7 +83,7 @@ const allPlacesOptions = computed(() => {
             <q-btn
               v-if="i < model.length - 1"
               text-color="primary"
-              flat dense round icon="arrow_downward"
+              flat dense round icon="`arrow_downward`"
               size="16px"
               @click="swapMarkers(i, i+1)"
 

src/components/flights/FlightsList.vue

@@ -3,6 +3,8 @@ import {minutesToHumanReadable} from "src/composables/datetimeUtils";
 import {flightName} from "src/composables/flight";
 import AvatarFromPhoto from "components/avatars/AvatarFromPhoto.vue";
 import {useInfiniteScroll} from "src/composables/pagination";
+import {useQuasar} from "quasar";
+import {computed} from "vue";
 
 const props = defineProps({
   items: {
@@ -25,6 +27,8 @@ const routeDetail = (flight) => {
   else
     return {name: "flightDetail", params: {id: flight.id}}
 };
+
+const $q = useQuasar()
 </script>
 
 <template>
@@ -40,36 +44,42 @@ const routeDetail = (flight) => {
         clickable
         :to="routeDetail(flight)"
       >
-        <q-item-section avatar>
+
+
+        <q-item-section avatar class="gt-xs">
           <AvatarFromPhoto :size="120" v-if="flight.titlePhoto" :src="flight.titlePhoto.thumbnailUrl"/>
           <q-avatar v-else size="120px" icon="flight" text-color="grey-7" color="grey-4"></q-avatar>
         </q-item-section>
         <q-item-section>
+          <q-img v-if="flight.titlePhoto" class="lt-sm" :src="flight.titlePhoto.thumbnailUrl"/>
+
           <div class="text-h5 q-mb-md">{{ flightName(flight) }}</div>
 
-          <div class="text-secondary" v-if="props.public">
-            <q-icon name="support_agent"/>
-            @{{ flight.pilot.publicUsername }}
-          </div>
+          <div class="flex justify-between justify-sm-start list-secondary-info">
+            <div class="text-secondary" v-if="props.public">
+              <q-icon name="support_agent"/>
+              {{ flight.pilot.publicUsername }}
+            </div>
 
-          <div class="text-secondary" v-if="flight.copilots">
-            <q-icon name="person"/>
-            {{ flight.pilot.name }}
-            {{ flight.copilots }}
-          </div>
+            <div class="text-secondary" v-if="flight.copilots">
+              <q-icon name="person"/>
+              {{ flight.pilot.name }}
+              {{ flight.copilots }}
+            </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>
+            <div class="text-secondary">
+              <q-icon name="schedule"/>
+              {{ minutesToHumanReadable(flight.durationMinCalculated) }}
+            </div>
+            <div class="text-secondary">
+              <q-icon name="flight"/>
+              {{ flight.aircraft.callSign }}
+            </div>
 
-          <div class="text-secondary" v-if="flight.event">
-            <q-icon name="event"/>
-            {{ flight.event.name }}
+            <div class="text-secondary" v-if="flight.event">
+              <q-icon name="event"/>
+              {{ flight.event.name }}
+            </div>
           </div>
         </q-item-section>
 
@@ -92,3 +102,9 @@ const routeDetail = (flight) => {
     </template>
   </q-infinite-scroll>
 </template>
+
+<style>
+.list-secondary-info div {
+  padding: 0 1em;
+}
+</style>

src/components/photos/PhotoGallery.vue

@@ -46,17 +46,6 @@ const initLightbox = () => {
   $lightbox.value.init();
 }
 
-const isCollapsed = ref(true);
-const photosCollapseLimit = computed(() => {
-  if ($q.screen.width <= $q.screen.sizes.sm) return 2;
-  else if ($q.screen.width <= $q.screen.sizes.md) return 3;
-  else return 4;
-});
-
-onMounted(() => {
-  isCollapsed.value = props.photos.length >= photosCollapseLimit.value;
-});
-
 onUnmounted(() => {
   if ($lightbox.value) {
     $lightbox.value.destroy();
@@ -81,7 +70,7 @@ watch(() => [openedPhoto.value, $lightbox.value], () => {
 </script>
 
 <template>
-  <div :class="{'photogallery--wrapper': true, collapsed: isCollapsed}" :id="`${galleryId}-wrapper`">
+  <div :class="{'photogallery--wrapper': true}" :id="`${galleryId}-wrapper`">
     <div :id="galleryId" class="row photogallery--content">
       <div
         v-for="photo in photos" :key="photo.id"
@@ -111,9 +100,6 @@ watch(() => [openedPhoto.value, $lightbox.value], () => {
       </div>
     </div>
 
-    <a class="photogallery--collapse" v-if="isCollapsed" @click="isCollapsed = false">
-      <q-btn class="q-mt-lg q-mb-md" color="secondary">Rozbalit</q-btn>
-    </a>
   </div>
 
 </template>