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",
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 },
],
},
{

View File

@ -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",

View File

@ -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" }}
>

View File

@ -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. PRs 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>

View File

@ -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 {