mirror/php-web-maker
1
0
Fork 0
mirror of https://github.com/chinchang/web-maker.git synced 2025-07-16 03:26:19 +02: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
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 React, { useState, useEffect } from 'react';
import firebase from 'firebase/app'; import firebase from 'firebase/app';
import 'firebase/storage'; import 'firebase/storage';
import { Stack } from './Stack'; import { HStack, Stack, VStack } from './Stack';
import { copyToClipboard } from '../utils'; import { copyToClipboard } from '../utils';
import { Trans } from '@lingui/macro';
import { ProBadge } from './ProBadge';
const Assets = () => { const Assets = () => {
const [files, setFiles] = useState([]); const [files, setFiles] = useState([]);
@ -142,6 +144,13 @@ const Assets = () => {
onDragOver={handleDragDropEvent} onDragOver={handleDragDropEvent}
onDrop={handleDrop} onDrop={handleDrop}
> >
<HStack gap={1} align="center">
<h1>
<Trans>Assets</Trans>
</h1>
<ProBadge />
</HStack>
<div <div
class="asset-manager__upload-box" class="asset-manager__upload-box"
style={{ style={{
@ -161,40 +170,42 @@ const Assets = () => {
</div> </div>
</div> </div>
{isFetchingFiles && <p>Fetching your files...</p>} {isFetchingFiles && <p>Fetching your files...</p>}
{files.length ? ( <VStack align="stretch" gap={1}>
<Stack> {files.length ? (
<input <Stack>
type="text" <input
placeholder="Search files" type="text"
value={searchTerm} placeholder="Search files"
onChange={handleSearchChange} value={searchTerm}
style={{ width: '100%' }} onChange={handleSearchChange}
/> style={{ width: '100%' }}
<button onClick={() => setListType('list')}>List</button> />
<button onClick={() => setListType('grid')}>Grid</button> <button onClick={() => setListType('list')}>List</button>
</Stack> <button onClick={() => setListType('grid')}>Grid</button>
) : null} </Stack>
<div ) : null}
class={`asset-manager__file-container ${ <div
listType === 'grid' ? 'asset-manager__file-container--grid' : '' class={`asset-manager__file-container ${
}`} listType === 'grid' ? 'asset-manager__file-container--grid' : ''
> }`}
{filteredFiles.map((file, index) => ( >
<button {filteredFiles.map((file, index) => (
type="button" <button
key={index} type="button"
onClick={() => copyFileUrl(file.url)} key={index}
class={`asset-manager__file ${ onClick={() => copyFileUrl(file.url)}
listType === 'grid' ? 'asset-manager__file--grid' : '' class={`asset-manager__file ${
}`} listType === 'grid' ? 'asset-manager__file--grid' : ''
> }`}
{/* <a href={file.url} target="_blank" rel="noopener noreferrer"> */} >
<img src={file.url} />{' '} {/* <a href={file.url} target="_blank" rel="noopener noreferrer"> */}
<span class="asset-manager__file-name">{file.name}</span> <img src={file.url} />{' '}
{/* </a> */} <span class="asset-manager__file-name">{file.name}</span>
</button> {/* </a> */}
))} </button>
</div> ))}
</div>
</VStack>
</div> </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" class="btn btn--dark hint--rounded hint--bottom-left"
aria-label={i18n._(t`Upload/Use assets`)} aria-label={i18n._(t`Upload/Use assets`)}
> >
<Stack gap={1}> <Trans>Assets</Trans>
<Trans>Assets</Trans> <ProBadge />
</Stack>
</Button> </Button>
{!props.isFileMode && ( {!props.isFileMode && (

11
src/style.css
View File

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