mirrors/woodpecker
1
0
Fork 0
mirror of https://github.com/woodpecker-ci/woodpecker.git synced 2024-12-17 05:56:29 +00:00
Code Issues Projects Releases Wiki Activity

feat: use em sizings instead of px

Browse source
This commit is contained in:
pat-s 2024-12-16 11:10:55 +01:00
parent 8f6c2db289
commit a93e1b3ea9
No known key found for this signature in database
GPG key ID: 3C6318841EF78925
4 changed files with 60 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

78
web/src/components/atomic/Icon.vue
View file

@ -1,59 +1,59 @@
<!-- cSpell:ignore radiobox timelapse -->
<template>
<SvgIcon v-if="name === 'duration'" :path="mdiTimelapse" size="20" />
<SvgIcon v-else-if="name === 'since'" :path="mdiClockTimeEightOutline" size="20" />
<SvgIcon v-else-if="name === 'push'" :path="mdiSourceBranch" size="20" />
<SvgIcon v-else-if="name === 'pull-request'" :path="mdiSourcePull" size="20" />
<SvgIcon v-else-if="name === 'pull-request-closed'" :path="mdiSourceMerge" size="20" />
<SvgIcon v-else-if="name === 'manual-pipeline'" :path="mdiGestureTap" size="20" />
<SvgIcon v-else-if="name === 'tag'" :path="mdiTagOutline" size="20" />
<SvgIcon v-else-if="name === 'deployment'" :path="mdiPackageVariant" size="20" />
<SvgIcon v-else-if="name === 'commit'" :path="mdiSourceCommit" size="20" />
<SvgIcon v-else-if="name === 'back'" :path="mdiArrowLeft" size="20" />
<SvgIcon v-if="name === 'duration'" :path="mdiTimelapse" size="1em" />
<SvgIcon v-else-if="name === 'since'" :path="mdiClockTimeEightOutline" size="1em" />
<SvgIcon v-else-if="name === 'push'" :path="mdiSourceBranch" size="1em" />
<SvgIcon v-else-if="name === 'pull-request'" :path="mdiSourcePull" size="1em" />
<SvgIcon v-else-if="name === 'pull-request-closed'" :path="mdiSourceMerge" size="1em" />
<SvgIcon v-else-if="name === 'manual-pipeline'" :path="mdiGestureTap" size="1em" />
<SvgIcon v-else-if="name === 'tag'" :path="mdiTagOutline" size="1em" />
<SvgIcon v-else-if="name === 'deployment'" :path="mdiPackageVariant" size="1em" />
<SvgIcon v-else-if="name === 'commit'" :path="mdiSourceCommit" size="1em" />
<SvgIcon v-else-if="name === 'back'" :path="mdiArrowLeft" size="1em" />
<SvgIcon v-else-if="name === 'github'" :path="mdiGithub" size="32" />
<SvgIcon v-else-if="name === 'repo'" :path="mdiGit" size="32" />
<SvgIcon v-else-if="name === 'settings'" :path="mdiCog" size="32" />
<SvgIcon v-else-if="name === 'trash'" :path="mdiTrashCanOutline" size="20" />
<SvgIcon v-else-if="name === 'status-blocked'" :path="mdiPlayCircleOutline" size="20" />
<SvgIcon v-else-if="name === 'status-declined'" :path="mdiStopCircleOutline" size="20" />
<SvgIcon v-else-if="name === 'trash'" :path="mdiTrashCanOutline" size="1em" />
<SvgIcon v-else-if="name === 'status-blocked'" :path="mdiPlayCircleOutline" size="1em" />
<SvgIcon v-else-if="name === 'status-declined'" :path="mdiStopCircleOutline" size="1em" />
<SvgIcon
v-else-if="name === 'status-failure' || name === 'status-error' || name === 'status-killed'"
type="mdi"
:path="mdiCloseCircleOutline"
size="20"
size="1em"
/>
<SvgIcon v-else-if="name === 'status-pending'" :path="mdiRadioboxBlank" size="20" />
<SvgIcon v-else-if="name === 'status-pending'" :path="mdiRadioboxBlank" size="1em" />
<SvgIcon
v-else-if="name === 'status-running' || name === 'status-started'"
type="mdi"
:path="mdiRadioboxIndeterminateVariant"
size="20"
size="1em"
/>
<SvgIcon v-else-if="name === 'status-skipped'" :path="mdiMinusCircleOutline" size="20" />
<SvgIcon v-else-if="name === 'status-success'" :path="mdiCheckCircleOutline" size="20" />
<SvgIcon v-else-if="name === 'attention'" :path="mdiAlert" size="20" />
<SvgIcon v-else-if="name === 'warning'" :path="mdiAlertOutline" size="20" />
<SvgIcon v-else-if="name === 'error'" :path="mdiAlertCircle" size="20" />
<SvgIcon v-else-if="name === 'status-skipped'" :path="mdiMinusCircleOutline" size="1em" />
<SvgIcon v-else-if="name === 'status-success'" :path="mdiCheckCircleOutline" size="1em" />
<SvgIcon v-else-if="name === 'attention'" :path="mdiAlert" size="1em" />
<SvgIcon v-else-if="name === 'warning'" :path="mdiAlertOutline" size="1em" />
<SvgIcon v-else-if="name === 'error'" :path="mdiAlertCircle" size="1em" />
<SvgIcon v-else-if="name === 'gitlab'" :path="mdiGitlab" size="32" />
<SvgIcon v-else-if="name === 'bitbucket' || name === 'bitbucket-dc'" :path="mdiBitbucket" size="32" />
<SvgIcon v-else-if="name === 'question'" :path="mdiHelpCircleOutline" size="20" />
<SvgIcon v-else-if="name === 'plus'" :path="mdiPlus" size="20" />
<SvgIcon v-else-if="name === 'list'" :path="mdiFormatListBulleted" size="20" />
<SvgIcon v-else-if="name === 'heal'" :path="mdiBandage" size="20" />
<SvgIcon v-else-if="name === 'turn-off'" :path="mdiPower" size="20" />
<SvgIcon v-else-if="name === 'chevron-right'" :path="mdiChevronRight" size="20" />
<SvgIcon v-else-if="name === 'close'" :path="mdiCloseCircleOutline" size="20" />
<SvgIcon v-else-if="name === 'edit'" :path="mdiPencil" size="20" />
<SvgIcon v-else-if="name === 'download'" :path="mdiDownloadCircle" size="20" />
<SvgIcon v-else-if="name === 'stopwatch'" :path="mdiAlarm" size="20" />
<SvgIcon v-else-if="name === 'auto-scroll'" :path="mdiDownload" size="20" />
<SvgIcon v-else-if="name === 'auto-scroll-off'" :path="mdiDownloadOff" size="20" />
<SvgIcon v-else-if="name === 'pause'" :path="mdiPause" size="20" />
<SvgIcon v-else-if="name === 'play'" :path="mdiPlay" size="20" />
<SvgIcon v-else-if="name === 'remove'" :path="mdiClose" size="20" />
<SvgIcon v-else-if="name === 'question'" :path="mdiHelpCircleOutline" size="1em" />
<SvgIcon v-else-if="name === 'plus'" :path="mdiPlus" size="1em" />
<SvgIcon v-else-if="name === 'list'" :path="mdiFormatListBulleted" size="1em" />
<SvgIcon v-else-if="name === 'heal'" :path="mdiBandage" size="1em" />
<SvgIcon v-else-if="name === 'turn-off'" :path="mdiPower" size="1em" />
<SvgIcon v-else-if="name === 'chevron-right'" :path="mdiChevronRight" size="1em" />
<SvgIcon v-else-if="name === 'close'" :path="mdiCloseCircleOutline" size="1em" />
<SvgIcon v-else-if="name === 'edit'" :path="mdiPencil" size="1em" />
<SvgIcon v-else-if="name === 'download'" :path="mdiDownloadCircle" size="1em" />
<SvgIcon v-else-if="name === 'stopwatch'" :path="mdiAlarm" size="1em" />
<SvgIcon v-else-if="name === 'auto-scroll'" :path="mdiDownload" size="1em" />
<SvgIcon v-else-if="name === 'auto-scroll-off'" :path="mdiDownloadOff" size="1em" />
<SvgIcon v-else-if="name === 'pause'" :path="mdiPause" size="1em" />
<SvgIcon v-else-if="name === 'play'" :path="mdiPlay" size="1em" />
<SvgIcon v-else-if="name === 'remove'" :path="mdiClose" size="1em" />
<SvgIcon v-else-if="name === 'visibility-private'" :path="mdiLockOutline" size="24" />
<SvgIcon v-else-if="name === 'visibility-internal'" :path="mdiLockOpenOutline" size="24" />
<SvgIcon v-else-if="name === 'visibility-private'" :path="mdiLockOutline" size="1em" />
<SvgIcon v-else-if="name === 'visibility-internal'" :path="mdiLockOpenOutline" size="1em" />
<SvgIcon v-else-if="name === 'forgejo'" :path="siForgejo.path" size="32" />
<SvgIcon v-else-if="name === 'gitea'" :path="siGitea.path" size="32" />
@ -78,7 +78,7 @@
</path>
</svg>
<div v-else-if="name === 'blank'" class="h-6 w-6" />
<div v-else-if="name === 'blank'" class="w-6 h-6" />
</template>
<script lang="ts" setup>

20
web/src/components/repo/pipeline/PipelineItem.vue
View file

@ -1,8 +1,8 @@
<template>
<ListItem v-if="pipeline" class="p-0 w-full">
<div class="flex w-11 items-center md:mr-4">
<div class="flex items-center md:mr-4 w-11">
<div
class="h-full w-3"
class="w-3 h-full"
:class="{
'bg-wp-state-warn-100': pipeline.status === 'pending',
'bg-wp-state-error-100': pipelineStatusColors[pipeline.status] === 'red',
@ -11,7 +11,7 @@
'bg-wp-state-info-100': pipelineStatusColors[pipeline.status] === 'blue',
}"
/>
<div class="w-8 flex flex-wrap justify-between 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 class="mx-2 md:mx-3" :status="pipeline.status" />
</div>
@ -20,10 +20,10 @@
<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-8" :src="pipeline.author_avatar" />
<img v-else class="rounded-md w-5" :src="pipeline.author_avatar" />
</div>
<div class="w-full md:w-auto md:mx-4 flex items-center min-w-0">
<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 -->
@ -37,9 +37,9 @@
</div>
<div
class="grid grid-rows-2 grid-cols-2 grid-flow-col w-full md:ml-auto md:w-96 py-2 gap-x-4 gap-y-2 flex-shrink-0 text-wp-text-100"
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 space-x-2 items-center min-w-0">
<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" />
@ -52,17 +52,17 @@
<span class="truncate">{{ prettyRef }}</span>
</div>
<div class="flex space-x-2 items-center min-w-0">
<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 class="flex space-x-2 items-center 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 items-center 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>

4
web/src/components/repo/pipeline/PipelineStatusIcon.vue
View file

@ -1,11 +1,11 @@
<template>
<div
class="flex items-center justify-center"
class="flex justify-center items-center"
:title="$t('repo.pipeline.status.status', { status: statusDescriptions[status] })"
>
<Icon
:name="service ? 'settings' : `status-${status}`"
size="24"
size="1em"
:class="{
'text-wp-state-error-100': pipelineStatusColors[status] === 'red',
'text-wp-state-neutral-100': pipelineStatusColors[status] === 'gray',

18
web/src/views/repo/pipeline/Pipeline.vue
View file

@ -1,17 +1,17 @@
<template>
<Container full-width class="flex flex-col flex-grow-0 md:flex-grow md:min-h-xs md:px-4">
<div class="flex w-full min-h-0 flex-grow gap-4 flex-wrap-reverse md:flex-nowrap">
<Container full-width class="flex flex-col md:flex-grow flex-grow-0 md:px-4 md:min-h-xs">
<div class="flex flex-wrap-reverse md:flex-nowrap flex-grow gap-4 w-full min-h-0">
<PipelineStepList
v-model:selected-step-id="selectedStepId"
:class="{ 'hidden md:flex': pipeline!.status === 'blocked' }"
:pipeline="pipeline!"
/>
<div class="flex items-start justify-center flex-grow relative basis-full md:basis-auto">
<div class="relative flex flex-grow justify-center items-start basis-full md:basis-auto">
<Container v-if="pipeline!.errors?.some((e) => !e.is_warning)" fill-width class="p-0">
<Panel>
<div class="flex flex-col items-center text-center gap-4">
<Icon name="status-error" class="w-16 h-16 text-wp-state-error-100" size="24" />
<div class="flex flex-col items-center gap-4 text-center">
<Icon name="status-error" class="w-16 h-16 text-wp-state-error-100" size="1.5em" />
<span class="text-xl">{{ $t('repo.pipeline.we_got_some_errors') }}</span>
<Button color="red" :text="$t('repo.pipeline.show_errors')" :to="{ name: 'repo-pipeline-errors' }" />
</div>
@ -21,9 +21,9 @@
<Container v-else-if="pipeline!.status === 'blocked'" fill-width class="p-0">
<Panel>
<div class="flex flex-col items-center gap-4">
<Icon name="status-blocked" size="24" class="w-16 h-16" />
<Icon name="status-blocked" size="1.5em" class="w-16 h-16" />
<span class="text-xl">{{ $t('repo.pipeline.protected.awaits') }}</span>
<div v-if="repoPermissions!.push" class="flex gap-2 flex-wrap items-center justify-center">
<div v-if="repoPermissions!.push" class="flex flex-wrap justify-center items-center gap-2">
<Button
color="green"
:text="$t('repo.pipeline.protected.approve')"
@ -44,7 +44,7 @@
<Container v-else-if="pipeline!.status === 'declined'" fill-width class="p-0">
<Panel>
<div class="flex flex-col items-center gap-4">
<Icon name="status-declined" size="24" class="w-16 h-16 text-wp-state-error-100" />
<Icon name="status-declined" size="1.5em" class="w-16 h-16 text-wp-state-error-100" />
<p class="text-xl">{{ $t('repo.pipeline.protected.declined') }}</p>
</div>
</Panel>
@ -54,7 +54,7 @@
v-else-if="selectedStepId !== null"
v-model:step-id="selectedStepId"
:pipeline="pipeline!"
class="fixed top-0 left-0 w-full h-full md:absolute"
class="top-0 left-0 fixed md:absolute w-full h-full"
/>
</div>
</div>