truncating navigation buttons (denoland#586)

dandv · Jul 16, 2024 · dae488e · dae488e
1 parent aabd9b1
commit dae488e
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 41 deletions.
diff --git a/_includes/doc.tsx b/_includes/doc.tsx
@@ -139,24 +139,20 @@ export default function Page(props: Lume.Data, helpers: Lume.Helpers) {
               <nav class="grid gap-8 grid-cols-2 max-w-[66ch] items-center justify-between mt-6">
                 <div>
                   {parentNavigation[index! - 1] && (
-                    <div>
-                      <NavigationButton
-                        item={parentNavigation[index! - 1]}
-                        search={props.search}
-                        direction="prev"
-                      />
-                    </div>
+                    <NavigationButton
+                      item={parentNavigation[index! - 1]}
+                      search={props.search}
+                      direction="prev"
+                    />
                   )}
                 </div>
                 <div>
                   {parentNavigation[index! + 1] && (
-                    <div>
-                      <NavigationButton
-                        item={parentNavigation[index! + 1]}
-                        search={props.search}
-                        direction="next"
-                      />
-                    </div>
+                    <NavigationButton
+                      item={parentNavigation[index! + 1]}
+                      search={props.search}
+                      direction="next"
+                    />
                   )}
                 </div>
               </nav>
@@ -217,16 +213,14 @@ function NavigationButton(
       className={`flex flex-col py-3 px-6 ${alignmentClass} border border-gray-000 hover:border-blue-700 hover:bg-blue-50/10 transition-colors duration-300 transition-timing-function cubic-bezier(0.4, 0, 0.2, 1) rounded`}
       href={"id" in item ? item.id : "href" in item ? item.href : undefined}
     >
-      <span className="text-sm text-gray-2 text-nowrap">{directionText}</span>
-      <span
-        className={`font-semibold text-blue-500 ${
-          props.direction === "prev"
-            ? "doc-pagination-label-prev"
-            : "doc-pagination-label-next"
-        } leading-2`}
-      >
-        {item.label}
-      </span>
+      <span className="text-sm text-gray-2">{directionText}</span>
+      <div className="flex flex-row max-w-full items-center text-blue-500 gap-2">
+        {props.direction === "prev" && <>&laquo;</>}
+        <span className="font-semibold flex-shrink truncate">
+          {item.label}
+        </span>
+        {props.direction === "next" && <>&raquo;</>}
+      </div>
     </a>
   );
 }

diff --git a/styles.css b/styles.css
@@ -210,20 +210,12 @@ body:not(:has(.ddoc)) {
   @apply block;
 }
 
-.doc-pagination-label-next::after {
-  content: " »";
-}
-
-.doc-pagination-label-prev::before {
-  content: "« ";
-}
-
 /* Custom DDOC styles for the Deno documentation */
 .ddoc {
   /* Categories panel */
   > .toc {
     @apply border-r border-gray-000;
-    
+
     .documentNavigation {
       > h3 {
         margin: 0.75rem 0.75rem 0.5rem !important;
@@ -232,36 +224,36 @@ body:not(:has(.ddoc)) {
       }
     }
   }
-  
+
   .documentNavigation > ul > li > a {
-    @apply text-gray-3 hover:bg-blue-50 rounded-lg hover:no-underline  py-1.5 px-3.5 !important
+    @apply text-gray-3 hover:bg-blue-50 rounded-lg hover:no-underline  py-1.5 px-3.5 !important;
   }
-  
+
   .contextLink {
     @apply text-primary !important;
     /* 40% opacity of for decoration color primary */
     text-decoration-color: rgba(9, 107, 218, 0.4) !important;
   }
-  
+
   #content .toc .documentNavigation {
     > h3 {
       @apply hidden !important;
     }
-    
+
     > ul {
       @apply border-l border-gray-000 !important;
-      
+
       > ul > li a {
         @apply hover:bg-blue-50 rounded-lg hover:no-underline !important;
       }
     }
   }
-  
+
   .markdown {
     pre {
       @apply border-gray-000 !important;
     }
-    
+
     /* This comes from gfm css, should be replaced with something in our color palette once we establish it. */
     :not(pre) > code {
       background-color: var(--color-neutral-muted) !important;