mirror of
https://github.com/Litlyx/litlyx
synced 2025-12-10 07:48:37 +01:00
fix ui
This commit is contained in:
@@ -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]">
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user