mirror/php-web-maker
1
0
Fork 0
mirror of https://github.com/chinchang/web-maker.git synced 2025-08-02 19:37:29 +02:00
Code Issues Releases Wiki Activity

imporve share styling

Browse Source
This commit is contained in:
Kushagra Gour
2024-04-29 14:31:59 +05:30
parent 326e138654
commit 2557c40c33
3 changed files with 69 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/components/Share.jsx
View File

@@ -1,5 +1,5 @@
import { useEffect, useState } from 'preact/hooks'; import { useEffect, useState } from 'preact/hooks';
import { ProBadge } from './ProBadge'; import { Skeleton } from './Skeleton';
import { HStack, Stack, VStack } from './Stack'; import { HStack, Stack, VStack } from './Stack';
import Switch from './Switch'; import Switch from './Switch';
import { itemService } from '../itemService'; import { itemService } from '../itemService';
@@ -114,9 +114,25 @@ export function Share({
{!user?.isPro ? ( {!user?.isPro ? (
<VStack gap={1} align="stretch"> <VStack gap={1} align="stretch">
<p> <p>
Public creations available: {FREE_PUBLIC_ITEM_COUNT}. Used:{' '} <HStack gap={3} justify="flex-start">
{publicItemCount === undefined ? '-' : publicItemCount}. Left:{' '} <span>Public creations available: {FREE_PUBLIC_ITEM_COUNT}</span>
{Math.max(0, FREE_PUBLIC_ITEM_COUNT - publicItemCount)} <span>
Used:{' '}
{publicItemCount === undefined ? (
<Skeleton width="2ch" />
) : (
publicItemCount
)}
</span>
<span>
Left:{' '}
{publicItemCount === undefined ? (
<Skeleton width="2ch" />
) : (
Math.max(0, FREE_PUBLIC_ITEM_COUNT - publicItemCount)
)}
</span>
</HStack>
</p> </p>
<p> <p>
<HStack gap={1}> <HStack gap={1}>

3
src/components/Skeleton.jsx Normal file
View File

@@ -0,0 +1,3 @@
export const Skeleton = ({ width }) => {
return <div className="skeleton" style={{ width }}></div>;
};

46
src/style.css
View File

@@ -2369,6 +2369,52 @@ while the theme CSS file is loading */
inset 0px 1px 3px rgba(255, 255, 255, 0.1); inset 0px 1px 3px rgba(255, 255, 255, 0.1);
} }
.skeleton {
display: inline-block;
height: 0.5em;
background-color: currentColor;
border-radius: 999px;
animation: 2s linear infinite skeleton;
transform-origin: left;
}
@keyframes skeleton {
20% {
transform-origin: left;
opacity: 1;
transform: scaleX(1.5);
opacity: 0.5;
}
20.1% {
transform-origin: right;
transform: scaleX(1.5) translateX(33%);
}
50% {
transform-origin: right;
transform: scaleX(1) translateX(50%);
opacity: 1;
}
70% {
transform-origin: right;
transform: scaleX(1.5) translateX(33%);
}
70.1% {
transform-origin: left;
transform: scaleX(1.5);
}
90% {
transform-origin: left;
transform: scaleX(1);
opacity: 0.5;
}
/* 100% {
transform-origin: right;
transform: scaleX(1.5) translateX(33%);
opacity: 1;
} */
}
@media screen and (max-width: 600px) { @media screen and (max-width: 600px) {
body { body {
font-size: 70%; font-size: 70%;