mirror/php-web-maker
1
0
Fork 0
mirror of https://github.com/chinchang/web-maker.git synced 2025-07-28 17:20:13 +02:00
Code Issues Releases Wiki Activity

more styling

Browse Source
This commit is contained in:
Kushagra Gour
2024-03-12 19:53:44 +05:30
parent 4c4dc1f2e0
commit 6e5e33a146
5 changed files with 111 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/components/Assets.jsx
View File

@@ -5,6 +5,7 @@ import { HStack, Stack, VStack } from './Stack';
import { copyToClipboard } from '../utils';
import { Trans } from '@lingui/macro';
import { ProBadge } from './ProBadge';
import { LoaderWithText } from './Loader';
const Assets = () => {
const [files, setFiles] = useState([]);
@@ -18,9 +19,9 @@ const Assets = () => {
const storageRef = firebase.storage().ref(`assets/${window.user?.uid}`);
const uploadFile = file => {
if (file.size > 5 * 1024 * 1024) {
if (file.size > 300 * 1024) {
// 5MB limit
alert('File size must be less than 5MB');
alert('File size must be less than 300KB');
return;
}
@@ -181,10 +182,10 @@ const Assets = () => {
/>
</div>
</div>
{isFetchingFiles && <p>Fetching your files...</p>}
{isFetchingFiles && <LoaderWithText>Fetching files...</LoaderWithText>}
<VStack align="stretch" gap={1}>
{files.length ? (
<Stack>
<Stack gap={1}>
<input
type="text"
placeholder="Search files"
@@ -192,8 +193,29 @@ const Assets = () => {
onChange={handleSearchChange}
style={{ width: '100%' }}
/>
<button onClick={() => setListType('list')}>List</button>
<button onClick={() => setListType('grid')}>Grid</button>
<button
class={`btn btn--dark ${
listType === 'list' ? 'btn--active' : ''
} hint--rounded hint--top-left`}
onClick={() => setListType('list')}
aria-label="List view"
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<title>view-list</title>
<path d="M9,5V9H21V5M9,19H21V15H9M9,14H21V10H9M4,9H8V5H4M4,19H8V15H4M4,14H8V10H4V14Z" />
</svg>
</button>
<button
class={`btn btn--dark ${
listType === 'grid' ? 'btn--active' : ''
} hint--rounded hint--top-left`}
onClick={() => setListType('grid')}
aria-label="Grid view"
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M3 11h8V3H3m0 18h8v-8H3m10 8h8v-8h-8m0-10v8h8V3" />
</svg>
</button>
</Stack>
) : null}
<div

49
src/components/ItemTile.jsx
View File

@@ -1,6 +1,7 @@
import { h } from 'preact';
import { getHumanDate } from '../utils';
import Modal from './Modal';
import { HStack } from './Stack';
export function ItemTile({
item,
@@ -29,6 +30,17 @@ export function ItemTile({
onClick={onToggleVisibilityBtnClick}
>
Toggle Visibility
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
>
{item.isPublic ? (
<path d="M12 9a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3m0 8a5 5 0 0 1-5-5 5 5 0 0 1 5-5 5 5 0 0 1 5 5 5 5 0 0 1-5 5m0-12.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5Z" />
) : (
<path d="M11.83 9 15 12.16V12a3 3 0 0 0-3-3h-.17m-4.3.8 1.55 1.55c-.05.21-.08.42-.08.65a3 3 0 0 0 3 3c.22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53a5 5 0 0 1-5-5c0-.79.2-1.53.53-2.2M2 4.27l2.28 2.28.45.45C3.08 8.3 1.78 10 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.43.42L19.73 22 21 20.73 3.27 3M12 7a5 5 0 0 1 5 5c0 .64-.13 1.26-.36 1.82l2.93 2.93c1.5-1.25 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-4 .7l2.17 2.15C10.74 7.13 11.35 7 12 7Z" />
)}
</svg>
</button>
) : null}
{onForkBtnClick ? (
@@ -37,6 +49,13 @@ export function ItemTile({
aria-label="Creates a duplicate of this creation (Ctrl/⌘ + F)"
onClick={onForkBtnClick}
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
>
<path d="M13 14c-3.36 0-4.46 1.35-4.82 2.24C9.25 16.7 10 17.76 10 19a3 3 0 0 1-3 3 3 3 0 0 1-3-3c0-1.31.83-2.42 2-2.83V7.83A2.99 2.99 0 0 1 4 5a3 3 0 0 1 3-3 3 3 0 0 1 3 3c0 1.31-.83 2.42-2 2.83v5.29c.88-.65 2.16-1.12 4-1.12 2.67 0 3.56-1.34 3.85-2.23A3.006 3.006 0 0 1 14 7a3 3 0 0 1 3-3 3 3 0 0 1 3 3c0 1.34-.88 2.5-2.09 2.86C17.65 11.29 16.68 14 13 14m-6 4a1 1 0 0 0-1 1 1 1 0 0 0 1 1 1 1 0 0 0 1-1 1 1 0 0 0-1-1M7 4a1 1 0 0 0-1 1 1 1 0 0 0 1 1 1 1 0 0 0 1-1 1 1 0 0 0-1-1m10 2a1 1 0 0 0-1 1 1 1 0 0 0 1 1 1 1 0 0 0 1-1 1 1 0 0 0-1-1Z" />
</svg>
Fork<span class="show-when-selected">(Ctrl/⌘ + F)</span>
</button>
) : null}
@@ -49,14 +68,9 @@ export function ItemTile({
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="3.5"
strokeLinecap="round"
strokeLinejoin="round"
fill="currentColor"
>
<line x1="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line>
<path d="M9 3v1H4v2h1v13a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V6h1V4h-5V3H9M7 6h10v13H7V6m2 2v9h2V8H9m4 0v9h2V8h-2Z" />
</svg>
</button>
) : null}
@@ -87,12 +101,21 @@ export function ItemTile({
</div>
) : null}
</div>
{item.updatedOn ? (
<div class="saved-item-tile__meta">
Last updated:{' '}
<time dateTime={item.updatedOn}>{getHumanDate(item.updatedOn)}</time>
</div>
) : null}
<div class="saved-item-tile__meta">
<HStack justify="space-between">
<div>
{item.updatedOn ? (
<>
Last updated:{' '}
<time dateTime={item.updatedOn}>
{getHumanDate(item.updatedOn)}
</time>
</>
) : null}
</div>
<div>right</div>
</HStack>
</div>
</div>
);
}

4
src/components/Share.jsx
View File

@@ -15,7 +15,7 @@ export function Share({ user, item, onVisibilityChange }) {
if (!user) return;
window.db.getPublicItemCount(user.uid).then(c => {
setPublicItemCount(c);
console.log(c);
console.log('public items', c);
});
}, []);
@@ -74,7 +74,7 @@ export function Share({ user, item, onVisibilityChange }) {
{!user?.isPro ? (
<VStack gap={1} align="stretch">
<p>
You have {FREE_PUBLIC_ITEM_COUNT - publicItemCount}/
You have {Math.max(0, FREE_PUBLIC_ITEM_COUNT - publicItemCount)}/
{FREE_PUBLIC_ITEM_COUNT} public creations left.
</p>
<p>