Use icons in nav bar (#2722)

ordinals · Nov 22, 2023 · 03468a6 · 03468a6
1 parent 5542220
commit 03468a6
Show file tree

Hide file tree

Showing 18 changed files with 61 additions and 55 deletions.
diff --git a/src/subcommand/server.rs b/src/subcommand/server.rs
@@ -2741,13 +2741,7 @@ mod tests {
       StatusCode::OK,
       format!(
         r".*<title>Ordinals</title>.*
-<nav class=tabs>
-  <a href=/inscriptions>Inscriptions</a>
-  <span>\|</span>
-  <a href=/blocks>Blocks</a>
-  <span>\|</span>
-  <a href=/collections>Collections</a>
-</nav>
+<h1>Latest Inscriptions</h1>
 <div class=thumbnails>
   <a href=/inscription/{}>.*</a>
   (<a href=/inscription/[[:xdigit:]]{{64}}i0>.*</a>\s*){{99}}
@@ -2789,7 +2783,7 @@ mod tests {
     TestServer::new_with_regtest().assert_response_regex(
       "/",
       StatusCode::OK,
-      ".*<a href=/>Ordinals<sup>regtest</sup></a>.*",
+      ".*<a href=/ title=home>Ordinals<sup>regtest</sup></a>.*",
     );
   }
 
@@ -2962,9 +2956,8 @@ mod tests {
       "/",
       StatusCode::OK,
       ".*
-      <a href=/clock>Clock</a>
-      <a href=/rare.txt>rare.txt</a>
-      <form action=/search method=get>.*",
+      <a href=/clock title=clock>.*</a>
+      <a href=/rare.txt title=rare>.*</a>.*",
     );
   }
 
@@ -2983,8 +2976,8 @@ mod tests {
       "/",
       StatusCode::OK,
       ".*
-      <a href=/clock>Clock</a>
-      <form action=/search method=get>.*",
+      <a href=/clock title=clock>.*</a>
+      <a href=https://docs.ordinals.com/.*",
     );
   }
 

diff --git a/src/templates.rs b/src/templates.rs
@@ -138,14 +138,15 @@ mod tests {
   </head>
   <body>
   <header>
-    <nav class=links>
-      <a href=/>Ordinals<sup>alpha</sup></a>
+    <nav>
+      <a href=/ title=home>Ordinals<sup>alpha</sup></a>
+      .*
+      <a href=/clock title=clock>.*</a>
+      <a href=/rare.txt title=rare>.*</a>
       .*
-      <a href=/clock>Clock</a>
-      <a href=/rare.txt>rare.txt</a>
       <form action=/search method=get>
         <input type=text .*>
-        <input type=submit value=Search>
+        <input class=icon type=image .*>
       </form>
     </nav>
   </header>
@@ -167,7 +168,7 @@ mod tests {
         domain: None,
         index_sats: true,
       })),
-      r".*<nav class=links>\s*<a href=/>Ordinals<sup>alpha</sup></a>.*"
+      r".*<nav>\s*<a href=/ title=home>Ordinals<sup>alpha</sup></a>.*"
     );
   }
 
@@ -180,7 +181,7 @@ mod tests {
         domain: None,
         index_sats: false,
       })),
-      r".*<nav class=links>\s*<a href=/>Ordinals<sup>alpha</sup></a>.*<a href=/clock>Clock</a>\s*<form action=/search.*",
+      r".*<nav>\s*<a href=/ title=home>Ordinals<sup>alpha</sup></a>.*<a href=/clock title=clock>.*</a>\s*<form action=/search.*",
     );
   }
 
@@ -193,7 +194,7 @@ mod tests {
         domain: None,
         index_sats: true,
       })),
-      r".*<nav class=links>\s*<a href=/>Ordinals<sup>signet</sup></a>.*"
+      r".*<nav>\s*<a href=/ title=home>Ordinals<sup>signet</sup></a>.*"
     );
   }
 }
diff --git a/src/templates/home.rs b/src/templates/home.rs
@@ -23,14 +23,10 @@ mod tests {
       }
       .to_string()
       .unindent(),
-      "<nav class=tabs>
-        <a href=/inscriptions>Inscriptions</a>
-        <span>|</span>
-        <a href=/blocks>Blocks</a>
-      </nav>
+      "<h1>Latest Inscriptions</h1>
       <div class=thumbnails>
-          <a href=/inscription/1{64}i1><iframe .* src=/preview/1{64}i1></iframe></a>
-          <a href=/inscription/2{64}i2><iframe .* src=/preview/2{64}i2></iframe></a>
+        <a href=/inscription/1{64}i1><iframe .* src=/preview/1{64}i1></iframe></a>
+        <a href=/inscription/2{64}i2><iframe .* src=/preview/2{64}i2></iframe></a>
       </div>
       "
       .unindent(),

diff --git a/src/templates/inscriptions.rs b/src/templates/inscriptions.rs
@@ -33,7 +33,7 @@ mod tests {
         next: None,
       },
       "
-        <h1>Inscriptions</h1>
+        <h1>All Inscriptions</h1>
         <div class=thumbnails>
           <a href=/inscription/1{64}i1><iframe .* src=/preview/1{64}i1></iframe></a>
           <a href=/inscription/2{64}i2><iframe .* src=/preview/2{64}i2></iframe></a>
@@ -56,7 +56,7 @@ mod tests {
         next: Some(2),
       },
       "
-        <h1>Inscriptions</h1>
+        <h1>All Inscriptions</h1>
         <div class=thumbnails>
           <a href=/inscription/1{64}i1><iframe .* src=/preview/1{64}i1></iframe></a>
           <a href=/inscription/2{64}i2><iframe .* src=/preview/2{64}i2></iframe></a>

diff --git a/static/book.svg b/static/book.svg
diff --git a/static/clock.svg b/static/clock.svg
diff --git a/static/cubes.svg b/static/cubes.svg
diff --git a/static/diagram-project.svg b/static/diagram-project.svg
diff --git a/static/discord.svg b/static/discord.svg
diff --git a/static/gem.svg b/static/gem.svg
diff --git a/static/github.svg b/static/github.svg
diff --git a/static/images.svg b/static/images.svg
diff --git a/static/index.css b/static/index.css
@@ -22,8 +22,8 @@ html {
 
 main {
   margin: 0 auto;
-  padding: 0 1rem 1rem;
   max-width: 100%;
+  padding: 0 1rem 1rem;
   width: 50rem;
 }
 
@@ -65,15 +65,15 @@ dt {
   margin-top: 0.5rem;
 }
 
-.links {
+nav {
   align-items: center;
   background-color: var(--light-bg);
   display: flex;
   gap: 1rem;
   padding: 1rem;
 }
 
-.links > :first-child {
+nav > :first-child {
   color: var(--light-fg);
   font-weight: bold;
 }
@@ -83,6 +83,7 @@ form {
   flex-grow: 1;
   gap: 1rem;
   margin-left: auto;
+  padding-bottom: 0.25rem;
   width: 100%;
 }
 
@@ -95,6 +96,10 @@ input[type=text] {
   min-width: 0;
 }
 
+input[type=image] {
+  margin-top: 0.2rem;
+}
+
 dl {
   overflow-wrap: break-word;
 }
@@ -104,8 +109,8 @@ ol, ul {
 }
 
 @media (max-width: 38rem) {
-  .links {
-    flex-direction: column;
+  nav {
+    flex-wrap: wrap;
   }
 }
 
@@ -218,13 +223,13 @@ a.mythic {
 }
 
 .inscription > *:nth-child(1), .inscription > *:nth-child(3) {
+  align-items: center;
   color: var(--dark-bg);
+  display: flex;
   flex: 1;
   font-size: 200%;
-  text-decoration: none;
-  display: flex;
   justify-content: center;
-  align-items: center;
+  text-decoration: none;
 }
 
 .inscription > a:nth-child(1):hover, .inscription > a:nth-child(3):hover {
@@ -258,3 +263,8 @@ a.mythic {
   flex: 1;
   text-align: left;
 }
+
+.icon {
+  height: 1rem;
+  width: 1rem;
+}
diff --git a/static/magnifying-glass.svg b/static/magnifying-glass.svg
diff --git a/templates/home.html b/templates/home.html
@@ -1,10 +1,4 @@
-<nav class=tabs>
-  <a href=/inscriptions>Inscriptions</a>
-  <span>|</span>
-  <a href=/blocks>Blocks</a>
-  <span>|</span>
-  <a href=/collections>Collections</a>
-</nav>
+<h1>Latest Inscriptions</h1>
 <div class=thumbnails>
 %% for inscription in &self.inscriptions {
   {{ Iframe::thumbnail(*inscription) }}

diff --git a/templates/inscriptions.html b/templates/inscriptions.html
@@ -1,4 +1,4 @@
-<h1>Inscriptions</h1>
+<h1>All Inscriptions</h1>
 <div class=thumbnails>
 %% for id in &self.inscriptions {
   {{Iframe::thumbnail(*id)}}

diff --git a/templates/page.html b/templates/page.html
@@ -15,18 +15,21 @@
   </head>
   <body>
   <header>
-    <nav class=links>
-      <a href=/>Ordinals<sup>{{ self.superscript() }}</sup></a>
-      <a href=https://docs.ordinals.com/>Handbook</a>
-      <a href=https://github.com/ordinals/ord>Wallet</a>
-      <a href=https://discord.com/invite/ordinals>Discord</a>
-      <a href=/clock>Clock</a>
+    <nav>
+      <a href=/ title=home>Ordinals<sup>{{ self.superscript() }}</sup></a>
+      <a href=/inscriptions title=inscriptions><img class=icon src=/static/images.svg></a>
+      <a href=/collections title=collections><img class=icon src=/static/diagram-project.svg></a>
+      <a href=/blocks title=blocks><img class=icon src=/static/cubes.svg></a>
+      <a href=/clock title=clock><img class=icon src=/static/clock.svg></a>
 %% if self.config.index_sats {
-      <a href=/rare.txt>rare.txt</a>
+      <a href=/rare.txt title=rare><img class=icon src=/static/gem.svg></a>
 %% }
+      <a href=https://docs.ordinals.com/ title=handbook><img class=icon src=/static/book.svg></a>
+      <a href=https://github.com/ordinals/ord title=github><img class=icon src=/static/github.svg></a>
+      <a href=https://discord.com/invite/ordinals title=discord><img class=icon src=/static/discord.svg></a>
       <form action=/search method=get>
         <input type=text autocapitalize=off autocomplete=off autocorrect=off name=query spellcheck=false>
-        <input type=submit value=Search>
+        <input class=icon type=image src=/static/magnifying-glass.svg alt=Search>
       </form>
     </nav>
   </header>

diff --git a/tests/server.rs b/tests/server.rs
@@ -252,7 +252,7 @@ fn inscriptions_page() {
   TestServer::spawn_with_args(&rpc_server, &[]).assert_response_regex(
     "/inscriptions",
     format!(
-      ".*<h1>Inscriptions</h1>
+      ".*<h1>All Inscriptions</h1>
 <div class=thumbnails>
   <a href=/inscription/{inscription}>.*</a>
 </div>