f7df2db · urbit.org · git.iko.soy

git.iko.soy/urbit.org

on master help sign in

search type mobile scaling

f7df2dbGavin Atkinson5 years ago

components/Header.js+57−14

compare with master

unifiedsplit

@@ -5,11 +5,10 @@ import classnames from "classnames";

5import path from "path";

6import MenuTray from "../components/MenuTray";

7import Section from "../components/Section";

8+import { capitalize } from "../lib/lib";

9−function ActiveLink({ children, href, className }) {

10+function ActiveLink({ children, href, className, currentPath }) {

10− const router = useRouter();

11−

12− const firstCrumb = router.asPath.split("/")[1];

11+ const firstCrumb = currentPath.split("/")[1];

14 const activeClassName = classnames({

13 const activeClassName = classnames({

15 "text-black": "/" + firstCrumb === href,

14 "text-black": "/" + firstCrumb === href,

@@ -26,25 +25,53 @@ function ActiveLink({ children, href, className }) {

26export default function Header(props) {

25export default function Header(props) {

27 const [isOpen, toggleTray] = useState(false);

26 const [isOpen, toggleTray] = useState(false);

28+ const currentPath = useRouter().asPath;

29+

30+ const routeDepth = currentPath.split("/").length;

31+

32+ const firstCrumb = currentPath.split("/")[1];

33+

29 return (

34 return (

30 <header className="w-full px-4 md:px-8 md:w-10/12 flex flex-row justify-between items-center pt-8 md:pt-10 lg:pt-12 pb-10 md:pb-12 lg:pb-24">

35 <header className="w-full px-4 md:px-8 md:w-10/12 flex flex-row justify-between items-center pt-8 md:pt-10 lg:pt-12 pb-10 md:pb-12 lg:pb-24">

36+ <div>

31− <Link href="/">

37+ <Link href="/">

32− <a className="type-ui">Urbit</a>

38+ <a className="type-ui">Urbit</a>

33− </Link>

39+ </Link>

40+ {routeDepth > 2 ? (

41+ <Link href={`/${firstCrumb}`}>

42+ <a className="inline md:hidden type-ui text-gray ml-2">

43+ {capitalize(firstCrumb)}

44+ </a>

45+ </Link>

46+ ) : null}

47+ </div>

34 {

48 {

35 // Large screen header

49 // Large screen header

36 }

50 }

37 <nav className="items-center hidden md:flex">

51 <nav className="items-center hidden md:flex">

52+ <ActiveLink

53+ currentPath={currentPath}

38− <ActiveLink className="mr-5 type-ui" href="/docs">

54+ className="mr-5 type-ui"

55+ href="/docs"

56+ >

39 Docs

57 Docs

40 </ActiveLink>

58 </ActiveLink>

59+ <ActiveLink

60+ currentPath={currentPath}

41− <ActiveLink className="mr-5 type-ui" href="/blog">

61+ className="mr-5 type-ui"

62+ href="/blog"

63+ >

42 Blog

64 Blog

43 </ActiveLink>

65 </ActiveLink>

66+ <ActiveLink

67+ currentPath={currentPath}

44− <ActiveLink className="mr-5 type-ui" href="/events">

68+ className="mr-5 type-ui"

69+ href="/events"

70+ >

45 Events

71 Events

46 </ActiveLink>

72 </ActiveLink>

47 <ActiveLink

73 <ActiveLink

74+ currentPath={currentPath}

48 className="mr-5 text-green type-ui button-text"

75 className="mr-5 text-green type-ui button-text"

49 href="/getting-started"

76 href="/getting-started"

50 >

77 >

@@ -68,16 +95,32 @@ export default function Header(props) {

68 <Link href="/">

95 <Link href="/">

69 <a className="type-ui mb-12">Urbit</a>

96 <a className="type-ui mb-12">Urbit</a>

70 </Link>

97 </Link>

98+ <ActiveLink

99+ currentPath={currentPath}

71− <ActiveLink className="mr-5 mb-4 type-h3" href="/docs">

100+ className="mr-5 mb-4 type-h3"

101+ href="/docs"

102+ >

72 Docs

103 Docs

73 </ActiveLink>

104 </ActiveLink>

105+ <ActiveLink

106+ currentPath={currentPath}

74− <ActiveLink className="mr-5 mb-4 type-h3" href="/blog">

107+ className="mr-5 mb-4 type-h3"

108+ href="/blog"

109+ >

75 Blog

110 Blog

76 </ActiveLink>

111 </ActiveLink>

112+ <ActiveLink

113+ currentPath={currentPath}

77− <ActiveLink className="mr-5 mb-4 type-h3" href="/events">

114+ className="mr-5 mb-4 type-h3"

115+ href="/events"

116+ >

78 Events

117 Events

79 </ActiveLink>

118 </ActiveLink>

119+ <ActiveLink

120+ currentPath={currentPath}

80− <ActiveLink className="mr-5 mb-4 type-h3" href="/grants">

121+ className="mr-5 mb-4 type-h3"

122+ href="/grants"

123+ >

81 Grants

124 Grants

82 </ActiveLink>

125 </ActiveLink>

83 </MenuTray>

126 </MenuTray>

components/Search.js+5−5

@@ -83,15 +83,15 @@ export default function Search(props) {

83 return (

84 <div

85 onClick={props.closeSearch}

86− className="fixed w-screen h-screen bg-washedWall z-50 flex flex-col items-center"

86+ className="fixed w-screen h-screen bg-washedWall z-50 flex flex-col items-center p-4"

87 >

88 <div

89− className="relative flex flex-col max-w-screen-lg w-12/12 m-4 md:my-32 md:w-10/12 lg:w-8/12 xl:w-6/12 rounded-xl bg-white min-h-0"

89+ className="relative flex flex-col max-w-screen-lg md:my-32 w-full md:w-10/12 lg:w-8/12 xl:w-6/12 rounded-xl bg-white min-h-0"

90 ref={searchRef}

91 >

92− <div className="">

92+ <div className="relative">

93 <input

94− className="text-2xl font-medium text-green bg-transparent py-2 px-4 outline-none relative w-full"

94+ className="text-lg md:text-xl lg:text-2xl font-medium text-green bg-transparent py-2 px-4 outline-none relative w-full"

95 onChange={onChange}

96 onFocus={onFocus}

97 placeholder="Search..."

@@ -103,7 +103,7 @@ export default function Search(props) {

103

104 <span

105 onClick={props.toggleSearch}

106− className="absolute right-2.5 top-2.5 cursor-pointer"

106+ className="absolute cursor-pointer right-1.5 top-1.5 md:right-2 md:top-2 lg:right-2.5 lg:top-2.5"

107 >

108 <p className="px-2 h-8 bg-wall flex items-center justify-center text-sm rounded">

109 ESC

lib/lib.js+3−3

@@ -126,9 +126,9 @@ export function formatDate(d) {

126 return mn[d.getMonth()] + " " + d.getDate() + ", " + d.getFullYear();

127}

128

129−// export function capitalize(str) {

129+export function capitalize(str) {

130−// return str.charAt(0).toUpperCase() + str.slice(1);

130+ return str.charAt(0).toUpperCase() + str.slice(1);

131−// }

131+}

132

133// export function generateCrumbs(path) {

134// const crumbs = path.split('/')