Elizhium/litlyx
1
0
Fork 0
mirror of https://github.com/Litlyx/litlyx synced 2025-12-09 23:48:36 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix ui

Browse Source
This commit is contained in:
Emily
2024-06-05 17:32:22 +02:00
parent 8ae0aa5d2a
commit f465108ab0
8 changed files with 71 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
dashboard/components/dashboard/BarsCard.vue
View File

@@ -87,7 +87,7 @@ function showDetails(id: string) {
</div>
<div class="flex flex-col gap-1">
<div v-if="props.data.length > 0" class="flex justify-between" v-for="element of props.data">
<div v-if="props.data.length > 0" class="flex justify-between items-center" v-for="element of props.data">
<div class="w-10/12 relative" @click="showDetails(element._id)"
:class="{ 'cursor-pointer line-active': interactive }">
<div class="absolute rounded-sm w-full h-full bg-[#92abcf38]"
@@ -105,7 +105,7 @@ function showDetails(id: string) {
</span>
</div>
</div>
<div class="text-text font-semibold manrope"> {{ formatNumberK(element.count) }} </div>
<div class="text-text font-semibold text-[.9rem] md:text-[1rem] manrope"> {{ formatNumberK(element.count) }} </div>
</div>
<div v-if="props.data.length == 0"
class="flex justify-center text-text-sub font-bold text-[1.1rem]">

20
dashboard/components/dashboard/TopSection.vue
View File

@@ -2,7 +2,7 @@
const activeProject = useActiveProject();
const { onlineUsers, stopWatching, startWatching } = useOnlineUsers();
onMounted(()=> startWatching());
onMounted(() => startWatching());
onUnmounted(() => stopWatching());
@@ -18,24 +18,26 @@ function copyProjectId() {
<div
class="w-full px-6 py-2 lg:py-6 font-bold text-text-sub/40 flex flex-col xl:flex-row text-lg lg:text-2xl gap-2 xl:gap-12">
<div class="flex gap-2 items-center text-text/90">
<div class="flex gap-2 items-center text-text/90 justify-center md:justify-start">
<div class="animate-pulse w-[1rem] h-[1rem] bg-green-400 rounded-full"> </div>
<div> {{ onlineUsers }} Online users</div>
</div>
<div class="grow"></div>
<div class="flex gap-2">
<div class="flex md:gap-2 items-center md:justify-start flex-col md:flex-row">
<div>Project:</div>
<div class="text-text/90"> {{ activeProject?.name || 'Loading...' }} </div>
</div>
<div class="flex gap-2">
<div class="flex flex-col md:flex-row md:gap-2 items-center md:justify-start">
<div>Project id:</div>
<div class="text-text/90 text-[.9rem] lg:text-2xl">
{{ activeProject?._id || 'Loading...' }}
</div>
<div class="flex items-center ml-3">
<i @click="copyProjectId()" class="far fa-copy hover:text-text cursor-pointer text-[1.2rem]"></i>
<div class="flex gap-2">
<div class="text-text/90 text-[.9rem] lg:text-2xl">
{{ activeProject?._id || 'Loading...' }}
</div>
<div class="flex items-center ml-3">
<i @click="copyProjectId()" class="far fa-copy hover:text-text cursor-pointer text-[1.2rem]"></i>
</div>
</div>
</div>
</div>

26
dashboard/components/pricing/PricingDrawer.vue
View File

@@ -62,18 +62,28 @@ const expansionTierCardData = ref<PricingCardProp>({
planId: 2
});
const emits = defineEmits<{
(evt: 'onCloseClick'): void
}>();
</script>
<template>
<div class="p-8">
<div class="p-8 overflow-y-auto xl:overflow-y-hidden">
<div class="flex gap-8 h-max">
<div @click="$emit('onCloseClick')"
class="cursor-pointer fixed top-4 right-4 rounded-full bg-menu drop-shadow-[0_0_2px_#CCCCCCCC] w-9 h-9 flex items-center justify-center">
<i class="fas fa-close text-[1.6rem]"></i>
</div>
<div class="flex gap-8 mt-10 h-max xl:flex-row flex-col">
<PricingCard class="flex-1" :data="starterTierCardData"></PricingCard>
<PricingCard class="flex-1" :data="accelerationTierCardData"></PricingCard>
<PricingCard class="flex-1" :data="expansionTierCardData"></PricingCard>
</div>
<div class="flex justify-between items-center mt-10">
<div class="flex justify-between items-center mt-10 flex-col xl:flex-row">
<div class="flex flex-col gap-2">
<div class="poppins text-[2rem] font-semibold">
Do you need help ?
@@ -82,10 +92,12 @@ const expansionTierCardData = ref<PricingCardProp>({
We respond in max. 1-2 days
</div>
</div>
<div class="py-4 px-20 bg-[#303030] rounded-lg">
<a href="mailto:helplitlyx@gmail.com" class="poppins text-[1.3rem]">
helplitlyx@gmail.com
</a>
<div class="mt-2">
<div class="rounded-lg px-10 py-3 bg-[#303030]">
<a href="mailto:helplitlyx@gmail.com" class="poppins text-[1.3rem]">
helplitlyx@gmail.com
</a>
</div>
</div>
</div>
</div>

2
dashboard/layouts/dashboard.vue
View File

@@ -38,7 +38,7 @@ const sections: Section[] = [
label: 'Github', to: 'https://github.com/litlyx/litlyx', icon: 'fab fa-github', external: true,
action() { Lit.event('git_clicked') },
},
{ label: 'Plans', to: '/plans', icon: 'far fa-wallet' },
{ label: 'Billing', to: '/plans', icon: 'far fa-wallet' },
{ label: 'Book a demo', to: '/book_demo', icon: 'far fa-calendar' },
]
},

2
dashboard/pages/index.vue
View File

@@ -107,7 +107,7 @@ const selectLabelsEvents = [
<div class="flex flex-row p-6 gap-6">
<div class="flex p-6 gap-6 flex-col xl:flex-row">

43
dashboard/pages/plans.vue
View File

@@ -27,7 +27,7 @@ const leftPercent = computed(() => {
if (!planData.value) return 0;
const left = dayjs().diff(planData.value.billing_expire_at, 'days');
const total = dayjs(planData.value.billing_start_at).diff(planData.value.billing_expire_at, 'days');
const percent = 100 / total * left;
const percent = 100 - (100 / total * left);
return percent;
});
@@ -48,6 +48,14 @@ function openInvoice(link: string) {
window.open(link, '_blank');
}
function getPremiumName(type: number) {
if (type === 0) return 'FREE';
if (type === 1) return 'ACCELERATION';
if (type === 2) return 'EXPANSION';
return 'CUSTOM';
}
</script>
<template>
@@ -55,7 +63,7 @@ function openInvoice(link: string) {
<div class="w-full h-full p-8 overflow-y-auto pb-40 lg:pb-0 relative overflow-x-hidden">
<Transition name="pdrawer">
<PricingDrawer class="bg-black absolute right-0 top-0 w-[60vw] min-w-[65rem] h-full z-[20]"
<PricingDrawer @onCloseClick="showPricingDrawer = false" class="bg-black fixed right-0 top-0 w-full xl:w-[60vw] xl:min-w-[65rem] h-full z-[20]"
v-if=showPricingDrawer>
</PricingDrawer>
</Transition>
@@ -67,12 +75,14 @@ function openInvoice(link: string) {
<div class="poppins font-semibold text-[1.8rem]">
Billing
</div>
<div class="poppins text-[1.3rem] text-text-sub">
Manage your billing cycle for the project
<span class="font-bold">
{{ activeProject?.name || '' }}
</span>
</div>
<div class="my-4 mb-10 w-full bg-gray-400/30 h-[1px]">
</div>
@@ -87,7 +97,7 @@ function openInvoice(link: string) {
</div>
<div
class="flex lato text-[.7rem] bg-accent/25 border-accent/40 border-[1px] px-[.6rem] rounded-lg">
{{ planData.premium ? 'PREMIUM ' + planData.premium_type : 'FREE' }}
{{ planData.premium ? getPremiumName(planData.premium_type) : 'FREE' }}
</div>
</div>
<div class="poppins text-text-sub text-[.9rem]">
@@ -101,8 +111,8 @@ function openInvoice(link: string) {
</div>
<div class="flex flex-col">
<div class="poppins"> Billing period:</div>
<div class="flex items-center gap-4">
<div class="grow">
<div class="flex items-center gap-2 md:gap-4 flex-col pt-4 md:pt-0 md:flex-row">
<div class="grow w-full md:w-auto">
<UProgress color="green" :min="0" :max="100" :value="leftPercent"></UProgress>
</div>
<div class="poppins"> {{ daysLeft }} days left </div>
@@ -141,8 +151,8 @@ function openInvoice(link: string) {
</div>
<div class="flex flex-col">
<div class="poppins"> Usage:</div>
<div class="flex items-center gap-4">
<div class="grow">
<div class="flex items-center gap-2 md:gap-4 flex-col pt-4 md:pt-0 md:flex-row">
<div class="grow w-full md:w-auto">
<UProgress :color="color" :min="0" :max="planData.limit" :value="planData.count">
</UProgress>
</div>
@@ -171,17 +181,20 @@ function openInvoice(link: string) {
<div class="flex flex-col gap-2">
<div class="flex gap-10 bg-black p-4 rounded-lg" v-for="invoice of invoices">
<div class="flex justify-between items-center bg-[#161616] p-4 rounded-lg" v-for="invoice of invoices">
<div> <i class="far fa-file-invoice"></i> </div>
<div> <i class="fal fa-file-invoice"></i> </div>
<div> {{ new Date(invoice.date).toLocaleString() }} </div>
<div> € {{ invoice.cost / 100 }} </div>
<div> {{ invoice.id }} </div>
<div
class="flex items-center lato text-[.8rem] bg-accent/25 border-accent/40 border-[1px] px-[.6rem] rounded-lg">
{{ invoice.status }}
<div class="flex flex-col md:flex-row md:justify-around md:grow items-center gap-2">
<div> {{ new Date(invoice.date).toLocaleString() }} </div>
<div> € {{ invoice.cost / 100 }} </div>
<div> {{ invoice.id }} </div>
<div
class="flex items-center lato text-[.8rem] bg-accent/25 border-accent/40 border-[1px] px-[.6rem] rounded-lg">
{{ invoice.status }}
</div>
</div>
<div>
<i @click="openInvoice(invoice.link)"
class="far fa-download cursor-pointer hover:text-white/80"></i>

10
dashboard/pages/project_selector.vue
View File

@@ -49,10 +49,12 @@ async function onProjectClick(pid: string) {
<div class="flex flex-col justify-center mt-16 gap-10 px-10" v-if="projects">
<div class="flex gap-4 items-center">
<div class="text-text font-bold text-[1.5rem]"> Projects </div>
<div class="text-text-sub/90 text-[1rem] font-semibold lato">
{{ projects?.length ?? '-' }} / 3
<div class="flex gap-4 items-center flex-col md:flex-row">
<div class="flex gap-4 items-center">
<div class="text-text font-bold text-[1.5rem]"> Projects </div>
<div class="text-text-sub/90 text-[1rem] font-semibold lato">
{{ projects?.length ?? '-' }} / 3
</div>
</div>
<NuxtLink v-if="(projects?.length || 0) < 3" to="/project_creation"
class="bg-blue-500/20 hover:bg-blue-500/30 px-4 py-1 flex items-center gap-4 rounded-xl cursor-pointer">

7
dashboard/pages/report.vue
View File

@@ -24,7 +24,7 @@ async function generatePDF() {
<template>
<div class="home w-full h-full px-10 lg:px-0">
<div class="home w-full h-full px-10 lg:px-0 overflow-y-auto pb-[12rem] md:pb-0">
<div class="flex flex-col items-center justify-center mt-20 gap-20">
@@ -32,16 +32,15 @@ async function generatePDF() {
<div class="poppins text-[2.4rem] font-bold text-text">
Project Report
</div>
<div class="poppins text-[1.8rem] text-text-sub/90">
<div class="poppins text-[1.4rem] text-center lg:text-[1.8rem] text-text-sub/90">
One-Click, Comprehensive KPI PDF for Your Investors or Team.
</div>
<div v-if="activeProject" class="flex gap-2">
<div v-if="activeProject" class="flex md:gap-2 flex-col md:flex-row">
<div class="poppins text-[1.4rem] font-semibold text-text-sub/90">
Relative to:
</div>
<div class="poppins text-[1.4rem] font-semibold text-text">
{{ activeProject.name }}
<span class="text-[.9rem] text-text-sub/80"> ( {{ activeProject._id }} ) </span>
</div>
</div>
</div>