From bcadea05359c12dc025f030379c5dc6f2eeb981e Mon Sep 17 00:00:00 2001
From: Baban Faraj <baban.faraj@recro.com>
Date: Tue, 31 Aug 2021 13:27:42 +0000
Subject: [PATCH] Made the column count for large screen size configurable
 based on where the project summary is placed.

---
 src/components/ProjectsSummary.vue | 30 +++++++++++++++-----
 src/views/Projects.vue             |  8 ++++--
 src/views/user/LaunchboardUser.vue | 45 ++++++++++++------------------
 3 files changed, 46 insertions(+), 37 deletions(-)

diff --git a/src/components/ProjectsSummary.vue b/src/components/ProjectsSummary.vue
index c731513..6e5f9e6 100644
--- a/src/components/ProjectsSummary.vue
+++ b/src/components/ProjectsSummary.vue
@@ -240,7 +240,7 @@
       <v-row class="justify-content-center" v-else-if="this.cardView === true">
         <v-col
           v-for="(project, index) in filteredProjects"
-          lg="4"
+          :lg="projectCardColumnLgCount"
           :key="index"
           :project="project"
           :cols="12"
@@ -265,6 +265,7 @@
                         <v-btn
                           icon
                           :href="project.links.repo"
+                          rel="noopener noreferer"
                           target="_blank"
                           v-bind="attrs"
                           v-on="on"
@@ -283,8 +284,8 @@
             <v-card-actions>
               <v-layout row justify-center class="project-card-detail">
                 <v-card-text v-if="project.latestPipeline">
-                  <div class="project-card-pipeline-name">
-                    Pipeline: {{ project.latestPipeline.name }}
+                  <div class="project-card-text">
+                    Pipeline: {{ project.latestPipeline.message }}
                   </div>
                 </v-card-text>
                 <v-tooltip bottom>
@@ -317,7 +318,13 @@
                   :key="jIndex"
                   :to="job.link"
                 >
-                  <a :href="job.link" target="_blank">{{ job.name }}; </a>
+                  <a
+                    class="project-card-text"
+                    :href="job.link"
+                    rel="noopener noreferer"
+                    target="_blank"
+                    >{{ job.name }};
+                  </a>
                 </router-link>
               </v-layout>
             </v-card-actions>
@@ -341,6 +348,10 @@ export default {
     ErrorMessage,
   },
   props: {
+    projectCardColumnLgCount: {
+      type: Number,
+      default: 4,
+    },
     detailed: {
       type: Boolean,
       default: true,
@@ -376,6 +387,7 @@ export default {
     async refreshProjects() {
       if (this.setProjectLoading) {
         this.setProjectLoading(true);
+        this.loading = true;
       }
       this.error = false;
       this.emptyString = false;
@@ -395,6 +407,7 @@ export default {
       }
       if (this.setProjectLoading) {
         this.setProjectLoading(false);
+        this.loading = false;
       }
     },
     setCardView() {
@@ -457,10 +470,13 @@ export default {
     padding-bottom: 20px;
   }
   .project-card-detail {
-    padding-top:30px;
+    padding-top: 30px;
     padding-bottom: 45px;
-    padding-left:45px;
-    padding-right:45px;
+    padding-left: 45px;
+    padding-right: 45px;
+  }
+  .project-card-text {
+    font-size: medium;
   }
   .card {
     min-height: 100%;
diff --git a/src/views/Projects.vue b/src/views/Projects.vue
index 021bdc2..562461f 100644
--- a/src/views/Projects.vue
+++ b/src/views/Projects.vue
@@ -12,13 +12,14 @@
             :refreshClick="refreshProjectData"
           >
             <div
+              class="align-items-center d-flex"
               slot="header-bar-icons"
               :cardViewProjects="cardViewProjects"
               :panelViewProjects="panelViewProjects"
             >
-              <v-tooltip top  >
+              <v-tooltip top>
                 <template v-slot:activator="{ on, attrs }">
-                  <v-btn 
+                  <v-btn
                     icon
                     v-bind="attrs"
                     v-on="on"
@@ -29,7 +30,7 @@
                 </template>
                 <span>Card View</span>
               </v-tooltip>
-              <v-tooltip top >
+              <v-tooltip top>
                 <template v-slot:activator="{ on, attrs }">
                   <v-btn
                     icon
@@ -47,6 +48,7 @@
               slot="content"
               ref="projectSummary"
               :setProjectLoading="setProjectLoading"
+              :projectCardColumnLgCount="4"
               detailed
             />
           </Section>
diff --git a/src/views/user/LaunchboardUser.vue b/src/views/user/LaunchboardUser.vue
index 03a36bc..6c11d25 100644
--- a/src/views/user/LaunchboardUser.vue
+++ b/src/views/user/LaunchboardUser.vue
@@ -60,37 +60,27 @@
           headerTitle="My Project Summary"
         >
           <div
-           class="align-items-center d-flex "
+            class="align-items-center d-flex"
             slot="header-bar-icons"
             :cardViewProjects="cardViewProjects"
             :panelViewProjects="panelViewProjects"
           >
-                <v-tooltip top>
-                  <template v-slot:activator="{ on, attrs }">
-                    <v-btn
-                      icon
-                      v-bind="attrs"
-                      v-on="on"
-                      @click="cardViewProjects"
-                    >
-                      <v-icon>mdi-view-grid</v-icon>
-                    </v-btn>
-                  </template>
-                  <span>Card View</span>
-                </v-tooltip>
-                <v-tooltip top>
-                  <template v-slot:activator="{ on, attrs }">
-                    <v-btn
-                      icon
-                      v-bind="attrs"
-                      v-on="on"
-                      @click="panelViewProjects"
-                    >
-                      <v-icon>mdi-reorder-horizontal</v-icon>
-                    </v-btn>
-                  </template>
-                  <span>Panel View</span>
-                </v-tooltip>
+            <v-tooltip top>
+              <template v-slot:activator="{ on, attrs }">
+                <v-btn icon v-bind="attrs" v-on="on" @click="cardViewProjects">
+                  <v-icon>mdi-view-grid</v-icon>
+                </v-btn>
+              </template>
+              <span>Card View</span>
+            </v-tooltip>
+            <v-tooltip top>
+              <template v-slot:activator="{ on, attrs }">
+                <v-btn icon v-bind="attrs" v-on="on" @click="panelViewProjects">
+                  <v-icon>mdi-reorder-horizontal</v-icon>
+                </v-btn>
+              </template>
+              <span>Panel View</span>
+            </v-tooltip>
           </div>
           <span slot="userinfo">
             <TutorialTooltip tooltipName="projects">
@@ -101,6 +91,7 @@
             slot="content"
             ref="projectSummary"
             :setProjectLoading="setProjectLoading"
+            :projectCardColumnLgCount="6"
           />
         </Section>
 
-- 
GitLab