Files
CMake/Utilities/Sphinx/templates/layout.html
Nikita Nemkin 3822e95aee Help: Add responsive layout for small screens
These changes activate only on small screens, where "small" is defined
as <=760px, i.e. anything smaller than iPad Mini.

* Turn the sidebar into a popup (on the right) and add a hamburger
  button in the header to show it.
* Split the header and footer into two lines, make the header sticky.
* Remove the prev/next links from the header.
* Put the search box first in the sidebar.
* Disable horizontal scroll of the page, enable individual scrolling
  for h1, table. (Code blocks already have it).
* Allow line breaking of overly long words in the document body.
* Adjust various margins.

The sidebar popup works without JavaScript (using the "checkbox hack"),
but a bit of JavaScript is added to enable automatic closing on Esc,
on a link click and on document navigation.
2025-02-02 23:33:17 +05:00

85 lines
2.8 KiB
HTML

{% extends "!layout.html" %}
{% block rootrellink %}
<li>
<label class="sidebar-toggle" for="sidebar-check"></label>
</li>
<li class="rootlink">
<img src="{{ pathto('_static/cmake-logo-16.png', 1) }}" width="16" height="16" alt=""/>
{%- if versionswitch is defined %}
<a href="https://cmake.org/">CMake</a> <span class="version_switch">{{ release }}</span>
{%- else %}
<a href="https://cmake.org/">CMake {{ release }}</a>
{%- endif %}
<span class="reldelim1">{{ reldelim1 }}</span>
</li>
<li>
<a href="{{ pathto(master_doc) }}">{% trans %}Documentation{% endtrans %}</a>{{ reldelim1 }}
</li>
{% endblock %}
{%- block relbar1 %}
{{ super()|replace('class="related"', 'class="related relbar1"') }}
{%- if outdated is defined %}
<div class="outdated">
This documents an old version of CMake.
<a href="https://cmake.org/cmake/help/latest/{{ pagename }}.html">
Click here to see the latest release.
</a>
<span class="version_switch_note"></span>
</div>
{%- endif %}
{%- endblock %}
{% block extrahead %}
{%- if opensearch is defined %}
<link rel="search" type="application/opensearchdescription+xml"
title="Search within CMake Documentation of Latest Version"
href="{{ pathto('../latest-opensearch.xml', 1) }}"/>
{%- endif %}
{%- if versionswitch is defined %}
<script type="text/javascript" src="{{ pathto('../version_switch.js', 1) }}"></script>
{%- endif %}
{{ super() }}
{% endblock %}
{# Put some context in the html title element. Workaround for #}
{# https://bitbucket.org/birkenfeld/sphinx/issue/1492/qthelp-generate-html-title-element-should #}
{% block htmltitle %}
<title>{{ title|striptags|e }} {{ "&mdash;"|safe }} {{ docstitle|e }}</title>
{% endblock %}
{%- block header %}
{%- if render_sidebar %}
<input id="sidebar-check" type="checkbox" />
<label id="sidebar-overlay" for="sidebar-check"></label>
{%- endif %}
{{ super() }}
{% endblock %}
{%- block footer %}
{{ super() }}
{%- if googleanalytics is defined %}
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-6042509-4");
pageTracker._trackPageview();
} catch(err) {}
</script>
{%- endif %}
{%- if render_sidebar %}
<script type="text/javascript">
(function() {
"use strict";
const hide = () => document.getElementById("sidebar-check").checked = false;
addEventListener("keydown", e => (e.key === "Escape") && hide());
addEventListener("click", e => (e.target.tagName === "A") && hide());
addEventListener("hashchange", hide)
})();
</script>
{%- endif %}
{%- endblock %}