💄 Make Landing page better

Author: csiszaralex

src/components/landing/LandingItem.vue

@@ -8,12 +8,12 @@
             {{ alcim }}
           </p>
         </div>
-        <img
-          :src="photos"
-          alt="LandingPhoto"
-          class="col-lg-6 mt-2"
+        <div
+          class="col-lg-6 mt-2 text-center"
           :class="{ 'order-first': floating(orientation) && jo }"
-        />
+        >
+          <img :src="photos" alt="LandingPhoto" />
+        </div>
       </div>
     </div>
   </li>
@@ -42,14 +42,7 @@ export default {
   },
   computed: {
     photos() {
-      switch (this.photo) {
-        case 'stat':
-          return 'https://via.placeholder.com/350';
-        case 'qr':
-          return 'https://via.placeholder.com/350';
-        default:
-          return this.photo;
-      }
+      return this.photo;
     },
   },
 };
@@ -68,4 +61,7 @@ li {
 p.card-text {
   font-size: 1.2rem;
 }
+img {
+  max-width: 30vw;
+}
 </style>

src/views/Landing.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <base-loader v-if="isLoading">Töltés...</base-loader>
-    <p v-else-if="error">{{ error }}</p>
+    <p v-else-if="error" class="text-center display-3">{{ error }}</p>
     <p v-else-if="!results || results.length === 0" class="text-center display-3">
       Nincs adat
     </p>
@@ -19,24 +19,24 @@
 </template>
 
 <script>
-import { ref, onBeforeMount } from 'vue';
+import { ref, onBeforeMount, onUnmounted } from 'vue';
 import LandingItem from '../components/landing/LandingItem.vue';
 import axios from '@/config/axios.js';
 export default {
   name: 'Landing',
-  title: 'asd',
   components: { LandingItem },
   setup() {
     const results = ref([]);
     const isLoading = ref(false);
     const error = ref(null);
+    const limit = 5;
+    let page = 1;
 
     function loadExp() {
-      isLoading.value = true;
       error.value = null;
-
+      if (!results.value) isLoading.value = true;
       axios
-        .get('/homepage')
+        .get(`/homepage?limit=${limit}&page=${page}`)
         .then(res => {
           const datas = [];
           for (const i in res.data) {
@@ -47,11 +47,12 @@ export default {
               picture: res.data[i].picture,
             });
           }
-          results.value = datas;
+          page++;
+          results.value.push(...datas);
           isLoading.value = false;
         })
         .catch(err => {
-          error.value = err;
+          error.value = err.message;
           console.log('ERROR', err);
         });
     }
@@ -60,9 +61,21 @@ export default {
       return id % 2 ? 'left' : 'right';
     }
 
+    function handleScroll() {
+      const posFromBottom = Math.max(
+        document.body.offsetHeight - (window.pageYOffset + window.innerHeight),
+        0,
+      );
+      if (posFromBottom < 100) loadExp();
+    }
+
     onBeforeMount(() => {
+      window.addEventListener('scroll', handleScroll);
       loadExp();
     });
+    onUnmounted(() => {
+      window.removeEventListener('scroll', handleScroll);
+    });
     return { isLoading, results, error, orient };
   },
 };