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
981 stars 112 forks source link

Buggy Search Bar when `SERVER_BASED_SEARCH=YES` #68

Closed McSnipe97 closed 2 years ago

McSnipe97 commented 2 years ago

Doxygen version 1.9.3 Doxygen-awesome-css version 2.0.2

Seeing old search bar design over the doxygen-awesome-css search bar.

My changes:

  1. Default changes from doxygen-awesome-css tutorial.
  2. added header.html & footer.html

doxhead.html

<!-- HTML header for doxygen 1.9.4-->
<!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=11"/>
<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"/>
<!--BEGIN DISABLE_INDEX-->
  <!--BEGIN FULL_SIDEBAR-->
<script type="text/javascript">var page_layout=1;</script>

  <!--END FULL_SIDEBAR-->
<!--END DISABLE_INDEX-->
<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.lightModeIcon = '🌞'
  // icon from https://fonts.google.com/icons
  DoxygenAwesomeDarkModeToggle.darkModeIcon = `<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#009793"><g><rect fill="none" height="24" width="24"/></g><g><g><path d="M8.1,14.15C9.77,14.63,11,16.17,11,18c0,0.68-0.19,1.31-0.48,1.87c0.48,0.09,0.97,0.14,1.48,0.14 c1.48,0,2.9-0.41,4.13-1.15c-2.62-0.92-5.23-2.82-6.8-5.86C7.74,9.94,7.78,7.09,8.29,4.9c-2.57,1.33-4.3,4.01-4.3,7.1c0,0,0,0,0,0 c0.01,0,0.01,0,0.02,0C5.66,12,7.18,12.83,8.1,14.15z" opacity=".3"/><path d="M19.78,17.51c-2.47,0-6.57-1.33-8.68-5.43C8.77,7.57,10.6,3.6,11.63,2.01C6.27,2.2,1.98,6.59,1.98,12 c0,0.14,0.02,0.28,0.02,0.42C2.61,12.16,3.28,12,3.98,12c0,0,0,0,0,0c0-3.09,1.73-5.77,4.3-7.1C7.78,7.09,7.74,9.94,9.32,13 c1.57,3.04,4.18,4.95,6.8,5.86c-1.23,0.74-2.65,1.15-4.13,1.15c-0.5,0-1-0.05-1.48-0.14c-0.37,0.7-0.94,1.27-1.64,1.64 c0.98,0.32,2.03,0.5,3.11,0.5c3.5,0,6.58-1.8,8.37-4.52C20.18,17.5,19.98,17.51,19.78,17.51z"/><path d="M7,16l-0.18,0C6.4,14.84,5.3,14,4,14c-1.66,0-3,1.34-3,3s1.34,3,3,3c0.62,0,2.49,0,3,0c1.1,0,2-0.9,2-2 C9,16.9,8.1,16,7,16z"/></g></g></svg>`
  DoxygenAwesomeDarkModeToggle.init()
</script>

</head>
<body>
<!--BEGIN DISABLE_INDEX-->
  <!--BEGIN FULL_SIDEBAR-->
<div id="side-nav" class="ui-resizable side-nav-resizable"><!-- do not remove this div, it is closed by doxygen! -->
  <!--END FULL_SIDEBAR-->
<!--END DISABLE_INDEX-->

<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 id="projectrow">
  <!--BEGIN PROJECT_LOGO-->
  <td id="projectlogo"><img alt="Logo" src="$relpath^$projectlogo"/></td>
  <!--END PROJECT_LOGO-->
  <!--BEGIN PROJECT_NAME-->
  <td id="projectalign">
   <div id="projectname">$projectname<!--BEGIN PROJECT_NUMBER--><span id="projectnumber">&#160;$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>
    <div id="projectbrief">$projectbrief</div>
    </td>
   <!--END PROJECT_BRIEF-->
  <!--END !PROJECT_NAME-->
  <!--BEGIN DISABLE_INDEX-->
   <!--BEGIN SEARCHENGINE-->
     <!--BEGIN !FULL_SIDEBAR-->
    <td>$searchbox</td>
     <!--END !FULL_SIDEBAR-->
   <!--END SEARCHENGINE-->
  <!--END DISABLE_INDEX-->
 </tr>
  <!--BEGIN SEARCHENGINE-->
   <!--BEGIN FULL_SIDEBAR-->
   <tr><td colspan="2">$searchbox</td></tr>
   <!--END FULL_SIDEBAR-->
  <!--END SEARCHENGINE-->
 </tbody>
</table>
</div>
<!--END TITLEAREA-->
<!-- end header part -->

doxfoot.html

<!-- HTML footer for doxygen 1.9.4-->
<!-- 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-->
</body>

</html>
McSnipe97 commented 2 years ago

Following artifacts appear only after SERVER_BASED_SEARCH is set to YES.

jothepro commented 2 years ago

Interesting. Can you provide a link or screenshot of the problem? I've never tested the theme with server based search, so there is a real chance that it is broken.

vadz commented 2 years ago

FWIW I ran into the same problem testing this theme, but only with Doxygen 1.8.17, with 1.9.1 it looks fine.

Of course, the theme does recommend using 1.9.1, so I guess it's not really a bug (I've been testing with 1.8.17 because it's the version available in Ubuntu Focal which is currently the latest platform directly supported by GitHub Actions).

McSnipe97 commented 2 years ago

The artifact looks like this searchbar2 But it goes away if I include these 2 extra files:

  1. doxygen-awesome-sidebar-only.css
  2. doxygen-awesome-sidebar-only-darkmode-toggle.css

I'm running on Doxygen 1.9.3

jothepro commented 2 years ago

I was able to produce a similar result, but only with a very old version of Doxygen (v1.8.15):

Bildschirmfoto 2022-03-30 um 16 14 26

Setting just SERVER_BASED_SEARCH=YES in Doxygen 1.9.3 didn't change the appearance of the searchbar for me.

Pls try adding this custom CSS:

#MSearchBox .right, #MSearchBox .left {
  background-image: none;
}

Does this remove the artifacts? I don't really understand what's going on, but I think I'll just include this patch if it fixes the problem for you.

vadz commented 2 years ago

With 1.8.17 the CSS fix above is sufficient to remove the artefacts, but still shows the same squashed magnifying glass icon as in the screenshot above (with 1.9.3 the icon is properly round), so it still doesn't look great.

jothepro commented 2 years ago

I think this should fix the squashed icon:

.left #MSearchSelect[src$=".png"] {
   padding-left: 0
}

It's not a nice way to fix this but given the fact that most of doxygen-awesome-css is dirty workarounds, I guess it's good enough... 😆

I'll include both fixes in the theme soon. 👍

vadz commented 2 years ago

I can confirm that this fixes the problem with 1.8.17, thanks!

jothepro commented 2 years ago

But keep in mind that I'm still not actively testing and supporting any versions below 1.9.1, so upgrading Doxygen would still be the proper fix. ;)

@vadz For generating docs in Github Actions I can recommend this Action: mattnotmitt/doxygen-action It allows choosing a dedicated version of Doxygen.

vadz commented 2 years ago

Nice, thanks! I didn't know about this action and using it would definitely make switching to 1.9.3 easier. We still need to fix some CSS issues in our own custom stylesheet (or just drop it entirely), but we'll switch to 1.9.3 and your theme when it's done. Thanks again!

jothepro commented 2 years ago

FYI I've pushed the two patches that we discussed in this issue: https://github.com/jothepro/doxygen-awesome-css/commit/bf51192c4c9b17202a096fa7c2657f2d5fc30da3

It's not worth a fix release IMO because it only affects unsupported Doxygen versions. But it will be part of a future release, so I will close this issue for now.