git.iko.soy/urbit.org
on master help sign in
mobile search iteration
3e145e0Gavin Atkinson
components/Header.js+64−46
compare with master
unifiedsplit
@@ -102,59 +102,77 @@ export default function Header(props) {
102 Search<div className="ml-4 text-lightGray">⌘K</div>
102 Search<div className="ml-4 text-lightGray">⌘K</div>
103 </button>
103 </button>
104 </nav>
104 </nav>
105+ <button
106+ onClick={(e) => {
107+ e.stopPropagation();
108+ props.search.toggleSearch(e);
109+ }}
110+ className="button-sm bg-wall text-gray md:hidden justify-self-end"
111+ >
112+ Search<div className="ml-4 text-lightGray">⌘K</div>
113+ </button>
105 {
114 {
106 // Small screen header
115 // Small screen header
107 }
116 }
108− <div className="block md:hidden">
117+
109− <MenuTray isOpen={isOpen} toggleTray={toggleTray}>
118+ <MenuTray isOpen={isOpen} toggleTray={toggleTray}>
110− <Link href="/">
119+ <Link href="/">
111− <a className="type-ui mb-12">Urbit</a>
120+ <a className="type-ui mb-12">Urbit</a>
112− </Link>
121+ </Link>
113− <ActiveLink className="mr-5 type-h3" href="/docs">
122+ <ActiveLink className="mr-5 type-h3" href="/docs">
114− Docs
123+ Docs
115− </ActiveLink>
124+ </ActiveLink>
116− <ActiveLink className="mr-5 type-h3" href="/blog">
125+ <ActiveLink className="mr-5 type-h3" href="/blog">
117− Blog
126+ Blog
118− </ActiveLink>
127+ </ActiveLink>
119− <ActiveLink className="mr-5 type-h3" href="/events">
128+ <ActiveLink className="mr-5 type-h3" href="/events">
120− Events
129+ Events
121− </ActiveLink>
130+ </ActiveLink>
122− </MenuTray>
123
131
124 <button
132 <button
125− onClick={() => toggleTray(!isOpen)}
133+ onClick={(e) => {
134+ e.stopPropagation();
135+ props.search.toggleSearch(e);
136+ }}
126− className="z-10 fixed bottom-4 right-4 w-16 h-16 bg-ultraDeepWall flex items-center justify-center rounded-full"
137+ className="flex px-4 items-center justify-center type-ui rounded-xl h-16 bg-white text-gray absolute left-4 right-4 bottom-4"
127 >
138 >
128− {isOpen ? (
139+ Search
129− <svg
130− width="16"
131− height="16"
132− viewBox="0 0 16 16"
133− fill="none"
134− xmlns="http://www.w3.org/2000/svg"
135− >
136− <path
137− fill-rule="evenodd"
138− clip-rule="evenodd"
139− d="M0.39382 13.7045C-0.131273 14.2296 -0.131274 15.081 0.39382 15.6061C0.918913 16.1312 1.77026 16.1312 2.29535 15.6061L7.99999 9.90142L13.7047 15.6061C14.2297 16.1312 15.0811 16.1312 15.6062 15.6061C16.1313 15.081 16.1313 14.2296 15.6062 13.7046L9.90152 7.99989L15.6061 2.29535C16.1312 1.77026 16.1312 0.918913 15.6061 0.39382C15.081 -0.131273 14.2296 -0.131273 13.7045 0.39382L7.99999 6.09836L2.29548 0.393844C1.77038 -0.131249 0.919038 -0.13125 0.393945 0.393844C-0.131148 0.918937 -0.131148 1.77028 0.393945 2.29537L6.09846 7.99989L0.39382 13.7045Z"
140− fill="white"
141− />
142− </svg>
143− ) : (
144− <svg
145− width="16"
146− height="16"
147− viewBox="0 0 16 17"
148− fill="none"
149− xmlns="http://www.w3.org/2000/svg"
150− >
151− <rect width="16" height="3" rx="1.5" fill="white" />
152− <rect y="7" width="16" height="3" rx="1.5" fill="white" />
153− <rect y="14" width="16" height="3" rx="1.5" fill="white" />
154− </svg>
155− )}
156 </button>
140 </button>
157− </div>
141+ </MenuTray>
142+
143+ <button
144+ onClick={() => toggleTray(!isOpen)}
145+ className="z-10 fixed bottom-4 right-4 w-16 h-16 bg-ultraDeepWall flex items-center justify-center rounded-full"
146+ >
147+ {isOpen ? (
148+ <svg
149+ width="16"
150+ height="16"
151+ viewBox="0 0 16 16"
152+ fill="none"
153+ xmlns="http://www.w3.org/2000/svg"
154+ >
155+ <path
156+ fill-rule="evenodd"
157+ clip-rule="evenodd"
158+ d="M0.39382 13.7045C-0.131273 14.2296 -0.131274 15.081 0.39382 15.6061C0.918913 16.1312 1.77026 16.1312 2.29535 15.6061L7.99999 9.90142L13.7047 15.6061C14.2297 16.1312 15.0811 16.1312 15.6062 15.6061C16.1313 15.081 16.1313 14.2296 15.6062 13.7046L9.90152 7.99989L15.6061 2.29535C16.1312 1.77026 16.1312 0.918913 15.6061 0.39382C15.081 -0.131273 14.2296 -0.131273 13.7045 0.39382L7.99999 6.09836L2.29548 0.393844C1.77038 -0.131249 0.919038 -0.13125 0.393945 0.393844C-0.131148 0.918937 -0.131148 1.77028 0.393945 2.29537L6.09846 7.99989L0.39382 13.7045Z"
159+ fill="white"
160+ />
161+ </svg>
162+ ) : (
163+ <svg
164+ width="16"
165+ height="16"
166+ viewBox="0 0 16 17"
167+ fill="none"
168+ xmlns="http://www.w3.org/2000/svg"
169+ >
170+ <rect width="16" height="3" rx="1.5" fill="white" />
171+ <rect y="7" width="16" height="3" rx="1.5" fill="white" />
172+ <rect y="14" width="16" height="3" rx="1.5" fill="white" />
173+ </svg>
174+ )}
175+ </button>
158 </header>
176 </header>
159 );
177 );
160}
178}
components/NewletterSignup.js+1−1
@@ -12,7 +12,7 @@ export default function NewsletterSignup(props) {
12 <div className="input-group" id="mc_embed_signup_scroll">
12 <div className="input-group" id="mc_embed_signup_scroll">
13 <div className="mc-field-group w-full relative">
13 <div className="mc-field-group w-full relative">
14 <input
14 <input
15− className={`text-gray type-ui black border-${
15+ className={`appearance-none text-gray type-ui black border-${
16 props.color || "green"
16 props.color || "green"
17 } border-4 px-3 w-full mb-2 h-16 rounded-xl`}
17 } border-4 px-3 w-full mb-2 h-16 rounded-xl`}
18 type="email"
18 type="email"