mirror of
https://github.com/ArthurDanjou/website.git
synced 2026-01-14 12:14:42 +01:00
Change client-only tag position
This commit is contained in:
@@ -1,13 +1,11 @@
|
|||||||
<template>
|
<template>
|
||||||
<header class="z-30 sticky top-0 left-0 flex justify-center w-full">
|
<header class="z-30 sticky top-0 left-0 flex justify-center w-full">
|
||||||
<div class="w-full px-4 sm:px-6 lg:px-8 sm:mx-8 max-w-7xl py-4 flex justify-between items-center bg-white dark:bg-zinc-900 border-b border-zinc-100 dark:border-zinc-300/10">
|
<div class="w-full px-4 sm:px-6 lg:px-8 sm:mx-8 max-w-7xl py-4 flex justify-between items-center bg-white dark:bg-zinc-900 border-b border-zinc-100 dark:border-zinc-300/10">
|
||||||
<ClientOnly>
|
<Logo />
|
||||||
<Logo />
|
<NavBar />
|
||||||
<NavBar />
|
<ClientOnly fallback-tag="div" class="flex gap-2 items-center">
|
||||||
<div class="flex gap-2 items-center">
|
<ThemePicker />
|
||||||
<ThemePicker />
|
<MobileNavBar />
|
||||||
<MobileNavBar />
|
|
||||||
</div>
|
|
||||||
</ClientOnly>
|
</ClientOnly>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|||||||
@@ -62,9 +62,11 @@ useIntervalFn(async () => await refresh(), 5000)
|
|||||||
</div>
|
</div>
|
||||||
<template #footer>
|
<template #footer>
|
||||||
<div class="flex items-center justify-end w-full">
|
<div class="flex items-center justify-end w-full">
|
||||||
<p v-if="codingActivity" class="text-subtitle text-xs w-1/2">
|
<ClientOnly>
|
||||||
Started the {{ formatDate(codingActivity.timestamps.start) }}
|
<p v-if="codingActivity" class="text-subtitle text-xs w-1/2">
|
||||||
</p>
|
Started the {{ formatDate(codingActivity.timestamps.start) }}
|
||||||
|
</p>
|
||||||
|
</ClientOnly>
|
||||||
<div class="flex items-center space-x-1 w-1/2 justify-end">
|
<div class="flex items-center space-x-1 w-1/2 justify-end">
|
||||||
<p class="text-subtitle text-xs">
|
<p class="text-subtitle text-xs">
|
||||||
powered by
|
powered by
|
||||||
|
|||||||
@@ -10,63 +10,63 @@ const CardUi = {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<ClientOnly>
|
<UCard class="flex flex-col justify-between" :ui="CardUi">
|
||||||
<UCard class="flex flex-col justify-between" :ui="CardUi">
|
<div class="flex items-center gap-x-4 h-full">
|
||||||
<div class="flex items-center gap-x-4 h-full">
|
<p
|
||||||
<p
|
class="uppercase tracking-widest text-sm"
|
||||||
class="uppercase tracking-widest text-sm"
|
:style="{ writingMode: 'vertical-rl', textOrientation: 'sideways' }"
|
||||||
:style="{ writingMode: 'vertical-rl', textOrientation: 'sideways' }"
|
>
|
||||||
>
|
STATS
|
||||||
STATS
|
</p>
|
||||||
</p>
|
<div v-if="stats">
|
||||||
<div v-if="stats">
|
<div class="flex gap-4 items-center">
|
||||||
<div class="flex gap-4 items-center">
|
<div class="text-md">
|
||||||
<div class="text-md">
|
<div class="flex items-center gap-1">
|
||||||
<div class="flex items-center gap-1">
|
<h3>Total hours:</h3>
|
||||||
<h3>Total hours:</h3>
|
<p>{{ usePrecision(stats.coding.data.grand_total.total_seconds_including_other_language / 3600, 0) }} hours</p>
|
||||||
<p>{{ usePrecision(stats.coding.data.grand_total.total_seconds_including_other_language / 3600, 0) }} hours</p>
|
</div>
|
||||||
</div>
|
<div class="flex items-start gap-1 flex-wrap">
|
||||||
<div class="flex items-start gap-1 flex-wrap">
|
<h3>Best Editors:</h3>
|
||||||
<h3>Best Editors:</h3>
|
<p>
|
||||||
<p>
|
{{ stats.editors.data.slice(0, 2).map(editor => `${editor.name} (${editor.percent}%)`).join(', ') }}
|
||||||
{{ stats.editors.data.slice(0, 2).map(editor => `${editor.name} (${editor.percent}%)`).join(', ') }}
|
</p>
|
||||||
</p>
|
</div>
|
||||||
</div>
|
<div class="flex items-center gap-1">
|
||||||
<div class="flex items-center gap-1">
|
<h3>Best OS:</h3>
|
||||||
<h3>Best OS:</h3>
|
<p>{{ stats.os.data[0].name }} with {{ stats.os.data[0].percent }}%</p>
|
||||||
<p>{{ stats.os.data[0].name }} with {{ stats.os.data[0].percent }}%</p>
|
</div>
|
||||||
</div>
|
<div class="flex items-start gap-1 flex-wrap">
|
||||||
<div class="flex items-start gap-1 flex-wrap">
|
<h3>Top languages:</h3>
|
||||||
<h3>Top languages:</h3>
|
<p>{{ stats.languages.data.slice(0, 2).map(language => `${language.name} (${language.percent}%)`).join(', ') }}</p>
|
||||||
<p>{{ stats.languages.data.slice(0, 2).map(language => `${language.name} (${language.percent}%)`).join(', ') }}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<template #footer>
|
</div>
|
||||||
<div class="flex items-center justify-between">
|
<template #footer>
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<ClientOnly>
|
||||||
<p v-if="stats" class="text-subtitle text-xs w-1/2">
|
<p v-if="stats" class="text-subtitle text-xs w-1/2">
|
||||||
Started {{ useTimeAgo(new Date(stats.coding.data.range.start)).value }}, the {{ useDateFormat(new Date(stats.coding.data.range.start), 'Do MMMM YYYY').value }}
|
Started {{ useTimeAgo(new Date(stats.coding.data.range.start)).value }}, the {{ useDateFormat(new Date(stats.coding.data.range.start), 'Do MMMM YYYY').value }}
|
||||||
</p>
|
</p>
|
||||||
<div class="flex items-center justify-end space-x-1">
|
</ClientOnly>
|
||||||
<p class="text-subtitle text-xs">
|
<div class="flex items-center justify-end space-x-1">
|
||||||
powered by
|
<p class="text-subtitle text-xs">
|
||||||
</p>
|
powered by
|
||||||
<UButton
|
</p>
|
||||||
size="xs"
|
<UButton
|
||||||
:padded="false"
|
size="xs"
|
||||||
variant="link"
|
:padded="false"
|
||||||
to="https://wakatime.com/"
|
variant="link"
|
||||||
target="_blank"
|
to="https://wakatime.com/"
|
||||||
label="Wakatime"
|
target="_blank"
|
||||||
/>
|
label="Wakatime"
|
||||||
<UIcon name="i-jam-thunder" class="text-subtitle" />
|
/>
|
||||||
</div>
|
<UIcon name="i-jam-thunder" class="text-subtitle" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</div>
|
||||||
</UCard>
|
</template>
|
||||||
</ClientOnly>
|
</UCard>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
|||||||
Reference in New Issue
Block a user