From 8c12604a84faabf6beeef7f159692ccddcb94dc6 Mon Sep 17 00:00:00 2001 From: tttapa Date: Sat, 4 Jul 2020 16:27:59 +0200 Subject: Scalable search bar for high resolution displays (#7888) * Use SVG images for search bar icons * Update search bar CSS for high resolution displays Uses CSS shadows instead of PNG images of shadows * Limit the main-menu CSS rule to first level list #main-menu li:last-child applies to last childs of sub-lists as well #main-menu > li:last-child only applies to the top-level list --- src/htmlgen.cpp | 18 ++++---- templates/html/close.svg | 31 +++++++++++++ templates/html/htmlbase.tpl | 6 +-- templates/html/htmllayout.tpl | 6 +-- templates/html/htmltabs.tpl | 6 +-- templates/html/mag.svg | 37 ++++++++++++++++ templates/html/mag_sel.svg | 74 +++++++++++++++++++++++++++++++ templates/html/menu.js | 4 +- templates/html/search.css | 100 ++++++++++++++++++------------------------ templates/html/search.js | 2 +- 10 files changed, 205 insertions(+), 79 deletions(-) create mode 100644 templates/html/close.svg create mode 100644 templates/html/mag.svg create mode 100644 templates/html/mag_sel.svg diff --git a/src/htmlgen.cpp b/src/htmlgen.cpp index 900ea48..d869a2b 100644 --- a/src/htmlgen.cpp +++ b/src/htmlgen.cpp @@ -67,7 +67,7 @@ static void writeClientSearchBox(FTextStream &t,const char *relPath) { t << "
\n"; t << " \n"; - t << " \"\"/\n"; @@ -78,7 +78,7 @@ static void writeClientSearchBox(FTextStream &t,const char *relPath) t << " onkeyup=\"searchBox.OnSearchFieldChange(event)\"/>\n"; t << " \n"; t << " " - << "\"\"/\n"; + << "\"\"/\n"; t << " \n"; t << "
\n"; } @@ -100,7 +100,7 @@ static void writeServerSearchBox(FTextStream &t,const char *relPath,bool highlig t << "search.php"; } t << "\" method=\"get\">\n"; - t << " \"\"/\n"; + t << " \"\"/\n"; if (!highlightSearch) { t << " addImageFile("search/search_r.png"); if (serverBasedSearch) { - mgr.copyResource("mag.png",dir); - Doxygen::indexList->addImageFile("search/mag.png"); + mgr.copyResource("mag.svg",dir); + Doxygen::indexList->addImageFile("search/mag.svg"); } else { - mgr.copyResource("close.png",dir); - Doxygen::indexList->addImageFile("search/close.png"); - mgr.copyResource("mag_sel.png",dir); - Doxygen::indexList->addImageFile("search/mag_sel.png"); + mgr.copyResource("close.svg",dir); + Doxygen::indexList->addImageFile("search/close.svg"); + mgr.copyResource("mag_sel.svg",dir); + Doxygen::indexList->addImageFile("search/mag_sel.svg"); } QCString searchDirName = Config_getString(HTML_OUTPUT)+"/search"; diff --git a/templates/html/close.svg b/templates/html/close.svg new file mode 100644 index 0000000..a933eea --- /dev/null +++ b/templates/html/close.svg @@ -0,0 +1,31 @@ + + + + + + image/svg+xml + + + + + + + + diff --git a/templates/html/htmlbase.tpl b/templates/html/htmlbase.tpl index 47939fd..02741d2 100644 --- a/templates/html/htmlbase.tpl +++ b/templates/html/htmlbase.tpl @@ -100,7 +100,7 @@ $(function() {
- + @@ -111,7 +111,7 @@ $(function() { {% else %}{# !SERVER_BASED_SEARCH #}
- @@ -121,7 +121,7 @@ $(function() { onkeyup="searchBox.OnSearchFieldChange(event)"/>
diff --git a/templates/html/htmllayout.tpl b/templates/html/htmllayout.tpl index b434d0c..74d83c6 100644 --- a/templates/html/htmllayout.tpl +++ b/templates/html/htmllayout.tpl @@ -44,14 +44,14 @@ {% if config.SERVER_BASED_SEARCH %} {# server side search resources #} - {% resource 'mag.png' as 'search/mag.png' %} + {% resource 'mag.svg' as 'search/mag.svg' %} {% resource 'extsearch.js as 'search/search.js' %} {% resource 'search_functions.php' as 'search/search_functions.php' %} {% resource 'search_opensearch.php' as 'search/search_opensearch.php' %} {% else %} {# client side search resources #} - {% resource 'mag_sel.png' as 'search/mag_sel.png' %} - {% resource 'close.png' as 'search/close.png' %} + {% resource 'mag_sel.svg' as 'search/mag_sel.svg' %} + {% resource 'close.svg' as 'search/close.svg' %} {% resource 'search.js' as 'search/search.js' %} {% endif %} diff --git a/templates/html/htmltabs.tpl b/templates/html/htmltabs.tpl index e7539d9..b8632cb 100644 --- a/templates/html/htmltabs.tpl +++ b/templates/html/htmltabs.tpl @@ -35,7 +35,7 @@
- + {% if page.highlight!='search' %}
- @@ -60,7 +60,7 @@ onkeyup="searchBox.OnSearchFieldChange(event)"/> + id="MSearchCloseImg" border="0" src="{{ page.relPath }}search/close.svg" alt=""/>
diff --git a/templates/html/mag.svg b/templates/html/mag.svg new file mode 100644 index 0000000..9f46b30 --- /dev/null +++ b/templates/html/mag.svg @@ -0,0 +1,37 @@ + + + + + + image/svg+xml + + + + + + + + + diff --git a/templates/html/mag_sel.svg b/templates/html/mag_sel.svg new file mode 100644 index 0000000..03626f6 --- /dev/null +++ b/templates/html/mag_sel.svg @@ -0,0 +1,74 @@ + + + + + + + + image/svg+xml + + + + + + + + + + + diff --git a/templates/html/menu.js b/templates/html/menu.js index d18a2fe..2fe2214 100644 --- a/templates/html/menu.js +++ b/templates/html/menu.js @@ -41,9 +41,9 @@ function initMenu(relPath,searchEnabled,serverSide,searchPage,search) { $('#main-nav').children(':first').addClass('sm sm-dox').attr('id','main-menu'); if (searchEnabled) { if (serverSide) { - $('#main-menu').append('
    • '); + $('#main-menu').append('
    • '); } else { - $('#main-menu').append('
    • '); + $('#main-menu').append('
    • '); } } $('#main-menu').smartmenus(); diff --git a/templates/html/search.css b/templates/html/search.css index 859cf6a..8af75a7 100644 --- a/templates/html/search.css +++ b/templates/html/search.css @@ -1,98 +1,82 @@ /*---------------- Search Box */ -#FSearchBox { - float: left; -} - #MSearchBox { white-space : nowrap; - float: none; - margin-top: 8px; - right: 0px; - width: 170px; - height: 24px; + background: white; + border-radius: 0.65em; + box-shadow: inset 0.5px 0.5px 3px 0px #555; z-index: 102; } -#MSearchBox .left -{ - display:block; - position:absolute; - left:10px; - width:20px; - height:19px; - background:url('search_l.png') no-repeat; - background-position:right; +#MSearchBox .left { + display: inline-block; + vertical-align: middle; + height: 1.4em; } #MSearchSelect { - display:block; - position:absolute; - width:20px; - height:19px; -} - -.left #MSearchSelect { - left:4px; -} - -.right #MSearchSelect { - right:5px; + display: inline-block; + vertical-align: middle; + height: 1.4em; + padding: 0 0 0 0.3em; + margin: 0; } #MSearchField { - display:block; - position:absolute; - height:19px; - background:url('search_m.png') repeat-x; + display: inline-block; + vertical-align: middle; + width: 7.5em; + height: 1.1em; + margin: 0 0.15em; + padding: 0; + line-height: 1em; border:none; - width:115px; - margin-left:20px; - padding-left:4px; color: #909090; outline: none; - font: 9pt Arial, Verdana, sans-serif; + font-family: Arial, Verdana, sans-serif; -webkit-border-radius: 0px; + border-radius: 0px; + background: none; } -#FSearchBox #MSearchField { - margin-left:15px; -} #MSearchBox .right { - display:block; - position:absolute; - right:10px; - top:8px; - width:20px; - height:19px; - background:url('search_r.png') no-repeat; - background-position:left; + display: inline-block; + vertical-align: middle; + width: 1.4em; + height: 1.4em; } #MSearchClose { display: none; - position: absolute; - top: 4px; + font-size: inherit; background : none; border: none; - margin: 0px 4px 0px 0px; - padding: 0px 0px; + margin: 0; + padding: 0; outline: none; -} -.left #MSearchClose { - left: 6px; } -.right #MSearchClose { - right: 2px; +#MSearchCloseImg { + height: 1.4em; + padding: 0.3em; + margin: 0; } .MSearchBoxActive #MSearchField { color: #000000; } +#main-menu > li:last-child { + /* This
  • object is the parent of the search bar */ + display: flex; + justify-content: center; + align-items: center; + height: 36px; + margin-right: 1em; +} + /*---------------- Search filter selection */ #MSearchSelectWindow { diff --git a/templates/html/search.js b/templates/html/search.js index ff2b8c8..92b6094 100644 --- a/templates/html/search.js +++ b/templates/html/search.js @@ -364,7 +364,7 @@ function SearchBox(name, resultsPath, inFrame, label) if (domPopupSearchResultsWindow.style.display!='block') { var domSearchBox = this.DOMSearchBox(); - this.DOMSearchClose().style.display = 'inline'; + this.DOMSearchClose().style.display = 'inline-block'; if (this.insideFrame) { var domPopupSearchResults = this.DOMPopupSearchResults(); -- cgit v0.12