Elizhium/litlyx
1
0
Fork 0
mirror of https://github.com/Litlyx/litlyx synced 2025-12-10 15:58:38 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fix responsiveness + other things

Browse Source
This commit is contained in:
Emily
2024-10-29 15:51:30 +01:00
parent 06fb8bfab0
commit 0a748346c5
16 changed files with 56 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
dashboard/components/BarCard/Base.vue
View File

@@ -125,11 +125,10 @@ function openExternalLink(link: string) {
</div> </div>
</div> </div>
</div> </div>
<div class="text-text font-semibold text-[.9rem] md:text-[1rem] manrope"> {{ <div class="text-text font-semibold text-[.9rem] md:text-[1rem] manrope"> {{
formatNumberK(element.count) }} </div> formatNumberK(element.count) }} </div>
</div> </div>
<div v-if="props.data.length == 0" class="flex justify-center text-text-sub font-bold text-[1.1rem]"> <div v-if="props.data.length == 0" class="flex justify-center text-text-sub font-light text-[1.1rem]">
No data yet No data yet
</div> </div>
</div> </div>

11
dashboard/components/CVerticalNavigation.vue
View File

@@ -203,12 +203,12 @@ const pricingDrawer = usePricingDrawer();
<div v-if="snapshot" class="flex flex-col text-[.7rem] mt-2"> <div v-if="snapshot" class="flex flex-col text-[.7rem] mt-2">
<div class="flex gap-1 items-center justify-center text-lyx-text-dark"> <div class="flex gap-1 items-center justify-center text-lyx-text-dark">
<div class="poppins"> <div class="poppins">
{{ new Date(snapshot.from).toLocaleString('it-IT').split(',')[0].trim().replace(/\//g, '-') {{ new Date(snapshot.from).toLocaleString().split(',')[0].trim()
}} }}
</div> </div>
<div class="poppins"> to </div> <div class="poppins"> to </div>
<div class="poppins"> <div class="poppins">
{{ new Date(snapshot.to).toLocaleString('it-IT').split(',')[0].trim().replace(/\//g, '-') }} {{ new Date(snapshot.to).toLocaleString().split(',')[0].trim() }}
</div> </div>
</div> </div>
@@ -243,7 +243,7 @@ const pricingDrawer = usePricingDrawer();
<div v-for="entry of section.entries" :class="{ 'grow flex items-end': entry.grow }"> <div v-for="entry of section.entries" :class="{ 'grow flex items-end': entry.grow }">
<div v-if="(!entry.adminOnly || (userRoles.isAdmin && !isAdminHidden))" <div v-if="(!entry.adminOnly || (userRoles.isAdmin.value && !isAdminHidden))"
class="bg-lyx-background w-full cursor-pointer text-lyx-text-dark py-[.35rem] px-2 rounded-lg text-[.95rem] flex items-center" class="bg-lyx-background w-full cursor-pointer text-lyx-text-dark py-[.35rem] px-2 rounded-lg text-[.95rem] flex items-center"
:class="{ :class="{
'!text-lyx-text-darker pointer-events-none': entry.disabled, '!text-lyx-text-darker pointer-events-none': entry.disabled,
@@ -259,7 +259,7 @@ const pricingDrawer = usePricingDrawer();
<div class="manrope grow"> <div class="manrope grow">
{{ entry.label }} {{ entry.label }}
</div> </div>
<div v-if="entry.premiumOnly && !userRoles.isPremium" class="flex items-center"> <div v-if="entry.premiumOnly && !userRoles.isPremium.value" class="flex items-center">
<i class="fal fa-lock"></i> <i class="fal fa-lock"></i>
</div> </div>
</NuxtLink> </NuxtLink>
@@ -293,7 +293,8 @@ const pricingDrawer = usePricingDrawer();
class="cursor-pointer hover:text-lyx-text text-lyx-text-dark"> class="cursor-pointer hover:text-lyx-text text-lyx-text-dark">
<i class="fab fa-dev"></i> <i class="fab fa-dev"></i>
</NuxtLink> --> </NuxtLink> -->
<NuxtLink to="/admin" v-if="userRoles.isAdmin"
<NuxtLink to="/admin" v-if="userRoles.isAdmin.value"
class="cursor-pointer hover:text-lyx-text text-lyx-text-dark"> class="cursor-pointer hover:text-lyx-text text-lyx-text-dark">
<i class="fas fa-cat"></i> <i class="fas fa-cat"></i>
</NuxtLink> </NuxtLink>

7
dashboard/components/banner/Offer.vue
View File

@@ -20,15 +20,16 @@ const isPremium = computed(() => {
<div v-if="!isPremium" class="w-full bg-[#5680f822] p-4 rounded-lg text-[.9rem] flex items-center"> <div v-if="!isPremium" class="w-full bg-[#5680f822] p-4 rounded-lg text-[.9rem] flex items-center">
<div class="flex flex-col grow"> <div class="flex flex-col grow">
<div class="poppins font-semibold text-lyx-primary"> <div class="poppins font-semibold text-lyx-primary">
Launch offer: 25% off Launch offer: 25% off forever with code <span class="text-white font-bold text-[1rem]">LIT25</span> at checkout
from Acceleration Plan and beyond.
</div> </div>
<div class="poppins text-lyx-primary"> <!-- <div class="poppins text-lyx-primary">
We're offering an exclusive 25% discount forever on all plans starting from the Acceleration We're offering an exclusive 25% discount forever on all plans starting from the Acceleration
Plan for our first 100 users who believe in our project. Plan for our first 100 users who believe in our project.
<br> <br>
Redeem Code: <span class="text-white font-bold text-[1rem]">LIT25</span> at checkout to Redeem Code: <span class="text-white font-bold text-[1rem]">LIT25</span> at checkout to
claim your discount. claim your discount.
</div> </div> -->
</div> </div>
<div> <div>
<LyxUiButton type="outline" @click="goToUpgrade()"> Upgrade </LyxUiButton> <LyxUiButton type="outline" @click="goToUpgrade()"> Upgrade </LyxUiButton>

2
dashboard/components/dashboard/ActionableChart.vue
View File

@@ -251,7 +251,7 @@ const legendClasses = ref<string[]>([
</SelectButton> </SelectButton>
</template> </template>
<div class="flex gap-6 w-full justify-between"> <div class="flex gap-6 w-full justify-between lg:flex-row flex-col">
<LyxUiButton type="secondary" :to="isLiveDemo ? '#' : '/analyst'" :disabled="isLiveDemo"> <LyxUiButton type="secondary" :to="isLiveDemo ? '#' : '/analyst'" :disabled="isLiveDemo">
<div class="flex items-center gap-2 px-10"> <div class="flex items-center gap-2 px-10">
<i class="far fa-sparkles text-yellow-400"></i> <i class="far fa-sparkles text-yellow-400"></i>

2
dashboard/components/events/EventsFunnelChart.vue
View File

@@ -140,7 +140,7 @@ async function onEventCheck(eventName: string) {
<template> <template>
<CardTitled title="Funnel" <CardTitled title="Funnel"
sub="Monitor and analyze the actions your users are performing on your platform to gain insights into their behavior and optimize the user experience"> sub="Monitor and analyze the actions your users are performing on your platform to gain insights into their behavior and optimize the user experience">
<div class="flex gap-2 justify-between"> <div class="flex gap-2 justify-between lg:flex-row flex-col">
<div class="flex flex-col gap-1"> <div class="flex flex-col gap-1">
<div class="min-w-[20rem] text-lyx-text-darker"> <div class="min-w-[20rem] text-lyx-text-darker">
Select two or more events Select two or more events

8
dashboard/components/events/EventsMetadataAnalyzer.vue
View File

@@ -104,7 +104,7 @@ const canSearch = computed(() => {
</USelectMenu> </USelectMenu>
</div> </div>
<div class="text-lyx-text-darker poppins mt-4 flex items-center gap-4"> <div class="text-lyx-text-darker poppins mt-4 flex items-center gap-4 lg:flex-row flex-col">
<div class="w-[10rem]"> <div class="w-[10rem]">
Search results: {{ metadataFieldGroupedFiltered.length }} Search results: {{ metadataFieldGroupedFiltered.length }}
</div> </div>
@@ -119,13 +119,13 @@ const canSearch = computed(() => {
</div> </div>
</div> </div>
<div class="flex flex-wrap gap-2 mt-4"> <div class="flex flex-wrap gap-2 lg:mt-4 mt-10">
<div class="bg-lyx-widget-light text-lyx-text-dark px-3 py-2 rounded-md w-fit" <div class="bg-lyx-widget-light text-lyx-text-dark px-3 py-2 rounded-md w-fit"
v-for="item of metadataFieldGroupedFiltered"> v-for="item of metadataFieldGroupedFiltered">
<div class="flex gap-2"> <div class="flex gap-2 items-center">
<div> {{ item._id || 'OLD_EVENTS' }} </div> <div> {{ item._id || 'OLD_EVENTS' }} </div>
<div> {{ item.count }} </div> <div class="px-1"> {{ item.count }} </div>
</div> </div>
</div> </div>

8
dashboard/components/events/EventsUserFlow.vue
View File

@@ -62,7 +62,13 @@ async function analyzeEvent() {
</div> </div>
</div> </div>
<div v-if="analyzing"> Analyzing... </div> <div v-if="analyzing">
<div
class="backdrop-blur-[1px] z-[20] w-full h-full flex items-center justify-center font-bold rockmann">
<i
class="fas fa-spinner text-[2rem] text-accent animate-[spin_1s_linear_infinite] duration-500"></i>
</div>
</div>
<div class="flex flex-col gap-2" v-if="userFlowData"> <div class="flex flex-col gap-2" v-if="userFlowData">
<div class="flex gap-4 items-center bg-bg py-2 px-2 bg-lyx-widget-light rounded-lg" <div class="flex gap-4 items-center bg-bg py-2 px-2 bg-lyx-widget-light rounded-lg"

2
dashboard/components/pricing/PricingCardGeneric.vue
View File

@@ -47,7 +47,7 @@ async function onUpgradeClick() {
<div class="flex flex-col gap-3 text-center pt-3"> <div class="flex flex-col gap-3 text-center pt-3">
<div v-if="data.active" <div v-if="data.active"
class="absolute right-6 top-3 poppins text-[.75rem] bg-[#222A42] outline outline-[1px] outline-[#5680F8] px-3 py-[.1rem] rounded-sm"> class="absolute right-6 top-3 poppins text-[.75rem] bg-transparent border-[#262626] border-solid border-[1px] px-3 py-[.1rem] rounded-sm">
Active Active
</div> </div>
<div v-if="!data.active && data.title === 'Growth'" <div v-if="!data.active && data.title === 'Growth'"

9
dashboard/components/settings/General.vue
View File

@@ -198,11 +198,16 @@ function copyProjectId() {
<script defer data-project="${project?._id}" <script defer data-project="${project?._id}"
src="https://cdn.jsdelivr.net/gh/litlyx/litlyx-js/browser/litlyx.js"></script>` }} src="https://cdn.jsdelivr.net/gh/litlyx/litlyx-js/browser/litlyx.js"></script>` }}
</div> </div>
<div><i class="far fa-copy" @click="copyScript()"></i></div> <div class="hidden lg:flex"><i class="far fa-copy" @click="copyScript()"></i></div>
</LyxUiCard> </LyxUiCard>
<div class="flex justify-end w-full">
<LyxUiButton type="outline" class="flex lg:hidden mt-4">
Copy script
</LyxUiButton>
</div>
</template> </template>
<template #pdelete> <template #pdelete>
<div class="flex justify-end" v-if="!isGuest"> <div class="flex lg:justify-end" v-if="!isGuest">
<LyxUiButton type="danger" @click="deleteProject()"> <LyxUiButton type="danger" @click="deleteProject()">
Delete project Delete project
</LyxUiButton> </LyxUiButton>

8
dashboard/components/settings/Template.vue
View File

@@ -16,10 +16,10 @@ const props = defineProps<SettingsTemplateProp>();
<template> <template>
<div class="mt-10 px-4"> <div class="mt-10 px-4 xl:pb-0 pb-[10rem]">
<div v-for="(entry, index) of props.entries" class="flex flex-col"> <div v-for="(entry, index) of props.entries" class="flex flex-col">
<div class="flex"> <div class="flex xl:flex-row flex-col gap-4 xl:gap-0">
<div class="flex-[2]"> <div class="xl:flex-[2]">
<div class="poppins font-medium text-lyx-text"> <div class="poppins font-medium text-lyx-text">
{{ entry.title }} {{ entry.title }}
</div> </div>
@@ -27,7 +27,7 @@ const props = defineProps<SettingsTemplateProp>();
{{ entry.text }} {{ entry.text }}
</div> </div>
</div> </div>
<div class="flex-[3]"> <div class="xl:flex-[3]">
<slot :name="entry.id"></slot> <slot :name="entry.id"></slot>
</div> </div>
</div> </div>

4
dashboard/components/settings/billing.vue
View File

@@ -164,7 +164,7 @@ const { visible } = usePricingDrawer();
{{ planData.premium ? 'Premium plan' : 'Basic plan' }} {{ planData.premium ? 'Premium plan' : 'Basic plan' }}
</div> </div>
<div <div
class="flex lato text-[.7rem] bg-accent/25 border-accent/40 border-[1px] px-[.6rem] rounded-sm"> class="flex lato text-[.7rem] bg-transparent border-[#262626] border-[1px] px-[.6rem] rounded-sm">
{{ planData.premium ? getPremiumName(planData.premium_type) : 'FREE' }} {{ planData.premium ? getPremiumName(planData.premium_type) : 'FREE' }}
</div> </div>
</div> </div>
@@ -190,7 +190,7 @@ const { visible } = usePricingDrawer();
</div> </div>
<div class="my-4 w-full bg-gray-400/30 h-[1px]"> <div class="my-4 w-full bg-gray-400/30 h-[1px]">
</div> </div>
<div class="flex justify-between px-8 flex-col sm:flex-row"> <div class="flex justify-between px-8 flex-col lg:flex-row gap-2 lg:gap-0 items-center">
<div class="flex gap-2 text-text-sub text-[.9rem]"> <div class="flex gap-2 text-text-sub text-[.9rem]">
<div class="poppins"> Expire date:</div> <div class="poppins"> Expire date:</div>
<div> {{ prettyExpireDate }}</div> <div> {{ prettyExpireDate }}</div>

12
dashboard/pages/analyst.vue
View File

@@ -148,15 +148,15 @@ const { visible: pricingDrawerVisible } = usePricingDrawer()
<div class="flex-[5] py-8 flex h-full flex-col items-center relative overflow-y-hidden"> <div class="flex-[5] py-8 flex h-full flex-col items-center relative overflow-y-hidden">
<div class="flex flex-col items-center lg:mt-[20vh] px-8 lg:px-28" <div class="flex flex-col items-center xl:mt-[20vh] px-8 xl:px-28"
v-if="currentChatMessages.length == 0"> v-if="currentChatMessages.length == 0">
<div class="w-[7rem] lg:w-[10rem]"> <div class="w-[7rem] xl:w-[10rem]">
<img :src="'analyst.png'" class="w-full h-full"> <img :src="'analyst.png'" class="w-full h-full">
</div> </div>
<div class="poppins text-[1.2rem] text-center"> <div class="poppins text-[1.2rem] text-center">
Ask me anything about your data Ask me anything about your data
</div> </div>
<div class="flex flex-col lg:grid lg:grid-cols-2 gap-4 mt-6"> <div class="flex flex-col xl:grid xl:grid-cols-2 gap-4 mt-6">
<div v-for="prompt of defaultPrompts" @click="currentText = prompt" <div v-for="prompt of defaultPrompts" @click="currentText = prompt"
class="bg-lyx-widget-light hover:bg-lyx-widget-lighter cursor-pointer p-4 rounded-lg poppins text-center whitespace-pre-wrap flex items-center justify-center text-[.9rem]"> class="bg-lyx-widget-light hover:bg-lyx-widget-lighter cursor-pointer p-4 rounded-lg poppins text-center whitespace-pre-wrap flex items-center justify-center text-[.9rem]">
{{ prompt }} {{ prompt }}
@@ -216,7 +216,7 @@ const { visible: pricingDrawerVisible } = usePricingDrawer()
<i class="far fa-arrow-up"></i> <i class="far fa-arrow-up"></i>
</div> </div>
<div @click="menuOpen = !menuOpen" <div @click="menuOpen = !menuOpen"
class="bg-lyx-widget-light lg:hidden hhover:bg-lyx-widget-light cursor-pointer px-4 py-2 rounded-full"> class="bg-lyx-widget-light xl:hidden hhover:bg-lyx-widget-light cursor-pointer px-4 py-2 rounded-full">
<i class="far fa-message"></i> <i class="far fa-message"></i>
</div> </div>
</div> </div>
@@ -226,11 +226,11 @@ const { visible: pricingDrawerVisible } = usePricingDrawer()
<div :class="{ <div :class="{
'absolute': menuOpen, 'absolute': menuOpen,
'hidden lg:flex': !menuOpen 'hidden xl:flex': !menuOpen
}" class="flex-[2] bg-lyx-background-light p-6 flex flex-col gap-4 h-full overflow-hidden"> }" class="flex-[2] bg-lyx-background-light p-6 flex flex-col gap-4 h-full overflow-hidden">
<div class="gap-2 flex flex-col"> <div class="gap-2 flex flex-col">
<div class="lg:hidden absolute right-4 top-4 text-[1.5rem]"> <div class="xl:hidden absolute right-6 top-2 text-[1.5rem]">
<i @click="menuOpen = false" class="fas fa-close cursor-pointer"></i> <i @click="menuOpen = false" class="fas fa-close cursor-pointer"></i>
</div> </div>
</div> </div>

8
dashboard/pages/events.vue
View File

@@ -19,7 +19,7 @@ const eventsData = await useFetch(`/api/data/count`, { headers: useComputedHeade
<div class="w-full h-full overflow-y-auto pb-20 p-6 gap-6 flex flex-col"> <div class="w-full h-full overflow-y-auto pb-20 p-6 gap-6 flex flex-col">
<LyxUiCard class="w-full flex justify-between items-center"> <LyxUiCard class="w-full flex justify-between items-center lg:flex-row flex-col gap-6 lg:gap-0">
<div class="flex flex-col gap-1"> <div class="flex flex-col gap-1">
<div> <div>
Total events: {{ eventsData.data.value?.[0]?.count || '0' }} Total events: {{ eventsData.data.value?.[0]?.count || '0' }}
@@ -40,9 +40,9 @@ const eventsData = await useFetch(`/api/data/count`, { headers: useComputedHeade
<BarCardEvents :key="refreshKey"></BarCardEvents> <BarCardEvents :key="refreshKey"></BarCardEvents>
</div> </div>
<div class="flex gap-6 flex-col xl:flex-row h-full"> <div class="flex gap-6 flex-col xl:flex-row xl:h-full">
<CardTitled :key="refreshKey" class="p-4 flex-[4] w-full h-full" title="Events" <CardTitled :key="refreshKey" class="p-4 xl:flex-[4] w-full h-full" title="Events"
sub="Events stacked bar chart."> sub="Events stacked bar chart.">
<template #header> <template #header>
<SelectButton @changeIndex="eventsStackedSelectIndex = $event" <SelectButton @changeIndex="eventsStackedSelectIndex = $event"
@@ -55,7 +55,7 @@ const eventsData = await useFetch(`/api/data/count`, { headers: useComputedHeade
</div> </div>
</CardTitled> </CardTitled>
<CardTitled :key="refreshKey" class="p-4 flex-[2] w-full h-full" title="Top events" <CardTitled :key="refreshKey" class="p-4 xl:flex-[2] w-full h-full" title="Top events"
sub="Displays key events."> sub="Displays key events.">
<DashboardEventsChart class="w-full"> </DashboardEventsChart> <DashboardEventsChart class="w-full"> </DashboardEventsChart>
</CardTitled> </CardTitled>

7
dashboard/pages/index.vue
View File

@@ -97,8 +97,11 @@ const showDashboard = computed(() => project.value && firstInteraction.data.valu
Create your first project... Create your first project...
</div> </div>
<div v-if="justLogged" class="text-[2rem]"> <div v-if="justLogged" class="text-[2rem] w-full h-full flex items-center justify-center">
The page will refresh soon <div
class="backdrop-blur-[1px] z-[20] left-0 top-0 w-full h-full flex items-center justify-center font-bold rockmann absolute">
<i class="fas fa-spinner text-[2rem] text-[#727272] animate-[spin_1s_linear_infinite] duration-500"></i>
</div>
</div> </div>
</div> </div>

2
dashboard/pages/payment_ok.vue
View File

@@ -2,8 +2,6 @@
definePageMeta({ layout: 'none' }); definePageMeta({ layout: 'none' });
const activeProject = useActiveProject();
</script> </script>

5
dashboard/pages/settings.vue
View File

@@ -13,8 +13,9 @@ const items = [
</script> </script>
<template> <template>
<div class="px-10 py-8 h-dvh overflow-y-auto hide-scrollbars"> <div class="lg:px-10 lg:py-8 h-dvh overflow-y-auto overflow-x-hidden hide-scrollbars">
<div class="poppins font-semibold text-[1.3rem]"> Settings </div>
<div class="poppins font-semibold text-[1.3rem] lg:px-0 px-4 lg:py-0 py-4"> Settings </div>
<CustomTab :items="items" class="mt-8"> <CustomTab :items="items" class="mt-8">
<template #general> <template #general>