From f2a005a8c431e9b8014f818d6e8fd3220c09ef36 Mon Sep 17 00:00:00 2001 From: Ruben Perez Date: Tue, 10 Oct 2023 22:36:09 +0200 Subject: [PATCH] Fixed CSS formatting for Boost docs --- doc/Jamfile | 7 +- doc/doxygen-awesome-sidebar-only.css | 116 +++++++++++++++++---------- doc/doxygen-awesome.css | 21 ----- doc/footer.html | 19 +++++ doc/header.html | 61 ++++++++++++++ 5 files changed, 158 insertions(+), 66 deletions(-) create mode 100644 doc/footer.html create mode 100644 doc/header.html diff --git a/doc/Jamfile b/doc/Jamfile index ed720b61..81212ec0 100644 --- a/doc/Jamfile +++ b/doc/Jamfile @@ -12,6 +12,8 @@ path-constant include_dir : ../include ; path-constant examples_dir : ../example ; path-constant readme : ../README.md ; path-constant layout_file : DoxygenLayout.xml ; +path-constant header : header.html ; +path-constant footer : footer.html ; local stylesheet_files = [ path.glob $(this_dir) : *.css ] ; local includes = [ path.glob-tree $(include_dir) : *.hpp *.cpp ] ; @@ -46,10 +48,13 @@ doxygen doc.html EXCLUDE_SYMBOLS=std "USE_MDFILE_AS_MAINPAGE=\"$(readme)\"" SOURCE_BROWSER=YES + "HTML_HEADER=\"$(header)\"" + "HTML_FOOTER=\"$(footer)\"" "HTML_EXTRA_STYLESHEET=$(stylesheet_arg)" HTML_TIMESTAMP=YES GENERATE_TREEVIEW=YES - FULL_SIDEBAR=NO + FULL_SIDEBAR=YES + DISABLE_INDEX=YES ENUM_VALUES_PER_LINE=0 OBFUSCATE_EMAILS=YES USE_MATHJAX=YES diff --git a/doc/doxygen-awesome-sidebar-only.css b/doc/doxygen-awesome-sidebar-only.css index 656ebbf4..bfe9916a 100644 --- a/doc/doxygen-awesome-sidebar-only.css +++ b/doc/doxygen-awesome-sidebar-only.css @@ -32,80 +32,102 @@ html { * Make sure it is wide enough to contain the page title (logo + title + version) */ --side-nav-fixed-width: 335px; - --menu-display: none; - - --top-height: 120px; - --toc-sticky-top: -25px; - --toc-max-height: calc(100vh - 2 * var(--spacing-medium) - 25px); } #projectname { white-space: nowrap; } +#page-wrapper { + height: calc(100vh - 100px); +} + +#content-wrapper { + display: flex; + flex-direction: row; + min-height: 0; +} + +#doc-content { + overflow-y: scroll; + flex: 1; + height: auto !important; +} -@media screen and (min-width: 768px) { +@media (min-width: 768px) { html { --searchbar-background: var(--page-background-color); } - #side-nav { + #sidebar-wrapper { + display: flex; + flex-direction: column; min-width: var(--side-nav-fixed-width); - max-width: var(--side-nav-fixed-width); - top: var(--top-height); - overflow: visible; + max-width: var(--side-nav-fixed-width); + background-color: var(--side-nav-background); + border-right: 1px solid rgb(222, 222, 222); } - #nav-tree, #side-nav { - height: calc(100vh - var(--top-height)) !important; + #search-box-wrapper { + display: flex; + flex-direction: row; + padding-left: 1em; + padding-right: 1em; } - #nav-tree { - padding: 0; + #MSearchBox { + flex: 1; + display: flex; + padding-left: 1em; + padding-right: 1em; } - #top { - display: block; - border-bottom: none; - height: var(--top-height); - margin-bottom: calc(0px - var(--top-height)); - max-width: var(--side-nav-fixed-width); - overflow: hidden; - background: var(--side-nav-background); + + #MSearchBox .left { + display: flex; + flex: 1; + position: static; + align-items: center; + justify-content: flex-start; + width: auto; + height: auto; } - #main-nav { - float: left; - padding-right: 0; + + #MSearchBox .right { + display: none; } - .ui-resizable-handle { - cursor: default; - width: 1px !important; - box-shadow: 0 calc(-2 * var(--top-height)) 0 0 var(--separator-color); + #MSearchSelect { + padding-left: 0.75em; + left: auto; } - #nav-path { - position: fixed; - right: 0; - left: var(--side-nav-fixed-width); - bottom: 0; + #MSearchField { + flex: 1; + position: static; width: auto; + height: auto; } - #doc-content { - height: calc(100vh - 31px) !important; - padding-bottom: calc(3 * var(--spacing-large)); - padding-top: calc(var(--top-height) - 80px); - box-sizing: border-box; - margin-left: var(--side-nav-fixed-width) !important; + #nav-tree { + height: auto !important; } - #MSearchBox { - width: calc(var(--side-nav-fixed-width) - calc(2 * var(--spacing-medium))); + #nav-sync { + display: none; } - #MSearchField { - width: calc(var(--side-nav-fixed-width) - calc(2 * var(--spacing-medium)) - 65px); + #top { + display: block; + border-bottom: none; + max-width: var(--side-nav-fixed-width); + overflow: hidden; + background: var(--side-nav-background); + } + + .ui-resizable-handle { + cursor: default; + width: 1px !important; } #MSearchResultsWindow { @@ -113,3 +135,9 @@ html { right: auto; } } + +@media (max-width: 768px) { + #sidebar-wrapper { + display: none; + } +} diff --git a/doc/doxygen-awesome.css b/doc/doxygen-awesome.css index 3bb7a290..1a51ca84 100644 --- a/doc/doxygen-awesome.css +++ b/doc/doxygen-awesome.css @@ -552,25 +552,6 @@ a.anchor { margin-top: 0; } -/* until Doxygen 1.9.4 */ -.left img#MSearchSelect { - left: 0; - user-select: none; - padding-left: 8px; -} - -/* Doxygen 1.9.5 */ -.left span#MSearchSelect { - left: 0; - user-select: none; - margin-left: 8px; - padding: 0; -} - -.left #MSearchSelect[src$=".png"] { - padding-left: 0 -} - .SelectionMark { user-select: none; } @@ -614,9 +595,7 @@ a.anchor { #MSearchField { font-size: var(--navigation-font-size); - height: calc(var(--searchbar-height) - 2px); background: transparent; - width: calc(var(--searchbar-width) - 64px); } .MSearchBoxActive #MSearchField { diff --git a/doc/footer.html b/doc/footer.html new file mode 100644 index 00000000..499f9e2b --- /dev/null +++ b/doc/footer.html @@ -0,0 +1,19 @@ + + + + + + + +
+$generatedby doxygen $doxygenversion +
+ + + + diff --git a/doc/header.html b/doc/header.html new file mode 100644 index 00000000..cbde2f8c --- /dev/null +++ b/doc/header.html @@ -0,0 +1,61 @@ + + + + + + + + +$projectname: $title +$title + + + +$treeview +$search +$mathjax + +$extrastylesheet + + +
+
+