Made the column count for large screen size configurable based on where the...

Made the column count for large screen size configurable based on where the project summary is placed.

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%;

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>

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>