]> git.ipfire.org Git - thirdparty/apache/httpd.git/commitdiff
Mobile-responsive docs: viewport meta, responsive CSS, quickview hamburger menu,...
authorRich Bowen <rbowen@apache.org>
Sun, 17 May 2026 22:05:40 +0000 (22:05 +0000)
committerRich Bowen <rbowen@apache.org>
Sun, 17 May 2026 22:05:40 +0000 (22:05 +0000)
git-svn-id: https://svn.apache.org/repos/asf/httpd/httpd/branches/2.4.x@1934321 13f79535-47bb-0310-9956-ffa450edef68

15 files changed:
docs/manual/style/css/manual.css
docs/manual/style/lang/da.xml
docs/manual/style/lang/de.xml
docs/manual/style/lang/en.xml
docs/manual/style/lang/fr.xml
docs/manual/style/lang/ja.xml
docs/manual/style/lang/ko.xml
docs/manual/style/lang/pt-br.xml
docs/manual/style/lang/ru.xml
docs/manual/style/lang/tr.xml
docs/manual/style/lang/zh-cn.xml
docs/manual/style/xsl/common.xsl
docs/manual/style/xsl/manualpage.xsl
docs/manual/style/xsl/synopsis.xsl
docs/manual/style/xsl/util/para.xml [new file with mode: 0644]

index 57b5e7d230f655dfc37209d1a0ac977af93b981d..9eb7979cbbb3ae1447913ed5c167ac462417617a 100644 (file)
@@ -695,17 +695,6 @@ div#page-header img {
     height: 70px;
 }
 
-div#quickview a.badge {
-    /* Temporary hack for the Support Apache badge */
-    background-color: transparent;
-}
-
-div#quickview a.badge img {
-    /* Temporary hack for the Support Apache badge */
-    width: 95px;
-    height: 95px;
-}
-
 div#page-header p.apache {
     background-color: #405871;
     color: #fff;
@@ -1043,6 +1032,209 @@ p.figure dfn {
     font-weight: bold;
 }
 
+/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+ * Permalink are used in <h2> tags only.
+ * They are hidden by default, and become visible only when the mouse
+ * is over the corresponding element.
+ * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
+.permalink {
+    visibility: hidden;
+}
+.permalink:link {
+   color: white;
+}
+.permalink:visited {
+   color: white;
+}
+h2:hover > .permalink {
+    visibility: visible;
+}
+
 /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  * -> The End <-
  * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
+
+/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+ * Responsive / Mobile
+ * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
+
+/* Globe toggle - hidden on desktop */
+.lang-toggle {
+    display: none;
+}
+
+/* Quickview toggle - hidden on desktop */
+.qv-toggle {
+    display: none;
+}
+
+/* Tablet breakpoint */
+@media (max-width: 900px) {
+    div.section,
+    div.directive-section {
+        margin-left: 30px;
+    }
+}
+
+/* Mobile breakpoint */
+@media (max-width: 768px) {
+    body {
+        padding: 0 0.5em;
+    }
+
+    div#page-header {
+        margin-left: 0;
+        background-color: #405871;
+        padding: 5px 0 8px;
+    }
+
+    div#page-header p.apache {
+        padding: 0 10px;
+        text-align: center;
+    }
+
+    div#page-header p.menu {
+        display: none;
+    }
+
+    /* Language toggle: hidden by default, shown on globe click */
+    .toplang {
+        display: none;
+        margin: 0.5em 0;
+        padding: 0 10px;
+    }
+
+    .toplang.open {
+        display: block;
+    }
+
+    .toplang p {
+        font-size: 11px;
+        text-align: center;
+    }
+
+    .lang-toggle {
+        display: inline-block;
+        background: #557697;
+        color: #fff;
+        border: none;
+        font-size: 12px;
+        cursor: pointer;
+        padding: 4px 10px;
+        border-radius: 3px;
+    }
+
+    div#page-header img {
+        width: 100%;
+        max-width: 248px;
+        height: auto;
+        margin: 0 auto;
+        display: block;
+    }
+
+    div#preamble {
+        margin-left: 0;
+    }
+
+    div.section,
+    div.directive-section {
+        margin: 0;
+        padding: 0;
+    }
+
+    div#path {
+        margin-left: 0;
+    }
+
+    div#page-content {
+        margin-left: 0;
+        margin-right: 0;
+        padding-right: 0;
+    }
+
+    div#footer {
+        margin-left: 0;
+    }
+
+    div.note,
+    div.example,
+    div.warning {
+        margin-left: 0;
+        margin-right: 0;
+    }
+
+    #quickview {
+        position: absolute !important;
+        right: 0;
+        width: 75%;
+        max-width: 300px;
+        max-height: 80vh;
+        overflow-y: auto;
+        margin: 0;
+        padding: 12px;
+        display: none;
+        background-color: #f0f0f0;
+        border-radius: 4px 0 0 4px;
+        box-shadow: -2px 2px 8px rgba(0,0,0,0.3);
+        z-index: 1000;
+    }
+
+    #quickview.open {
+        display: block;
+    }
+
+    .qv-toggle {
+        display: block;
+        position: fixed;
+        top: 10px;
+        right: 10px;
+        z-index: 1001;
+        background: #557697;
+        color: #fff;
+        border: none;
+        font-size: 14px;
+        padding: 6px 10px;
+        border-radius: 4px;
+        cursor: pointer;
+        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+    }
+
+    .qv-toggle:hover {
+        background: #405871;
+    }
+
+    div#directive-ref {
+        padding-left: 0;
+    }
+
+    div#directive-list {
+        margin-left: 0;
+    }
+
+    /* Prevent tables from overflowing */
+    table {
+        display: block;
+        overflow-x: auto;
+        max-width: 100%;
+    }
+
+    /* Front page: stack the 3-column layout */
+    table#indextable,
+    table#indextable td {
+        display: block;
+        width: 100%;
+        border-left: none;
+        padding: 0;
+    }
+
+    table#indextable td {
+        border-top: 1px solid #aaa;
+        padding: 0.5em 0;
+    }
+
+    /* Prevent code blocks from overflowing */
+    pre {
+        overflow-x: auto;
+        max-width: 100%;
+    }
+}
index 7483e7cdf795697d7beef421504c6e63685d43bd..880f7359ddac71eefc17d38b8f19205de8b06020 100644 (file)
         <message id="retired.current">Current release version of Apache HTTP Server documentation</message>
         <message id="retired.document">You may follow <link>this link</link> to go to the current version of this document.</message>
 
+        <message id="permalink">Permanent link</message>
+
     </messages>
 </language>
 
index 234563df35e99571a2a6b3d5cc92d99565185320..8b5c3b4a5997c445fd2b2e7561d56653b1c07c51 100644 (file)
         <message id="retired.current">Dokumentation des Apache HTTP Server f&#252;r die zuletzt erschienene Version</message>
         <message id="retired.document">Sie können <link>diesem Link</link> folgen, um zur aktuellen Version dieses Dokuments zu gelangen.</message>
 
+        <message id="permalink">Permanent link</message>
+
     </messages>
 </language>
index 9a135b0b08a5ac793536e225c972d9a6c02b8f30..fef3d2260e618322cde1aed0b306d54491f4200b 100644 (file)
         <message id="retired.current">Current release version of Apache HTTP Server documentation</message>
         <message id="retired.document">You may follow <link>this link</link> to go to the current version of this document.</message>
 
+        <message id="permalink">Permanent link</message>
+
     </messages>
 </language>
index 339f2b79f5b914629f0999e3192d9ffe91b7bca6..4f3d605f6ccb5895eb887ba4938587047ffa3e7c 100644 (file)
@@ -1,4 +1,6 @@
-<?xml version="1.0" encoding="UTF-8"?>
+
+        <message id="permalink">Lien permanent</message>
+
 <!DOCTYPE language SYSTEM "../lang.dtd">
 <!-- English revision: 1824187 -->
 
index 56e3072d71da78507a17f7d08e54bbfc6b68b28f..e7564cf78701fd24764373fff6afb0501ed98000 100644 (file)
         <message id="retired.current">Current release version of Apache HTTP Server documentation</message>
         <message id="retired.document">You may follow <link>this link</link> to go to the current version of this document.</message>
 
+        <message id="permalink">Permanent link</message>
+
     </messages>
 </language>
index 90de25e6770cbc0fa06a69c7694e2f46f5d56d5f..68bf4c1f636eea076d71a104da0f2c507df478a4 100644 (file)
         <message id="retired.current">Current release version of Apache HTTP Server documentation</message>
         <message id="retired.document">You may follow <link>this link</link> to go to the current version of this document.</message>
 
+        <message id="permalink">Permanent link</message>
+
     </messages>
 </language>
index 4000b87ceabe21c584f22c7def08a70565e8bd6f..d373e413314fb4804cb78a131b0425e608b34f7c 100644 (file)
         <message id="retired.current">Versão atual da documentação do Servidor HTTP Apache</message>
         <message id="retired.document">Siga <link>este atalho</link> para a versão atual deste documento.</message>
 
+        <message id="permalink">Permanent link</message>
+
     </messages>
 </language>
index fa21d799aa5a177eea4043b9f18587182abab850..14bfb5f4cec8aa7ff03594fa35b7398a950e2283 100644 (file)
         <message id="retired.current">Current release version of Apache HTTP Server documentation</message>
         <message id="retired.document">You may follow <link>this link</link> to go to the current version of this document.</message>
 
+        <message id="permalink">Permanent link</message>
+
     </messages>
 </language>
index 19d172039501d2164c27021964ef11388b2df9d3..7fe940b3d9a4d1a64ac934e1339ecf68c70669b8 100644 (file)
@@ -1,4 +1,6 @@
-<?xml version="1.0" encoding="UTF-8"?>
+
+        <message id="permalink">Permanent link</message>
+
 <!DOCTYPE language SYSTEM "../lang.dtd">
 <!-- English Revision: 1824187  -->
 <!-- =====================================================
index 498305297463e08c4d6f16378ee2cdcce2e4e5f8..09b216e8e7947ec9a7cdb82b82bb907ce20cc8d9 100644 (file)
         <message id="retired.current">Current release version of Apache HTTP Server documentation</message>
         <message id="retired.document">You may follow <link>this link</link> to go to the current version of this document.</message>
 
+        <message id="permalink">Permanent link</message>
+
     </messages>
 </language>
index e549fda1e4563e4dc22aeb4939f90e0fec36d035..7aa978fe81a9f4a1145bc3fcf78ed0e00978b966 100644 (file)
@@ -19,6 +19,7 @@
 
 <!DOCTYPE xsl:stylesheet [
     <!ENTITY nbsp SYSTEM "util/nbsp.xml">
+    <!ENTITY para SYSTEM "util/para.xml">
     <!ENTITY lf SYSTEM "util/lf.xml">
     <!ENTITY % HTTPD-VERSION SYSTEM "../version.ent">
     %HTTPD-VERSION;
     &lf;
     <meta http-equiv="Content-Type"
           content="text/html; charset={$output-encoding}" />&lf;
+    <meta name="viewport" content="width=device-width, initial-scale=1" />&lf;
     <xsl:if test="not($is-chm or $is-zip)">
         <xsl:comment>
             &lf;
 if (typeof(prettyPrint) !== 'undefined') {
     prettyPrint();
 }
+var langToggle = document.querySelector('.lang-toggle');
+var topLang = document.querySelector('.toplang');
+if (langToggle && topLang) {
+    langToggle.addEventListener('click', function() { topLang.classList.toggle('open'); });
+}
+var qv = document.getElementById('quickview');
+if (qv) {
+    document.body.appendChild(qv);
+    var qvBtn = document.createElement('button');
+    qvBtn.className = 'qv-toggle';
+    qvBtn.setAttribute('aria-label', 'Toggle page navigation');
+    qvBtn.innerHTML = '&#9776;';
+    document.body.appendChild(qvBtn);
+    qvBtn.addEventListener('click', function() {
+        var isOpen = qv.classList.toggle('open');
+        if (isOpen) {
+            qv.style.top = window.scrollY + 10 + 'px';
+        }
+    });
+    window.addEventListener('scroll', function() { qv.classList.remove('open'); });
+}
 //--><!]]]]>></xsl:text></script>
 </xsl:template>
 <!-- /bottom -->
@@ -432,6 +455,7 @@ if (typeof(prettyPrint) !== 'undefined') {
 <xsl:param name="position" select="'top'" />
 
 <xsl:if test="not($is-chm or $is-zip)">
+<xsl:if test="$position = 'top'"><button class="lang-toggle" aria-label="Toggle language list"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg></button>&lf;</xsl:if>
 <div class="{$position}lang">&lf;
     <p>
         <span>
@@ -496,6 +520,8 @@ if (typeof(prettyPrint) !== 'undefined') {
           <a id="{@id}" name="{@id}">
               <xsl:apply-templates select="title" mode="print" />
           </a>
+          <xsl:text> </xsl:text>
+          <a class="permalink" href="#{@id}" title="{$message[@id='permalink']}">&para;</a>
         </xsl:when>
 
         <xsl:otherwise>
@@ -514,7 +540,7 @@ if (typeof(prettyPrint) !== 'undefined') {
 <!-- ==================================================================== -->
 <!-- handle subsections (lower level headings)                            -->
 <!-- ==================================================================== -->
-<xsl:template match="section/section">
+<xsl:template match="section/section" priority="3">
 <!-- Section heading -->
 <h3>
     <xsl:choose>
@@ -539,7 +565,7 @@ if (typeof(prettyPrint) !== 'undefined') {
 <!-- ==================================================================== -->
 <!-- handle subsubsections (h4)                                           -->
 <!-- ==================================================================== -->
-<xsl:template match="section/section/section">
+<xsl:template match="section/section/section" priority="4">
 <!-- Section heading -->
 <h4>
     <xsl:choose>
@@ -705,7 +731,7 @@ if (typeof(prettyPrint) !== 'undefined') {
 
     <xsl:text> | </xsl:text>
 
-    <a href="{$path}/mod/directives.html">
+    <a href="{$path}/mod/quickreference.html">
         <xsl:value-of select="$message[@id='directives']" />
     </a>
 
@@ -878,6 +904,13 @@ if (typeof(prettyPrint) !== 'undefined') {
         </xsl:variable>
 
         <xsl:choose>
+        <!-- No link if within the block that describes the directive itself -->
+        <xsl:when test="$in-modulesynopsis and normalize-space(.) = ancestor::directivesynopsis/name">
+                <xsl:if test="@type='section'">&lt;</xsl:if>
+                <xsl:value-of select="."/>
+                <xsl:if test="@type='section'">&gt;</xsl:if>
+                <xsl:message>Removing link to '<xsl:value-of select="."/>'</xsl:message>
+        </xsl:when>
         <xsl:when test="$in-modulesynopsis and normalize-space(@module) = /modulesynopsis/name">
             <a href="#{$lowerdirective}">
                 <xsl:if test="@type='section'">&lt;</xsl:if>
@@ -899,6 +932,17 @@ if (typeof(prettyPrint) !== 'undefined') {
         <xsl:if test="@type='section'">&lt;</xsl:if>
         <xsl:value-of select="."/>
         <xsl:if test="@type='section'">&gt;</xsl:if>
+        <!-- Missing module reference -->
+        <xsl:choose>
+            <!-- within another directive synopsis -->
+            <xsl:when test="normalize-space(.) != ancestor::directivesynopsis/name">
+                <xsl:message>link to '<xsl:value-of select="."/>' directive could be added in directive '<xsl:value-of select="ancestor::directivesynopsis/name"/>'</xsl:message>
+            </xsl:when>
+            <!-- somewhere else (try to find module name to give a hint) -->
+            <xsl:when test="not(ancestor::directivesynopsis/name)">
+                <xsl:message>link to '<xsl:value-of select="."/>' directive could be added in MODULE '<xsl:value-of select="/modulesynopsis/name"/>'</xsl:message>
+            </xsl:when>
+        </xsl:choose>
     </xsl:otherwise>
     </xsl:choose>
 </code>
@@ -1262,11 +1306,7 @@ if (typeof(prettyPrint) !== 'undefined') {
     <xsl:text>Is the document valid (try `build validate-xml`)?</xsl:text>
 </xsl:message>
 </xsl:template>
-<xsl:template match="@*">
-<xsl:copy>
-    <xsl:apply-templates select="*|@*|text()" />
-</xsl:copy>
-</xsl:template>
+<xsl:template match="@*"><xsl:copy /></xsl:template>
 <xsl:template match="br"><br /></xsl:template>
 <xsl:template match="tr"><tr><xsl:apply-templates select="*|@*|text()" /></tr></xsl:template>
 <xsl:template match="th"><th><xsl:apply-templates select="*|@*|text()" /></th></xsl:template>
index 36967515789318ffdf1dd6564dc8e0c2630a8074..70a6d0a24d23d8e1a1560ce80ad177d78cf59de7 100644 (file)
 
             <xsl:if test="(not($is-chm) and count(section) > 1) or seealso">
                 <div id="quickview">
-
-<!-- Support Apache logo and link -->
-                    <a class="badge" href="https://www.apache.org/foundation/contributing.html">
-                        <img alt="Support Apache!" src="https://www.apache.org/images/SupportApache-small.png" />
-                    </a>
-<!-- /Support Apache -->
-
                     <xsl:if test="not($is-chm) and count(section) > 1">
                         <ul id="toc">
                         <xsl:apply-templates select="section" mode="index" />
                         </ul>
                     </xsl:if>
 
-                    <!-- The seealso section shows links to related documents
+                     <!-- The seealso section shows links to related documents
                          explicitly set in .xml docs or simply the comments. -->
-                    <xsl:if test="seealso or not($is-chm or $is-zip or
-                                                $metafile/basename = 'index')">
+                    <xsl:if test="seealso">
                         <h3>
                             <xsl:value-of
                                 select="$message[@id='seealso']" />
@@ -83,7 +75,6 @@
                             </li>
                         </xsl:for-each>
                         </ul>
-
                     </xsl:if>
                 </div>&lf; <!-- /#quickview -->
             </xsl:if>
index 7efa4eaf213795ef7c98a01ffa07ba7b00f9b99a..35e728e6a2ba13d89ee8634eded4abbafe18171b 100644 (file)
@@ -19,6 +19,7 @@
 
 <!DOCTYPE xsl:stylesheet [
     <!ENTITY lf SYSTEM "util/lf.xml">
+    <!ENTITY para SYSTEM "util/para.xml">
 ]>
 <xsl:stylesheet version="1.0"
               xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
 
             <xsl:if test="not($is-chm) or seealso">
                 <div id="quickview">
-
-<!-- Support Apache logo and link -->
-                    <a class="badge" href="https://www.apache.org/foundation/contributing.html">
-                        <img alt="Support Apache!" src="https://www.apache.org/images/SupportApache-small.png" />
-                    </a>
-<!-- /Support Apache -->
-
                     <xsl:if test="not($is-chm)">
                         <xsl:if test="section">
                             <h3>
                             </a>
                         </li>
                         <li>
-                            <!-- Bugzilla mpm components are prefixed with
-                                'mpm_', meanwhile the page name in the docs do
-                                not contain it. For example, Bugzilla has
-                                the 'mpm_event' component and the doc has the
-                                'event' page. This creates an inconsistency
-                                in the URL generation, fixed by the following
-                                check. -->
-                            <xsl:variable name="bugzilla_prefix">
-                                <xsl:choose>
-                                    <xsl:when test="name='worker' or name='event'
-                                                    or name='prefork'">
-                                        <xsl:value-of select="string('mpm_')"/>
-                                    </xsl:when>
-                                </xsl:choose>
-                            </xsl:variable>
-
                             <!-- The line below is not split into multiple
                                  lines to avoid rendering a broken URL. -->
                             <a href="https://bz.apache.org/bugzilla/buglist.cgi?bug_status=__open__&amp;list_id=144532&amp;product=Apache%20httpd-2&amp;query_format=specific&amp;order=changeddate%20DESC%2Cpriority%2Cbug_severity&amp;component={$bugzilla_prefix}{name}">
                     </ul>
                     <!-- The seealso section shows links to related documents
                          explicitly set in .xml docs or simply the comments. -->
-                    <xsl:if test="seealso or not($is-chm or $is-zip or
-                                                $metafile/basename = 'index')">
+                    <xsl:if test="seealso">
                         <h3>
                             <xsl:value-of select="$message
                                                   [@id='seealso']" />
                          is repeated.
                      -->
                     <xsl:choose>
-                        <xsl:when test="current()[@type='section']">
+                        <xsl:when test="@type='section'">
                             <xsl:apply-templates select="$this[name=current()/name and @type='section']" />
                         </xsl:when>
                         <xsl:otherwise>
                 </a>
             </xsl:otherwise>
             </xsl:choose>
+        <xsl:text> </xsl:text>
+        <a class="permalink" href="#{$lowername}" title="{$message[@id='permalink']}">&para;</a>
         </h2>&lf;
 
         <!-- Directive header -->
diff --git a/docs/manual/style/xsl/util/para.xml b/docs/manual/style/xsl/util/para.xml
new file mode 100644 (file)
index 0000000..f02d643
--- /dev/null
@@ -0,0 +1,3 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<xsl:text disable-output-escaping="yes" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">&amp;para;</xsl:text>