animate processing bar
This commit is contained in:
parent
3fb9cd900d
commit
6f58745c1f
|
@ -23,8 +23,7 @@ const sections = [
|
|||
header: "Developers",
|
||||
links: [
|
||||
{ title: "Developer Guide", href: "https://support.siasky.net/the-technology/developing-on-skynet", ...external },
|
||||
{ title: "API Documentation", href: "https://siasky.net/docs/", ...external },
|
||||
{ title: "SDK Documentation", href: "https://siasky.net/docs/", ...external },
|
||||
{ title: "API and SDK Documentation", href: "https://siasky.net/docs/", ...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 Forum", href: "https://forum.sia.tech", ...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 },
|
||||
],
|
||||
},
|
||||
{
|
||||
|
|
|
@ -10,10 +10,10 @@ import DiscordSmall from "../Icons/DiscordSmall.svg";
|
|||
import { useWindowSize, useWindowScroll } from "react-use";
|
||||
|
||||
const routes = [
|
||||
{ title: "Home", route: "/" },
|
||||
{ title: "About", route: "/about" },
|
||||
{ title: "Developers", route: "/developers" },
|
||||
{ title: "News", route: "/news" },
|
||||
{ title: "Home", to: "/" },
|
||||
{ title: "About", to: "/about" },
|
||||
{ title: "Developers", to: "/developers" },
|
||||
{ title: "News", to: "/news" },
|
||||
];
|
||||
|
||||
const LogInLink = () => (
|
||||
|
@ -99,10 +99,10 @@ const Navigation = ({ mode }) => {
|
|||
</div>
|
||||
|
||||
<div className="hidden desktop:ml-6 desktop:flex desktop:items-center desktop:space-x-12">
|
||||
{routes.map(({ title, route }) => (
|
||||
{routes.map(({ title, to }) => (
|
||||
<Link
|
||||
key={route}
|
||||
to={route}
|
||||
key={to}
|
||||
to={to}
|
||||
activeClassName="underline-navigation"
|
||||
className={classnames("text-sm font-light transition-colors duration-500", {
|
||||
"text-white": mode === "dark",
|
||||
|
|
|
@ -129,7 +129,7 @@ const UploadElement = ({ file, status, error, url = "", progress = 0 }) => {
|
|||
<div
|
||||
className={classnames("flex bg-palette-200 mt-1", {
|
||||
"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" }}
|
||||
>
|
||||
|
|
|
@ -7,10 +7,10 @@ import Link from "../components/Link";
|
|||
|
||||
const LearnMoreButton = () => (
|
||||
<Link
|
||||
href="https://secure.siasky.net"
|
||||
className="inline-block border-2 border-palette-600 text-palette-600 px-10 leading-10 rounded-full text-xs uppercase text-center mt-7"
|
||||
href="https://support.siasky.net/the-technology/developing-on-skynet"
|
||||
target="_blank"
|
||||
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
|
||||
</Link>
|
||||
|
@ -50,26 +50,41 @@ const reasonCards = [
|
|||
];
|
||||
|
||||
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 Playground", description: "Interact with the core of Skynet, no code needed. ", href: "" },
|
||||
{ title: "Skapp.io", description: "Explore webs apps in the ecosystem, many open source.", href: "" },
|
||||
{ title: "Skynet Core Repo", description: "The code base that makes the rest tick.", href: "" },
|
||||
{
|
||||
title: "Skynet Developer Guide",
|
||||
description: "Developer portal for resources and guides.",
|
||||
href: "https://support.siasky.net/the-technology/developing-on-skynet",
|
||||
},
|
||||
{
|
||||
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",
|
||||
description: "Includes SDKs, resources, and web portal. PR’s always welcome.",
|
||||
href: "",
|
||||
href: "https://github.com/NebulousLabs",
|
||||
},
|
||||
{
|
||||
title: "Join us on Discord",
|
||||
description: "A generous developer community, ready to solve hard problems.",
|
||||
href: "",
|
||||
href: "https://discordapp.com/invite/sia",
|
||||
},
|
||||
];
|
||||
|
||||
const docs = [
|
||||
{ name: "Developer Guide", href: "" },
|
||||
{ name: "Skynet SDK Docs", href: "" },
|
||||
{ name: "Developer Guide", href: "https://support.siasky.net/the-technology/developing-on-skynet" },
|
||||
{ name: "Skynet SDK Docs", href: "https://siasky.net/docs/" },
|
||||
];
|
||||
|
||||
const DevelopersPage = () => (
|
||||
|
@ -146,6 +161,8 @@ const DevelopersPage = () => (
|
|||
<li key={index}>
|
||||
<Link
|
||||
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"
|
||||
>
|
||||
<div className="font-semibold text-lg">{title}</div>
|
||||
|
|
|
@ -10,8 +10,22 @@
|
|||
background-size: 2px 2px;
|
||||
}
|
||||
|
||||
@keyframes bg-primary-dashed-animation {
|
||||
0% {
|
||||
background-position-x: 0;
|
||||
}
|
||||
100% {
|
||||
background-position-x: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.bg-primary-dashed {
|
||||
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 {
|
||||
|
|
Reference in New Issue