yacy_search_server/htroot/yacysearch.html
luccioman f37a86e1c6 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.
2016-12-09 11:25:09 +01:00

250 lines
11 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<title>#[former]# - YaCy '#[clientname]#': Search Page</title>
#%env/templates/metas.template%#
<link rel="alternate" type="application/rss+xml" title="Search for #[former]#" href="yacysearch.rss?query=#[formerEncoded]#" />
<link rel="search" type="application/opensearchdescription+xml" title="YaCy '#[clientname]#'" href="#[thisaddress]#/opensearchdescription.xml" />
<link rel="stylesheet" type="text/css" media="screen" href="env/highslide.css" />
<script type="text/javascript" src="js/ajax.js"></script>
<script type="text/javascript" src="js/xml.js"></script>
<script type="text/javascript" src="js/yacysearch.js"></script>
<script type="text/javascript" src="js/highslide/highslide.js"></script>
<script type="text/javascript">hs.outlineType = 'rounded-white';</script>
<script type="text/javascript">
function handleArrowKeys(evt) {
evt = (evt) ? evt : ((window.event) ? event : null);
if (evt) {
switch (evt.keyCode) {
case 9:
case 33:
window.location.href = document.getElementById("nextpage").href;
break;
case 34:
window.location.href = document.getElementById("prevpage").href;
break;
case 40:
}
}
}
document.onkeydown = handleArrowKeys;
</script>
<script type="text/javascript" src="env/bootstrap/js/typeahead.jquery.min.js"></script>
<script type="text/javascript">
var suggestMatcher = function() {
return function opensearch(q, cb) {
$.getJSON("suggest.json?q=" + q, function(data) {
var parsed = [];
for (var i = 0; i < data[1].length; i++) {
var row = data[1][i];
if (row) {
parsed[parsed.length] = {
data: [row],
value: row,
result: row
};
};
};
cb(parsed);
});
};
};
$(document).ready(function() {
$('#search').typeahead({hint:false,highlight:true,minLength:1}, {
name: 'states',
displayKey: 'value',
source: suggestMatcher()
});
});
</script>
<style type="text/css">.twitter-typeahead {margin: 0px;padding: 0px;top:2px;}</style> <!-- fix for input window -->
</head>
<body id="yacysearch" #(focus)#::onLoad="document.searchform.query.focus();"#(/focus)#>
#(topmenu)#
#%env/templates/embeddedSearchHeader.template%#
::
#%env/templates/simpleSearchHeader.template%#
<script type="text/javascript">
document.getElementById("header_websearch").className += " active";
</script>
#(/topmenu)#
<div id="api" style="top:58px;">
<script type="text/javascript">
//<![CDATA[
document.write("\<a href=\"yacysearch.rss?" + window.location.search.substring(1) + "\" id=\"apilink\" target=\"_blank\"\><img src=\"env/grafics/rss.png\" width=\"16\" height=\"16\" alt=\"RSS\" /></a>")
//]]>
</script>
<span>This search result can also be retrieved as RSS/<a href="http://www.opensearch.org" target="_blank">opensearch</a> output.
Click the RSS icon to see this search result as RSS message stream.
Use the RSS search result format to add static searches to your RSS reader, if you use one.</span>
</div>
<!-- body -->
</div> <!-- close the starter-template, to open a row -->
<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)#
<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>
</div>
<input type="hidden" name="contentdom" id="contentdom" value="#[contentdom]#" />
<input type="hidden" name="former" value="#[former]#" />
<input type="hidden" name="maximumRecords" value="#[count]#" />
<input type="hidden" name="startRecord" id="startRecord" value="0" />
<input type="hidden" name="verify" value="#[search.verify]#" />
<input type="hidden" name="resource" id="resource" value="#[resource]#" />
<input type="hidden" name="nav" value="#[search.navigation]#" />
<input type="hidden" name="prefermaskfilter" value="#[prefermaskfilter]#" />
<input type="hidden" name="depth" value="#[depth]#" />
<input type="hidden" name="constraint" value="#[constraint]#" />
<input type="hidden" name="meanCount" value="#[meanCount]#" />
<input id="timezoneOffset" type="hidden" name="timezoneOffset" value=""><script>document.getElementById("timezoneOffset").value = new Date().getTimezoneOffset();</script>
</form>
<!-- type the number of results and navigation bar -->
#(num-results)#
::
<p>No Results.</p>
::
<p>No Results. (length of search words must be at least 1 character)</p>
::
<div id="results"></div>
<div class="progress">
<div class="progress-bar progress-bar-info" id="progressbar" role="progressbar" style="width:0%;">
<span style="position:absolute;display:block;text-align:left;width:100%;color:black;">&nbsp;&nbsp;&nbsp;<strong id="offset">#[offset]#</strong>-<strong id="itemscount">#[itemscount]#</strong> of <strong id="totalcount">#[totalcount]#</strong> #(globalresults)#::; (<strong id="localResourceSize">#[localResourceSize]#</strong> local, <strong id="remoteResourceSize">#[remoteResourceSize]#</strong> remote), <strong id="remoteIndexCount">#[remoteIndexCount]#</strong> from <strong id="remotePeerCount">#[remotePeerCount]#</strong> remote YaCy peers.#(/globalresults)#</span>
</div>
</div>
::
<p>Searching the web with this peer is disabled for unauthorized users. Please <a href="Status.html?login=">log in</a> as administrator to use the search function</p>
#(/num-results)#
#(urlmaskerror)#::
<p><b>Illegal URL mask:</b> <i>#[urlmask]#</i> (not a valid regular expression), mask ignored.</p>
#(/urlmaskerror)#
#(prefermaskerror)#::
<p><b>Illegal prefer mask:</b> <i>#[prefermask]#</i> (not a valid regular expression), mask ignored.</b></p>
#(/prefermaskerror)#
#(didYouMean)#::
<p><b>Did you mean:</b> #{suggestions}# <a href="#[url]#">#[word]#</a> #[sep]##{/suggestions}#</p>
#(/didYouMean)#
#(searchagain)#
::
<script type="text/javascript">
document.getElementById("Enter").innerHTML = "search again";
</script>
#(/searchagain)#
<!-- show information about search key handling -->
#(excluded)#
::
<p><strong>The following words are stop-words and had been excluded from the search: #[stopwords]#.</strong></p>
#(/excluded)#
<!-- show openstreetmap tiles if geoinfo was found -->
#(geoinfo)#
::
<div class="searchresults">
<h4 class="linktitle">
<img src="https://www.openstreetmap.org/favicon.ico" class="favicon" style="width:16px; height:16px;" alt="" />
Location -- click on map to enlarge</h4>
<p class="url">
#{loc}#
<div style="margin: 20px; width: 100px; float: left;">
<a href="osm.png?lon=#[lon]#&amp;lat=#[lat]#&amp;zoom=14" class="thumblink" style="float:left;" onclick="return hs.expand(this)">
<img src="osm.png?lon=#[lon]#&amp;lat=#[lat]#&amp;zoom=14" width="192" height="192" alt="map #[lon]#, #[lat]#" />
</a>
<div class="TableCellDark"><a href="http://www.openstreetmap.org/?lat=#[lat]#&amp;lon=#[lon]#&amp;zoom=14">#[name]#</a><br /><a href="http://www.openstreetmap.org/?lat=#[lat]#&amp;lon=#[lon]#&amp;zoom=14">lat=#[lat]#, lon=#[lon]#</a></div> <!-- preview -->
<div class="highslide-caption"><a href="http://www.openstreetmap.org/?lat=#[lat]#&amp;lon=#[lon]#&amp;zoom=14">#[name]#</a><br /><a href="http://www.openstreetmap.org/?lat=#[lat]#&amp;lon=#[lon]#&amp;zoom=14">lat=#[lat]#, lon=#[lon]#</a></div> <!-- zoomed -->
</div>
#{/loc}#
</p>
<p class="urlinfo" style="clear:left;">Map (c) by <a href="http://www.openstreetmap.org">OpenStreetMap</a> and contributors, CC-BY-SA</p>
</div>
#(/geoinfo)#
<!-- show date histogram if date navigation is active -->
<div id="datehistogram"></div>
<!-- linklist begin -->
#(resultTable)#::<table width="100%"><tr class="TableHeader"><td width="30%">Media</td><td width="70%">URL</td></tr>#(/resultTable)#
#{results}#
<!--#include virtual="yacysearchitem.html?item=#[item]#&eventID=#[eventID]#" -->
#{/results}#
#(resultTable)#::</table>#(/resultTable)#
<!-- linklist end -->
#(num-results)#
::
::
::
<span id="resNav" class="col-sm-12 col-md-12" style="display: inline;"></span>
::
#(/num-results)#
</div> <!-- close main -->
<div class="col-sm-4 col-md-3 sidebar" id="sidebar">
<!-- navigation begin -->
<!--#include virtual="yacysearchtrailer.html?eventID=#[eventID]#" -->
<!-- navigation end -->
</div> <!-- close sidebar -->
</div> <!-- close row -->
<!-- update the search results statistics after the search is finished -->
<script type="text/javascript">
function latestinfo() {
if (window.XMLHttpRequest) { // Mozilla/Safari
self.xmlHttpReq = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
self.xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
}
self.xmlHttpReq.open('GET', "yacysearchlatestinfo.json?eventID=#[eventID]#", true);
self.xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
self.xmlHttpReq.onreadystatechange = function() {
if (self.xmlHttpReq.readyState == 4) {
var rsp = eval("(" + self.xmlHttpReq.responseText + ")");
statistics(rsp.offset, rsp.itemscount, rsp.itemsperpage, rsp.totalcount, rsp.localResourceSize, rsp.remoteResourceSize, rsp.remoteIndexCount, rsp.remotePeerCount, rsp.navurlBase);
}
};
self.xmlHttpReq.send(null);
}
window.setTimeout('latestinfo();',500); // we need that to get a correct pagination bar at the end of the page
window.setTimeout('latestinfo();',1000);
// TODO: resets statistic on navigating to next page in Jetty implementation
/*
window.setTimeout('latestinfo();',500);
window.setTimeout('latestinfo();',1000);
window.setTimeout('latestinfo();',1500);
window.setTimeout('latestinfo();',2000);
window.setTimeout('latestinfo();',3000);
window.setTimeout('latestinfo();',4000);
window.setTimeout('latestinfo();',5000);
window.setTimeout('latestinfo();',6000);
window.setTimeout('latestinfo();',8000);
window.setTimeout('latestinfo();',10000);
*/
</script>
#%env/templates/footer.template%#
</body>
</html>