mirror of
https://github.com/chinchang/web-maker.git
synced 2025-03-24 12:39:51 +01:00
styling fixes
This commit is contained in:
Kushagra Gour
parent
6ad63526c7
commit
b22783ae87
@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
|
||||
import firebase from 'firebase/app';
|
||||
import 'firebase/storage';
|
||||
import { Stack } from './Stack';
|
||||
import { copyToClipboard } from '../utils';
|
||||
|
||||
const Assets = () => {
|
||||
const [files, setFiles] = useState([]);
|
||||
@ -22,8 +23,12 @@ const Assets = () => {
|
||||
}
|
||||
|
||||
setIsUploading(true);
|
||||
const metadata = {
|
||||
cacheControl: 'public, max-age=3600' // 1 hr
|
||||
};
|
||||
|
||||
const fileRef = storageRef.child(file.name);
|
||||
const task = fileRef.put(file);
|
||||
const task = fileRef.put(file, metadata);
|
||||
|
||||
task.on(
|
||||
'state_changed',
|
||||
@ -125,14 +130,9 @@ const Assets = () => {
|
||||
};
|
||||
|
||||
const copyFileUrl = url => {
|
||||
const input = document.createElement('input');
|
||||
input.value = url;
|
||||
input.style.opacity = 0;
|
||||
document.body.appendChild(input);
|
||||
input.select();
|
||||
document.execCommand('copy');
|
||||
document.body.removeChild(input);
|
||||
alertsService.add('File URL copied!');
|
||||
copyToClipboard(url).then(() => {
|
||||
alertsService.add('File URL copied!');
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
|
||||
@ -36,7 +36,18 @@ export function ItemTile({
|
||||
aria-label="Remove"
|
||||
onClick={onRemoveBtnClick}
|
||||
>
|
||||
X
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="3.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<line x1="18" y1="6" x2="6" y2="18"></line>
|
||||
<line x1="6" y1="6" x2="18" y2="18"></line>
|
||||
</svg>
|
||||
</button>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
@ -94,9 +94,20 @@ const Modal = ({
|
||||
aria-label="Close modal"
|
||||
data-testid="closeModalButton"
|
||||
title="Close"
|
||||
class="js-modal__close-btn modal__close-btn"
|
||||
class="js-modal__close-btn dialog__close-btn modal__close-btn"
|
||||
>
|
||||
Close
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="3.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<line x1="18" y1="6" x2="6" y2="18"></line>
|
||||
<line x1="6" y1="6" x2="18" y2="18"></line>
|
||||
</svg>
|
||||
</button>
|
||||
)}
|
||||
{children}
|
||||
|
||||
@ -157,11 +157,22 @@ export default function SavedItemPane({
|
||||
>
|
||||
<button
|
||||
onClick={onCloseIntent}
|
||||
class="btn saved-items-pane__close-btn"
|
||||
class="btn dialog__close-btn saved-items-pane__close-btn"
|
||||
id="js-saved-items-pane-close-btn"
|
||||
aria-label={i18n._(t`Close saved creations pane`)}
|
||||
>
|
||||
X
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="3.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<line x1="18" y1="6" x2="6" y2="18"></line>
|
||||
<line x1="6" y1="6" x2="18" y2="18"></line>
|
||||
</svg>
|
||||
</button>
|
||||
<div
|
||||
class="flex flex-v-center"
|
||||
|
||||
9
src/components/Stack.jsx
Normal file
9
src/components/Stack.jsx
Normal file
@ -0,0 +1,9 @@
|
||||
const gaps = [0, '0.5rem', '1rem', '1.5rem', '3rem', '5rem'];
|
||||
|
||||
export const Stack = ({ gap = 0, children }) => {
|
||||
return (
|
||||
<div class="stack" style={{ gap: gaps[gap] }}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -3,6 +3,8 @@
|
||||
--color-text-dark-1: #b3aec4;
|
||||
--color-bg: #252637;
|
||||
--color-popup: #3a2b63;
|
||||
--color-overlay: rgba(3, 8, 27, 0.7);
|
||||
--color-close-btn: #d12b4a;
|
||||
--code-font-size: 16px;
|
||||
--color-button: #d3a447;
|
||||
--color-focus-outline: #d3a447;
|
||||
@ -935,6 +937,20 @@ body > #demo-frame {
|
||||
/* border-radius: 4px; */
|
||||
}
|
||||
|
||||
.dialog__close-btn {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
border: none;
|
||||
background: var(--color-close-btn);
|
||||
color: white;
|
||||
border-radius: 0.3rem;
|
||||
padding: 0.4rem 0.5rem;
|
||||
}
|
||||
.dialog__close-btn > svg {
|
||||
width: 1.2rem;
|
||||
aspect-ratio: 1;
|
||||
}
|
||||
|
||||
.modal {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
@ -961,32 +977,24 @@ body > #demo-frame {
|
||||
}
|
||||
}
|
||||
|
||||
.modal__close-btn {
|
||||
position: absolute;
|
||||
right: 1rem;
|
||||
top: 1rem;
|
||||
text-transform: uppercase;
|
||||
font-weight: 700;
|
||||
font-size: 0.8rem;
|
||||
opacity: 0.8;
|
||||
transition: 0.25s ease;
|
||||
border: 1px solid black;
|
||||
border-radius: 2px;
|
||||
padding: 0.2rem 0.5rem;
|
||||
}
|
||||
|
||||
.modal__close-btn > svg {
|
||||
fill: black;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.modal__close-btn:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.modal__close-btn {
|
||||
right: 0rem;
|
||||
bottom: calc(100% + 0.2rem);
|
||||
transition: 0.25s ease;
|
||||
}
|
||||
.modal__content {
|
||||
background: var(--color-popup);
|
||||
|
||||
/* fix me */
|
||||
background: linear-gradient(45deg, #2d063c, #3a2b63);
|
||||
box-shadow:
|
||||
inset 1px -1px 0 0 #ffffff17,
|
||||
0 20px 31px 0 #0000008a;
|
||||
|
||||
color: var(--color-text);
|
||||
position: relative;
|
||||
border-radius: 5px;
|
||||
@ -995,9 +1003,9 @@ body > #demo-frame {
|
||||
font-size: 1.1em;
|
||||
line-height: 1.4;
|
||||
max-width: 85vw;
|
||||
margin: 2rem auto;
|
||||
margin: 4rem auto 2rem;
|
||||
box-sizing: border-box;
|
||||
overflow-y: auto;
|
||||
/* overflow-y: auto; */
|
||||
pointer-events: auto;
|
||||
transform: scale(0.98);
|
||||
animation: anim-modal var(--duration-modal-show) cubic-bezier(0.4, 0, 0.2, 1)
|
||||
@ -1038,7 +1046,7 @@ body > #demo-frame {
|
||||
z-index: 5;
|
||||
opacity: 0;
|
||||
will-change: opacity;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
background: var(--color-overlay);
|
||||
transition: opacity var(--duration-modal-overlay-show);
|
||||
}
|
||||
|
||||
@ -1072,7 +1080,7 @@ body > #demo-frame {
|
||||
padding: 20px 30px;
|
||||
z-index: 6;
|
||||
visibility: hidden; /* prevents tabbing */
|
||||
background-color: var(--color-popup);
|
||||
background: var(--color-popup);
|
||||
transition: 0.3s cubic-bezier(1, 0.13, 0.21, 0.87);
|
||||
transition-property: transform;
|
||||
will-change: transform;
|
||||
@ -1093,23 +1101,16 @@ body > #demo-frame {
|
||||
}
|
||||
|
||||
.saved-items-pane__close-btn {
|
||||
position: absolute;
|
||||
left: -18px;
|
||||
top: 24px;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
border-radius: 50%;
|
||||
padding: 10px 14px;
|
||||
background: crimson;
|
||||
color: white;
|
||||
border: 0;
|
||||
transform: scale(0);
|
||||
will-change: transform, opacity;
|
||||
transition: 0.3s ease;
|
||||
transition-property: transform, opacity;
|
||||
transition-delay: 0;
|
||||
}
|
||||
|
||||
.saved-items-pane.is-open .saved-items-pane__close-btn {
|
||||
opacity: 1;
|
||||
transition-delay: 0.4s;
|
||||
@ -1121,8 +1122,6 @@ body > #demo-frame {
|
||||
padding: 20px;
|
||||
background-color: rgba(255, 255, 255, 0.06);
|
||||
position: relative;
|
||||
/*border: 1px solid rgba(255,255,255,0.1);*/
|
||||
margin: 20px 0;
|
||||
display: block;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
@ -1132,6 +1131,10 @@ body > #demo-frame {
|
||||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
|
||||
/* animation: slide-left 0.35s ease forwards; */
|
||||
}
|
||||
.saved-item-tile + .saved-item-tile {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.saved-item-tile--inline {
|
||||
display: inline-block;
|
||||
margin-left: 10px;
|
||||
@ -1209,6 +1212,8 @@ body > #demo-frame {
|
||||
.saved-item-tile__btns {
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
z-index: 1;
|
||||
right: 8px;
|
||||
opacity: 0;
|
||||
@ -1227,14 +1232,21 @@ body > #demo-frame {
|
||||
}
|
||||
|
||||
.saved-item-tile__btn {
|
||||
display: inline-flex;
|
||||
padding: 7px 10px;
|
||||
color: white;
|
||||
border: 0;
|
||||
border-radius: 20px;
|
||||
border-radius: 1in;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 700;
|
||||
margin-left: 2px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.saved-item-tile__btn > svg {
|
||||
width: 1rem;
|
||||
aspect-ratio: 1;
|
||||
}
|
||||
|
||||
.saved-item-tile__btn:hover {
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
@ -1257,7 +1269,8 @@ body > #demo-frame {
|
||||
.saved-items-pane__container {
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
max-height: calc(100vh - 90px);
|
||||
max-height: calc(100vh - 130px);
|
||||
margin-top: 1rem;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
|
||||
35
src/utils.js
35
src/utils.js
@ -343,19 +343,21 @@ export function getCompleteHtml(html, css, js, item, isForExport) {
|
||||
var externalJs = '',
|
||||
externalCss = '';
|
||||
if (item.externalLibs) {
|
||||
externalJs = item.externalLibs.js
|
||||
.split('\n')
|
||||
.reduce(function (scripts, url) {
|
||||
return scripts + (url ? '\n<script src="' + url + '"></script>' : '');
|
||||
}, '');
|
||||
externalCss = item.externalLibs.css
|
||||
.split('\n')
|
||||
.reduce(function (links, url) {
|
||||
return (
|
||||
links +
|
||||
(url ? '\n<link rel="stylesheet" href="' + url + '"></link>' : '')
|
||||
);
|
||||
}, '');
|
||||
externalJs = item.externalLibs.js.split('\n').reduce(function (
|
||||
scripts,
|
||||
url
|
||||
) {
|
||||
return scripts + (url ? '\n<script src="' + url + '"></script>' : '');
|
||||
}, '');
|
||||
externalCss = item.externalLibs.css.split('\n').reduce(function (
|
||||
links,
|
||||
url
|
||||
) {
|
||||
return (
|
||||
links +
|
||||
(url ? '\n<link rel="stylesheet" href="' + url + '"></link>' : '')
|
||||
);
|
||||
}, '');
|
||||
}
|
||||
var contents =
|
||||
'<!DOCTYPE html>\n' +
|
||||
@ -585,3 +587,10 @@ if (window.IS_EXTENSION) {
|
||||
} else {
|
||||
document.body.classList.add('is-app');
|
||||
}
|
||||
export async function copyToClipboard(text) {
|
||||
try {
|
||||
await navigator.clipboard.writeText(text);
|
||||
} catch (err) {
|
||||
console.error('Failed to copy text: ', err);
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user