Fix more bugs with the new mobile view

Author: septatrix

python_docs_theme/layout.html

@@ -37,7 +37,7 @@ <h3>{{ _('Navigation') }}</h3>
                     {{ reldelim2 }}
                 </li>
             {%- endif %}
-            <li class="right"><input type="button" value="Toggle theme" class="theme-toggle" onclick="toggleTheme()">{{ reldelim2 }}</li>
+            <li class="right">{{ themeselector() }}{{ reldelim2 }}</li>
             {% endblock %}
       </ul>
     </div>
@@ -57,6 +57,17 @@ <h3>{{ _('Navigation') }}</h3>
     {%- endif %}
 {%- endmacro %}
 
+{%- macro themeselector() %}
+<label class="theme-selector-label">
+    {{ _('Color theme') }}
+    <select class="theme-selector" oninput="activateTheme(this.value)">
+        <option value="auto" selected>{{ _('Auto (default)') }}</option>
+        <option value="light">{{ _('Light theme') }}</option>
+        <option value="dark">{{ _('Dark theme') }}</option>
+    </select>
+</label>
+{%- endmacro %}
+
 {% block relbar1 %} {% if builder != 'qthelp' %} {{ relbar() }} {% endif %} {% endblock %}
 {% block relbar2 %} {% if builder != 'qthelp' %} {{ relbar() }} {% endif %} {% endblock %}
 
@@ -84,28 +95,31 @@ <h3>{{ _('Navigation') }}</h3>
 <div class="mobile-nav">
     <input type="checkbox" id="menuToggler" class="toggler__input" aria-controls="navigation"
            aria-pressed="false" aria-expanded="false" role="button" aria-label="{{ _('Menu')}}" />
-    <label for="menuToggler" class="toggler__label">
-        <span></span>
-    </label>
     <nav class="nav-content" role="navigation">
-         <a href="{{ theme_root_url }}" class="nav-logo">
-             <img src="{{ pathto('_static/py.svg', 1) }}" alt="Logo"/>
-         </a>
-        <div class="version_switcher_placeholder"></div>
-        {%- if pagename != "search" and builder != "singlehtml" %}
-        <form role="search" class="search" action="{{ pathto('search') }}" method="get">
-            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" class="search-icon">
-                <path fill-rule="nonzero"
-                        d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 001.48-5.34c-.47-2.78-2.79-5-5.59-5.34a6.505 6.505 0 00-7.27 7.27c.34 2.8 2.56 5.12 5.34 5.59a6.5 6.5 0 005.34-1.48l.27.28v.79l4.25 4.25c.41.41 1.08.41 1.49 0 .41-.41.41-1.08 0-1.49L15.5 14zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" fill="#444"></path>
-            </svg>
-            <input type="text" name="q" aria-label="{{ _('Quick search') }}"/>
-            <input type="submit" value="{{ _('Go') }}"/>
-        </form>
-        {%- endif %}
+        <label for="menuToggler" class="toggler__label">
+            <span></span>
+        </label>
+        <span class="nav-items-wrapper">
+            <a href="{{ theme_root_url }}" class="nav-logo">
+                <img src="{{ pathto('_static/py.svg', 1) }}" alt="Logo"/>
+            </a>
+            <span class="version_switcher_placeholder"></span>
+            {%- if pagename != "search" and builder != "singlehtml" %}
+            <form id="searchbox" role="search" class="search" action="{{ pathto('search') }}" method="get">
+                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" class="search-icon">
+                    <path fill-rule="nonzero" fill="currentColor" d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 001.48-5.34c-.47-2.78-2.79-5-5.59-5.34a6.505 6.505 0 00-7.27 7.27c.34 2.8 2.56 5.12 5.34 5.59a6.5 6.5 0 005.34-1.48l.27.28v.79l4.25 4.25c.41.41 1.08.41 1.49 0 .41-.41.41-1.08 0-1.49L15.5 14zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path>
+                </svg>
+                <input type="search" name="q" aria-label="{{ _('Quick search') }}"/>
+                <input type="submit" value="{{ _('Go') }}"/>
+                {# TODO missing hidden inputs #}
+            </form>
+            {%- endif %}
+        </span>
     </nav>
     <div class="menu-wrapper">
         <nav class="menu" role="navigation" aria-label="main navigation">
             <div class="language_switcher_placeholder"></div>
+            {{ themeselector() }}
             {%- if logo %}
             <p class="logo">
                 <a href="{{ pathto('index') }}">

python_docs_theme/static/caret-down.svg

@@ -264,6 +264,10 @@ dl > dt span ~ em {
     padding-left: 20px;
 }
 
+.theme-selector {
+    margin-left: .5em;
+}
+
 @media (max-width: 1023px) {
     /* Body layout */
     div.body {
@@ -309,7 +313,6 @@ dl > dt span ~ em {
         position: fixed;
         top: 0;
         left: 0;
-        background-color: white;
         box-shadow: rgba(0, 0, 0, 0.25) 0 0 2px 0;
         z-index: 1;
     }
@@ -318,58 +321,55 @@ dl > dt span ~ em {
     }
     .nav-content {
         position: absolute;
-        z-index: 2;
-        left: 0;
-        top: 0;
+        z-index: 1;
         height: 40px;
         width: 100%;
         max-width: 100vw;
         padding: 0 1rem 0 45px;
         display: flex;
-        align-items: center;
         background-color: white;
     }
-    .nav-logo {
-        margin-right: 0.7rem;
+    .nav-items-wrapper {
         display: flex;
-        flex: 0 0 auto;
+        flex: auto;
+        padding: .5rem;
+    }
+    .nav-logo {
+        margin-right: 1rem;
+        flex-shrink: 0;
     }
     .nav-content img {
+        display: block;
         width: 20px;
-        height: auto;
     }
     .version_switcher_placeholder {
-        flex: 0 1 0;
         margin-right: 1rem;
     }
+    .version_switcher_placeholder > select {
+        height: 100%;
+    }
     .nav-content .search {
         display: flex;
-        flex: 1 1 auto;
-        align-items: center;
-        padding: 0 0 0 2px;
+        flex: auto;
         border: 1px solid #a9a9a9;
-        height: 30px;
-        overflow: hidden;
     }
     .nav-content .search:hover {
         box-shadow: 0 1px 6px 0 rgba(32,33,36,0.28);
         border-color: rgba(223,225,229,0);
     }
-    .nav-content .search input[type=text] {
+    .nav-content .search input[type=search] {
         border: 0;
         outline: 0;
-        box-shadow: none;
-        width: 40px;
-        height: 28px;
-        flex: 1 1 auto;
+        padding-left: 20px;
+        flex: 1;
     }
     .nav-content .search input[type=submit] {
         height: 100%;
         appearance: none;
         -webkit-appearance: none;
-        border: 1px solid transparent;
-        border-left-color: #a9a9a9;
         box-shadow: none;
+        border: 0;
+        outline: 1px solid #999;
         cursor: pointer;
         background-color: #f0f0f0;
         margin-right: 0;
@@ -378,34 +378,21 @@ dl > dt span ~ em {
         border-color: #a9a9a9;
     }
     .nav-content .search svg {
-        flex: 0 0 20px;
-        fill: #333;
+        position: absolute;
     }
     .toggler__input {
-        width: 40px;
-        height: 40px;
-        left: 0;
-        opacity: 0;
-        position: absolute;
-        z-index: 3;
-        margin: 0;
+        display: none;
     }
     .toggler__label {
         width: 40px;
-        height: 40px;
-        margin: 0;
-        position: absolute;
         cursor: pointer;
-        top: 0;
-        left: 0;
         background-color: transparent;
         border: 1px solid white;
-        box-shadow: none;
-        z-index: 3;
         display: flex;
         align-items: center;
         justify-content: center;
-        padding: 0 8px;
+        padding: 8px;
+        flex-shrink: 0;
     }
     .toggler__label:focus {
         background-color: #eee;
@@ -438,17 +425,17 @@ dl > dt span ~ em {
     .toggler__label > span::after {
         top: 8px;
     }
-    .toggler__input:checked ~ .toggler__label span {
+    .toggler__input:checked ~ nav > .toggler__label span {
         transform: rotate(135deg);
     }
-    .toggler__input:checked ~ .toggler__label span::before {
+    .toggler__input:checked ~ nav > .toggler__label span::before {
         transform: rotate(90deg);
     }
-    .toggler__input:checked ~ .toggler__label span::before,
-    .toggler__input:checked ~ .toggler__label span::after {
+    .toggler__input:checked ~ nav > .toggler__label span::before,
+    .toggler__input:checked ~ nav > .toggler__label span::after {
         top: 0;
     }
-    .toggler__input:checked:hover ~ .toggler__label span {
+    .toggler__input:checked:hover ~ nav > .toggler__label span {
         transform: rotate(315deg);
     }
     .toggler__input:checked ~ .menu-wrapper {
@@ -554,4 +541,14 @@ dl > dt span ~ em {
         width: 100%;
         overflow-x: auto;
     }
+
+    .menu .theme-selector-label {
+        margin-top: .5em;
+        display: flex;
+        width: 100%;
+    }
+
+    .menu .theme-selector {
+        flex: auto;
+    }
 }

python_docs_theme/static/pydoctheme.css

@@ -115,4 +115,12 @@ div.note {
 
 .mobile-nav {
     box-shadow: rgba(255, 255, 255, 0.25) 0 0 2px 0;
+}
+
+.nav-content {
+    background-color: black;
+}
+
+.nav-content .search svg {
+    color: black;
 }

python_docs_theme/static/pydoctheme_dark.css

@@ -1,39 +1,24 @@
-let currentTheme = localStorage.getItem('currentTheme') || 'auto'
-
-const pygmentsDark = document.getElementById('pygments_dark_css')
 const pydocthemeDark = document.getElementById('pydoctheme_dark_css')
+const pygmentsDark = document.getElementById('pygments_dark_css')
+const themeSelectors = document.getElementsByClassName('theme-selector')
 
-const themeOrder = {
-  light: 'dark',
-  dark: 'auto',
-  auto: 'light',
-}
-
-updateTheme()
-
-function toggleTheme() {
-  currentTheme = themeOrder[currentTheme]
-  localStorage.setItem('currentTheme', currentTheme)
-  updateTheme()
-}
-
-function updateTheme() {
-  const buttons = Array.from(document.getElementsByClassName('theme-toggle'))
-  switch (currentTheme) {
+function activateTheme(theme) {
+  localStorage.setItem('currentTheme', theme);
+  [...themeSelectors].forEach(e => e.value = theme)
+  switch (theme) {
     case 'light':
       pydocthemeDark.media = 'not all'
       pygmentsDark.media = 'not all'
-      buttons.forEach(e => e.value = "Toggle theme (light)")
       break;
     case 'dark':
       pydocthemeDark.media = 'all'
       pygmentsDark.media = 'all'
-      buttons.forEach(e => e.value = "Toggle theme (dark)")
       break;
     default:
       // auto
       pydocthemeDark.media = '(prefers-color-scheme: dark)'
       pygmentsDark.media = '(prefers-color-scheme: dark)'
-      buttons.forEach(e => e.value = "Toggle theme (auto)")
   }
 }
+
+activateTheme(localStorage.getItem('currentTheme') || 'auto')