mirror/php-web-maker
1
0
Fork 0
mirror of https://github.com/chinchang/web-maker.git synced 2025-03-23 20:19:40 +01:00
Code Issues Releases Wiki Activity

styling

Browse Source
This commit is contained in:
Kushagra Gour 2024-02-28 15:31:12 +05:30
parent b13707a50c
commit 8877651a0b
3 changed files with 56 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
src/components/Assets.jsx
View File

@ -1,8 +1,10 @@
import React, { useState, useEffect } from 'react';
import firebase from 'firebase/app';
import 'firebase/storage';
import { Stack } from './Stack';
import { HStack, Stack, VStack } from './Stack';
import { copyToClipboard } from '../utils';
import { Trans } from '@lingui/macro';
import { ProBadge } from './ProBadge';
const Assets = () => {
const [files, setFiles] = useState([]);
@ -142,6 +144,13 @@ const Assets = () => {
onDragOver={handleDragDropEvent}
onDrop={handleDrop}
>
<HStack gap={1} align="center">
<h1>
<Trans>Assets</Trans>
</h1>
<ProBadge />
</HStack>
<div
class="asset-manager__upload-box"
style={{
@ -161,40 +170,42 @@ const Assets = () => {
</div>
</div>
{isFetchingFiles && <p>Fetching your files...</p>}
{files.length ? (
<Stack>
<input
type="text"
placeholder="Search files"
value={searchTerm}
onChange={handleSearchChange}
style={{ width: '100%' }}
/>
<button onClick={() => setListType('list')}>List</button>
<button onClick={() => setListType('grid')}>Grid</button>
</Stack>
) : null}
<div
class={`asset-manager__file-container ${
listType === 'grid' ? 'asset-manager__file-container--grid' : ''
}`}
>
{filteredFiles.map((file, index) => (
<button
type="button"
key={index}
onClick={() => copyFileUrl(file.url)}
class={`asset-manager__file ${
listType === 'grid' ? 'asset-manager__file--grid' : ''
}`}
>
{/* <a href={file.url} target="_blank" rel="noopener noreferrer"> */}
<img src={file.url} />{' '}
<span class="asset-manager__file-name">{file.name}</span>
{/* </a> */}
</button>
))}
</div>
<VStack align="stretch" gap={1}>
{files.length ? (
<Stack>
<input
type="text"
placeholder="Search files"
value={searchTerm}
onChange={handleSearchChange}
style={{ width: '100%' }}
/>
<button onClick={() => setListType('list')}>List</button>
<button onClick={() => setListType('grid')}>Grid</button>
</Stack>
) : null}
<div
class={`asset-manager__file-container ${
listType === 'grid' ? 'asset-manager__file-container--grid' : ''
}`}
>
{filteredFiles.map((file, index) => (
<button
type="button"
key={index}
onClick={() => copyFileUrl(file.url)}
class={`asset-manager__file ${
listType === 'grid' ? 'asset-manager__file--grid' : ''
}`}
>
{/* <a href={file.url} target="_blank" rel="noopener noreferrer"> */}
<img src={file.url} />{' '}
<span class="asset-manager__file-name">{file.name}</span>
{/* </a> */}
</button>
))}
</div>
</VStack>
</div>
);
};

4
src/components/MainHeader.jsx
View File

@ -48,9 +48,7 @@ export function MainHeader(props) {
class="btn btn--dark hint--rounded hint--bottom-left"
aria-label={i18n._(t`Upload/Use assets`)}
>
<Stack gap={1}>
<Trans>Assets</Trans> <ProBadge />
</Stack>
<Trans>Assets</Trans>
</Button>
{!props.isFileMode && (

11
src/style.css
View File

@ -946,6 +946,11 @@ body > #demo-frame {
position: absolute;
border: none;
background: var(--color-close-btn);
background: linear-gradient(
to bottom,
var(--color-close-btn),
color-mix(in lch, var(--color-close-btn), black)
);
color: white;
border-radius: 0.3rem;
padding: 0.4rem 0.5rem;
@ -994,7 +999,7 @@ body > #demo-frame {
background: var(--color-popup);
/* fix me */
background: linear-gradient(45deg, #2d063c, #3a2b63);
background: linear-gradient(45deg, #2d063cad, #3a2b63);
box-shadow:
inset 1px -1px 0 0 #ffffff17,
0 20px 31px 0 #0000008a;
@ -1038,6 +1043,7 @@ body > #demo-frame {
/* transition-duration: 0.3s; */
/* transform: translateY(0px) scale(1); */
/* opacity: 1; */
backdrop-filter: (3px);
}
.modal-overlay {
@ -1050,7 +1056,8 @@ body > #demo-frame {
z-index: 5;
opacity: 0;
will-change: opacity;
background: var(--color-overlay);
/* background: var(--color-overlay); */
backdrop-filter: blur(5px) grayscale(1);
transition: opacity var(--duration-modal-overlay-show);
}