Change client-only tag position

This commit is contained in:
2024-02-26 14:44:50 +01:00
parent 0b5d4c59f9
commit 331f08ba8f
3 changed files with 59 additions and 59 deletions

View File

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

View File

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

View File

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