Small improvements to mobile interface (#2202)

1. pipeline step list: do not have a separate scroll container on step list 2. merge title bars on logs (probably regression of #2140)
woodpecker-ci · Aug 12, 2023 · f5e9b3d · f5e9b3d
1 parent cbb1c46
commit f5e9b3d
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 12 deletions.
diff --git a/web/src/components/repo/pipeline/PipelineLog.vue b/web/src/components/repo/pipeline/PipelineLog.vue
@@ -1,20 +1,16 @@
 <template>
   <div v-if="pipeline" class="flex flex-col pt-10 md:pt-0">
-    <div
-      class="fixed top-0 left-0 w-full md:hidden flex px-4 py-2 bg-wp-background-100 dark:bg-wp-background-200 text-wp-text-100"
-      @click="$emit('update:step-id', null)"
-    >
-      <span>{{ step?.name }}</span>
-      <Icon name="close" class="ml-auto" />
-    </div>
-
     <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"
       @mouseover="showActions = true"
       @mouseleave="showActions = false"
     >
-      <div class="flex flex-row items-center w-full bg-wp-code-100 px-4 py-2">
-        <span class="text-base font-bold text-wp-code-text-alt-100">{{ $t('repo.pipeline.log_title') }}</span>
+      <div class="<md:fixed <md:top-0 <md:left-0 flex flex-row items-center w-full bg-wp-code-100 px-4 py-2">
+        <span class="text-base font-bold text-wp-code-text-alt-100">
+          <span class="<md:hidden">{{ $t('repo.pipeline.log_title') }}</span>
+          <span class="md:hidden">{{ step?.name }}</span>
+        </span>
+
         <div class="flex flex-row items-center ml-auto gap-x-2">
           <IconButton
             v-if="step?.end_time !== undefined"
@@ -33,6 +29,11 @@
             :icon="autoScroll ? 'auto-scroll' : 'auto-scroll-off'"
             @click="autoScroll = !autoScroll"
           />
+          <IconButton
+            class="!hover:bg-white !hover:bg-opacity-10 !md:hidden"
+            icon="close"
+            @click="$emit('update:step-id', null)"
+          />
         </div>
       </div>
 
@@ -105,7 +106,6 @@ import { computed, inject, nextTick, onMounted, Ref, ref, toRef, watch } from 'v
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 
-import Icon from '~/components/atomic/Icon.vue';
 import IconButton from '~/components/atomic/IconButton.vue';
 import PipelineStatusIcon from '~/components/repo/pipeline/PipelineStatusIcon.vue';
 import useApiClient from '~/compositions/useApiClient';

diff --git a/web/src/components/repo/pipeline/PipelineStepList.vue b/web/src/components/repo/pipeline/PipelineStepList.vue
@@ -48,7 +48,7 @@
     </div>
 
     <div class="flex-grow min-h-0 w-full relative">
-      <div class="absolute top-0 left-0 right-0 h-full flex flex-col overflow-y-scroll gap-y-2">
+      <div class="absolute top-0 left-0 right-0 h-full flex flex-col md:overflow-y-scroll gap-y-2">
         <div
           v-for="workflow in pipeline.workflows"
           :key="workflow.id"