Fixed yacy search navabar header overlapping at various screen sizes.

- using a icon-only admin button at small and medium screen size
- using a icon-only "Search Interfaces" button at small screen size
- hiding the YaCy brand at extra-small screen size

Fixes the header part of mantis 708
(http://mantis.tokeek.de/view.php?id=708).

Navigator button overlapping is still to fix.
pull/97/head
luccioman 8 years ago
parent 3f32262654
commit f37a86e1c6

@ -0,0 +1,14 @@
<!-- top navigation -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand hidden-xs" id="navbar-brand" href="#[promoteSearchPageGreeting.homepage]#" style="position:absolute;top:-6px;display:inline;white-space:nowrap;">
<img id="greeting-icon" class="yacylogo" src="#[relativeBase]##[promoteSearchPageGreeting.smallImage]#" alt="#[promoteSearchPageGreeting.imageAlt]#" style="height:auto; width:auto; max-width:200px; max-height:32px;vertical-align:middle">&nbsp;<span id="greeting"></span>
</a>
</div>
</div>
</div>
<div class="container-fluid">
<div class="starter-template">

@ -0,0 +1,69 @@
<!-- top navigation -->
<div class="navbar #[simpleheadernavbar]# navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand hidden-xs" id="navbar-brand" href="#[promoteSearchPageGreeting.homepage]#" style="position:absolute;top:-6px;display:inline;white-space:nowrap;">
<img id="greeting-icon" class="yacylogo" src="#[promoteSearchPageGreeting.smallImage]#" alt="#[promoteSearchPageGreeting.imageAlt]#" style="height:auto; width:auto; max-width:200px; max-height:32px;vertical-align:middle;float:left;">&nbsp;<span id="greeting" style="position:absolute; top:50%;float:left;"></span>
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li id="header_search" class="dropdown">
<a href="#" data-toggle="dropdown" class="dropdown-toggle" role="button" aria-haspopup="true" aria-expanded="false" title="Search Interfaces">
<span class="hidden-sm">Search Interfaces<b class="caret"></b></span>
<span class="visible-sm glyphicon glyphicon-search"><b class="caret"></b></span>
</a>
<ul class="dropdown-menu" role="menu">
<li id="header_websearch"><a href="index.html" onclick="this.href='index.html?handover='+document.searchform.search.value">Web Search</a></li>
<li id="header_filesearch"><a href="yacyinteractive.html" onclick="this.href='yacyinteractive.html?handover='+document.searchform.search.value">File Search</a></li>
<li id="header_comparesearch"><a href="compare_yacy.html?display=0">Compare Search</a></li>
<li id="header_hostbrowser"><a href="HostBrowser.html?hosts=">Index Browser</a></li>
<li id="header_urlviewer"><a href="ViewFile.html">URL Viewer</a></li>
<!--<li><a href="yacysearch_location.html">Location Search</a></li>-->
<li class="divider" role="separator"></li>
<li>&nbsp;&nbsp;<i>Example Calls to the Search API:</i></li>
<li><a href="yacysearch.json?query=www" target="_blank"><i>API</i>&nbsp;&nbsp;&nbsp;YaCy JSON</a></li>
<li><a href="yacysearch.rss?query=www" target="_blank"><i>API</i>&nbsp;&nbsp;&nbsp;YaCy RSS/Opensearch</a></li>
<li><a href="solr/select?hl=false&wt=opensearch&facet=true&facet.mincount=1&facet.field=url_file_ext_s&start=0&rows=10&sort=load_date_dt+desc&q=description_txt:%5B*%20TO%20*%5D" target="_blank"><i>API</i>&nbsp;&nbsp;&nbsp;Solr RSS/Opensearch</a></li>
<li><a href="solr/select?hl=false&wt=yjson&facet=true&facet.mincount=1&facet.field=url_file_ext_s&start=0&rows=10&query=www" target="_blank"><i>API</i>&nbsp;&nbsp;&nbsp;Solr Default Core / JSON</a></li>
<li><a href="solr/collection1/select?q=*:*&defType=edismax&start=0&rows=3" target="_blank"><i>API</i>&nbsp;&nbsp;&nbsp;Solr Default Core / XML</a></li>
<li><a href="solr/webgraph/select?q=*:*&defType=edismax&start=0&rows=3" target="_blank"><i>API</i>&nbsp;&nbsp;&nbsp;Solr Webgraph Core / XML</a></li>
<li><a href="gsa/search?q=www&num=3" target="_blank"><i>API</i>&nbsp;&nbsp;&nbsp;Google Appliance API / XML</a></li>
</ul>
</li>
<li id="header_help" class="dropdown">
<a href="#" data-toggle="dropdown" class="dropdown-toggle" aria-label="Help" role="button" aria-haspopup="true" aria-expanded="false"><span class="glyphicon glyphicon-question-sign"></span></a>
<ul class="dropdown-menu" role="menu">
<li id="header_profile"><a href="ViewProfile.html?hash=localhash">About This Page</a></li>
<li id="header_tutorial"><a href="http://yacy.net/tutorials/">YaCy Tutorials</a></li>
<li id="header_jslicense"><a href="jslicense.html" data-jslicense="1">JavaScript information</a></li>
<li class="divider" role="separator"></li>
<li id="header_download"><a href="http://yacy.net" target="_blank"><i>external</i>&nbsp;&nbsp;&nbsp;Download YaCy</a></li>
<li id="header_community"><a href="http://forum.yacy.de" target="_blank"><i>external</i>&nbsp;&nbsp;&nbsp;Community (Web Forums)</a></li>
<li id="header_wiki"><a href="http://wiki.yacy.de" target="_blank"><i>external</i>&nbsp;&nbsp;&nbsp;Project Wiki</a></li>
<li id="header_git"><a href="https://github.com/yacy/yacy_search_server/commits/master" target="_blank"><i>external</i>&nbsp;&nbsp;&nbsp;Git Repository</a></li>
<li id="header_bugs"><a href="http://bugs.yacy.net" target="_blank"><i>external</i>&nbsp;&nbsp;&nbsp;Bugtracker</a></li>
</ul>
</li>
<li id="header_administration">
<form action="Status.html" method="get">
<button accesskey="s" type="submit" class="btn btn-default navbar-btn" title="Administration">
<span class="glyphicon glyphicon-cog"></span>
<span class="hidden-sm hidden-md"> Administration &raquo;</span>
</button>
</form>
</li>
</ul>
</div>
</div>
</div>
<div class="container-fluid">
<div class="starter-template">

@ -63,9 +63,9 @@
<body id="yacysearch" #(focus)#::onLoad="document.searchform.query.focus();"#(/focus)#>
#(topmenu)#
#%env/templates/embeddedheader.template%#
#%env/templates/embeddedSearchHeader.template%#
::
#%env/templates/simpleheader.template%#
#%env/templates/simpleSearchHeader.template%#
<script type="text/javascript">
document.getElementById("header_websearch").className += " active";
</script>
@ -88,11 +88,15 @@ Use the RSS search result format to add static searches to your RSS reader, if y
<div class="row">
<div class="col-sm-8 col-sm-offset-4 col-md-9 col-md-offset-3 main">
#(topmenu)#
<form class="search small" name="searchform" method="get" accept-charset="UTF-8" style="position:fixed;top:8px;z-index:1052;">
::
<form class="search small col-xs-9 col-sm-5 col-lg-5" name="searchform" method="get" accept-charset="UTF-8" style="position:fixed;top:8px;z-index:1052;">
#(/topmenu)#
<form class="search small" name="searchform" method="get" accept-charset="UTF-8" style="position:fixed;top:8px;z-index:1052;max-width:500px;">
<div class="input-group">
<input name="query" id="search" type="text" class="form-control searchinput typeahead" size="40" maxlength="200" placeholder="#[promoteSearchPageGreeting]#" value="#[former]#" #(focus)#::autofocus="autofocus"#(/focus)# onFocus="this.select()" onclick="document.getElementById('Enter').innerHTML = 'search'"/>
<div class="input-group" style="max-width:445px;">
<input name="query" id="search" type="text" class="form-control searchinput typeahead" size="40" maxlength="200"
placeholder="#[promoteSearchPageGreeting]#" value="#[former]#" #(focus)#::autofocus="autofocus"#(/focus)# onFocus="this.select()" onclick="document.getElementById('Enter').innerHTML = 'search'"/>
<div class="input-group-btn">
<button id="Enter" name="Enter" class="btn btn-default" type="submit">search</button>
</div>

Loading…
Cancel
Save