Project mobile header and alignments (#105)

gaspergrom · web-flow · commit 4775643e32fb · 2025-03-14T10:29:15.000Z
Signed-off-by: Gašper Grom &lt;gasper.grom@gmail.com&gt;
diff --git a/frontend/app/components/modules/project/components/contributors/active-contributors.vue b/frontend/app/components/modules/project/components/contributors/active-contributors.vue
@@ -1,5 +1,5 @@
 <template>
-  <lfx-card class="p-6">
+  <lfx-card class="p-4 sm:p-6">
     <h3 class="text-heading-3 font-semibold font-secondary pb-3">Active contributors</h3>
     <p class="text-body-2 text-neutral-500 mb-6">
       Active contributor is an individual who performed activities such as commits, issues, or
diff --git a/frontend/app/components/modules/project/components/contributors/active-organizations.vue b/frontend/app/components/modules/project/components/contributors/active-organizations.vue
@@ -1,5 +1,5 @@
 <template>
-  <lfx-card class="p-6">
+  <lfx-card class="p-4 sm:p-6">
     <h3 class="text-heading-3 font-semibold font-secondary pb-3">Active organizations</h3>
     <p class="text-body-2 text-neutral-500 mb-6">
       Organizations that had at least one activity during the selected period, carried out by contributors on their
diff --git a/frontend/app/components/modules/project/components/contributors/contributor-dependency.vue b/frontend/app/components/modules/project/components/contributors/contributor-dependency.vue
@@ -1,5 +1,5 @@
 <template>
-  <lfx-card class="p-6">
+  <lfx-card class="p-4 sm:p-6">
     <h3 class="text-heading-3 font-semibold font-secondary pb-3">Contributor dependency</h3>
     <p class="text-body-2 text-neutral-500 mb-5">
       Distribution of contributions among different contributors, highlighting key individuals who are actively
diff --git a/frontend/app/components/modules/project/components/contributors/contributors-leaderboard.vue b/frontend/app/components/modules/project/components/contributors/contributors-leaderboard.vue
@@ -1,5 +1,5 @@
 <template>
-  <lfx-card class="p-6">
+  <lfx-card class="p-4 sm:p-6">
     <h3 class="text-heading-3 font-semibold font-secondary pb-3">Contributors leaderboard</h3>
     <p class="text-body-2 text-neutral-500 mb-6">
       Contributor ranking based on the number of activities performed and the impact on the project.
diff --git a/frontend/app/components/modules/project/components/contributors/geographical-distribution.vue b/frontend/app/components/modules/project/components/contributors/geographical-distribution.vue
@@ -1,36 +1,32 @@
 <template>
-  <lfx-card class="py-6">
-    <div class="px-6">
-      <h3 class="text-heading-3 font-semibold font-secondary pb-3">Geographical distribution</h3>
-      <p class="text-body-2 text-neutral-500 mb-6">
-        Distribution of contributors and organizations based on geographical location at the time of their contributions
-        during the selected period.
-        <a
-          :href="links.learnMore"
-          class="text-brand-500"
-          target="_blank"
-        >Learn more</a>
-      </p>
-      <hr>
-    </div>
+  <lfx-card class="p-4 sm:p-6">
+    <h3 class="text-heading-3 font-semibold font-secondary pb-3">Geographical distribution</h3>
+    <p class="text-body-2 text-neutral-500 mb-6">
+      Distribution of contributors and organizations based on geographical location at the time of their contributions
+      during the selected period.
+      <a
+        :href="links.learnMore"
+        class="text-brand-500"
+        target="_blank"
+      >Learn more</a>
+    </p>
+    <hr>
     <section class="mt-5">
-      <div class="px-6">
-        <div class="flex flex-row gap-4 items-center mb-10">
-          <div class="basis-1/2">
-            <lfx-tabs
-              :tabs="tabs"
-              :model-value="activeTab"
-              width-type="inline"
-              @update:model-value="activeTab = $event"
-            />
-          </div>
-          <div class="basis-1/2 flex justify-end">
-            <lfx-dropdown
-              v-model="metric"
-              icon="fa-light fa-display-code"
-              :options="metricOptions"
-            />
-          </div>
+      <div class="flex flex-row gap-4 items-center mb-10">
+        <div class="basis-1/2">
+          <lfx-tabs
+            :tabs="tabs"
+            :model-value="activeTab"
+            width-type="inline"
+            @update:model-value="activeTab = $event"
+          />
+        </div>
+        <div class="basis-1/2 flex justify-end">
+          <lfx-dropdown
+            v-model="metric"
+            icon="fa-light fa-display-code"
+            :options="metricOptions"
+          />
         </div>
       </div>
       <lfx-project-load-state
@@ -44,7 +40,7 @@
         <div class="w-full h-[330px] border-solid border-neutral-100 border-x-0 border-y">
           <lfx-chart :config="getGeoMapChartConfig(chartData, chartSeries, getMaxValue(chartData))" />
         </div>
-        <div class="px-6 mt-5">
+        <div class="mt-5">
           <div
             v-if="status !== 'pending'"
             class="flex flex-col gap-5"
diff --git a/frontend/app/components/modules/project/components/contributors/industry-distribution.vue b/frontend/app/components/modules/project/components/contributors/industry-distribution.vue
@@ -1,5 +1,5 @@
 <template>
-  <lfx-card class="p-6">
+  <lfx-card class="p-4 sm:p-6">
     <h3 class="text-heading-3 font-semibold font-secondary pb-3">
       Industry distribution
     </h3>
diff --git a/frontend/app/components/modules/project/components/contributors/organization-dependency.vue b/frontend/app/components/modules/project/components/contributors/organization-dependency.vue
@@ -1,5 +1,5 @@
 <template>
-  <lfx-card class="p-6">
+  <lfx-card class="p-4 sm:p-6">
     <h3 class="text-heading-3 font-semibold font-secondary pb-3">Organization dependency</h3>
     <p class="text-body-2 text-neutral-500 mb-5">
       Distribution of contributions across different organizations, whose contributors were actively involved in the
diff --git a/frontend/app/components/modules/project/components/contributors/organizations-leaderboard.vue b/frontend/app/components/modules/project/components/contributors/organizations-leaderboard.vue
@@ -1,5 +1,5 @@
 <template>
-  <lfx-card class="p-6">
+  <lfx-card class="p-4 sm:p-6">
     <h3 class="text-heading-3 font-semibold font-secondary pb-3">Organizations leaderboard</h3>
     <p class="text-body-2 text-neutral-500 mb-6">
       Organization ranking based on the number of activities performed by contributors on their behalf and the impact on
diff --git a/frontend/app/components/modules/project/components/contributors/retention.vue b/frontend/app/components/modules/project/components/contributors/retention.vue
@@ -1,5 +1,5 @@
 <template>
-  <lfx-card class="p-6">
+  <lfx-card class="p-4 sm:p-6">
     <h3 class="text-heading-3 font-semibold font-secondary pb-3">Retention</h3>
     <p class="text-body-2 text-neutral-500 mb-6">
       Rate at which contributors and organizations continued contributing to the project during the selected period.
diff --git a/frontend/app/components/modules/project/components/development/active-days.vue b/frontend/app/components/modules/project/components/development/active-days.vue
@@ -1,5 +1,5 @@
 <template>
-  <lfx-card class="p-6">
+  <lfx-card class="p-4 sm:p-6">
     <h3 class="text-heading-3 font-semibold font-secondary pb-3">
       Active days
     </h3>
diff --git a/frontend/app/components/modules/project/components/development/average-time-to-merge.vue b/frontend/app/components/modules/project/components/development/average-time-to-merge.vue
@@ -1,5 +1,5 @@
 <template>
-  <lfx-card class="p-6">
+  <lfx-card class="p-4 sm:p-6">
     <h3 class="text-heading-3 font-semibold font-secondary pb-3">
       Average time to merge
     </h3>
diff --git a/frontend/app/components/modules/project/components/development/code-review-engagement.vue b/frontend/app/components/modules/project/components/development/code-review-engagement.vue
@@ -1,5 +1,5 @@
 <template>
-  <lfx-card class="p-6">
+  <lfx-card class="p-4 sm:p-6">
     <h3 class="text-heading-3 font-semibold font-secondary pb-3">
       Code review engagement
     </h3>
diff --git a/frontend/app/components/modules/project/components/development/contributions-outside-work-hours.vue b/frontend/app/components/modules/project/components/development/contributions-outside-work-hours.vue
@@ -1,5 +1,5 @@
 <template>
-  <lfx-card class="p-6">
+  <lfx-card class="p-4 sm:p-6">
     <h3 class="text-heading-3 font-semibold font-secondary pb-3">
       Contributions outside work hours
     </h3>
diff --git a/frontend/app/components/modules/project/components/development/issues-resolution.vue b/frontend/app/components/modules/project/components/development/issues-resolution.vue
@@ -1,5 +1,5 @@
 <template>
-  <lfx-card class="p-6">
+  <lfx-card class="p-4 sm:p-6">
     <h3 class="text-heading-3 font-semibold font-secondary pb-3">
       Issues resolution
     </h3>
diff --git a/frontend/app/components/modules/project/components/development/merge-lead-time.vue b/frontend/app/components/modules/project/components/development/merge-lead-time.vue
@@ -1,5 +1,5 @@
 <template>
-  <lfx-card class="p-6">
+  <lfx-card class="p-4 sm:p-6">
     <h3 class="text-heading-3 font-semibold font-secondary pb-3">
       Merge lead time
     </h3>
diff --git a/frontend/app/components/modules/project/components/development/pull-requests.vue b/frontend/app/components/modules/project/components/development/pull-requests.vue
@@ -1,5 +1,5 @@
 <template>
-  <lfx-card class="p-6">
+  <lfx-card class="p-4 sm:p-6">
     <h3 class="text-heading-3 font-semibold font-secondary pb-3">
       Pull requests
     </h3>
diff --git a/frontend/app/components/modules/project/components/development/review-time-by-pull-request-size.vue b/frontend/app/components/modules/project/components/development/review-time-by-pull-request-size.vue
@@ -1,5 +1,5 @@
 <template>
-  <lfx-card class="p-6">
+  <lfx-card class="p-4 sm:p-6">
     <h3 class="text-heading-3 font-semibold font-secondary pb-3">
       Review time by pull request size
     </h3>
diff --git a/frontend/app/components/modules/project/components/development/wait-time-first-review.vue b/frontend/app/components/modules/project/components/development/wait-time-first-review.vue
@@ -1,5 +1,5 @@
 <template>
-  <lfx-card class="p-6">
+  <lfx-card class="p-4 sm:p-6">
     <h3 class="text-heading-3 font-semibold font-secondary pb-3">
       Wait time for 1st review
     </h3>
diff --git a/frontend/app/components/modules/project/components/popularity/forks.vue b/frontend/app/components/modules/project/components/popularity/forks.vue
@@ -1,5 +1,5 @@
 <template>
-  <lfx-card class="p-6">
+  <lfx-card class="p-4 sm:p-6">
     <h3 class="text-heading-3 font-semibold font-secondary pb-3">
       Forks
     </h3>
diff --git a/frontend/app/components/modules/project/components/popularity/github-mentions.vue b/frontend/app/components/modules/project/components/popularity/github-mentions.vue
@@ -1,5 +1,5 @@
 <template>
-  <lfx-card class="p-6">
+  <lfx-card class="p-4 sm:p-6">
     <h3 class="text-heading-3 font-semibold font-secondary pb-3">
       GitHub Mentions
     </h3>
diff --git a/frontend/app/components/modules/project/components/popularity/package-downloads.vue b/frontend/app/components/modules/project/components/popularity/package-downloads.vue
@@ -1,5 +1,5 @@
 <template>
-  <lfx-card class="p-6">
+  <lfx-card class="p-4 sm:p-6">
     <h3 class="text-heading-3 font-semibold font-secondary pb-3">
       Package downloads
     </h3>
diff --git a/frontend/app/components/modules/project/components/popularity/press-mentions.vue b/frontend/app/components/modules/project/components/popularity/press-mentions.vue
@@ -1,5 +1,5 @@
 <template>
-  <lfx-card class="p-6">
+  <lfx-card class="p-4 sm:p-6">
     <h3 class="text-heading-3 font-semibold font-secondary pb-3">
       Press mentions
     </h3>
diff --git a/frontend/app/components/modules/project/components/popularity/search-queries.vue b/frontend/app/components/modules/project/components/popularity/search-queries.vue
@@ -1,5 +1,5 @@
 <template>
-  <lfx-card class="p-6">
+  <lfx-card class="p-4 sm:p-6">
     <h3 class="text-heading-3 font-semibold font-secondary pb-3">
       Search queries
     </h3>
diff --git a/frontend/app/components/modules/project/components/popularity/social-mentions.vue b/frontend/app/components/modules/project/components/popularity/social-mentions.vue
@@ -1,5 +1,5 @@
 <template>
-  <lfx-card class="p-6">
+  <lfx-card class="p-4 sm:p-6">
     <h3 class="text-heading-3 font-semibold font-secondary pb-3">
       Social mentions
     </h3>
diff --git a/frontend/app/components/modules/project/components/popularity/stars.vue b/frontend/app/components/modules/project/components/popularity/stars.vue
@@ -1,5 +1,5 @@
 <template>
-  <lfx-card class="p-6">
+  <lfx-card class="p-4 sm:p-6">
     <h3 class="text-heading-3 font-semibold font-secondary pb-3">
       Stars
     </h3>
diff --git a/frontend/app/components/modules/project/components/shared/header.vue b/frontend/app/components/modules/project/components/shared/header.vue
@@ -5,7 +5,7 @@
         <div
           v-if="props.project"
           class="ease-linear transition-all"
-          :class="scrollTop > 50 ? 'py-4' : 'py-6'"
+          :class="scrollTop > 50 ? 'py-3 md:py-4' : 'py-3 md:py-6'"
         >
 
           <div class="flex items-center justify-between ">
@@ -19,28 +19,27 @@
               </lfx-back>
               <lfx-avatar
                 type="organization"
-                :size="scrollTop > 50 ? 'normal' : 'large'"
+                :size="scrollTop > 50 ? 'normal' : (pageWidth < 768 ? 'normal' : 'large')"
                 class="mr-4"
                 :src="props.project.logo || ''"
               />
               <h1
-                class="font-bold mr-3 ease-linear transition-all font-secondary duration-200"
-                :class="scrollTop > 50 ? 'text-heading-3' : 'text-heading-2'"
+                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'"
               >
                 {{ props.project.name }}
               </h1>
               <span
-                class="mr-1 text-neutral-400 font-secondary leading-8 ease-linear transition-all"
-                :class="scrollTop > 50 ? 'text-xl' : 'text-2xl'"
+                class="mr-1 text-neutral-400 font-secondary leading-8 ease-linear transition-all text-2xl"
               >/</span>
               <div
                 class="flex items-center gap-2 cursor-pointer px-2 py-0.5
               rounded-lg transition hover:bg-neutral-100"
                 @click="isSearchRepoModalOpen = true"
               >
                 <p
-                  class="text-neutral-400 leading-8 ease-linear transition-all"
-                  :class="scrollTop > 50 ? 'text-xl' : 'text-2xl'"
+                  class="text-neutral-400 leading-8 ease-linear transition-all text-base"
+                  :class="scrollTop > 50 ? 'md:text-xl' : 'md:text-2xl'"
                 >
                   <span
                     v-if="repoName"
@@ -58,20 +57,22 @@
                 />
               </div>
             </div>
-            <lfx-share>
-              <lfx-button
-                type="tertiary"
-                class="!rounded-full"
-              >
-                <lfx-icon name="link-simple" />
-                Share
-              </lfx-button>
-            </lfx-share>
+            <div class="hidden sm:block">
+              <lfx-share>
+                <lfx-button
+                  type="tertiary"
+                  class="!rounded-full"
+                >
+                  <lfx-icon name="link-simple" />
+                  Share
+                </lfx-button>
+              </lfx-share>
+            </div>
           </div>
         </div>
         <div
-          class="flex justify-between items-center transition-all"
-          :class="scrollTop > 50 ? 'py-4' : 'py-5'"
+          class="flex justify-between items-center transition-all overflow-auto gap-3 -mx-5 sm:mx-0 px-5 sm:px-0 py-3"
+          :class="scrollTop > 50 ? 'md:py-4' : 'md:py-5'"
         >
           <div class="flex items-center gap-3">
             <!--            <lfx-menu-button-->
@@ -140,6 +141,7 @@ import LfxProjectRepositorySwitch from "~/components/modules/project/components/
 import LfxBack from "~/components/uikit/back/back.vue";
 import LfxProjectDateRangePicker from "~/components/modules/project/components/shared/header/date-range-picker.vue";
 import LfxMaintainHeight from "~/components/uikit/maintain-height/maintain-height.vue";
+import useResponsive from "~/components/shared/utils/responsive";
 
 const props = defineProps<{
   project: Project
@@ -152,6 +154,7 @@ const repoName = computed<string>(() => route.params.name as string);
 const isSearchRepoModalOpen = ref(false);
 
 const {scrollTop} = useScroll();
+const {pageWidth} = useResponsive();
 </script>
 
 <script lang="ts">
diff --git a/frontend/app/components/modules/project/components/shared/header/date-range-picker.vue b/frontend/app/components/modules/project/components/shared/header/date-range-picker.vue
@@ -6,7 +6,7 @@
     >
       <div
         class="flex items-center gap-2 cursor-pointer text-sm leading-5 font-medium
-    py-2 px-3 transition hover:bg-neutral-50 rounded-lg"
+    py-2 px-3 transition hover:bg-neutral-50 rounded-lg whitespace-nowrap"
         :class="isOpen ? 'bg-neutral-50' : ''"
       >
         <lfx-icon
diff --git a/frontend/app/components/modules/project/views/contributors.vue b/frontend/app/components/modules/project/views/contributors.vue
@@ -1,17 +1,17 @@
 <template>
-  <div class="container">
-    <div class="flex justify-between pt-10">
-      <div class="w-1/4 pr-10 max-md:hidden block">
+  <div class="container !px-5 lg:!px-10">
+    <div class="flex justify-between pt-5 md:pt-10">
+      <div class="w-1/4 pr-5 min-w-50 xl:pr-10 max-md:hidden block">
         <lfx-side-nav
           :list="sideNavItems"
           :model-value="activeItem"
           @update:model-value="onSideNavUpdate"
         />
       </div>
 
-      <div class="max-lg:w-full w-1/2 pb-10">
+      <div class="max-lg:w-full w-1/2 pb-6 md:pb-10">
         <lfx-scroll-area
-          class="flex flex-col gap-12"
+          class="flex flex-col gap-5 md:gap-8"
           @scrolled-to-view="onScrolledToView"
         >
           <template #default="{ observer }">
@@ -70,7 +70,7 @@
         </lfx-scroll-area>
       </div>
 
-      <div class="w-1/4 pl-10 max-lg:hidden block" />
+      <div class="w-1/4 pl-5 xl:pl-10 max-lg:hidden block" />
     </div>
   </div>
 </template>
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
@@ -72,7 +72,8 @@ export default {
         120: '30rem',
       },
       minWidth: {
-        29: '7.25rem'
+        29: '7.25rem',
+        50: '12.5rem',
       },
       spacing: {
         13: '3.25rem',
