LumeWeb
/
skynet-webportal
Archived
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

updated mobile view

This commit is contained in:
Karol Wypchlo 2021-03-26 17:23:42 +01:00
parent 4980a99ef2
commit 2dba3f1131
3 changed files with 144 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/website/package.json
View File

@ -11,6 +11,7 @@
"autoprefixer": "^10.2.5",
"bytes": "^3.1.0",
"classnames": "^2.2.6",
"copy-text-to-clipboard": "^3.0.1",
"framer-motion": "^4.0.3",
"gatsby": "^3.0.1",
"gatsby-background-image": "^1.5.0",

58
packages/website/src/components/Uploader/Uploader.js
View File

@ -4,6 +4,7 @@ import { Add, Cloud, ArrowUpCircle, CheckCircle } from "../Icons";
import bytes from "bytes";
import classNames from "classnames";
import { getReasonPhrase, StatusCodes } from "http-status-codes";
import copy from "copy-text-to-clipboard";
import path from "path-browserify";
import { useDropzone } from "react-dropzone";
import { SkynetClient } from "skynet-js";
@ -55,23 +56,23 @@ const createUploadErrorMessage = (error) => {
const client = new SkynetClient("https://siasky.net");
const UploadElement = ({ file, progress, status, url }) => {
const UploadElement = ({ file, status, url = "", progress = 0 }) => {
const handleCopy = (url) => {
console.log(url);
copy(url);
};
return (
<div>
<div className="flex items-center">
{status === "uploading" && <ArrowUpCircle />}
{status === "processing" && <ArrowUpCircle />}
{status === "complete" && <CheckCircle />}
<div className="flex flex-col flex-grow ml-3">
{status === "uploading" && <ArrowUpCircle className="flex-shrink-0" />}
{status === "processing" && <ArrowUpCircle className="flex-shrink-0" />}
{status === "complete" && <CheckCircle className="flex-shrink-0" />}
<div className="flex flex-col flex-grow ml-3 overflow-hidden">
<div className="text-palette-600 text-sm font-light">{file.name}</div>
<div className="flex justify-between text-palette-400 text-xs">
<div className="font-content">
<div className="flex justify-between text-palette-400 text-xs space-x-2">
<div className="font-content truncate">
{status === "uploading" && (
<span>
<span className="tabular-nums">
Uploading {bytes(file.size * progress)} of {bytes(file.size)}
</span>
)}
@ -85,10 +86,15 @@ const UploadElement = ({ file, progress, status, url }) => {
)}
</div>
<div>
{status === "uploading" && <span className="uppercase">{Math.floor(progress * 100)}% completed</span>}
{status === "uploading" && (
<span className="uppercase tabular-nums">
{Math.floor(progress * 100)}%<span className="hidden desktop:inline"> completed</span>
</span>
)}
{status === "complete" && (
<button className="uppercase" onClick={() => handleCopy(url)}>
Copy link
<span className="hidden desktop:inline">Copy link</span>
<span className="inline desktop:hidden">Copy</span>
</button>
)}
</div>
@ -177,32 +183,36 @@ const Uploader = () => {
const inputElement = inputRef.current;
React.useEffect(() => {
if (mode === "directory") {
inputElement.setAttribute("webkitdirectory", "true");
} else {
inputElement.removeAttribute("webkitdirectory");
}
}, [mode, inputElement]);
if (!inputElement) return;
if (mode === "directory") inputElement.setAttribute("webkitdirectory", "true");
if (mode === "file") inputElement.removeAttribute("webkitdirectory");
}, [inputElement, mode]);
return (
<div className="px-8 py-12">
<div className="dekstop:px-8 py-12">
<div className="max-w-content mx-auto rounded-lg shadow bg-white z-0 relative">
<div className="flex">
<button
className={classnames("uppercase text-xxs desktop:text-xs w-1/2 p-3 rounded-tl-lg leading-8", {
className={classnames(
"uppercase text-xxs desktop:text-xs w-1/2 p-2 desktop:p-3 rounded-tl-lg leading-6 desktop:leading-8",
{
"bg-primary": mode === "file",
"bg-palette-200": mode === "directory",
})}
}
)}
onClick={() => setMode("file")}
>
<span className="hidden desktop:inline">Try it now and upload your files</span>
<span className="inline desktop:hidden">Upload files</span>
</button>
<button
className={classnames("uppercase text-xxs desktop:text-xs w-1/2 p-3 rounded-tr-lg leading-8", {
className={classnames(
"uppercase text-xxs desktop:text-xs w-1/2 p-2 desktop:p-3 rounded-tr-lg leading-6 desktop:leading-8",
{
"bg-primary": mode === "directory",
"bg-palette-200": mode === "file",
})}
}
)}
onClick={() => setMode("directory")}
>
<span className="hidden desktop:inline">Do you want to upload an entire directory?</span>
@ -224,7 +234,7 @@ const Uploader = () => {
}
)}
>
<Cloud />
{files.length === 0 && <Cloud />}
<h4 className="font-light text-palette-600 text-lg mt-2 text-center">
Add or drop your files here to pin to Skynet
</h4>
@ -237,7 +247,7 @@ const Uploader = () => {
</div>
{files.length > 0 && (
<div className="flex flex-col space-y-5 p-14">
<div className="flex flex-col space-y-5 px-4 py-10 desktop:p-14">
{files.map((file, index) => (
<UploadElement key={index} {...file} />
))}

98
packages/website/src/pages/index.js
View File

@ -18,20 +18,20 @@ import {
} from "../components/Icons";
import classnames from "classnames";
const Section = ({ children, className, ...props }) => (
<div className={classnames("p-8", className)} {...props}>
const Section = React.forwardRef(({ children, className, ...props }, ref) => (
<div ref={ref} className={classnames("p-8", className)} {...props}>
<div className="max-w-content mx-auto">{children}</div>
</div>
);
));
const BigIcon = ({ Icon, text }) => (
const EtosCard = ({ Icon, text }) => (
<div className="flex flex-col items-center">
<Icon height="142" />
<p className="text-center mt-4 font-light text-palette-600 text-lg">{text}</p>
</div>
);
const SmallIconCard = ({ Icon, title, text }) => (
const EcosystemCard = ({ Icon, title, text }) => (
<div className="flex flex-col">
<Icon />
<h3 className="font-light text-lg mt-6">{title}</h3>
@ -54,7 +54,56 @@ const SectionTitle = ({ children, className, ...props }) => (
</h2>
);
const IndexPage = () => (
const etosCards = [
{
Icon: SkynetToolBig,
title: "Build a freer future",
},
{
Icon: SkynetUserBig,
title: "Fight corporate control of user data",
},
{
Icon: SkynetPowerBig,
title: "Empower global citizens",
},
];
const ecosystemCards = [
{
Icon: SkynetUsageSmall,
title: "Easy to use",
text:
"Decentralized storage without needing to run a node or wallet. Skynet also includes SDKs for popular programming languages and APIs that integrate seamlessly with your existing apps.",
},
{
Icon: SkynetSpeedSmall,
title: "Fast",
text:
"Skynet's speeds rival centralized providers and surpass all decentralized offerings. A typical Skynet download starts in under 500 ms and can stream at rates as high as 1 Gbps!",
},
{
Icon: SkynetSiaSmall,
title: "Free to use",
text:
"Focus on building, not overheard server costs. When users own their data, developers aren't asked to pay for it.",
},
{
Icon: SkynetMonetizationSmall,
title: "Monetization",
text:
"Profit directly from the success of your skapp. Now you can truly prioritize your users, instead of advertisers.",
},
{
Icon: SkynetPersistenceSmall,
title: "Persistence",
text:
"Your skapp and data stay live, even if corporations pull your access to their resources. You can also use Skynet as a failover site for when centralized providers go down.",
},
];
const IndexPage = () => {
return (
<Layout>
<SEO title="Home" />
@ -63,7 +112,7 @@ const IndexPage = () => (
</Section>
<Section className="relative">
{/* <div className="absolute inset-x-0 bg-white bottom-0" style={{ top: 256 }}></div> */}
<div className="absolute inset-x-0 bg-white bottom-0" style={{ top: "240px" }}></div>
<Uploader />
</Section>
@ -71,9 +120,9 @@ const IndexPage = () => (
<SectionTitle className="text-center mb-11">The new decentralized internet is here</SectionTitle>
<div className="grid grid-cols-1 gap-8 desktop:grid-cols-3">
<BigIcon Icon={SkynetToolBig} text="Build a freer future" />
<BigIcon Icon={SkynetUserBig} text="Fight corporate control of user data" />
<BigIcon Icon={SkynetPowerBig} text="Empower global citizens" />
{etosCards.map((card, index) => (
<EtosCard key={index} {...card} />
))}
</div>
<div className="flex flex-col items-center mt-16">
@ -98,31 +147,9 @@ const IndexPage = () => (
<LearnMoreButton />
</div>
<SmallIconCard
Icon={SkynetUsageSmall}
title="Easy to use"
text="Decentralized storage without needing to run a node or wallet. Skynet also includes SDKs for popular programming languages and APIs that integrate seamlessly with your existing apps. "
/>
<SmallIconCard
Icon={SkynetSpeedSmall}
title="Fast"
text="Skynet's speeds rival centralized providers and surpass all decentralized offerings. A typical Skynet download starts in under 500 ms and can stream at rates as high as 1 Gbps!"
/>
<SmallIconCard
Icon={SkynetSiaSmall}
title="Free to use"
text="Focus on building, not overheard server costs. When users own their data, developers aren't asked to pay for it."
/>
<SmallIconCard
Icon={SkynetMonetizationSmall}
title="Monetization"
text="Profit directly from the success of your skapp. Now you can truly prioritize your users, instead of advertisers."
/>
<SmallIconCard
Icon={SkynetPersistenceSmall}
title="Persistence"
text="Your skapp and data stay live, even if corporations pull your access to their resources. You can also use Skynet as a failover site for when centralized providers go down."
/>
{ecosystemCards.map((card, index) => (
<EcosystemCard key={index} {...card} />
))}
</div>
<div className="desktop:hidden mt-12 text-center">
@ -151,5 +178,6 @@ const IndexPage = () => (
</p> */}
</Layout>
);
};
export default IndexPage;