Add nav bar (#614)

ordinals · Oct 5, 2022 · 8754d8c · 8754d8c
1 parent e9a7c4b
commit 8754d8c
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 37 deletions.
diff --git a/src/subcommand/server.rs b/src/subcommand/server.rs
@@ -1051,9 +1051,7 @@ mod tests {
     test_server.assert_response_regex(
     "/",
     StatusCode::OK,
-    ".*<title>Ordinals</title>.*<h1>Ordinals</h1>
-<nav>.*</nav>
-.*
+    ".*<title>Ordinals</title>.*
 <h2>Status</h2>
 <dl>
   <dt>cycle</dt><dd>0</dd>

diff --git a/src/subcommand/server/templates.rs b/src/subcommand/server/templates.rs
@@ -57,7 +57,7 @@ mod tests {
       }
     }
 
-    pretty_assertions::assert_eq!(
+    assert_regex_match!(
       Foo.page().to_string(),
       "<!doctype html>
 <html lang=en>
@@ -70,7 +70,19 @@ mod tests {
     <link href=/static/modern-normalize.css rel=stylesheet>
   </head>
   <body>
+  <header>
+    <nav>
+      <a href=/>Ordinals</a>
+      .*
+      <form action=/search method=get>
+        <input type=text .*>
+        <input type=submit value=Search>
+      </form>
+    </nav>
+  </header>
+  <main>
 <h1>Foo</h1>
+  </main>
   </body>
 </html>
 "

diff --git a/src/subcommand/server/templates/home.rs b/src/subcommand/server/templates/home.rs
@@ -54,11 +54,7 @@ mod tests {
         )
       ],)
       .to_string(),
-      "<h1>Ordinals</h1>
-<nav>.*</nav>
-<h2>Search</h2>
-<form action=/search method=get>.*</form>
-<h2>Status</h2>
+      "<h2>Status</h2>
 <dl>
   <dt>cycle</dt><dd>1</dd>
   <dt>epoch</dt><dd>6</dd>

diff --git a/static/index.css b/static/index.css
@@ -1,19 +1,11 @@
 html {
-  margin-left: 1rem;
-  margin-right: 1rem;
   background-color: #121212;
   color: white;
 }
 
-input[type="text"], textarea {
-  background-color: #242424;
-  border-style: solid;
-  border-width: 1px;
-  border-radius: 0.0625rem;
-}
-
-body {
-  margin: 0 auto 0 auto !important;
+main {
+  margin: 0 auto 0 auto;
+  padding: 0 1rem 0 1rem;
   max-width: 100%;
   width: 50rem;
 }
@@ -53,7 +45,22 @@ a:visited {
 nav {
   display: flex;
   gap: 1rem;
-  justify-content: left;
+  padding: 1rem;
+  background-color: #242424;
+}
+
+nav > form {
+  margin-left: auto;
+}
+
+@media (max-width: 38rem) {
+  nav {
+    flex-direction: column;
+  }
+
+  nav > form {
+    margin-left: 0;
+  }
 }
 
 .blocks {

diff --git a/templates/home.html b/templates/home.html
@@ -1,19 +1,3 @@
-<h1>Ordinals</h1>
-<nav>
-  <a href=https://rodarmor.com/blog/ordinal-theory/>Theory</a>
-  <a href=https://docs.ordinals.com/faq/>FAQ</a>
-  <a href=https://docs.ordinals.com/bounty/>Bounties</a>
-  <a href=https://github.com/casey/ord/blob/master/bip.mediawiki>BIP</a>
-  <a href=https://github.com/casey/ord>GitHub</a>
-  <a href=https://discord.gg/87cjuz4FYg>Discord</a>
-  <a href=/clock>Clock</a>
-  <a href=/rare.txt>rare.txt</a>
-</nav>
-<h2>Search</h2>
-<form action=/search method=get>
-  <input autocapitalize=off autocomplete=off autocorrect=off autofocus name=query spellcheck=false type=text>
-  <input type=submit>
-</form>
 %% if let Some(starting_ordinal) = self.starting_ordinal {
 <h2>Status</h2>
 <dl>

diff --git a/templates/page.html b/templates/page.html
@@ -9,6 +9,21 @@
     <link href=/static/modern-normalize.css rel=stylesheet>
   </head>
   <body>
+  <header>
+    <nav>
+      <a href=/>Ordinals</a>
+      <a href=https://docs.ordinals.com/>Docs</a>
+      <a href=https://github.com/casey/ord>GitHub</a>
+      <a href=/clock>Clock</a>
+      <a href=/rare.txt>rare.txt</a>
+      <form action=/search method=get>
+        <input type=text autocapitalize=off autocomplete=off autocorrect=off autofocus name=query spellcheck=false>
+        <input type=submit value=Search>
+      </form>
+    </nav>
+  </header>
+  <main>
 $$ Trusted(&self.content)
+  </main>
   </body>
 </html>