Layout bug fixes (#127)

Signed-off-by: Gašper Grom <[email protected]>

Author: gaspergrom

frontend/app/components/modules/collection/views/collection-details.vue

@@ -48,6 +48,18 @@
       />
     </div>
   </div>
+  <div
+    v-if="projects.length < (data?.total || 0)"
+    class="py-5 lg:py-10 flex justify-center"
+  >
+    <lfx-button
+      size="large"
+      class="!rounded-full"
+      @click="loadMore"
+    >
+      Load more
+    </lfx-button>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -59,9 +71,9 @@ import LfxCollectionHeader from "~/components/modules/collection/components/deta
 import LfxCollectionFilters from "~/components/modules/collection/components/details/filters.vue";
 import LfxProjectListItem from "~/components/modules/project/components/list/project-list-item.vue";
 import LfxProjectListItemLoading from "~/components/modules/project/components/list/project-list-item-loading.vue";
-import useScroll from "~/components/shared/utils/scroll";
 import LfxIcon from "~/components/uikit/icon/icon.vue";
 import LfxMaintainHeight from "~/components/uikit/maintain-height/maintain-height.vue";
+import LfxButton from "~/components/uikit/button/button.vue";
 
 const props = defineProps<{
   collection: Collection
@@ -70,13 +82,11 @@ const props = defineProps<{
 const route = useRoute();
 const collectionSlug = route.params.slug as string;
 
-const {scrollTopPercentage} = useScroll();
-
 const sort = ref('contributorCount_desc');
 const tab = ref('all');
 
 const page = ref(0);
-const pageSize = ref(50);
+const pageSize = 60;
 
 const projects = ref([]);
 
@@ -109,11 +119,9 @@ const { data, status } = await useFetch<Pagination<Project>>(
     }
 );
 
-watch(scrollTopPercentage, () => {
-  if (scrollTopPercentage.value >= 100 && projects.value.length < data.value.total) {
-    page.value += 1;
-  }
-});
+const loadMore = () => {
+  page.value += 1;
+};
 
 onMounted(() => {
   projects.value = data.value?.data || [];

frontend/app/components/modules/collection/views/collection-list.vue

@@ -86,6 +86,18 @@
       </div>
     </div>
   </section>
+  <div
+    v-if="collections.length < (data?.total || 0)"
+    class="py-5 lg:py-10 flex justify-center"
+  >
+    <lfx-button
+      size="large"
+      class="!rounded-full"
+      @click="loadMore"
+    >
+      Load more
+    </lfx-button>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -104,20 +116,19 @@ import useScroll from "~/components/shared/utils/scroll";
 import LfxCollectionListItemLoading
   from "~/components/modules/collection/components/list/collection-list-item-loading.vue";
 import LfxMaintainHeight from "~/components/uikit/maintain-height/maintain-height.vue";
+import LfxButton from "~/components/uikit/button/button.vue";
 
 const { showToast } = useToastService();
 const {pageWidth} = useResponsive();
 const {scrollTop} = useScroll();
 
 const page = ref(0);
-const pageSize = ref(10);
+const pageSize = 50;
 const sort = ref('projectCount_desc');
 
 // const stack = ref('');
 // const industry = ref('');
 
-const {scrollTopPercentage} = useScroll();
-
 const collections = ref([]);
 
 watch([sort], () => {
@@ -147,11 +158,9 @@ const { data, status, error } = await useFetch<Pagination<Collection>>(
     }
 );
 
-watch(scrollTopPercentage, () => {
-  if (scrollTopPercentage.value >= 100 && collections.value.length < (data.value?.total || 0)) {
-    page.value += 1;
-  }
-});
+const loadMore = () => {
+  page.value += 1;
+};
 
 watch(error, (err) => {
   if (err) {

frontend/app/components/modules/project/components/shared/header.vue

@@ -25,7 +25,10 @@
               />
               <h1
                 class="font-bold mr-3 ease-linear transition-all font-secondary duration-200 text-heading-4"
-                :class="scrollTop > 50 ? 'md:text-heading-3' : 'md:text-heading-2'"
+                :class="[
+                  scrollTop > 50 ? 'md:text-heading-3' : 'md:text-heading-2',
+                  repoName ? 'w-[25ch] truncate' : ''
+                ]"
               >
                 {{ props.project.name }}
               </h1>
@@ -45,11 +48,11 @@
                 >
                   <span
                     v-if="repoName"
-                    class="font-secondary"
+                    class="font-secondary block text-neutral-900 max-w-[25ch] truncate"
                   >{{ repoName }}</span>
                   <span
                     v-else
-                    class="font-secondary"
+                    class="font-secondary text-neutral-500"
                   >All repositories</span>
                 </p>
                 <lfx-icon
@@ -136,15 +139,16 @@
   <lfx-project-repository-switch
     v-if="isSearchRepoModalOpen && props.project"
     v-model="isSearchRepoModalOpen"
-    :repo="repoName"
+    :repo="repoSlug"
     :project="props.project"
   />
 </template>
 
 <script lang="ts" setup>
 import {useRoute} from 'nuxt/app';
 import {computed} from 'vue';
-import type {Project} from "~~/types/project";
+import {storeToRefs} from "pinia";
+import type {Project, ProjectRepository} from "~~/types/project";
 import {LfxRoutes} from '~/components/shared/types/routes';
 import LfxIcon from '~/components/uikit/icon/icon.vue';
 import LfxMenuButton from '~/components/uikit/menu-button/menu-button.vue';
@@ -159,14 +163,21 @@ import LfxProjectDateRangePicker from "~/components/modules/project/components/s
 import LfxMaintainHeight from "~/components/uikit/maintain-height/maintain-height.vue";
 import useResponsive from "~/components/shared/utils/responsive";
 import LfxTooltip from "~/components/uikit/tooltip/tooltip.vue";
+import {useProjectStore} from "~/components/modules/project/store/project.store";
 
 const props = defineProps<{
   project: Project
 }>();
 
 const route = useRoute();
 
-const repoName = computed<string>(() => route.params.name as string);
+const {projectRepos} = storeToRefs(useProjectStore())
+
+const repo = computed<ProjectRepository | undefined>(
+    () => projectRepos.value.find((repo) => repo.slug === route.params.name)
+);
+const repoName = computed<string>(() => (repo.value?.name || '').split('/').at(-1) || '');
+const repoSlug = computed<string>(() => route.params.name as string);
 
 const isSearchRepoModalOpen = ref(false);
 

frontend/app/components/modules/project/components/shared/header/repository-switch.vue

@@ -41,13 +41,13 @@
       <div class="flex flex-col gap-1 max-h-[29.5rem] overflow-y-auto">
         <nuxt-link
           v-for="repository of result"
-          :key="repository.repo"
-          :to="{ name: routeName.repo, params: {name: repository.name}}"
+          :key="repository.url"
+          :to="{ name: routeName.repo, params: {name: repository.slug}}"
         >
           <lfx-project-repository-switch-item
             :text="repository.name"
             icon="books"
-            :selected="props.repo === repository.name"
+            :selected="props.repo === repository.slug"
           />
         </nuxt-link>
         <section

frontend/app/components/modules/project/store/project.store.ts

@@ -7,7 +7,6 @@ import {
   lfxProjectDateOptions
 } from '~/components/modules/project/config/date-options';
 import type { Project, ProjectRepository } from '~~/types/project';
-import { getRepoNameFromUrl } from '~/components/modules/repository/utils/repository.helpers';
 import { Granularity } from '~~/types/shared/granularity';
 
 const calculateGranularity = (start: string | null, end: string | null): string[] => {
@@ -42,14 +41,11 @@ export const useProjectStore = defineStore('project', () => {
   const startDate = ref<string | null>(lfxProjectDateOptions[0]?.startDate || null);
   const endDate = ref<string | null>(lfxProjectDateOptions[0]?.endDate || null);
   const project = ref<Project | null>(null);
-  const projectRepos = computed<ProjectRepository[]>(() => (project.value?.repositories || []).map((repo) => ({
-      repo,
-      name: getRepoNameFromUrl(repo)
-    })));
+  const projectRepos = computed<ProjectRepository[]>(() => (project.value?.repositories || []));
   const selectedRepository = computed<string>(
     () => projectRepos.value.find(
-        (repo: ProjectRepository) => route.params.name === repo.name
-      )?.repo || ''
+        (repo: ProjectRepository) => route.params.name === repo.slug
+      )?.url || ''
   );
 
   const customRangeGranularity = computed<string[]>(() => (startDate.value === null || endDate.value === null

frontend/app/components/shared/layout/search/search-result.vue

@@ -66,9 +66,9 @@
         class="flex flex-col gap-1"
       >
         <nuxt-link
-          v-for="repository of repos"
+          v-for="repository of props.repositories"
           :key="repository.slug"
-          :to="{name: LfxRoutes.REPOSITORY, params: {name: repository.name, slug: repository.projectSlug}}"
+          :to="{name: LfxRoutes.REPOSITORY, params: {name: repository.slug, slug: repository.projectSlug}}"
           class="px-3 py-2 rounded-md transition-all
         hover:bg-neutral-50 flex items-center gap-2 cursor-pointer text-sm text-neutral-900"
         >
@@ -159,7 +159,6 @@ import LfxTabs from "~/components/uikit/tabs/tabs.vue";
 import LfxAvatar from "~/components/uikit/avatar/avatar.vue";
 import LfxIcon from "~/components/uikit/icon/icon.vue";
 import {LfxRoutes} from "~/components/shared/types/routes";
-import {getRepoNameFromUrl} from "~/components/modules/repository/utils/repository.helpers";
 
 const props = defineProps<{
   projects: SearchProject[];
@@ -171,11 +170,6 @@ const route = useRoute();
 
 const tab = ref('all');
 
-const repos = computed(() => props.repositories.map((repo) => ({
-      ...repo,
-      name: getRepoNameFromUrl(repo.slug),
-    })))
-
 const noResult = computed(() => !props.projects.length && !props.repositories.length && !props.collections.length)
 
 const tabs = [

frontend/app/components/uikit/tag/tag.scss

@@ -33,6 +33,6 @@
 
   /* Type */
   &--transparent{
-    @apply bg-transparent px-0;
+    @apply bg-transparent text-neutral-500 px-0;
   }
 }

frontend/app/layouts/default.vue

@@ -4,9 +4,11 @@
     <slot />
     <lfx-toast theme="dark" />
     <div class="flex-grow" />
-    <client-only>
-      <lfx-footer class="mx-auto pb-6 pt-6" />
-    </client-only>
+    <div class="container">
+      <client-only>
+        <lfx-footer class="pt-10 md:pt-16 pb-5 md:pb-8 px-0" />
+      </client-only>
+    </div>
   </main>
 </template>
 

frontend/package.json

@@ -29,6 +29,7 @@
     "pinia": "^2.3.0",
     "pluralize": "^8.0.0",
     "primevue": "^4.2.5",
+    "slugify": "^1.6.6",
     "vue": "latest",
     "vue-router": "latest"
   },