woodpecker/web/src/App.vue
Robert Kaussow dca01e6817
Use consistent woodpecker color scheme (#2003)
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>


![image](https://github.com/woodpecker-ci/woodpecker/assets/3391958/a254f1e0-ce17-43a9-9e8b-72252296fd6f)

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.


![image](https://github.com/woodpecker-ci/woodpecker/assets/3391958/7bf751e1-f2a6-481c-bee7-a27d27cf8adb)

![image](https://github.com/woodpecker-ci/woodpecker/assets/3391958/e5673dc7-81c1-4fd4-bef9-14494bc5aa27)

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>
2023-08-02 09:09:12 +02:00

69 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>