Merge pull request #282 from shelwinsunga/mobile-nav

[docs] Clean up nav
MadcowD · Oct 4, 2024 · 0a92701 · 0a92701
2 parents f7f706e + 439a161
commit 0a92701
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 19 deletions.
diff --git a/docs/src/_templates/header.html b/docs/src/_templates/header.html
@@ -63,36 +63,58 @@
 }
 
 
+nav a {
+  white-space: nowrap;
+}
+
+.twin-btn-container {
+    display: flex;
+    gap: 1rem;
+    align-items: center;
+    flex-direction: row-reverse;
+    width: 100%;
+}
+
+@media (min-width: 768px) {
+    .twin-btn-container {
+        flex-direction: row;
+        justify-content: flex-end;
+    }
+}
+
+
 @media (max-width: 640px) {
     .github-star-btn {
         font-size: 12px;
         padding: 0.4rem 0.8rem;
     }
-    .github-star-btn .star-icon,
-    .github-star-btn .star-count {
-        display: none;
-    }
 }
+
+
+
 </style>
+
+
 <a href="{{ pathto(master_doc) }}" class="flex items-center mr-6">
     {%- if logo_url %}
-      <img height="24" width="120" class="mr-2 dark:invert" src="{{ logo_url }}" alt="Logo" />
+      <img height="24" width="120" class="mr-2 dark:invert" src="{{ logo_url }}" alt="Logo" style="min-width: 120px; max-width: 120px;" />
     {%- endif -%}
     {%- if theme_logo_dark and not logo_url %}
-      <img width="120" height="24" class="mr-2 hidden dark:block" src="{{ pathto('_static/' + theme_logo_dark, 1) }}" alt="Logo" />
+      <img width="120" height="24" class="mr-2 hidden dark:block" src="{{ pathto('_static/' + theme_logo_dark, 1) }}" alt="Logo" style="min-width: 120px; max-width: 120px;" />
     {%- endif -%}
     {%- if theme_logo_light and not logo_url %}
-    <img width="120" height="24" class="mr-2 dark:hidden" src="{{ pathto('_static/' + theme_logo_light, 1) }}" alt="Logo" />
+    <img width="120" height="24" class="mr-2 dark:hidden" src="{{ pathto('_static/' + theme_logo_light, 1) }}" alt="Logo" style="min-width: 120px; max-width: 120px;" />
     {%- endif -%}
 </a>
 {% endblock header_logo %}
 
 {%- block header_right %}
-<div class="flex items-center justify-between flex-1 space-x-2 sm:space-x-4 md:justify-end">
+<div class="flex flex-wrap items-center justify-between flex-1 space-x-2 sm:space-x-4 md:justify-end">
   {%- if docsearch or hasdoc('search') %}
-  <div class="ml-4">
-    <a href="https://github.com/madcowd/ell" target="_blank" rel="noopener noreferrer" class="github-star-btn">
-      <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+  <div class="twin-btn-container">
+  <div class="github-star-btn-container md:w-auto mb-2 md:mb-0">
+    <a href="https://github.com/madcowd/ell" target="_blank" rel="noopener noreferrer" class="github-star-btn whitespace-nowrap">
+      <svg class="w-5 h-5 mr-2 hidden sm:inline-block" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
         <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd" />
       </svg>
       <span class="font-medium">Star on GitHub</span>
@@ -104,7 +126,6 @@
       <span class="ml-2 star-count" data-stars="0" style="min-width: 3ch; text-align: center;">0</span>
     </a>
   </div>
-
   <script>
     document.addEventListener('DOMContentLoaded', function() {
       const starBtn = document.querySelector('.github-star-btn');
@@ -135,18 +156,40 @@
 
   </script>
 
-  <div class="flex-1 w-full md:w-auto md:flex-none">
+  <div class="searchbox-container w-full md:w-auto md:flex-none">
     {%- include "searchbox.html" %}
   </div>
+
+  <script>
+    document.addEventListener('DOMContentLoaded', function() {
+      const searchInput = document.querySelector('.searchbox-container input');
+      const starBtnContainer = document.querySelector('.github-star-btn-container');
+
+      if (searchInput && starBtnContainer) {
+        const isMobile = window.innerWidth < 768; // Adjust this breakpoint as needed
+
+        if (isMobile) {
+          searchInput.addEventListener('focus', function() {
+            starBtnContainer.style.display = 'none';
+          });
+
+          searchInput.addEventListener('blur', function() {
+            starBtnContainer.style.display = 'block';
+          });
+        }
+      }
+    });
+  </script>
+</div>
   {%- endif %}
 
   {%- block extra_header_link_icons %}
-  <nav class="flex items-center space-x-1">
+  <nav class="flex items-center space-x-1 mt-2 md:mt-0">
     {%- if theme_extra_header_link_icons|tobool %}
     {%- for text,url in theme_extra_header_link_icons.items() %}
     {%- if url is mapping %}
     <a href="{{ url.link }}" title="Visit {{ text }}" rel="noopener nofollow">
-      <div
+      <div 
         class="inline-flex items-center justify-center px-0 text-sm font-medium transition-colors rounded-md disabled:opacity-50 disabled:pointer-events-none hover:bg-accent hover:text-accent-foreground h-9 w-9">
         {{ url.icon }}
       </div>

diff --git a/docs/src/conf.py b/docs/src/conf.py
@@ -37,10 +37,6 @@
         "AI Jobs Board": "https://jobs.ell.so",
     },
     "extra_header_link_icons": {
-        "GitHub": {
-            "link": "https://github.com/MadcowD/ell",
-            "icon": """<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="18" fill="currentColor"><path d="M12 0C5.373 0 0 5.373 0 12c0 5.302 3.438 9.8 8.205 11.387.6.111.82-.261.82-.577 0-.285-.01-1.04-.015-2.04-3.338.726-4.042-1.61-4.042-1.61-.546-1.387-1.333-1.757-1.333-1.757-1.09-.745.083-.729.083-.729 1.205.084 1.84 1.238 1.84 1.238 1.07 1.835 2.807 1.305 3.492.998.108-.775.418-1.305.76-1.605-2.665-.305-5.466-1.332-5.466-5.93 0-1.31.467-2.38 1.235-3.22-.125-.303-.535-1.523.115-3.176 0 0 1.005-.322 3.3 1.23.955-.265 1.98-.398 3-.403 1.02.005 2.045.138 3 .403 2.28-1.552 3.285-1.23 3.285-1.23.655 1.653.245 2.873.12 3.176.77.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.62-5.475 5.92.43.37.81 1.1.81 2.22 0 1.605-.015 2.895-.015 3.285 0 .32.215.694.825.575C20.565 21.795 24 17.3 24 12c0-6.627-5.373-12-12-12z"/></svg>""",
-        },
         "Discord": {
         "link": "https://discord.gg/vWntgU52Xb",
             "icon": """<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" height="18" fill="currentColor"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M524.5 69.8a1.5 1.5 0 0 0 -.8-.7A485.1 485.1 0 0 0 404.1 32a1.8 1.8 0 0 0 -1.9 .9 337.5 337.5 0 0 0 -14.9 30.6 447.8 447.8 0 0 0 -134.4 0 309.5 309.5 0 0 0 -15.1-30.6 1.9 1.9 0 0 0 -1.9-.9A483.7 483.7 0 0 0 116.1 69.1a1.7 1.7 0 0 0 -.8 .7C39.1 183.7 18.2 294.7 28.4 404.4a2 2 0 0 0 .8 1.4A487.7 487.7 0 0 0 176 479.9a1.9 1.9 0 0 0 2.1-.7A348.2 348.2 0 0 0 208.1 430.4a1.9 1.9 0 0 0 -1-2.6 321.2 321.2 0 0 1 -45.9-21.9 1.9 1.9 0 0 1 -.2-3.1c3.1-2.3 6.2-4.7 9.1-7.1a1.8 1.8 0 0 1 1.9-.3c96.2 43.9 200.4 43.9 295.5 0a1.8 1.8 0 0 1 1.9 .2c2.9 2.4 6 4.9 9.1 7.2a1.9 1.9 0 0 1 -.2 3.1 301.4 301.4 0 0 1 -45.9 21.8 1.9 1.9 0 0 0 -1 2.6 391.1 391.1 0 0 0 30 48.8 1.9 1.9 0 0 0 2.1 .7A486 486 0 0 0 610.7 405.7a1.9 1.9 0 0 0 .8-1.4C623.7 277.6 590.9 167.5 524.5 69.8zM222.5 337.6c-29 0-52.8-26.6-52.8-59.2S193.1 219.1 222.5 219.1c29.7 0 53.3 26.8 52.8 59.2C275.3 311 251.9 337.6 222.5 337.6zm195.4 0c-29 0-52.8-26.6-52.8-59.2S388.4 219.1 417.9 219.1c29.7 0 53.3 26.8 52.8 59.2C470.7 311 447.5 337.6 417.9 337.6z"/></svg>""",