Use full width header on pipeline view and show repo name (#2327)

Co-authored-by: Patrick Schratz <patrick.schratz@gmail.com>
Co-authored-by: 6543 <m.huber@kithara.com>

web/src/components/layout/FluidContainer.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full p-2 md:p-4 lg:px-0 mx-auto" :class="{ 'max-w-5xl': !fullWidth }">
+  <div class="w-full p-4 mx-auto" :class="{ 'max-w-5xl': !fullWidth, 'md:px-0': fullWidth }">
     <slot />
   </div>
 </template>

web/src/components/layout/scaffold/Header.vue

@@ -1,11 +1,12 @@
 <template>
   <header
     class="bg-wp-background-100 border-b-1 border-wp-background-400 dark:border-wp-background-100 dark:bg-wp-background-300 text-wp-text-100"
+    :class="{ 'md:px-4': fullWidth }"
   >
-    <FluidContainer class="!py-0">
-      <div class="flex w-full items-center justify-between py-4 <md:flex-row <md:gap-y-4">
+    <FluidContainer :full-width="fullWidth" class="!py-0">
+      <div class="flex w-full md:items-center flex-col py-2 gap-y-2 md:flex-row md:justify-between">
         <div
-          class="flex items-center min-w-0 justify-start <md:justify-center"
+          class="flex items-center content-start"
           :class="{
             'md:flex-1': searchBoxPresent,
           }"
@@ -14,7 +15,7 @@
             v-if="goBack"
             icon="back"
             :title="$t('back')"
-            class="flex-shrink-0 mr-2 <md:hidden"
+            class="flex-shrink-0 mr-2 <md:hidden md:justify-between w-8 h-8"
             @click="goBack"
           />
           <h1 class="flex text-xl min-w-0 text-wp-text-100 items-center gap-x-2">
@@ -30,7 +31,7 @@
         />
         <div
           v-if="$slots.titleActions"
-          class="flex items-center justify-end gap-x-2 <md:w-full <md:justify-center"
+          class="flex items-center md:justify-end gap-x-2"
           :class="{
             'md:flex-1': searchBoxPresent,
           }"
@@ -39,12 +40,9 @@
         </div>
       </div>
 
-      <div v-if="enableTabs" class="flex justify-between">
+      <div v-if="enableTabs" class="flex md:items-center flex-col py-2 md:flex-row md:justify-between md:py-0">
         <Tabs class="<md:order-2" />
-        <div
-          v-if="$slots.titleActions"
-          class="flex items-center justify-end gap-x-2 md:mb-2 <md:w-full <md:justify-center <md:order-1"
-        >
+        <div v-if="$slots.titleActions" class="flex content-start md:justify-end">
           <slot name="tabActions" />
         </div>
       </div>
@@ -62,6 +60,7 @@ const props = defineProps<{
   goBack?: () => void;
   enableTabs?: boolean;
   search?: string;
+  fullWidth?: boolean;
 }>();
 defineEmits(['update:search']);
 

web/src/components/layout/scaffold/Scaffold.vue

@@ -3,6 +3,7 @@
     :go-back="goBack"
     :enable-tabs="enableTabs"
     :search="search"
+    :full-width="fullWidth"
     @update:search="(value) => $emit('update:search', value)"
   >
     <template #title><slot name="title" /></template>
@@ -36,6 +37,7 @@ export interface Props {
 
   // Content
   fluidContent?: boolean;
+  fullWidth?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {

web/src/components/layout/scaffold/Tabs.vue

@@ -3,7 +3,7 @@
     <button
       v-for="tab in tabs"
       :key="tab.id"
-      class="w-full py-2 md:w-auto md:py-2 md:px-8 flex cursor-pointer md:border-b-2 text-wp-text-100 hover:text-wp-text-200 items-center"
+      class="w-full py-1 md:py-2 md:w-auto md:px-8 flex cursor-pointer md:border-b-2 text-wp-text-100 hover:text-wp-text-200 items-center"
       :class="{
         'border-wp-text-100': activeTab === tab.id,
         'border-transparent': activeTab !== tab.id,

web/src/components/repo/pipeline/PipelineLog.vue

@@ -1,7 +1,7 @@
 <template>
   <div v-if="pipeline" class="flex flex-col pt-10 md:pt-0">
     <div
-      class="flex flex-grow flex-col code-box shadow !p-0 !rounded-none md:m-2 md:mt-0 !md:rounded-md overflow-hidden"
+      class="flex flex-grow flex-col code-box shadow !p-0 !rounded-none md:m-4 md:mt-0 !md:rounded-md overflow-hidden"
       @mouseover="showActions = true"
       @mouseleave="showActions = false"
     >

web/src/components/repo/pipeline/PipelineStepList.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="flex flex-col w-full md:w-3/12 md:max-w-md md:min-w-xs md:ml-2 text-wp-text-100 gap-2 pb-2">
+  <div class="flex flex-col w-full md:w-3/12 md:max-w-md md:min-w-xs md:ml-4 text-wp-text-100 gap-2 pb-2">
     <div
-      class="flex flex-wrap p-4 gap-1 justify-between flex-shrink-0 md:rounded-md border bg-wp-background-100 border-wp-background-400 dark:bg-wp-background-200"
+      class="flex flex-wrap p-4 gap-1 justify-between flex-shrink-0 rounded-md border bg-wp-background-100 border-wp-background-400 dark:bg-wp-background-200"
     >
       <div class="flex space-x-1 items-center flex-shrink-0">
         <div class="flex items-center">
@@ -52,7 +52,7 @@
         <div
           v-for="workflow in pipeline.workflows"
           :key="workflow.id"
-          class="p-2 md:rounded-md shadow border bg-wp-background-100 border-wp-background-400 dark:bg-wp-background-200"
+          class="p-2 rounded-md shadow border bg-wp-background-100 border-wp-background-400 dark:bg-wp-background-200"
         >
           <div class="flex flex-col gap-2">
             <div v-if="workflow.environ" class="flex flex-wrap gap-x-1 gap-y-2 text-xs justify-end pt-1 pr-1">

web/src/views/repo/RepoWrapper.vue

@@ -14,7 +14,7 @@
       </span>
     </template>
     <template #titleActions>
-      <a v-if="badgeUrl" :href="badgeUrl" target="_blank" class="ml-2">
+      <a v-if="badgeUrl" :href="badgeUrl" target="_blank">
         <img :src="badgeUrl" />
       </a>
       <IconButton :href="repo.link_url" :title="$t('repo.open_in_forge')" :icon="forge ?? 'repo'" />

web/src/views/repo/pipeline/PipelineWrapper.vue

@@ -6,47 +6,53 @@
       disable-hash-mode
       :go-back="goBack"
       :fluid-content="activeTab !== 'tasks'"
+      :full-width="true"
     >
-      <template #title>
-        <span class="flex-shrink-0 text-center">{{ $t('repo.pipeline.pipeline', { pipelineId }) }}</span>
-        <span class="<md:hidden">-</span>
-        <span class="text-center truncate">{{ message }}</span>
-      </template>
+      <template #title>{{ repo.full_name }}</template>
 
       <template #titleActions>
-        <PipelineStatusIcon :status="pipeline.status" class="flex flex-shrink-0" />
+        <div class="flex md:items-center flex-col py-2 gap-x-2 md:flex-row md:justify-between">
+          <div class="flex content-start gap-x-2 py-2 md:mr-2">
+            <PipelineStatusIcon :status="pipeline.status" class="flex flex-shrink-0" />
+            <span class="flex-shrink-0 text-center">{{ $t('repo.pipeline.pipeline', { pipelineId }) }}</span>
+            <span class="hidden md:inline-block">-</span>
+            <span class="text-center truncate">{{ message }}</span>
+          </div>
 
-        <template v-if="repoPermissions.push">
-          <Button
-            v-if="pipeline.status === 'pending' || pipeline.status === 'running'"
-            class="flex-shrink-0"
-            :text="$t('repo.pipeline.actions.cancel')"
-            :is-loading="isCancelingPipeline"
-            @click="cancelPipeline"
-          />
-          <Button
-            v-else-if="pipeline.status !== 'blocked' && pipeline.status !== 'declined'"
-            class="flex-shrink-0"
-            :text="$t('repo.pipeline.actions.restart')"
-            :is-loading="isRestartingPipeline"
-            @click="restartPipeline"
-          />
-          <Button
-            v-if="pipeline.status === 'success'"
-            class="flex-shrink-0"
-            :text="$t('repo.pipeline.actions.deploy')"
-            @click="showDeployPipelinePopup = true"
-          />
-          <DeployPipelinePopup
-            :pipeline-number="pipelineId"
-            :open="showDeployPipelinePopup"
-            @close="showDeployPipelinePopup = false"
-          />
-        </template>
+          <template v-if="repoPermissions.push">
+            <div class="flex content-start gap-x-2">
+              <Button
+                v-if="pipeline.status === 'pending' || pipeline.status === 'running'"
+                class="flex-shrink-0"
+                :text="$t('repo.pipeline.actions.cancel')"
+                :is-loading="isCancelingPipeline"
+                @click="cancelPipeline"
+              />
+              <Button
+                v-else-if="pipeline.status !== 'blocked' && pipeline.status !== 'declined'"
+                class="flex-shrink-0"
+                :text="$t('repo.pipeline.actions.restart')"
+                :is-loading="isRestartingPipeline"
+                @click="restartPipeline"
+              />
+              <Button
+                v-if="pipeline.status === 'success'"
+                class="flex-shrink-0"
+                :text="$t('repo.pipeline.actions.deploy')"
+                @click="showDeployPipelinePopup = true"
+              />
+              <DeployPipelinePopup
+                :pipeline-number="pipelineId"
+                :open="showDeployPipelinePopup"
+                @close="showDeployPipelinePopup = false"
+              />
+            </div>
+          </template>
+        </div>
       </template>
 
       <template #tabActions>
-        <div class="flex justify-between gap-x-4 text-wp-text-100 flex-shrink-0 pb-2 md:p-0 mx-auto md:mr-0">
+        <div class="flex gap-x-4">
           <div class="flex space-x-1 items-center flex-shrink-0" :title="created">
             <Icon name="since" />
             <span>{{ since }}</span>