mirror of
https://github.com/woodpecker-ci/woodpecker.git
synced 2024-06-02 12:50:30 +00:00
dca01e6817
Fixes: https://github.com/woodpecker-ci/woodpecker/issues/1079 What do you think about using a consistent `woodpecker` color scheme? Right now, the `lime` color scheme from windicss is used that does not really fit the primary color used for the documentation website. I have used the primary color `#4CAF50` from the docs and created a color palette with https://palettte.app/: <details> <summary>JSON source</summary> ```Json [ { "paletteName": "New Palette", "swatches": [ { "name": "New Swatch", "color": "166E30" }, { "name": "New Swatch", "color": "248438" }, { "name": "New Swatch", "color": "369943" }, { "name": "New Swatch", "color": "4CAF50" }, { "name": "New Swatch", "color": "68C464" }, { "name": "New Swatch", "color": "8AD97F" } ] } ] ``` </details>  I have added this color scheme to the windicss config and replaced the use of `lime` in the UI. While `woodpecker-300` would be the primary color that is used for the docs, I currently use `woodpecke-400` as primary color for the UI to fix some contrast issues.   What do you think? If you would like to stay with the current colors, that's fine for me, I can just use the custom CSS feature in this case. --------- Co-authored-by: 6543 <6543@obermui.de>
70 lines
1.9 KiB
Vue
70 lines
1.9 KiB
Vue
<template>
|
|
<div class="app flex flex-col m-auto w-full h-full bg-wp-background-200 dark:bg-wp-background-100">
|
|
<router-view v-if="blank" />
|
|
<template v-else>
|
|
<Navbar />
|
|
<main class="relative flex min-h-0 h-full">
|
|
<div id="scroll-component" class="flex flex-col overflow-y-auto flex-grow">
|
|
<router-view />
|
|
</div>
|
|
<transition name="slide-right">
|
|
<PipelineFeedSidebar class="shadow-md border-l w-full absolute top-0 right-0 bottom-0 max-w-80 xl:max-w-96" />
|
|
</transition>
|
|
</main>
|
|
</template>
|
|
<notifications position="bottom right" />
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { computed, watch } from 'vue';
|
|
import { useI18n } from 'vue-i18n';
|
|
import { useRoute } from 'vue-router';
|
|
|
|
import Navbar from '~/components/layout/header/Navbar.vue';
|
|
import PipelineFeedSidebar from '~/components/pipeline-feed/PipelineFeedSidebar.vue';
|
|
import useApiClient from '~/compositions/useApiClient';
|
|
import useNotifications from '~/compositions/useNotifications';
|
|
|
|
const route = useRoute();
|
|
const apiClient = useApiClient();
|
|
const { notify } = useNotifications();
|
|
const i18n = useI18n();
|
|
|
|
// eslint-disable-next-line promise/prefer-await-to-callbacks
|
|
apiClient.setErrorHandler((err) => {
|
|
if (err.status === 404) {
|
|
notify({ title: i18n.t('errors.not_found'), type: 'error' });
|
|
return;
|
|
}
|
|
notify({ title: err.message || i18n.t('unknown_error'), type: 'error' });
|
|
});
|
|
|
|
const blank = computed(() => route.meta.blank);
|
|
|
|
const { locale } = useI18n();
|
|
watch(
|
|
locale,
|
|
() => {
|
|
document.documentElement.setAttribute('lang', locale.value);
|
|
},
|
|
{ immediate: true },
|
|
);
|
|
</script>
|
|
|
|
<style scoped>
|
|
.app {
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
.slide-right-enter-active,
|
|
.slide-right-leave-active {
|
|
transition: all 0.3s ease;
|
|
}
|
|
.slide-right-enter-from,
|
|
.slide-right-leave-to {
|
|
transform: translate(100%, 0);
|
|
}
|
|
</style>
|