Change padding

This commit is contained in:
2024-06-21 12:11:59 +02:00
parent 637dc3126c
commit 6b229bde30
2 changed files with 24 additions and 29 deletions

View File

@@ -12,36 +12,36 @@ useIntervalFn(async () => await refresh(), 5000)
</script> </script>
<template> <template>
<div <p
v-if="codingActivity" v-if="codingActivity"
class="flex items-start gap-2" class="flex items-start gap-2"
> >
<UTooltip :text="codingActivity.state.toLowerCase().includes('editing') ? 'I\'m online 👋' : 'I\'m sleeping 😴'"> <UTooltip :text="codingActivity.state.toLowerCase().includes('editing') ? 'I\'m online 👋' : 'I\'m sleeping 😴'">
<div <div
:class="codingActivity.state.toLowerCase().includes('editing') ? 'bg-green-500' : 'bg-amber-500'" :class="codingActivity.state.toLowerCase().includes('editing') ? 'bg-green-500' : 'bg-amber-500'"
class="h-3 w-3 inline-flex rounded-full cursor-help mt-7" class="h-3 w-3 inline-flex rounded-full cursor-help mt-2"
/> />
</UTooltip> </UTooltip>
<p v-if="codingActivity.state.toLowerCase().includes('editing')"> <span v-if="codingActivity.state.toLowerCase().includes('editing')">
I'm actually working on <strong>{{ codingActivity.details }}</strong>, I'm actually working on <strong>{{ codingActivity.details }}</strong>,
{{ codingActivity.state.charAt(0).toLowerCase() + codingActivity.state.slice(1) }}. {{ codingActivity.state.charAt(0).toLowerCase() + codingActivity.state.slice(1) }}.
using <strong>{{ codingActivity.name }}</strong>. using <strong>{{ codingActivity.name }}</strong>.
I've started <strong>{{ useTimeAgo(codingActivity.timestamps.start).value }}</strong>, the I've started <strong>{{ useTimeAgo(codingActivity.timestamps.start).value }}</strong>, the
<strong>{{ formatDate(codingActivity.timestamps.start) }}</strong>. <strong>{{ formatDate(codingActivity.timestamps.start) }}</strong>.
</p> </span>
<p v-else> <span v-else>
I'm Idling on my computer with <strong>{{ codingActivity.name }}</strong> running in background. I'm Idling on my computer with <strong>{{ codingActivity.name }}</strong> running in background.
</p> </span>
</div> </p>
<div <p
v-else v-else
class="flex md:items-start gap-2" class="flex md:items-start gap-2"
> >
<UTooltip text="I'm offline 🫥"> <UTooltip text="I'm offline 🫥">
<div class="cursor-not-allowed h-3 w-3 inline-flex rounded-full bg-red-500 mt-7" /> <div class="cursor-not-allowed h-3 w-3 inline-flex rounded-full bg-red-500 mt-2" />
</UTooltip> </UTooltip>
<p> <span>
I'm currently offline. Come back later to see what I'm working on. I'm currently offline. Come back later to see what I'm working on.
</p> </span>
</div> </p>
</template> </template>

View File

@@ -5,21 +5,16 @@ const stats = await $fetch<Stats>('/api/stats')
</script> </script>
<template> <template>
<div <p v-if="stats">
v-if="stats" I collect some data for {{ useTimeAgo(new Date(stats.coding.data.range.start)).value }}, started the
class="flex items-center gap-x-1 text-md" <strong>{{ useDateFormat(new Date(stats.coding.data.range.start), 'Do MMMM YYYY').value }}</strong>.
> I've coded for a total of <strong>{{
<p> usePrecision(stats.coding.data.grand_total.total_seconds_including_other_language / 3600, 0)
I collect some data for {{ useTimeAgo(new Date(stats.coding.data.range.start)).value }}, started the }}</strong> hours.
<strong>{{ useDateFormat(new Date(stats.coding.data.range.start), 'Do MMMM YYYY').value }}</strong>. My best editors are
I've coded for a total of <strong>{{ {{ stats.editors.data.slice(0, 2).map(editor => `${editor.name} (${editor.percent}%)`).join(' and ') }}.
usePrecision(stats.coding.data.grand_total.total_seconds_including_other_language / 3600, 0) My best OS is {{ stats.os.data[0].name }} ({{ stats.os.data[0].percent }}%).
}}</strong> hours. My top languages are
My best editors are {{ stats.languages.data.slice(0, 2).map(language => `${language.name} (${language.percent}%)`).join(' and ') }}.
{{ stats.editors.data.slice(0, 2).map(editor => `${editor.name} (${editor.percent}%)`).join(' and ') }}. </p>
My best OS is {{ stats.os.data[0].name }} ({{ stats.os.data[0].percent }}%).
My top languages are
{{ stats.languages.data.slice(0, 2).map(language => `${language.name} (${language.percent}%)`).join(' and ') }}.
</p>
</div>
</template> </template>