From fa6a8aa18c4db664ee90b5d457f39d0ec322fe0b Mon Sep 17 00:00:00 2001
From: Patrick Schratz <patrick.schratz@gmail.com>
Date: Tue, 31 Dec 2024 12:26:44 +0100
Subject: [PATCH] Revert "Two row layout for title and context of pipeline
 list" (#4649)

---
 .../components/repo/pipeline/PipelineItem.vue | 85 ++++++++-----------
 1 file changed, 36 insertions(+), 49 deletions(-)

diff --git a/web/src/components/repo/pipeline/PipelineItem.vue b/web/src/components/repo/pipeline/PipelineItem.vue
index 86f58aae2..e943de2a6 100644
--- a/web/src/components/repo/pipeline/PipelineItem.vue
+++ b/web/src/components/repo/pipeline/PipelineItem.vue
@@ -1,8 +1,8 @@
 <template>
   <ListItem v-if="pipeline" class="p-0 w-full">
-    <div class="flex items-center col-span-4">
+    <div class="flex items-center w-11">
       <div
-        class="h-full w-2"
+        class="w-3 h-full"
         :class="{
           'bg-wp-state-warn-100': pipeline.status === 'pending',
           'bg-wp-error-100 dark:bg-wp-error-200': pipelineStatusColors[pipeline.status] === 'red',
@@ -11,14 +11,36 @@
           'bg-wp-state-info-100': pipelineStatusColors[pipeline.status] === 'blue',
         }"
       />
-      <div class="w-12 flex justify-center items-center h-full">
+      <div class="flex flex-wrap justify-between items-center w-8 h-full">
         <PipelineRunningIcon v-if="pipeline.status === 'started' || pipeline.status === 'running'" />
-        <PipelineStatusIcon v-else :status="pipeline.status" />
+        <PipelineStatusIcon v-else class="mx-2 md:mx-3" :status="pipeline.status" />
+      </div>
+    </div>
+
+    <div class="flex py-2 px-4 flex-grow min-w-0 <md:flex-wrap">
+      <div class="<md:hidden flex items-center flex-shrink-0">
+        <Icon v-if="pipeline.event === 'cron'" name="stopwatch" class="text-wp-text-100" />
+        <img v-else class="rounded-md w-6" :src="pipeline.author_avatar" />
       </div>
 
-      <div class="flex px-2 mr-2 flex-grow min-w-0 <md:flex-wrap w-full flex-col items-center min-w-0 py-4 gap-2">
-        <div class="w-full flex items-center gap-2">
-          <span :title="pipelineEventTitle" class="text-wp-text-100">
+      <div class="flex items-center md:mx-4 w-full md:w-auto min-w-0">
+        <!-- eslint-disable-next-line @intlify/vue-i18n/no-raw-text -->
+        <span class="text-wp-text-alt-100 <md:hidden">#{{ pipeline.number }}</span>
+        <!-- eslint-disable-next-line @intlify/vue-i18n/no-raw-text -->
+        <span class="text-wp-text-alt-100 <md:hidden mx-2">-</span>
+        <span
+          class="text-wp-text-100 <md:underline whitespace-nowrap overflow-hidden overflow-ellipsis"
+          :title="message"
+        >
+          {{ shortMessage }}
+        </span>
+      </div>
+
+      <div
+        class="flex-shrink-0 gap-x-4 gap-y-2 grid grid-cols-2 grid-rows-2 grid-flow-col md:ml-auto py-2 w-full md:w-96 text-wp-text-100"
+      >
+        <div class="flex items-center space-x-2 min-w-0">
+          <span :title="pipelineEventTitle">
             <Icon v-if="pipeline.event === 'pull_request'" name="pull-request" />
             <Icon v-else-if="pipeline.event === 'pull_request_closed'" name="pull-request-closed" />
             <Icon v-else-if="pipeline.event === 'deployment'" name="deployment" />
@@ -27,58 +49,24 @@
             <Icon v-else-if="pipeline.event === 'manual'" name="manual-pipeline" />
             <Icon v-else name="push" />
           </span>
-          <!-- eslint-disable-next-line @intlify/vue-i18n/no-raw-text -->
-          <span class="text-wp-text-alt-100 text-lg">#{{ pipeline.number }}</span>
-          <span class="text-wp-text-100 text-lg whitespace-nowrap overflow-hidden overflow-ellipsis" :title="message">
-            {{ shortMessage }}
-          </span>
+          <span class="truncate">{{ prettyRef }}</span>
         </div>
 
-        <div class="flex w-full gap-2">
-          <div class="flex items-center w-22 text-wp-text-100">
-            <Icon name="commit" />
-            <span class="truncate">{{ pipeline.commit.slice(0, 7) }}</span>
-          </div>
-
-          <div class="flex items-center min-w-0 text-wp-text-100">
-            <Icon
-              v-if="pipeline.event === 'pull_request' || pipeline.event === 'pull_request_closed'"
-              name="pull-request"
-            />
-            <Icon v-else-if="pipeline.event === 'tag' || pipeline.event === 'release'" name="tag" />
-            <Icon v-else name="push" />
-
-            <span class="ml-1 truncate">
-              {{ prettyRef }}
-              <!-- eslint-disable @intlify/vue-i18n/no-raw-text-->
-              <span
-                v-if="pipeline.event === 'pull_request' || pipeline.event === 'pull_request_closed'"
-                :title="prTitleWithDescription"
-              >
-                ({{ prTitle }})
-              </span>
-              <!-- eslint-enable @intlify/vue-i18n/no-raw-text-->
-            </span>
-          </div>
+        <div class="flex items-center space-x-2 min-w-0">
+          <Icon name="commit" />
+          <span class="truncate">{{ pipeline.commit.slice(0, 10) }}</span>
         </div>
-      </div>
-    </div>
 
-    <div class="<md:hidden flex ml-auto mr-6 items-center">
-      <div class="flex flex-col w-full w-48 py-2 gap-x-4 gap-y-2 flex-shrink-0 text-wp-text-100 justify-center h-full">
-        <div class="flex space-x-2 min-w-0" :title="$t('repo.pipeline.duration')">
+        <div class="flex items-center space-x-2 min-w-0" :title="$t('repo.pipeline.duration')">
           <Icon name="duration" />
           <span class="truncate">{{ duration }}</span>
         </div>
 
-        <div class="flex space-x-2 min-w-0" :title="$t('repo.pipeline.created', { created })">
+        <div class="flex items-center space-x-2 min-w-0" :title="$t('repo.pipeline.created', { created })">
           <Icon name="since" />
           <span class="truncate">{{ since }}</span>
         </div>
       </div>
-
-      <Icon v-if="pipeline.event === 'cron'" name="stopwatch" class="text-wp-text-100 w-8" />
-      <img v-else class="rounded-md w-8" :src="pipeline.author_avatar" :title="pipeline.author" />
     </div>
   </ListItem>
 </template>
@@ -102,8 +90,7 @@ const props = defineProps<{
 const { t } = useI18n();
 
 const pipeline = toRef(props, 'pipeline');
-const { since, duration, message, shortMessage, prettyRef, created, prTitle, prTitleWithDescription } =
-  usePipeline(pipeline);
+const { since, duration, message, shortMessage, prettyRef, created } = usePipeline(pipeline);
 
 const pipelineEventTitle = computed(() => {
   switch (pipeline.value.event) {