animate processing bar

This commit is contained in:
Karol Wypchlo 2021-03-30 12:56:05 +02:00
parent 3fb9cd900d
commit 6f58745c1f
5 changed files with 52 additions and 22 deletions

View File

@ -23,8 +23,7 @@ const sections = [
header: "Developers", header: "Developers",
links: [ links: [
{ title: "Developer Guide", href: "https://support.siasky.net/the-technology/developing-on-skynet", ...external }, { title: "Developer Guide", href: "https://support.siasky.net/the-technology/developing-on-skynet", ...external },
{ title: "API Documentation", href: "https://siasky.net/docs/", ...external }, { title: "API and SDK Documentation", href: "https://siasky.net/docs/", ...external },
{ title: "SDK Documentation", href: "https://siasky.net/docs/", ...external },
{ title: "Portal Setup", href: "https://support.siasky.net/the-technology/running-a-web-portal", ...external }, { title: "Portal Setup", href: "https://support.siasky.net/the-technology/running-a-web-portal", ...external },
], ],
}, },
@ -44,7 +43,7 @@ const sections = [
{ title: "Sia Foundation", href: "https://sia.tech", ...external }, { title: "Sia Foundation", href: "https://sia.tech", ...external },
{ title: "Sia Foundation Forum", href: "https://forum.sia.tech", ...external }, { title: "Sia Foundation Forum", href: "https://forum.sia.tech", ...external },
{ title: "SiaStats", href: "https://siastats.info", ...external }, { title: "SiaStats", href: "https://siastats.info", ...external },
{ title: "Skynet AppStore", href: "https://siasky.net/hns/skyapps/", ...external }, { title: "Skynet AppStore", href: "https://skyapps.hns.siasky.net/", ...external },
], ],
}, },
{ {

View File

@ -10,10 +10,10 @@ import DiscordSmall from "../Icons/DiscordSmall.svg";
import { useWindowSize, useWindowScroll } from "react-use"; import { useWindowSize, useWindowScroll } from "react-use";
const routes = [ const routes = [
{ title: "Home", route: "/" }, { title: "Home", to: "/" },
{ title: "About", route: "/about" }, { title: "About", to: "/about" },
{ title: "Developers", route: "/developers" }, { title: "Developers", to: "/developers" },
{ title: "News", route: "/news" }, { title: "News", to: "/news" },
]; ];
const LogInLink = () => ( const LogInLink = () => (
@ -99,10 +99,10 @@ const Navigation = ({ mode }) => {
</div> </div>
<div className="hidden desktop:ml-6 desktop:flex desktop:items-center desktop:space-x-12"> <div className="hidden desktop:ml-6 desktop:flex desktop:items-center desktop:space-x-12">
{routes.map(({ title, route }) => ( {routes.map(({ title, to }) => (
<Link <Link
key={route} key={to}
to={route} to={to}
activeClassName="underline-navigation" activeClassName="underline-navigation"
className={classnames("text-sm font-light transition-colors duration-500", { className={classnames("text-sm font-light transition-colors duration-500", {
"text-white": mode === "dark", "text-white": mode === "dark",

View File

@ -129,7 +129,7 @@ const UploadElement = ({ file, status, error, url = "", progress = 0 }) => {
<div <div
className={classnames("flex bg-palette-200 mt-1", { className={classnames("flex bg-palette-200 mt-1", {
"bg-error-dashed opacity-20": status === "error", "bg-error-dashed opacity-20": status === "error",
"bg-primary-dashed opacity-20": status === "processing", "bg-primary-dashed move opacity-20": status === "processing",
})} })}
style={{ height: "5px" }} style={{ height: "5px" }}
> >

View File

@ -7,10 +7,10 @@ import Link from "../components/Link";
const LearnMoreButton = () => ( const LearnMoreButton = () => (
<Link <Link
href="https://secure.siasky.net" href="https://support.siasky.net/the-technology/developing-on-skynet"
className="inline-block border-2 border-palette-600 text-palette-600 px-10 leading-10 rounded-full text-xs uppercase text-center mt-7"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="inline-block border-2 border-palette-600 text-palette-600 px-10 leading-10 rounded-full text-xs uppercase text-center mt-7"
> >
Learn more Learn more
</Link> </Link>
@ -50,26 +50,41 @@ const reasonCards = [
]; ];
const resources = [ const resources = [
{ title: "Skynet Developer Guide", description: "Developer portal for resources and guides.", href: "" }, {
{ title: "Skynet SDK Docs", description: "SDKs in Javascript, Go, Python and more.", href: "" }, title: "Skynet Developer Guide",
{ title: "Skynet Playground", description: "Interact with the core of Skynet, no code needed. ", href: "" }, description: "Developer portal for resources and guides.",
{ title: "Skapp.io", description: "Explore webs apps in the ecosystem, many open source.", href: "" }, href: "https://support.siasky.net/the-technology/developing-on-skynet",
{ title: "Skynet Core Repo", description: "The code base that makes the rest tick.", href: "" }, },
{
title: "Skynet SDK Docs",
description: "SDKs in Javascript, Go, Python and more.",
href: "https://siasky.net/docs/",
},
{
title: "Skynet AppStore",
description: "Explore webs apps in the ecosystem, many open source.",
href: "https://skyapps.hns.siasky.net",
},
{
title: "Skynet Core Repo",
description: "The code base that makes the rest tick.",
href: "https://gitlab.com/skynetlabs/skyd",
},
{ {
title: "Skynet on Github", title: "Skynet on Github",
description: "Includes SDKs, resources, and web portal. PRs always welcome.", description: "Includes SDKs, resources, and web portal. PRs always welcome.",
href: "", href: "https://github.com/NebulousLabs",
}, },
{ {
title: "Join us on Discord", title: "Join us on Discord",
description: "A generous developer community, ready to solve hard problems.", description: "A generous developer community, ready to solve hard problems.",
href: "", href: "https://discordapp.com/invite/sia",
}, },
]; ];
const docs = [ const docs = [
{ name: "Developer Guide", href: "" }, { name: "Developer Guide", href: "https://support.siasky.net/the-technology/developing-on-skynet" },
{ name: "Skynet SDK Docs", href: "" }, { name: "Skynet SDK Docs", href: "https://siasky.net/docs/" },
]; ];
const DevelopersPage = () => ( const DevelopersPage = () => (
@ -146,6 +161,8 @@ const DevelopersPage = () => (
<li key={index}> <li key={index}>
<Link <Link
href={href} href={href}
target="_blank"
rel="noopener noreferrer"
className="block bg-palette-100 px-8 py-5 rounded border-2 border-palette-600 border-opacity-0 hover:border-opacity-100" className="block bg-palette-100 px-8 py-5 rounded border-2 border-palette-600 border-opacity-0 hover:border-opacity-100"
> >
<div className="font-semibold text-lg">{title}</div> <div className="font-semibold text-lg">{title}</div>

View File

@ -10,8 +10,22 @@
background-size: 2px 2px; background-size: 2px 2px;
} }
@keyframes bg-primary-dashed-animation {
0% {
background-position-x: 0;
}
100% {
background-position-x: 15px;
}
}
.bg-primary-dashed { .bg-primary-dashed {
background: repeating-linear-gradient(to right, #00c65e, #00c65e 10px, transparent 10px, transparent 15px); background: repeating-linear-gradient(to right, #00c65e, #00c65e 10px, transparent 10px, transparent 15px);
background-size: 15px 15px;
}
.bg-primary-dashed.move {
animation: bg-primary-dashed-animation 0.3s infinite linear forwards;
} }
.bg-error-dashed { .bg-error-dashed {