search

jothepro / doxygen-awesome-css

Custom CSS theme for doxygen html-documentation with lots of customization parameters.
https://jothepro.github.io/doxygen-awesome-css/
MIT License
956 stars 108 forks source link

My page framework overflow after upgrade to 2.1.0 #92

Closed Nambers closed 1 year ago

Nambers commented 1 year ago

The search box and darkmode toggle buttom: image image the footer(can be fix by disable position: fixed): image image BUT, it work well in mobile view: image And it was look like this: image Do I miss some configuration? :/

Nambers commented 1 year ago

Header:

<!-- HTML header for doxygen 1.9.1-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/xhtml;charset=UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=9"/>
<meta name="generator" content="Doxygen $doxygenversion"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<!--BEGIN PROJECT_NAME--><title>$projectname: $title</title><!--END PROJECT_NAME-->
<!--BEGIN !PROJECT_NAME--><title>$title</title><!--END !PROJECT_NAME-->
<link href="$relpath^tabs.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="$relpath^jquery.js"></script>
<script type="text/javascript" src="$relpath^dynsections.js"></script>
$treeview
$search
$mathjax
<link href="$relpath^$stylesheet" rel="stylesheet" type="text/css" />
$extrastylesheet
<script type="text/javascript" src="$relpath^doxygen-awesome-darkmode-toggle.js"></script>
 <script type="text/javascript">
      DoxygenAwesomeDarkModeToggle.init()
</script>
</head>
<body>
<a href="<github link>" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#64CEAA; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
<div id="top"><!-- do not remove this div, it is closed by doxygen! -->

<!--BEGIN TITLEAREA-->
<div id="titlearea">
<table cellspacing="0" cellpadding="0">
 <tbody>
 <tr style="height: 56px;">
  <!--BEGIN PROJECT_LOGO-->
  <td id="projectlogo"><img alt="Logo" src="$relpath^$projectlogo"/></td>
  <!--END PROJECT_LOGO-->
  <!--BEGIN PROJECT_NAME-->
  <td id="projectalign" style="padding-left: 0.5em;">
   <div id="projectname">$projectname
   <!--BEGIN PROJECT_NUMBER-->&#160;<span id="projectnumber">$projectnumber</span><!--END PROJECT_NUMBER-->
   </div>
   <!--BEGIN PROJECT_BRIEF--><div id="projectbrief">$projectbrief</div><!--END PROJECT_BRIEF-->
  </td>
  <!--END PROJECT_NAME-->
  <!--BEGIN !PROJECT_NAME-->
   <!--BEGIN PROJECT_BRIEF-->
    <td style="padding-left: 0.5em;">
    <div id="projectbrief">$projectbrief</div>
    </td>
   <!--END PROJECT_BRIEF-->
  <!--END !PROJECT_NAME-->
  <!--BEGIN DISABLE_INDEX-->
   <!--BEGIN SEARCHENGINE-->
   <td>$searchbox</td>
   <!--END SEARCHENGINE-->
  <!--END DISABLE_INDEX-->
 </tr>
 </tbody>
</table>
</div>
<!--END TITLEAREA-->
<!-- end header part -->

Footer.html

<!-- HTML footer for doxygen 1.9.1-->
<!-- start footer part -->
<!--BEGIN GENERATE_TREEVIEW-->
<div id="nav-path" class="navpath"><!-- id is needed for treeview function! -->
  <ul>
    $navpath
    <li class="footer">$generatedby <a href="https://www.doxygen.org/index.html"><img class="footer" src="$relpath^doxygen.svg" width="104" height="31" alt="doxygen"/></a> $doxygenversion </li>
  </ul>
</div>
<!--END GENERATE_TREEVIEW-->
<!--BEGIN !GENERATE_TREEVIEW-->
<hr class="footer"/><address class="footer"><small>
$generatedby&#160;<a href="https://www.doxygen.org/index.html"><img class="footer" src="$relpath^doxygen.svg" width="104" height="31" alt="doxygen"/></a> $doxygenversion
</small></address>
<!--END !GENERATE_TREEVIEW-->
<script type="text/javascript">
            $(function() {
              toggleButton = document.createElement('doxygen-awesome-dark-mode-toggle')
              toggleButton.title = "Toggle Light/Dark Mode"

              $(document).ready(function(){
                document.getElementById("MSearchBox").parentNode.appendChild(toggleButton)
              })
              $(window).resize(function(){
                document.getElementById("MSearchBox").parentNode.appendChild(toggleButton)
              })
            })
        </script>
    </body>
</html>
Nambers commented 1 year ago

@jothepro Need some help. ToT I will try to download some old version files and replaces those to try to fix this.

jothepro commented 1 year ago

I'm sorry for not responding about your problem yet. I will investigate this asap!

Nambers commented 1 year ago

update: v2.0.3 work for me

jothepro commented 1 year ago

I was able to reproduce a similar artifact like yours when changing the order of the CSS-files given to HTML_EXTRA_STYLESHEET in the Doxyfile. Make sure that doxygen-awesome.css is the first file referenced!

HTML_EXTRA_STYLESHEET  = doxygen-awesome.css \
                         doxygen-awesome-sidebar-only.css # <--- make sure this comes second!

Pls let me know if this fixes your problem.

Another thing that I noticed: Make sure to remove the old toggle initialization logic in your footer.html. Rn it looks like you initialize the dark mode toggle twice.

Nambers commented 1 year ago

I was able to reproduce a similar artifact like yours when changing the order of the CSS-files given to HTML_EXTRA_STYLESHEET in the Doxyfile. Make sure that doxygen-awesome.css is the first file referenced!

HTML_EXTRA_STYLESHEET  = doxygen-awesome.css \
                         doxygen-awesome-sidebar-only.css # <--- make sure this comes second!

Pls let me know if this fixes your problem.

Another thing that I noticed: Make sure to remove the old toggle initialization logic in your footer.html. Rn it looks like you initialize the dark mode toggle twice.

thx, I believe all things work properly now. except this button. image

Feel free to check in here btw, this proj is awesome for me, although I don't know how to expand a macro in cpp file normally by Doxygen.

jothepro commented 1 year ago

Thx for providing the link! It's always nice to see the theme in action! 😊 What's the problem with the button? It's actually supposed to be there, lgtm.

Nambers commented 1 year ago

Thx for providing the link! It's always nice to see the theme in action! 😊 What's the problem with the button? It's actually supposed to be there, lgtm.

After I clicked that button, nothing change in the page. Do it suppose to do something? XD

Nambers commented 1 year ago

Oh nvm, I see what that button suppose to do. And it work properly.