Pridani skeletonu

src/components/event/EventEditSkeleton.vue

@@ -1,5 +1,18 @@
-<script setup></script>
+<script setup>
+</script>
 
 <template>
-  <em>Copilot skeleton</em>
+  <q-skeleton type="QInput" class="q-my-lg"/>
+
+  <div class="row">
+    <div class="col q-pr-sm">
+      <q-skeleton type="QInput"/>
+    </div>
+    <div class="col q-pl-sm">
+      <q-skeleton type="QInput"/>
+    </div>
+  </div>
+
+  <q-skeleton type="rect" class="q-my-lg" height="400px"/>
+
 </template>

src/components/event/EventForm.vue

@@ -46,8 +46,16 @@ onMounted(() => {
       v-model="formData.name"
     />
 
-    <DatetimePicker :mask="FORMAT_DATE" v-model="formData.dateFrom" label="Od" />
-    <DatetimePicker :mask="FORMAT_DATE" v-model="formData.dateTo" label="Do" />
+
+    <div class="row">
+      <div class="col q-pr-sm">
+        <DatetimePicker :mask="FORMAT_DATE" v-model="formData.dateFrom" label="Od"/>
+      </div>
+      <div class="col q-pl-sm">
+        <DatetimePicker :mask="FORMAT_DATE" v-model="formData.dateTo" label="Do"/>
+      </div>
+    </div>
+
 
     <RichTextEditor v-model="formData.description" v-bind="commonProps" label="Popis letu, poznámky, ..."/>
     <q-checkbox v-model="formData.isPublic" label="Veřejný?"/>

src/components/organizations/OrganizationEditSkeleton.vue

@@ -1,5 +1,6 @@
-<script setup></script>
+<script setup>
+</script>
 
 <template>
-  <em>Copilot skeleton</em>
+  <q-skeleton type="QInput" />
 </template>

src/components/photos/PhotoEditorSkeleton.vue

@@ -0,0 +1,21 @@
+<script setup>
+
+</script>
+
+<template>
+  <q-card style="max-width: 750px; margin: 0 auto">
+    <q-skeleton square height="500px" width="100%"/>
+
+    <q-list>
+      <q-item v-for="i in 3" :key="i">
+        <q-item-section avatar>
+          <q-skeleton type="circle" width="60" />
+        </q-item-section>
+        <q-item-section>
+          <q-skeleton type="QSlider" />
+        </q-item-section>
+      </q-item>
+    </q-list>
+
+  </q-card>
+</template>

src/components/poi/POIEditSkeleton.vue

@@ -2,5 +2,7 @@
 </script>
 
 <template>
-  <em>POI edit skeleton</em>
+  <q-skeleton type="QInput" class="q-my-lg"/>
+  <q-skeleton type="rect" class="q-my-lg" height="400px"/>
+  <q-skeleton type="rect" class="q-my-lg" height="200px"/>
 </template>

src/components/profile/PublicProfileSkeleton.vue

@@ -1,3 +1,23 @@
-<script setup> </script>
+<script setup> import BasicTextSkeleton from "components/basicSkeletons/BasicTextSkeleton.vue";
+import {randomInt} from "src/composables/random";
+</script>
 
-<template>Skeleton</template>
+<template>
+
+  <q-card flat style="margin: 0 auto; max-width: 400px">
+    <q-skeleton type="rect" height="300px"/>
+
+    <q-card-section>
+
+      <div style="width: 200px; text-align: center; margin-top: -100px; margin-left: auto; margin-right: auto">
+        <q-skeleton class="inline-block" type="QAvatar" size="150px"/>
+        <q-skeleton class="inline-block" type="text" height="50px" :width="`${randomInt(50, 80)}%`"/>
+        <q-skeleton class="inline-block" type="text" height="40px" :width="`${randomInt(60, 90)}%`"/>
+      </div>
+      <div class="q-mt-lg">
+        <BasicTextSkeleton :lines="randomInt(1, 5)" :paragraphs="1"/>
+      </div>
+    </q-card-section>
+  </q-card>
+
+</template>

src/pages/profile/flight/PhotoEditorPage.vue

@@ -4,19 +4,20 @@ import {onMounted, ref, watch} from "vue";
 import {usePhotosStore} from "stores/Photo";
 import {useAppStore} from "stores/App";
 import {flightName} from "src/composables/objects/flight";
-import VuePictureCropper, {cropper} from 'vue-picture-cropper';
+import VuePictureCropper from 'vue-picture-cropper';
 import {croppedAreaForPreview, getPreviewUrl} from "src/composables/photos/editor/preview";
 import {compare, onResize, splitter, splitterWidth} from "src/composables/photos/editor/splitter";
 import {aspectRatioOptions, croppedArea, cropperReady, selectedAspectRatio, setCropData} from "src/composables/photos/editor/crop";
 import {fetchPhoto, loading, photo, photoAspectRatio} from "src/composables/photos/editor/photo";
-import {debounce, throttle, useQuasar} from "quasar";
+import {debounce, useQuasar} from "quasar";
 import {successObject} from "src/composables/dialog";
+import PhotoEditorSkeleton from "components/photos/PhotoEditorSkeleton.vue";
 
 const $route = useRoute();
 const $q = useQuasar();
 const photoId = parseInt($route.params.id);
 const noCacheTimestamp = ref((new Date()).getTime());
-const editorTab = ref("rotate");
+const editorTab = ref("colors");
 
 // adjustments
 const defaultAdjustments = {
@@ -61,7 +62,6 @@ onMounted(() => {
       }
 
       if (photoAdjustment) {
-        rotate.value = photoAdjustment.rotate;
         croppedArea.value = {
           left: photoAdjustment.cropLeft,
           top: photoAdjustment.cropTop,
@@ -85,7 +85,7 @@ onMounted(() => {
 <template>
   <q-resize-observer @resize="onResize" :debounce="100"/>
 
-  <template v-if="loading">Nacitani</template>
+  <PhotoEditorSkeleton v-if="loading" />
 
   <template v-if="!loading">
     <q-card :style="`width: ${splitterWidth}px; margin: 0 auto`">
@@ -145,8 +145,7 @@ onMounted(() => {
           </template>
         </q-splitter>
 
-        <div class="text-right q-pt-md q-pr-md">
-
+        <div class="text-right q-pt-sm q-pr-sm">
           <q-btn flat icon="compare" @click="compare = !compare" :text-color="compare ? 'primary' : 'grey-5'">
             <q-tooltip>Klikni pro porovnání</q-tooltip>
           </q-btn>
@@ -158,7 +157,7 @@ onMounted(() => {
         <q-tabs v-model="editorTab">
           <q-tab name="colors" icon="palette" label="Barvy"/>
           <q-tab name="details" icon="deblur" label="Detialy"/>
-          <q-tab name="rotate" icon="rotate" label="Otočit"/>
+          <q-tab name="rotate" icon="loop" label="Otočit"/>
           <q-tab name="crop" icon="crop" label="Oříznout"/>
         </q-tabs>
         <q-separator/>

src/pages/public/PilotProfilePage.vue

@@ -1,12 +1,9 @@
 <script setup>
-import {onMounted} from "vue";
 import {useRoute} from "vue-router";
-import {fetchFlights} from "src/composables/objects/flight";
-import {fetchUser, user as pilot, loading as pilotLoading} from "src/composables/objects/user";
+import {user as pilot, loading as pilotLoading} from "src/composables/objects/user";
 import PublicProfileSkeleton from "components/profile/PublicProfileSkeleton.vue";
 import {storeToRefs} from "pinia";
 import {useUserStore} from "stores/User";
-import {useAppStore} from "stores/App";
 import PilotProfileCard from "components/profile/PilotProfileCard.vue";
 
 const loggedUser = storeToRefs(useUserStore()).user;
@@ -22,6 +19,5 @@ const username = useRoute().params.username;
       <PublicProfileSkeleton v-if="pilotLoading"/>
       <PilotProfileCard v-else :pilot="pilot"/>
     </div>
-
   </div>
 </template>