Adds mobile-friendly layouts and navigation to the httpd trunk docs.

git-svn-id: https://svn.apache.org/repos/asf/httpd/httpd/trunk@1934259 13f79535-47bb-0310-9956-ffa450edef68

diff --git a/docs/manual/style/css/manual.css b/docs/manual/style/css/manual.css
index 4b267515792e14dd87327cb1aa1072bab8ab14f2..9eb7979cbbb3ae1447913ed5c167ac462417617a 100644 (file)
--- a/docs/manual/style/css/manual.css
+++ b/docs/manual/style/css/manual.css
@@ -1053,3 +1053,188 @@ h2:hover > .permalink {
 /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  * -> 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%;
+    }
+}

diff --git a/docs/manual/style/xsl/common.xsl b/docs/manual/style/xsl/common.xsl
index 8cf6122d08fca0be27e7afdc6d0779dfe23e5c9e..0e591d27fac8336537f2f4043768f175f16b179f 100644 (file)
--- a/docs/manual/style/xsl/common.xsl
+++ b/docs/manual/style/xsl/common.xsl
@@ -108,6 +108,7 @@
     &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;
@@ -423,6 +424,27 @@
 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 -->
@@ -435,6 +457,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>

diff --git a/docs/manual/style/xsl/manualpage.xsl b/docs/manual/style/xsl/manualpage.xsl
index 66a5100a8c79bac313d4450e3aa21b05a6e568e7..70a6d0a24d23d8e1a1560ce80ad177d78cf59de7 100644 (file)
--- a/docs/manual/style/xsl/manualpage.xsl
+++ b/docs/manual/style/xsl/manualpage.xsl
@@ -63,8 +63,7 @@
 
                      <!-- 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']" />

diff --git a/docs/manual/style/xsl/synopsis.xsl b/docs/manual/style/xsl/synopsis.xsl
index cfcbb9343468978acc8a6f967d5b698cf48e768e..35e728e6a2ba13d89ee8634eded4abbafe18171b 100644 (file)
--- a/docs/manual/style/xsl/synopsis.xsl
+++ b/docs/manual/style/xsl/synopsis.xsl
@@ -292,8 +292,7 @@
                     </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']" />