Skip to content

Commit

Permalink
Styling and text update for downloads page (betaflight#311)
Browse files Browse the repository at this point in the history 
* styling and text update for downloads and stats pages

* commends from reviews, remove spaces and group code into blocks

* subtle react changes for smaller screens
  • Loading branch information
@ctzsnooze
ctzsnooze authored Jan 1, 2024
1 parent 85bde20 commit 5421716
Show file tree
Hide file tree
Showing 4 changed files with 106 additions and 77 deletions.
6 changes: 3 additions & 3 deletions src/components/AboutCard/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,13 +20,13 @@ export default function AboutCard({
<div
className={clsx(
className,
`relative flex text-lg md:text-xl xl:text-2xl w-fit font-semibold items-center dark:bg-neutral-500/10 bg-neutral-150/50 py-2 px-4 rounded-t-xl`,
`relative flex text-base xl:text-lg w-fit font-semibold items-center dark:bg-neutral-500/10 bg-neutral-150/50 pt-1 pr-3 xl:p-2 xl:pr-4 rounded-t-xl`,
blur ? 'backdrop-blur-md' : '',
)}
>
<Icon className="w-8 h-8 mr-2" />
<Icon className="h-4 w-4 xl:w-6 h-6 ml-2 mr-2" />
{title}
<AboutHeaderFix className="absolute right-[-32px] bottom-0 dark:text-neutral-500/10 text-neutral-150/50"></AboutHeaderFix>
<AboutHeaderFix className="absolute right-[-32px] bottom-0 dark:text-neutral-500/10 text-neutral-150/50"></AboutHeaderFix>
</div>
<div className={clsx(`shadow-xl w-full h-full dark:bg-neutral-500/10 bg-neutral-150/50 p-4 rounded-b-xl rounded-r-xl text-base`, blur ? 'backdrop-blur-md' : '')}>{children}</div>
</div>
Expand Down
4 changes: 2 additions & 2 deletions src/components/HomepageFeature/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,9 @@ export default function HomepageFeature({ title = '<unset>', compact = false, cl
// </section>
// make background blur depend on blur prop
<section className={className}>
<h2 className="text-primary-600 text-3xl font-bold my-4 ml-1">{title}</h2>
<h2 className="text-primary-600 text-3xl font-bold m-0 sm:m-1 base:m-2 md:m-4">{title}</h2>
{/* eslint-disable-next-line no-restricted-globals */}
<div className={clsx({ 'bg-neutral-500/10 shadow-xl p-8': !compact }, 'flex justify-center rounded-2xl', blur ? 'backdrop-blur-md' : '')}>{children}</div>
<div className={clsx({ 'bg-neutral-500/10 shadow-xl mb-6 p-4 xl:p-6': !compact }, 'flex justify-center rounded-2xl', blur ? 'backdrop-blur-md' : '')}>{children}</div>
</section>
);
}
161 changes: 99 additions & 62 deletions src/pages/download.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ function IconElementFeature({ Icon, title, description, link, children }: IconEl
}

export default function Media() {
const isXl = useMediaQuery({ query: '(min-width: 1280px)' });
const isXl = useMediaQuery({ query: '(min-width: 1024px)' });

const videoSize = useMemo(() => {
if (isXl) {
Expand All @@ -56,75 +56,84 @@ export default function Media() {

return (
<BetaflightLayout>
<div className="relative w-full mt-4 xl:mt-32">
<div className="w-full h-fit flex flex-col justify-start">
<div className="flex flex-col p-6 h-fit w-fit xl:ml-12">
<h1 className="md:text-[6rem] text-6xl border-primary-600 font-bold mb-4">Download</h1>
<h2 className="font-semibold md:text-3xl text-xl">Downloads & Videos</h2>
</div>
</div>
</div>
<div className="xl:max-w-[1920px] m-auto p-4 xl:p-16">
<div className="m-auto p-6 mt-0 xl:mt-16">
{/* Start Downloads block */}

<HomepageFeature blur title="Downloads">
<div className="grid max-w-fit grid-cols-1 md:grid-cols-2 gap-x-4">
<div className="flex flex-col space-y-4">
<IconElementFeature title="Installation & Documentation" link={{ text: 'See the Betaflight Wiki', href: '/docs/wiki' }} Icon={DocumentTextIcon}></IconElementFeature>
<IconElementFeature
title="Configuration Tool"
link={{
text: 'Latest configurator releases',
href: 'https://github.com/betaflight/betaflight-configurator/releases/latest',
}}
description="To configure Betaflight you should use the Betaflight-configurator GUI tool (Windows/OSX/Linux) which can be found here:"
Icon={Cog6ToothIcon}
></IconElementFeature>
<IconElementFeature
title="TX Lua Scripts"
Icon={Cog8ToothIcon}
description="Configure Betaflight from your radio with the Betaflight TX Lua Scripts:"
link={{
text: 'Latest lua scripts releases',
href: 'https://github.com/betaflight/betaflight-tx-lua-scripts/releases/latest',
}}
></IconElementFeature>
<IconElementFeature title="BlackBox Viewer" Icon={PresentationChartLineIcon}>
<IconElementFeature title="Betaflight Configurator" Icon={Cog6ToothIcon}>
<div className="flex flex-col">
<div className="flex flex-row space-x-1 mt-0">
<span>
Betaflight Configurator is a Windows/OSX/Linux application for building, flashing and configuring Betaflight. Download the{' '}
<a href="https://github.com/betaflight/betaflight-configurator/releases/latest" className="fancy-link no-underline">
{' '}
latest release
</a>
.
</span>
</div>
</div>
</IconElementFeature>

<IconElementFeature title="Betaflight Firmware" Icon={Cog6ToothIcon}>
<div className="flex flex-col">
<div className="flex flex-row space-x-1 mt-2">
<span>Viewer Releases are:</span>
<a href="https://github.com/betaflight/blackbox-log-viewer/releases" className="fancy-link no-underline">
Latest viewer releases
</a>
<div className="flex flex-row space-x-1 mt-0">
<span>
For Betaflight 4.4 and higher, Configurator builds a custom firmware file 'in the cloud' and flashes it to your flight controller. For 4.3 and earlier, download the correct{' '}
<a href="https://github.com/betaflight/betaflight/releases" className="fancy-link no-underline">
{' '}
'hex' file for your flight controller
</a>{' '}
and flash it manually.
</span>
</div>
<div className="flex flex-row space-x-1 mt-2">
<span>The Latest Viewer source is:</span>
<a href="https://github.com/betaflight/blackbox-log-viewer" className="fancy-link no-underline">
Latest viewer source
</a>
</div>
</IconElementFeature>

<IconElementFeature title="Lua Tx Scripts" Icon={Cog6ToothIcon}>
<div className="flex flex-col">
<div className="flex flex-row space-x-1 mt-0">
<span>
Adjust Betaflight's settings with your radio transmitter with Betaflight's{' '}
<a href="https://github.com/betaflight/betaflight-tx-lua-scripts/releases/latest" className="fancy-link no-underline">
{' '}
Lua Tx scripts.
</a>
.
</span>
</div>
</div>
</IconElementFeature>

<IconElementFeature title="BlackBox Log Viewer" Icon={PresentationChartLineIcon}>
<div className="flex flex-col">
<div className="flex flex-row space-x-1 mt-0">
<span>
Review flight data logs, map the flight and check debug values with{' '}
<a href="https://github.com/betaflight/blackbox-log-viewer/releases" className="fancy-link no-underline">
{' '}
Betaflight Blackbox Log Viewer
</a>
.
</span>
</div>
<div className="flex flex-col mt-2">See BB Logging and Usage Wiki page on using the BlackBox logger.</div>
</div>
</IconElementFeature>
</div>

{/* End left column, start right column */}

<div className="flex flex-col space-y-4">
<IconElementFeature
title="Betaflight Releases"
link={{
text: 'Releases',
href: 'https://github.com/betaflight/betaflight/releases',
}}
description="Releases can be found by following the link below or downloaded from within the firmware section within the Betaflight Configurator. Also check the Upgrading List to the Right for Release Notes and other Details on the various Versions."
Icon={FolderIcon}
></IconElementFeature>
<IconElementFeature
title="BETA TESTING (WARNING)"
title="Beta testing (WARNING)"
Icon={ExclamationCircleIcon}
description="If you want to contribute to better development you can download the latest beta build directly from:"
description="Test the latest upcoming features and contribute to Betaflight's development by using the nightly builds:"
>
<div className="flex flex-col">
<a href="https://ci.betaflight.tech/job/Betaflight/lastBuild/artifact/obj/" className="fancy-link no-underline">
Nightly builds
</a>
<a href="https://github.com/betaflight/betaflight-configurator-nightlies/releases" className="fancy-link no-underline">
{' '}
Betaflight Configurator Nightly builds
</a>
<a href="https://github.com/betaflight/betaflight-tx-lua-scripts-nightlies/releases" className="fancy-link no-underline">
Expand All @@ -133,35 +142,63 @@ export default function Media() {
<a href="https://github.com/betaflight/blackbox-log-viewer-nightlies/releases" className="fancy-link no-underline">
Blackbox Viewer Nightly builds
</a>
<div className="text-gray-400 flex flex-col mt-2">
You can find release planning here:
<a href="https://github.com/betaflight/betaflight/milestones" className="fancy-link no-underline">
Release planning
</a>
</div>
</IconElementFeature>

<IconElementFeature title="Source code" Icon={DocumentTextIcon}>
<div className="flex flex-col">
<div className="flex flex-row space-x-1 mt-0">
<span>
Review and download the source code on the{' '}
<a href="https://github.com/betaflight/" className="fancy-link no-underline">
Betaflight GitHub Repository
</a>
.
</span>
</div>
</div>
</IconElementFeature>

<IconElementFeature title="Documentation" Icon={DocumentTextIcon}>
<div className="flex flex-col">
<div className="flex flex-row space-x-1 mt-0">
<span>
Wiki, Development and other documentation may be found in the{' '}
<a href="https://github.com/betaflight/betaflight.com" className="fancy-link no-underline">
betaflight.com docs directory
</a>
.
</span>
</div>
</div>
</IconElementFeature>
</div>
</div>
</HomepageFeature>

{/* Start Videos block */}

<HomepageFeature className="" title="Videos" compact={true}>
<div className="flex flex-wrap flex-col md:flex-row flex-start space-y-4 md:space-y-0 md:space-x-4">
<div>
<AboutCard title="Betaflight 4.3 walkthrough" className="text-red-500 inline-block" Icon={PlayIcon}>
<AboutCard title="Betaflight 4.3 walkthrough" className="text-primary-600" Icon={PlayIcon}>
<div>
<YouTube videoId="LkBWRiEGKTI" opts={videoSize} />
</div>
</AboutCard>
</div>

<div>
<AboutCard title="Betaflight 4.3 for beginners" className="text-red-500" Icon={PlayIcon}>
<AboutCard title="Betaflight 4.3 for beginners" className="text-primary-600" Icon={PlayIcon}>
<div>
<YouTube videoId="UTFeh-SjH9A" opts={videoSize} />
</div>
</AboutCard>
</div>
</div>
</HomepageFeature>

{/* End Videos block */}
</div>
</BetaflightLayout>
);
Expand Down
12 changes: 2 additions & 10 deletions src/pages/stats.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -274,16 +274,8 @@ const MinorChartWrapper = ({ type }) => {
export default function Stats() {
return (
<BetaflightLayout>
<div className="relative w-full mt-4 xl:mt-32">
<div className="w-full h-fit flex flex-col justify-start">
<div className="flex flex-col p-6 h-fit w-fit xl:ml-12">
<h1 className="md:text-[6rem] text-6xl border-primary-500 font-bold mb-4">Stats</h1>
<h2 className="text-white font-semibold md:text-3xl text-xl">Cloud Build Statistics</h2>
</div>
</div>
</div>
<div className="xl:max-w-[1920px] w-full m-auto p-4 xl:p-16">
<HomepageFeature title="Stats">
<div className="xl:max-w-[1920px] w-full p-6 mt-0 xl:mt-16">
<HomepageFeature blur title="Cloud Build Statistics">
<div className="flex flex-col w-full h-full">
<h2 className="text-primary-600 text-3xl font-bold">Total Builds</h2>
<MajorChartWrapper />
Expand Down

0 comments on commit 5421716

Please sign in to comment.