Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fixed the CSS structure #864

Merged
merged 7 commits into from
Dec 18, 2023
Merged

Fixed the CSS structure #864

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
e2d9f84
Added header to the page
taras Dec 18, 2023
ecf2383
Do not use sticky for the header
taras Dec 18, 2023
c237a42
Made header and footer always visible
taras Dec 18, 2023
0335c12
Removed unnecessary comments
taras Dec 18, 2023
c63f212
Fixed responsive CSS styles
taras Dec 18, 2023
c31bd90
Fixed anchors not working because content wasn't full height
taras Dec 18, 2023
4580ac9
Removed footer
taras Dec 18, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 3 additions & 31 deletions www/components/footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,41 +2,13 @@ import { IconExternal } from "./icons/external.tsx";

export function Footer(): JSX.Element {
return (
<footer class="grid grid-cols-3 text-center text-gray-500 tracking-wide bg-gray-100 pt-5 gap-y-4 leading-10">
<section class="flex flex-col gap-y-1">
<h1 class="text-sm uppercase font-bold text-blue-primary mb-4">
About
</h1>
<footer class="grid grid-cols-3 py-2 text-center text-gray-500 tracking-wide bg-gray-100">
<section class="col-span-3">
<a class="text-gray-800" href="https://frontside.com">
Created by Frontside <IconExternal />
</a>
</section>
<section class="flex flex-col gap-y-1">
<h1 class="text-sm uppercase font-bold text-blue-primary mb-4">
OSS Projects
</h1>
<a href="https://frontside.com/interactors" class="text-gray-800">
Interactors <IconExternal />
</a>
<a href="/V2" class="text-gray-800">
Effection<em class="align-super text-xs">v2</em> <IconExternal />
</a>
</section>
<section class="flex flex-col gap-y-1">
<h1 class="text-sm uppercase font-bold text-blue-primary mb-4">
Community
</h1>
<a href="https://discord.gg/r6AvtnU" class="text-gray-800">
Discord <IconExternal />
</a>
<a
href="https://github.com/thefrontside/effection"
class="text-gray-800"
>
GitHub <IconExternal />
</a>
</section>
<p class="col-span-3 text-blue-primary text-xs py-4">
<p class="col-span-3 text-blue-primary text-xs">
Copyright © 2019 - {new Date().getFullYear()}{" "}
The Frontside Software, Inc.
</p>
Expand Down
58 changes: 58 additions & 0 deletions www/components/header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
import { ProjectSelect } from "./project-select.tsx";
import { IconGithHub } from "./icons/github.tsx";
import { IconDiscord } from "./icons/discord.tsx";

export function Header() {
return (
<header class="header w-full top-0 p-6 tracking-wide z-10">
<div class="flex items-center justify-between">
<div>
<a
href="/"
class="flex items-end gap-x-2 sm:gap-x-1 after:content-['v3'] after:inline after:relative after:top-0 after:text-sm"
>
<img
src="/assets/images/effection-logo.svg"
alt="Effection Logo"
width={156}
height={24}
/>
</a>
</div>
<nav aria-label="Site Nav" class="text-sm">
<ul class="flex items-center sm:gap-1.5 gap-3 md:gap-16">
<li>
<a href="/docs/installation">Guides</a>
</li>
<li>
<a href="https://deno.land/x/effection/mod.ts">API</a>
</li>
<li>
<a class="flex flex-row" href="https://github.com/thefrontside/effection">
<span class="pr-1 md:inline-flex">
<IconGithHub />
</span>
<span class="hidden md:inline-flex">
Github
</span>
</a>
</li>
<li>
<a class="flex flex-row" href="https://discord.gg/r6AvtnU">
<span class="pr-1 md:inline-flex">
<IconDiscord />
</span>
<span class="hidden md:inline-flex">
Discord
</span>
</a>
</li>
<li>
<ProjectSelect />
</li>
</ul>
</nav>
</div>
</header>
)
}
61 changes: 7 additions & 54 deletions www/routes/app.html.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@ import type { Operation } from "effection";
import type { JSXChild } from "revolution";

import { useAbsoluteUrl } from "../plugins/rebase.ts";
import { ProjectSelect } from "../components/project-select.tsx";
import { IconGithHub } from "../components/icons/github.tsx";
import { IconDiscord } from "../components/icons/discord.tsx";
import { Header } from "../components/header.tsx";
import { Footer } from "../components/footer.tsx";


export interface Options {
title: string;
Expand Down Expand Up @@ -62,57 +62,10 @@ export function* useAppHtml({
</noscript>
</head>
<body class="max-w-screen-2xl m-auto">
<header class="header w-full top-0 p-6 sticky tracking-wide z-10">
<div class="flex items-center justify-between">
<div>
<a
href="/"
class="flex items-end gap-x-2 sm:gap-x-1 after:content-['v3'] after:inline after:relative after:top-0 after:text-sm"
>
<img
src="/assets/images/effection-logo.svg"
alt="Effection Logo"
width={156}
height={24}
/>
</a>
</div>
<nav aria-label="Site Nav" class="text-sm">
<ul class="flex items-center sm:gap-1.5 gap-3 md:gap-16">
<li>
<a href="/docs/installation">Guides</a>
</li>
<li>
<a href="https://deno.land/x/effection/mod.ts">API</a>
</li>
<li>
<a class="flex flex-row" href="https://github.com/thefrontside/effection">
<span class="pr-1 md:inline-flex">
<IconGithHub />
</span>
<span class="hidden md:inline-flex">
Github
</span>
</a>
</li>
<li>
<a class="flex flex-row" href="https://discord.gg/r6AvtnU">
<span class="pr-1 md:inline-flex">
<IconDiscord />
</span>
<span class="hidden md:inline-flex">
Discord
</span>
</a>
</li>
<li>
<ProjectSelect />
</li>
</ul>
</nav>
</div>
</header>
<main>{children}</main>
<div class="flex flex-col h-full overflow-hidden">
<Header />
<main class="grow container min-h-0 overflow-hidden h-full">{children}</main>
</div>
</body>
</html>
);
Expand Down
22 changes: 9 additions & 13 deletions www/routes/docs-route.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ import rehypeSlug from "npm:[email protected]";
import rehypeAutolinkHeadings from "npm:[email protected]";
import rehypeAddClasses from "npm:[email protected]";
import rehypeToc from "npm:@jsdevtools/[email protected]";
import { Footer } from "../components/footer.tsx";

export function docsRoute(docs: Docs): JSXHandler {
return function* () {
Expand All @@ -32,7 +31,7 @@ export function docsRoute(docs: Docs): JSXHandler {

return (
<AppHtml>
<section class="mx-auto md:pt-8 w-full justify-items-normal md:grid md:grid-cols-[225px_auto] lg:grid-cols-[225px_auto_200px] md:gap-4">
<section class="min-h-0 h-full mx-auto w-full justify-items-normal md:grid md:grid-cols-[225px_auto] lg:grid-cols-[225px_auto_200px] md:gap-4">
<p class="text-right mr-4 md:hidden">
<label class="cursor-pointer" for="nav-toggle">
<Navburger />
Expand All @@ -48,9 +47,9 @@ export function docsRoute(docs: Docs): JSXHandler {
<input class="hidden" id="nav-toggle" type="checkbox" checked />
<aside
id="docbar"
class="fixed top-0 h-full w-full grid grid-cols-2 md:hidden"
class="min-h-0 top-0 h-full w-full grid grid-cols-2 md:hidden py-2"
>
<nav class="bg-white px-2 border-r-2 h-full pt-20">
<nav class="bg-white px-2 border-r-2 h-full pt-2 md:pt-20 min-h-0 h-full overflow-auto">
{topics.map((topic) => (
<hgroup class="mb-2">
<h3 class="text-lg">{topic.name}</h3>
Expand Down Expand Up @@ -82,8 +81,8 @@ export function docsRoute(docs: Docs): JSXHandler {
class="h-full w-full bg-gray-500 opacity-50"
/>
</aside>
<aside>
<nav class="hidden md:block fixed pl-4">
<aside class="min-h-0 h-full overflow-auto hidden md:block py-2">
<nav class="pl-4">
{topics.map((topic) => (
<hgroup class="mb-2">
<h3 class="text-lg">{topic.name}</h3>
Expand All @@ -93,14 +92,14 @@ export function docsRoute(docs: Docs): JSXHandler {
{doc.id !== item.id
? (
<a
class="rounded px-4 block w-full h-full py-2 hover:bg-gray-100"
class="rounded px-4 block w-full py-2 hover:bg-gray-100"
href={`/docs/${item.id}`}
>
{item.title}
</a>
)
: (
<a class="rounded px-4 block w-full h-full py-2 bg-gray-100 cursor-default">
<a class="rounded px-4 block w-full py-2 bg-gray-100 cursor-default">
{item.title}
</a>
)}
Expand All @@ -112,7 +111,7 @@ export function docsRoute(docs: Docs): JSXHandler {
</nav>
</aside>
<Transform fn={liftTOC}>
<article class="prose px-6 min-w-full">
<article class="prose max-w-full px-6 min-h-0 overflow-auto h-full py-2">
<h1>{doc.title}</h1>
<Rehype
plugins={[
Expand All @@ -130,7 +129,7 @@ export function docsRoute(docs: Docs): JSXHandler {
[rehypeToc, {
cssClasses: {
toc:
"hidden text-sm font-light tracking-wide leading-loose lg:block relative",
"hidden text-sm font-light tracking-wide leading-loose lg:block relative pt-2",
list: "fixed w-[200px]",
link: "hover:underline hover:underline-offset-2"
},
Expand All @@ -142,9 +141,6 @@ export function docsRoute(docs: Docs): JSXHandler {
<NextPrevLinks doc={doc} />
</article>
</Transform>
<div class="col-start-2 col-span-2">
<Footer />
</div>
</section>
</AppHtml>
);
Expand Down
8 changes: 2 additions & 6 deletions www/routes/index-route.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ export function indexRoute(): JSXHandler {
return (
<AppHtml>
<>
<article class="p-4 md:px-12 mb-16">
<article class="p-4 md:px-12 min-h-0 overflow-auto h-full">
<section class="grid grid-cols-1 md:grid-cols-3 md:gap-4">
<hgroup class="text-center col-span-1 md:col-span-3 my-8">
<img
Expand Down Expand Up @@ -123,7 +123,7 @@ export function indexRoute(): JSXHandler {
</div>
</section>

<section class="my-20">
<section class="mt-20">
<hgroup class="mx-auto max-w-2xl lg:text-center">
<h2 class="mt-2 text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
It's just JavaScript
Expand All @@ -135,9 +135,6 @@ export function indexRoute(): JSXHandler {
techniques to the knowledge you already have.
</p>
</hgroup>
{/* No build steps. No esoteric APIs, and no new odd-ball
paradigms to learn; Effection leans into JavaScript's natural
constructs at every turn, so code always feels intuitive. */}
<div class="mx-auto mt-8 max-w-2xl sm:mt-12 lg:mt-16 lg:max-w-4xl md:grid md:grid-cols-2 md:gap-y-4">
<Feature icon={"😎"} summary="Use familiar language constructs">
<>
Expand Down Expand Up @@ -197,7 +194,6 @@ export function indexRoute(): JSXHandler {
</Feature>
</div>
</section>
<Footer />
</article>
</>
</AppHtml>
Expand Down
Loading