First pass at double header display

5 years ago · 33a4388e6e
5 changed files with 199 additions and 43 deletions
--- a/docs/_static/custom.js
+++ b/docs/_static/custom.js
@ -21,6 +21,10 @@ function openModal(modal) {
  modal.hidden = false;
 }

+function changeDocumentation(element) {
+  window.location = element.value;
+}
+
 function updateSetting(element) {
  localStorage.setItem(element.name, element.checked);
  if (element.name in settings) {
--- a/docs/_static/style.css
+++ b/docs/_static/style.css
@ -19,7 +19,12 @@ Historically however, thanks to:
 /* CSS variables would go here */
 :root {
  --font-family: 'Georgia', 'Yu Gothic', 'Noto Sans CJK JP Regular', serif;
-
+  --primary-accent: #0a0a0a;
+  --secondary-accent: #171717;
+  --primary-text: #fff;
+  --secondary-text: #fff;
+  --settings: #fff;
+  --settings-hover: #ccc;
  --main-background: #fff;
  --link-text: #2591c4;
  --link-hover-text: #0b3a44;
@ -32,7 +37,12 @@ Historically however, thanks to:
  --nav-text: #444;
  --nav-hover-text: #444;
  --nav-header-text: #333;
-  --search-border: #ccc;
+  --search-border: #5a5a5c;
+  --search-background: #171717;
+  --search-text: #fff;
+  --search-focus: #3399ff;
+  --search-button: #b1b1b1;
+  --search-button-hover: #686868;
  --footer-text: #555;
  --footer-link: #444;
  --hr-border: #b1b4b6;
@ -83,7 +93,6 @@ Historically however, thanks to:
  --nav-text: rgba(255,255,255,0.7);
  --nav-hover-text: rgba(255,255,255,0.5);
  --nav-header-text: rgba(255,255,255,0.87);
-  --search-border: #ccc;
  --footer-text: #555;
  --footer-link: #444;
  --hr-border: #b1b4b6;
@ -161,9 +170,10 @@ body {
  min-height: 100%;
  grid-auto-rows: min-content auto min-content;
  grid-template-areas:
-    "h"
+    "n"
    "s"
    "c"
+    "h"
    "f";
 }

@ -187,11 +197,40 @@ a:hover {

 header {
  grid-area: h;
-  font-size: 90%;
-  /* does not show up on mobile */
+  background-color: var(--main-background);
+  color: var(--primary-text);
+}
+
+header > nav {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-evenly;
+}
+
+header > nav > a {
+  color: var(--primary-text);
+}
+
+.main-heading {
+  display: none;
+}
+
+.sub-header {
+  grid-area: n;
+  background-color: var(--secondary-accent);
+  color: var(--secondary-text);
+  /* not shown on mobile */
  display: none;
 }

+.sub-header > .settings {
+  color: var(--settings);
+}
+
+.sub-header > .settings:hover {
+  color: var(--settings-hover);
+}
+
 /* footer stuff */
 footer {
  grid-area: f;
@ -276,16 +315,65 @@ aside h3 {

 /* search button stuff */

-.searchformwrapper > form input, button {
+.searchwrapper {
+  display: flex;
+  align-items: stretch;
+}
+
+.searchwrapper > input[type=search] {
+  font-family: "Roboto", Corbel, Avenir, "Lucida Grande", "Lucida Sans", sans-serif;
+  font-size: 1em;
+}
+
+.searchwrapper > input[type=search],
+.searchwrapper > button[type=submit] {
+  background-color: var(--search-background);
+  border: none;
+  color: var(--search-text);
+  padding: 0.5em;
+  min-height: 2.5em;
+  flex: 9;
+}
+
+.searchwrapper {
+  border-bottom: 1px solid var(--search-border);
+}
+
+.searchwrapper:focus-within {
+  border-bottom: 1px solid var(--search-focus);
+}
+
+/* .searchwrapper > input[type=search] {
  border: 1px solid var(--search-border);
-  padding: 0.25em;
-  flex-grow: 2;
+  border-right: none;
+  border-top-left-radius: 4px;
+  border-bottom-left-radius: 4px;
 }

-.searchformwrapper > form button[type="submit"] {
+.searchwrapper > input[type=search]:focus,
+button[type=submit]:focus ~ input[type=search] {
+  border: 1px solid var(--search-focus);
+  border-right: none;
+} */
+
+.searchwrapper > button[type=submit] {
+  color: var(--search-button);
+  /* border: 1px solid var(--search-border); */
+  /* border-left: none; */
+  /* border-bottom-right-radius: 4px; */
+  /* border-top-right-radius: 4px; */
+  cursor: pointer;
+  flex: 1;
+}
+
+/* .searchwrapper > button[type=submit]:focus,
+input[type=search]:focus ~ button[type=submit] {
+  border: 1px solid var(--search-focus);
  border-left: none;
-  margin-right: 0.5em;
-  flex-grow: 8;
+} */
+
+.searchwrapper > button[type=submit]:hover {
+  background-color: var(--search-border);
 }

 /* main content area */
@ -752,7 +840,7 @@ table.docutils tbody tr td ol.last {
 }

 /* hide the welcome text */
-div#welcome-to-discord-py > h1 {
+section#welcome-to-discord-py > h1 {
  display: none;
 }

@ -773,14 +861,33 @@ div.code-block-caption {
  .main-grid {
    grid-template-areas:
      "h h h h h h"
+      "n n n n n n"
      "s c c c c c"
      "s f f f f f";
  }

  header {
+    background-color: var(--primary-accent);
+  }
+
+  header > nav {
+    justify-content: flex-end;
+  }
+
+  .main-heading {
+    margin-right: auto;
    display: unset;
  }

+  header > nav a:not(.main-heading) {
+    margin: 0 0.5em;
+  }
+
+  .sub-header {
+    display: flex;
+    align-items: center;
+  }
+
  aside {
    top: initial;
    position: initial;
@ -792,10 +899,6 @@ div.code-block-caption {
    color: var(--nav-header-text);
  }

-  header > nav {
-    float: right;
-  }
-
  #sidebar {
    display: inline-block;
    position: sticky;
@ -828,11 +931,39 @@ div.code-block-caption {
    /* sidebar takes up 20% of the inner area */
    grid-template-columns: repeat(16, 1fr);
    grid-template-areas:
-      "s s h h h h h h h h h h h h h h"
+      "h h h h h h h h h h h h h h h h"
+      "n n n n n n n n n n n n n n n n"
      "s s . . . c c c c c c c c . . ."
      "s s f f f f f f f f f f f f f f"
  }

+  header > nav {
+    margin-left: 18.75%;
+    margin-right: 18.75%;
+  }
+
+  .sub-header > label {
+    margin-left: 18.75%;
+    margin-right: 1em;
+  }
+
+  .sub-header > select {
+    margin-right: auto;
+  }
+
+  .sub-header > .settings {
+    margin-right: 18.75%;
+    margin-left: 1em;
+  }
+
+  .sub-header > .search {
+    width: 20%;
+  }
+
+  .sub-header .fa-cog {
+    font-size: 1.5em;
+  }
+
  main img {
    display: block;
    margin-left: auto;
--- a/docs/_templates/layout.html
+++ b/docs/_templates/layout.html
@ -53,43 +53,48 @@
 <body>
 {%- block header %}{% endblock %}
  <div class="main-grid">
-    {#- The relative links component #}
+    {#- The main navigation header #}
    <header class="grid-item">
      <nav>
-        <!--{%- for rellink in rellinks | reverse %}
-        <a href="{{ pathto(rellink[0])|e }}" title="{{ rellink[1]|striptags|e }}"
-           {{ accesskey(rellink[2]) }}>{{ rellink[3] }}</a> |
-        {%- endfor %}-->
-        <a title="settings" accesskey="S" onclick="openModal(settingsModal);"><i class='fas fa-cog'></i></a>
-        {#- No breadcrumbs. But if they're gonna appear they'll be here #}
+        <a href="{{ pathto(master_doc)|e }}" class="main-heading">discord.py</a>
+        <a href="https://github.com/Rapptz/discord.py">GitHub</a>
+        <a href="{{ discord_invite }}">{{ _('Discord') }}</a>
+        <a href="{{ pathto('faq') }}">FAQ</a>
+        {#- If we have more links we can put them here #}
      </nav>
    </header>
+    {#- The sub-header with search and extension related selection #}
+    <div class="sub-header grid-item">
+      <label for="documentation_select">{{ _('View Documentation For') }}</label>
+      <select id="documentation_select" onchange="changeDocumentation(this)">
+        {%- if pagename is prefixedwith 'ext/' %}
+        <option value="{{ pathto(master_doc)|e }}">discord</option>
+        {%- else %}
+        <option value="{{ pathto(pagename) }}" selected>discord</option>
+        {%- endif %}
+        {%- for ext, p in discord_extensions %}
+        <option value="{{ pathto(p + '/index')|e }}" {% if pagename is prefixedwith p %}selected{% endif %}>{{ ext }}</option>
+        {%- endfor %}
+      </select>
+      <form role="search" class="search" action="search.html" method="get">
+        <div class="searchwrapper">
+          <input type="search" name="q" placeholder="{{ _('Search documentation') }}" />
+          <button type="submit">
+            <i class="fas fa-search"></i>
+          </button>
+        </div>
+      </form>
+      <a accesskey="S" class="settings" onclick="openModal(settingsModal);"><i class='fas fa-cog'></i></a>
+    </div>
    {#- The sidebar component #}
    <aside class="grid-item">
      <span id="hamburger-toggle">
        <i class="fa fa-bars"></i>
      </span>
-      <span id="settings-toggle" onclick="openModal(settingsModal);">
+      <span id="settings-toggle" class="settings" onclick="openModal(settingsModal);">
        <i class='fas fa-cog'></i>
      </span>
      <div id="sidebar">
-        {#- This is manually unrolled from the original layout #}
-        <div id="searchbox" role="search">
-          <h3>Quick search</h3>
-          <div class="searchformwrapper">
-            <form class="search" action="search.html" method="get">
-              <input type="text" name="q" />
-              <button type="submit">
-                <i class="fas fa-search"></i>
-              </button>
-              <input type="hidden" name="check_keywords" value="yes" />
-              <input type="hidden" name="area" value="default" />
-            </form>
-          </div>
-        </div>
-        <script type="text/javascript">
-          $("#searchbox").show(0);
-        </script>
        {%- include "localtoc.html" %}
      </div>
    </aside>
--- a/docs/conf.py
+++ b/docs/conf.py
@ -144,6 +144,14 @@ html_experimental_html5_writer = True
 # a list of builtin themes.
 html_theme = 'basic'

+html_context = {
+  'discord_invite': 'https://discord.gg/r3sSKJJ',
+  'discord_extensions': [
+    ('discord.ext.commands', 'ext/commands'),
+    ('discord.ext.tasks', 'ext/tasks'),
+  ],
+}
+
 # Theme options are theme-specific and customize the look and feel of a theme
 # further.  For a list of options available for each theme, see the
 # documentation.
@ -326,3 +334,4 @@ texinfo_documents = [
 def setup(app):
  if app.config.language == 'ja':
    app.config.intersphinx_mapping['py'] = ('https://docs.python.org/ja/3', None)
+    app.config.html_context['discord_invite'] = 'https://discord.gg/nXzj3dg'
--- a/docs/extensions/builder.py
+++ b/docs/extensions/builder.py
@ -42,6 +42,12 @@ class DPYStandaloneHTMLBuilder(StandaloneHTMLBuilder):
        else:
            self.handle_page('genindex', genindexcontext, 'genindex.html')

+
+def add_custom_jinja2(app):
+    env = app.builder.templates.environment
+    env.tests['prefixedwith'] = str.startswith
+    env.tests['suffixedwith'] = str.endswith
+
 def get_builder(app):
    """This is necessary because RTD injects their own for some reason."""
    try:
@ -56,3 +62,4 @@ def get_builder(app):
 def setup(app):
    app.set_translator('html', DPYHTML5Translator, override=True)
    app.add_builder(get_builder(app), override=True)
+    app.connect('builder-inited', add_custom_jinja2)