Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: address TODO comments 2 #18

Merged
merged 16 commits into from
Sep 19, 2024
Merged

feat: address TODO comments 2 #18

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
64b484c
fix: ts errors
alexey-yarmosh Aug 30, 2024
6855837
fix: expanding after copy click
alexey-yarmosh Aug 30, 2024
94879ca
feat: create CopyButton component
alexey-yarmosh Aug 30, 2024
ba301ec
feat: add title class
alexey-yarmosh Aug 30, 2024
22d03cb
feat: create custom GPDialog
alexey-yarmosh Sep 2, 2024
f3abbeb
feat: use own GPDialog wrapper
alexey-yarmosh Sep 5, 2024
33cf40a
feat: auto fit table width
alexey-yarmosh Sep 5, 2024
98fe3fb
feat: move common link properties to class
alexey-yarmosh Sep 5, 2024
b03c367
fix: probe details mobile view
alexey-yarmosh Sep 5, 2024
a295af4
feat: update common styles
alexey-yarmosh Sep 7, 2024
097ad49
feat: preview theme appearance
alexey-yarmosh Sep 7, 2024
19dd271
feat: use autocomplete for gh orgs
alexey-yarmosh Sep 7, 2024
3d75984
fix: remove unnecessary aria-label
alexey-yarmosh Sep 7, 2024
70183f6
fix: fixed but improved probes table layout
MartinKolarik Sep 19, 2024
68ae2ed
fix: responsive credits chart width (#19)
alexey-yarmosh Sep 11, 2024
7aa8453
fix: scroll only content on desktop (#20)
alexey-yarmosh Sep 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions assets/css/global.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,3 +69,9 @@ input[disabled], textarea[disabled], select[disabled='disabled'] {
opacity: 1;
color: var(--text-bluegray-500);
}

@layer classes {
.page-title {
@apply text-2xl font-bold
}
}
22 changes: 1 addition & 21 deletions components/CodeBlock.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,9 @@
<template>
<div class="relative rounded-xl border bg-surface-0 p-4 pr-0 dark:bg-dark-900">
<CopyButton :content="props.commands"/>
<div class="no-scrollbar overflow-scroll">
<pre v-for="line in commands" :key="line.toString()" class="flex min-h-[22px] items-center"><code>{{ line[0] }}</code><code class="mr-16 text-bluegray-300">{{ line[1] }}</code></pre>
</div>
<div class="!absolute right-2 top-2">
<Button
icon="pi pi-copy"
severity="secondary"
outlined
aria-label="Copy"
@click="copyCommand"
/>
<div v-if="copyTooltip" class="absolute -top-10 left-1/2 -translate-x-1/2 rounded-md bg-bluegray-700 p-2 text-surface-0">
Copied!
</div>
</div>
</div>
</template>

Expand All @@ -25,13 +14,4 @@
default: () => [],
},
});

const copyTooltip = ref(false);
const copyCommand = async () => {
const content = props.commands.map(parts => parts.join('')).join('\n');

await navigator.clipboard.writeText(content);
copyTooltip.value = true;
setTimeout(() => copyTooltip.value = false, 1000);
};
</script>
41 changes: 41 additions & 0 deletions components/CopyButton.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
<template>
<div class="!absolute right-2 top-2">
<Button
icon="pi pi-copy"
severity="secondary"
aria-label="Copy"
outlined
@click="copyCommand"
/>
<div v-if="copyTooltip" class="absolute -top-10 left-1/2 -translate-x-1/2 rounded-md bg-bluegray-700 p-2 text-surface-0">
Copied!
</div>
</div>
</template>

<script setup lang="ts">
const props = defineProps({
content: {
type: [
String,
Array as () => string[] | string[][],
],
required: true,
},
});

const copyTooltip = ref(false);
const copyCommand = async () => {
let result: string;

if (Array.isArray(props.content)) {
result = props.content.map(parts => Array.isArray(parts) ? parts.join('') : parts).join('\n');
} else {
result = props.content;
}

await navigator.clipboard.writeText(result);
copyTooltip.value = true;
setTimeout(() => copyTooltip.value = false, 1000);
};
</script>
12 changes: 11 additions & 1 deletion components/CreditsChart.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
<template>
<Chart type="line" :data="chartData" :options="chartOptions" class="h-30rem"/>
<div class="credits-chart">
<Chart type="line" :data="chartData" :options="chartOptions" class="h-40"/>
</div>
</template>

<script setup lang="ts">
Expand Down Expand Up @@ -185,3 +187,11 @@ Spent: ${changes.value[ctx[0].dataIndex].spent.toLocaleString('en-US')}`,
},
}));
</script>

<style>
/* https://github.com/chartjs/Chart.js/issues/11005 */
.credits-chart canvas {
width: 100% !important;
height: 100% !important;
}
</style>
11 changes: 11 additions & 0 deletions components/GPDialog.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<template>
<Dialog
position="top"
class="min-w-[700px] max-md:min-w-[95%]"
modal
dismissable-mask
:draggable="false"
>
<slot/>
</Dialog>
</template>
28 changes: 1 addition & 27 deletions components/StartProbe.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,27 +13,14 @@
/>
</div>
<div class="relative">
<CopyButton :content="commands[platform][size]"/>
<div ref="codeWrapperElem" class="mt-4 box-content overflow-hidden rounded-xl border p-4 pr-0 transition-[height] duration-500 dark:bg-dark-900">
<!-- TODO: P3: collapse/expand thing could be a component, collapse/expand is not smooth if triggered immideately after copy click -->
MartinKolarik marked this conversation as resolved.
Show resolved Hide resolved
<div ref="codeElem">
<pre v-if="size === 'compact'" class="no-scrollbar flex min-h-[22px] items-center overflow-scroll"><code class="mr-16">{{ commands[platform][size] }}</code></pre>
<div v-if="size === 'expanded'" class="no-scrollbar overflow-scroll">
<pre v-for="line in commands[platform][size]" :key="line.toString()"><code>{{ line[0] }}</code><code class="mr-16 text-bluegray-300">{{ line[1] }}</code></pre>
</div>
</div>
<div class="!absolute right-2 top-2">
<!-- TODO: P3: copy button could be a component -->
<Button
icon="pi pi-copy"
severity="secondary"
aria-label="Copy"
outlined
@click="copyCommand"
/>
<div v-if="copyTooltip" class="absolute -top-10 left-1/2 -translate-x-1/2 rounded-md bg-bluegray-700 p-2 text-surface-0">
Copied!
</div>
</div>
</div>
</div>
<div class="flex justify-center">
Expand Down Expand Up @@ -97,17 +84,4 @@
size.value = size.value === 'compact' ? 'expanded' : 'compact';
smoothResize(codeWrapperElem.value!, codeElem.value!, codeElem.value!);
};

const copyTooltip = ref(false);
const copyCommand = async () => {
let content = commands[platform.value][size.value];

if (Array.isArray(content)) {
content = content.map(parts => parts.join('')).join('\n');
}

await navigator.clipboard.writeText(content);
copyTooltip.value = true;
setTimeout(() => copyTooltip.value = false, 1000);
};
</script>
8 changes: 4 additions & 4 deletions components/TokenCalendar.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,19 @@
<div>
<DatePicker
:min-date="new Date()"
:model-value="value"
:model-value="props.value"
inline
prev-icon="pi pi-arrow-left"
next-icon="pi pi-arrow-right"
@update:model-value="(date: Date) => emit('change', date)"
@update:model-value="(date) => emit('change', date || null)"
/>
</div>
</template>

<script setup lang="ts">
defineProps({
const props = defineProps({
value: {
type: [ Date, null, undefined ],
type: Object as () => Date | null,
default: null,
},
});
Expand Down
26 changes: 15 additions & 11 deletions layouts/default.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,12 +58,12 @@
</div>
</template>

<NuxtLink active-class="active" class="sidebar-link" to="/" @click="mobileSidebar = false"><i class="pi pi-home pl-4 pr-3 text-lg text-bluegray-400"/>Overview</NuxtLink>
<NuxtLink active-class="active" class="sidebar-link" to="/probes" @click="mobileSidebar = false"><nuxt-icon class="pi pl-4 pr-3 text-lg text-bluegray-400" name="probe"/>Probes</NuxtLink>
<NuxtLink active-class="active" class="sidebar-link" to="/credits" @click="mobileSidebar = false"><nuxt-icon class="pi pl-4 pr-3 text-lg text-bluegray-400" name="coin"/>Credits</NuxtLink>
<NuxtLink active-class="active" class="sidebar-link" to="/tokens" @click="mobileSidebar = false"><i class="pi pi-database pl-4 pr-3 text-lg text-bluegray-400"/>Tokens</NuxtLink>
<NuxtLink active-class="active" class="sidebar-link" to="/settings" @click="mobileSidebar = false"><i class="pi pi-cog pl-4 pr-3 text-lg text-bluegray-400"/>Settings</NuxtLink>
<button active-class="active" class="sidebar-link" @click="auth.logout"><i class="pi pi-power-off pl-4 pr-3 text-lg text-bluegray-400"/>Sign out</button>
<NuxtLink active-class="active" class="sidebar-link" to="/" @click="mobileSidebar = false"><i class="pi pi-home sidebar-link-icon"/>Overview</NuxtLink>
<NuxtLink active-class="active" class="sidebar-link" to="/probes" @click="mobileSidebar = false"><nuxt-icon class="pi sidebar-link-icon" name="probe"/>Probes</NuxtLink>
<NuxtLink active-class="active" class="sidebar-link" to="/credits" @click="mobileSidebar = false"><nuxt-icon class="pi sidebar-link-icon" name="coin"/>Credits</NuxtLink>
<NuxtLink active-class="active" class="sidebar-link" to="/tokens" @click="mobileSidebar = false"><i class="pi pi-database sidebar-link-icon"/>Tokens</NuxtLink>
<NuxtLink active-class="active" class="sidebar-link" to="/settings" @click="mobileSidebar = false"><i class="pi pi-cog sidebar-link-icon"/>Settings</NuxtLink>
<button active-class="active" class="sidebar-link" @click="auth.logout"><i class="pi pi-power-off sidebar-link-icon"/>Sign out</button>
<div class="flex flex-col border-t">
<NuxtLink class="ml-6 mt-4 text-bluegray-600 no-underline hover:underline dark:text-bluegray-100" to="https://www.jsdelivr.com/" target="_blank">
<i class="pi pi-external-link text-bluegray-300"/>
Expand Down Expand Up @@ -98,10 +98,10 @@
</header>

<aside class="flex flex-col border-r bg-surface-100 p-4 max-lg:hidden dark:bg-dark-700">
<NuxtLink active-class="active" class="sidebar-link" to="/"><i class="pi pi-home pl-4 pr-3 text-lg text-bluegray-400"/>Overview</NuxtLink>
<NuxtLink active-class="active" class="sidebar-link" to="/probes"><nuxt-icon class="pi pl-4 pr-3 text-lg text-bluegray-400" name="probe"/>Probes</NuxtLink>
<NuxtLink active-class="active" class="sidebar-link" to="/credits"><nuxt-icon class="pi pl-4 pr-3 text-lg text-bluegray-400" name="coin"/>Credits</NuxtLink>
<NuxtLink active-class="active" class="sidebar-link" to="/tokens"><i class="pi pi-database pl-4 pr-3 text-lg text-bluegray-400"/>Tokens</NuxtLink>
<NuxtLink active-class="active" class="sidebar-link" to="/"><i class="pi pi-home sidebar-link-icon"/>Overview</NuxtLink>
<NuxtLink active-class="active" class="sidebar-link" to="/probes"><nuxt-icon class="pi sidebar-link-icon" name="probe"/>Probes</NuxtLink>
<NuxtLink active-class="active" class="sidebar-link" to="/credits"><nuxt-icon class="pi sidebar-link-icon" name="coin"/>Credits</NuxtLink>
<NuxtLink active-class="active" class="sidebar-link" to="/tokens"><i class="pi pi-database sidebar-link-icon"/>Tokens</NuxtLink>
<div class="mt-auto rounded-xl border bg-surface-0 p-6 dark:border-dark-400 dark:bg-dark-500">
<p class="mb-2 font-bold">Sponsorship</p>
<p class="mb-6">Support the development of our products by becoming a sponsor.</p>
Expand All @@ -110,7 +110,7 @@
</NuxtLink>
</div>
</aside>
<div class="max-lg:overflow-x-scroll">
<div class="overflow-auto">
<slot/>
</div>
</section>
Expand Down Expand Up @@ -219,6 +219,10 @@
box-sizing: border-box;
}

.sidebar-link-icon {
@apply pl-4 pr-3 text-lg text-bluegray-400;
}

.dark .sidebar-link {
color: var(--p-surface-0);
}
Expand Down
3 changes: 1 addition & 2 deletions nuxt.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,8 +47,7 @@ export default defineNuxtConfig({
},
tailwindcss: {},
typescript: {
// TODO: P2: fix and uncomment.
// typeCheck: 'build',
typeCheck: 'build',
},
$development: {
runtimeConfig: {
Expand Down
3 changes: 2 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
"nuxt-icons": "^3.2.1",
"pinia": "^2.2.1",
"primeicons": "^7.0.0",
"primevue": "^4.0.4",
"primevue": "^4.0.5",
"tailwindcss": "^3.4.9",
"tailwindcss-primeui": "^0.3.4",
"vue": "^3.4.37",
Expand All @@ -52,6 +52,7 @@
"stylelint": "^14.16.1",
"stylelint-config-tailwindcss": "^0.0.7",
"typescript": "^5.5.4",
"vite": "^5.4.2",
"vue-tsc": "^2.0.29"
},
"lint-staged": {
Expand Down
7 changes: 3 additions & 4 deletions pages/credits.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<div class="flex min-h-full flex-col p-6" :class="{'min-w-[640px]': creditsChanges.length}">
<div class="mb-6 flex">
<h1 class="col-span-2 text-2xl font-bold">Credits</h1>
<div class="min-h-full p-6" :class="{'min-w-[640px]': creditsChanges.length}">
<div class="mb-4 flex">
<h1 class="page-title">Credits</h1>
<NuxtLink to="https://github.com/sponsors/jsdelivr" tabindex="-1" class="ml-auto" target="_blank" rel="noopener">
<Button label="Become a sponsor" icon="pi pi-github"/>
</NuxtLink>
Expand Down Expand Up @@ -102,7 +102,6 @@
date_created: { _gte: '$NOW(-30 day)' },
},
})),
// TODO: P2: let's also drop the "For (the)" prefix from other messages (server side) => "Adopted probe ...", "$10 sponsorship"
$directus.request<CreditsDeduction[]>(readItems('gp_credits_deductions', {
filter: {
user_id: { _eq: user.id },
Expand Down
11 changes: 3 additions & 8 deletions pages/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<div class="grid grid-cols-2 gap-4 p-6">
<h1 class="col-span-2 mb-2 text-2xl font-bold">Overview</h1>
<h1 class="page-title col-span-2 mb-2">Overview</h1>

<div class="rounded-xl border bg-surface-0 max-xl:col-span-2 dark:bg-dark-800">
<p class="flex border-b px-6 py-3 font-bold text-bluegray-700 dark:text-dark-0">Summary</p>
Expand Down Expand Up @@ -132,18 +132,13 @@
</AsyncBlock>
</div>

<Dialog
<GPDialog
v-model:visible="adoptProbeDialog"
position="top"
class="min-w-[700px] max-md:min-w-[95%]"
modal
dismissable-mask
:draggable="false"
header="Adopt a probe"
content-class="!p-0"
>
<AdoptProbe @cancel="adoptProbeDialog = false" @adopted="refreshNuxtData"/>
</Dialog>
</GPDialog>
</div>
</template>

Expand Down
Loading