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)
This commit is contained in:
qwerty287 2023-08-12 12:36:25 +02:00 committed by GitHub
parent cbb1c46df8
commit f5e9b3df2e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 12 additions and 12 deletions

View file

@ -1,20 +1,16 @@
<template> <template>
<div v-if="pipeline" class="flex flex-col pt-10 md:pt-0"> <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 <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-2 md:mt-0 !md:rounded-md overflow-hidden"
@mouseover="showActions = true" @mouseover="showActions = true"
@mouseleave="showActions = false" @mouseleave="showActions = false"
> >
<div class="flex flex-row items-center w-full bg-wp-code-100 px-4 py-2"> <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">{{ $t('repo.pipeline.log_title') }}</span> <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"> <div class="flex flex-row items-center ml-auto gap-x-2">
<IconButton <IconButton
v-if="step?.end_time !== undefined" v-if="step?.end_time !== undefined"
@ -33,6 +29,11 @@
:icon="autoScroll ? 'auto-scroll' : 'auto-scroll-off'" :icon="autoScroll ? 'auto-scroll' : 'auto-scroll-off'"
@click="autoScroll = !autoScroll" @click="autoScroll = !autoScroll"
/> />
<IconButton
class="!hover:bg-white !hover:bg-opacity-10 !md:hidden"
icon="close"
@click="$emit('update:step-id', null)"
/>
</div> </div>
</div> </div>
@ -105,7 +106,6 @@ import { computed, inject, nextTick, onMounted, Ref, ref, toRef, watch } from 'v
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { useRoute } from 'vue-router'; import { useRoute } from 'vue-router';
import Icon from '~/components/atomic/Icon.vue';
import IconButton from '~/components/atomic/IconButton.vue'; import IconButton from '~/components/atomic/IconButton.vue';
import PipelineStatusIcon from '~/components/repo/pipeline/PipelineStatusIcon.vue'; import PipelineStatusIcon from '~/components/repo/pipeline/PipelineStatusIcon.vue';
import useApiClient from '~/compositions/useApiClient'; import useApiClient from '~/compositions/useApiClient';

View file

@ -48,7 +48,7 @@
</div> </div>
<div class="flex-grow min-h-0 w-full relative"> <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 <div
v-for="workflow in pipeline.workflows" v-for="workflow in pipeline.workflows"
:key="workflow.id" :key="workflow.id"