mirror of
https://github.com/chinchang/web-maker.git
synced 2025-03-22 03:29:42 +01:00
more styling
This commit is contained in:
Kushagra Gour
parent
4c4dc1f2e0
commit
6e5e33a146
@ -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
|
||||
|
||||
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
30
src/lib/hint.min.css
vendored
30
src/lib/hint.min.css
vendored
File diff suppressed because one or more lines are too long
@ -259,6 +259,10 @@ label {
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
}
|
||||
[class*='hint--']:after,
|
||||
[class*='hint--']:before {
|
||||
background-color: #000;
|
||||
}
|
||||
[class*='hint--']:after {
|
||||
text-transform: none;
|
||||
font-weight: normal;
|
||||
@ -819,6 +823,10 @@ body > #demo-frame {
|
||||
.btn--dark:hover > svg {
|
||||
fill: #111;
|
||||
}
|
||||
.btn--dark.btn--active {
|
||||
background: linear-gradient(0deg, hsl(0, 0%, 25%) 0, hsl(0, 0%, 13%) 100%);
|
||||
box-shadow: inset 0 -1px 0px 0 rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
.btn--chromeless {
|
||||
box-shadow: none;
|
||||
background: transparent;
|
||||
@ -1091,7 +1099,8 @@ body > #demo-frame {
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 450px;
|
||||
width: 35vw;
|
||||
max-width: 60ch;
|
||||
padding: 20px 30px;
|
||||
z-index: 6;
|
||||
visibility: hidden; /* prevents tabbing */
|
||||
@ -1286,6 +1295,7 @@ body > #demo-frame {
|
||||
overflow-x: hidden;
|
||||
max-height: calc(100vh - 130px);
|
||||
margin-top: 1rem;
|
||||
padding-inline: 1rem;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
@ -2080,7 +2090,7 @@ while the theme CSS file is loading */
|
||||
/* padding: 0; */
|
||||
/* margin: 0; */
|
||||
display: flex;
|
||||
background: rgb(255 255 255 / 4%);
|
||||
background: none;
|
||||
gap: 0.5rem;
|
||||
padding: 0.2rem;
|
||||
border-radius: 0.4rem;
|
||||
@ -2090,7 +2100,7 @@ while the theme CSS file is loading */
|
||||
/* align-items: center; */
|
||||
}
|
||||
.asset-manager__file:hover {
|
||||
background: rgb(255 255 255 / 7%);
|
||||
background: rgb(255 255 255 / 5%);
|
||||
}
|
||||
.asset-manager__file--grid {
|
||||
display: flex;
|
||||
@ -2103,7 +2113,8 @@ while the theme CSS file is loading */
|
||||
}
|
||||
.asset-manager__file-container--grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
|
||||
grid-template-columns: repeat(7, minmax(90px, 1fr));
|
||||
width: 50rem;
|
||||
}
|
||||
|
||||
.asset-manager__file {
|
||||
@ -2119,11 +2130,12 @@ while the theme CSS file is loading */
|
||||
.asset-manager__file img {
|
||||
height: 1.5rem;
|
||||
aspect-ratio: 1;
|
||||
/* border-radius: 0.5rem; */
|
||||
object-fit: cover;
|
||||
border-radius: 0.3rem;
|
||||
object-fit: contain;
|
||||
}
|
||||
.asset-manager__file--grid img {
|
||||
height: 80px;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
.stack {
|
||||
display: flex;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user