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>