mirror of
https://github.com/woodpecker-ci/woodpecker.git
synced 2024-11-30 05:41:12 +00:00
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:
parent
cbb1c46df8
commit
f5e9b3df2e
2 changed files with 12 additions and 12 deletions
|
@ -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';
|
||||||
|
|
|
@ -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"
|
||||||
|
|
Loading…
Reference in a new issue