You are viewing a plain text version of this content. The canonical link for it is here.
Posted to cvs@httpd.apache.org by rb...@apache.org on 2026/05/16 14:22:34 UTC
svn commit: r1934259 - in httpd/httpd/trunk/docs/manual/style: css xsl
Author: rbowen
Date: Sat May 16 14:22:34 2026
New Revision: 1934259
Log:
Adds mobile-friendly layouts and navigation to the httpd trunk docs.
Modified:
httpd/httpd/trunk/docs/manual/style/css/manual.css
httpd/httpd/trunk/docs/manual/style/xsl/common.xsl
httpd/httpd/trunk/docs/manual/style/xsl/manualpage.xsl
httpd/httpd/trunk/docs/manual/style/xsl/synopsis.xsl
Modified: httpd/httpd/trunk/docs/manual/style/css/manual.css
==============================================================================
--- httpd/httpd/trunk/docs/manual/style/css/manual.css Sat May 16 12:45:03 2026 (r1934258)
+++ httpd/httpd/trunk/docs/manual/style/css/manual.css Sat May 16 14:22:34 2026 (r1934259)
@@ -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%;
+ }
+}
Modified: httpd/httpd/trunk/docs/manual/style/xsl/common.xsl
==============================================================================
--- httpd/httpd/trunk/docs/manual/style/xsl/common.xsl Sat May 16 12:45:03 2026 (r1934258)
+++ httpd/httpd/trunk/docs/manual/style/xsl/common.xsl Sat May 16 14:22:34 2026 (r1934259)
@@ -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 = '☰';
+ 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>
Modified: httpd/httpd/trunk/docs/manual/style/xsl/manualpage.xsl
==============================================================================
--- httpd/httpd/trunk/docs/manual/style/xsl/manualpage.xsl Sat May 16 12:45:03 2026 (r1934258)
+++ httpd/httpd/trunk/docs/manual/style/xsl/manualpage.xsl Sat May 16 14:22:34 2026 (r1934259)
@@ -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']" />
Modified: httpd/httpd/trunk/docs/manual/style/xsl/synopsis.xsl
==============================================================================
--- httpd/httpd/trunk/docs/manual/style/xsl/synopsis.xsl Sat May 16 12:45:03 2026 (r1934258)
+++ httpd/httpd/trunk/docs/manual/style/xsl/synopsis.xsl Sat May 16 14:22:34 2026 (r1934259)
@@ -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']" />