e03e0f6 · urbit.org · git.iko.soy

git.iko.soy/urbit.org

mobile 2

commite03e0f6293e1faf1ecc482fc09a47aff06b2ee5e authorGavin Atkinson <gvnatknsn@protonmail.com> dateMon 21 Jun 2021, 16:40 (5 years ago) parente9fb44b

4 files changed+139−57

compare with master

unifiedsplit

components/Header.js+39−4 lib/hooks.js+12 pages/index.js+78−29 styles/globals.css+10−24

components/Header.js+39−4

@@ -3,6 +3,7 @@ import { useRouter } from "next/router";

33import { useState } from "react";

44import classnames from "classnames";

55import path from "path";

6+import { useLockBodyScroll } from "../lib/hooks";

78function ActiveLink({ children, href, className }) {

89 const router = useRouter();

@@ -21,12 +22,28 @@ function ActiveLink({ children, href, className }) {

2122 );

2223}

2324

24−function MenuTray({ props }) {

25+function MenuTray(props) {

26+ // Locks document scrolling when menu is open

27+ if (typeof document !== "undefined") {

28+ if (props.isOpen) {

29+ document.body.style.overflow = "hidden";

30+ } else {

31+ document.body.style.overflow = "visible";

32+ }

33+ }

34+

2535 const activeClasses = classnames({

26− "": props.isOpen,

36+ "tray-menu-open": props.isOpen,

37+ "tray-menu-closed": !props.isOpen,

2738 });

2839

29− return <nav></nav>;

40+ return (

41+ <nav

42+ className={`w-screen h-screen bg-wall flex top-0 left-0 flex-col p-8 fixed ${activeClasses}`}

43+ >

44+ {props.children}

45+ </nav>

46+ );

3047}

3148

3249// This is the header for the index page

@@ -58,8 +75,26 @@ export default function Header() {

5875 {

5976 // Small screen header

6077 }

78+

6179 <div className="block md:hidden">

62− <button onClick={() => toggleTray(!isOpen)}>

80+ <MenuTray isOpen={isOpen}>

81+ <ActiveLink className="mr-5 type-h3" href="/docs">

82+ Docs

83+ </ActiveLink>

84+ <ActiveLink className="mr-5 type-h3" href="/blog">

85+ Blog

86+ </ActiveLink>

87+ <ActiveLink className="mr-5 type-h3" href="/events">

88+ Events

89+ </ActiveLink>

90+ <button className="button-sm bg-wall text-gray">

91+ Search Urbit.org<div className="ml-4 text-lightGray">⌘K</div>

92+ </button>

93+ </MenuTray>

94+ <button

95+ onClick={() => toggleTray(!isOpen)}

96+ className="z-10 absolute right-8"

97+ >

6398 {isOpen ? (

6499 <svg

65100 width="16"

lib/hooks.jsnew file+12

@@ -0,0 +1,12 @@

1+import { useState, useLayoutEffect } from "react";

3+export function useLockBodyScroll() {

4+ useLayoutEffect(() => {

5+ // Get original body overflow

6+ const originalStyle = window.getComputedStyle(document.body).overflow;

7+ // Prevent scrolling on mount

8+ document.body.style.overflow = "hidden";

9+ // Re-enable scrolling when component unmounts

10+ return () => (document.body.style.overflow = originalStyle);

11+ }, []); // Empty array ensures effect is only run on mount and unmount

12+}

pages/index.js+78−29

@@ -20,12 +20,18 @@ export default function Home({ posts, events }) {

2020 <SingleColumn>

2121 <Header />

2222

23+ {

24+ // Hero Statement

25+ }

2326 <section className="layout-narrow">

2427 <h1>A general-purpose,</h1>

2528 <h1>peer-to-peer,</h1>

2629 <h1>personal computing system.</h1>

2730 </section>

2831

32+ {

33+ // Introducing Port

34+ }

2935 <section className="layout-wide hidden md:flex">

3036 <div className="bg-wall w-11/12 hero-card-height rounded-3xl flex">

3137 <div className="pt-20 pl-12 w-7/12">

@@ -47,24 +53,29 @@ export default function Home({ posts, events }) {

4753 </div>

4854 </section>

4955

56+ {

57+ // Grants

58+ }

5059 <section className="layout-narrow">

51− <div className="flex items-center measure pb-12">

52− <h2 className="m-0 p-0 mr-4">Urbit Grants</h2>

53− <button className="bg-green text-white badge-lg">32 Open</button>

60+ <div className="flex flex-col md:flex-row md:items-center measure pb-12">

61+ <h2 className="m-0 p-0 mr-4 md:mb-0 mb-4">Urbit Grants</h2>

62+ <div>

63+ <button className="bg-green text-white badge-lg">32 Open</button>

64+ </div>

5465 </div>

55− <div className="flex w-full items-center bg-washedGreen px-8 py-8 rounded-xl">

66+ <div className="flex flex-col md:flex-row w-full items-center bg-washedGreen px-8 py-8 rounded-xl">

5667 <div className="flex items-center flex-col p-4 w-full">

5768 <h2 className="text-green">200+</h2>

5869 <h3 className="text-green text-center pt-2">

5970 Urbit stars awarded

6071 </h3>

6172 </div>

62− <div className="h-24 w-4 bg-lightGreen" />

73+ <div className="h-0 w-0 md:h-24 md:w-4 bg-lightGreen" />

6374 <div className="flex items-center flex-col p-4 w-full">

6475 <h2 className="text-green">1M+</h2>

6576 <h3 className="text-green text-center pt-2">USD Rewarded</h3>

6677 </div>

67− <div className="h-24 w-4 bg-lightGreen" />

78+ <div className="h-0 w-0 md:h-24 md:w-4 bg-lightGreen" />

6879 <div className="flex items-center flex-col p-4 w-full">

6980 <h2 className="text-green">90+</h2>

7081 <h3 className="text-green text-center pt-2">Grants completed</h3>

@@ -81,6 +92,9 @@ export default function Home({ posts, events }) {

8192 </div>

8293 </section>

8394

95+ {

96+ // Build on Urbit Developer CTA

97+ }

8498 <section className="layout-narrow">

8599 <div className="measure">

86100 <h2 className="pb-12">Build on Urbit</h2>

@@ -119,6 +133,9 @@ export default function Home({ posts, events }) {

119133 </div>

120134 </section>

121135

136+ {

137+ // Blog and Events Combo Section

138+ }

122139 <section className="layout-narrow">

123140 <div className="flex items-center measure pb-12">

124141 <button

@@ -140,16 +157,27 @@ export default function Home({ posts, events }) {

140157 </div>

141158

142159 <TabCarousel index={tab}>

143− <div className="blog-grid">

144− {posts.slice(0, 4).map((post, i) => {

145− return (

146− <PostPreview

147− post={post}

148− className={`blog-grid-${i}`}

149− key={post.slug}

150− />

151− );

152− })}

160+ <div className="flex flex-wrap">

161+ <PostPreview

162+ post={posts[0]}

163+ className={`w-full md:w-1/2 pr-0 pb-8 md:pr-4`}

164+ key={posts[0].slug}

165+ />

166+ <PostPreview

167+ post={posts[1]}

168+ className={`w-full md:w-1/2 pl-0 pb-8 md:pl-4`}

169+ key={posts[1].slug}

170+ />

171+ <PostPreview

172+ post={posts[3]}

173+ className={`w-full md:w-1/2 pr-0 pb-8 md:pr-4`}

174+ key={posts[3].slug}

175+ />

176+ <PostPreview

177+ post={posts[4]}

178+ className={`w-full md:w-1/2 pl-0 pb-8 md:pl-4`}

179+ key={posts[4].slug}

180+ />

153181 <div>

154182 <Link href="/blog">

155183 <button className="button-lg type-ui text-white bg-black">

@@ -158,20 +186,41 @@ export default function Home({ posts, events }) {

158186 </Link>

159187 </div>

160188 </div>

161− <div className="blog-grid">

162− {events.slice(0, 4).map((event, i) => {

163− return (

164− <PostPreview

165− post={event}

166− className={`blog-grid-${i}`}

167− key={event.slug}

168− />

169− );

170− })}

189+ <div className="flex flex-wrap">

190+ <PostPreview

191+ post={events[0]}

192+ className={`w-full md:w-1/2 pr-0 pb-8 md:pr-4`}

193+ key={events[0].slug}

194+ />

195+ <PostPreview

196+ post={events[1]}

197+ className={`w-full md:w-1/2 pl-0 pb-8 md:pl-4`}

198+ key={events[1].slug}

199+ />

200+ <PostPreview

201+ post={events[3]}

202+ className={`w-full md:w-1/2 pr-0 pb-8 md:pr-4`}

203+ key={events[3].slug}

204+ />

205+ <PostPreview

206+ post={events[4]}

207+ className={`w-full md:w-1/2 pl-0 pb-8 md:pl-4`}

208+ key={events[4].slug}

209+ />

210+ <div>

211+ <Link href="/events">

212+ <button className="button-lg type-ui text-white bg-black">

213+ More Events

214+ </button>

215+ </Link>

216+ </div>

171217 </div>

172218 </TabCarousel>

173219 </section>

174220

221+ {

222+ // Newsletter and social media

223+ }

175224 <section className="layout-narrow">

176225 <div className="measure">

177226 <h2 className="m-0 p-0 mr-4 pb-12">Stay In Touch</h2>

@@ -199,12 +248,12 @@ export default function Home({ posts, events }) {

199248 Discord

200249 </a>

201250 </h4>

202− <h4 className="mt-6">

203− Boot Urbit and join{" "}

251+ <div className="mt-4 flex flex-wrap items-baseline">

252+ <h4 className="mr-2">Boot Urbit and join</h4>

204253 <code className="bg-wall p-2 rounded-lg">

205254 {contact.urbitCommunity}

206255 </code>

207− </h4>

256+ </div>

208257 </section>

209258 </SingleColumn>

210259

styles/globals.css+10−24

@@ -122,32 +122,18 @@ a:hover {

122122 justify-content: center;

123123}

124124

125−.blog-grid {

126− width: 100%;

127− display: grid;

128− gap: 3rem;

129− grid-template-columns: 1fr 1fr;

130− grid-template-rows: 1fr 1fr;

131− grid-template-areas:

132− "blog-grid-0 blog-grid-1"

133− "blog-grid-2 blog-grid-3";

125+.bg-img {

126+ background-repeat: no-repeat;

127+ background-position: center center;

128+ @apply bg-wall;

134129}

135130

136−.blog-grid-0 {

137− grid-area: blog-grid-0;

138−}

139−.blog-grid-1 {

140− grid-area: blog-grid-1;

141−}

142−.blog-grid-2 {

143− grid-area: blog-grid-2;

144−}

145−.blog-grid-3 {

146− grid-area: blog-grid-3;

131+.tray-menu-open {

132+ transform: translateX(0);

133+ transition: transform 200ms;

147134}

148135

149−.bg-img {

150− background: silver;

151− background-repeat: no-repeat;

152− background-position: center center;

136+.tray-menu-closed {

137+ transform: translateX(100vw);

138+ transition: transform 200ms;

153139}