Commit de1ab163 authored by Citronalco's avatar Citronalco
Browse files

improve search form

improve css, especially for small screens
fix some minor errors
parent 54e0298a
/*
* {
box-sizing: border-box;
}
*/
body {
margin: 0px;
font-family: sans-serif;
......@@ -5,81 +11,136 @@ body {
/* searchcontainer contains the searchfields and the querybar */
#searchcontainer {
position: fixed;
background: none repeat scroll 0 0 #036185;
color: white;
position: fixed;
width: 100%;
z-index: 999;
}
#searchcontainer label {
display: inline-block;
width: 100px;
text-align: right;
}
#searchcontainer input[type=text] {
width: 350px;
display: inline-block;
width: 6.5rem;
line-height: 2;
padding: 5px;
}
/* Top Search bar */
#searchbar-top {
display: flex;
flex-wrap: nowrap;
padding: 5px;
font-weight: bold;
}
#searchbar-top input[type=text] {
flex-grow: 5;
max-width: 62rem;
}
#searchbar-top input[type=button],input[type=submit] {
width: 7rem;
margin-left: 10px;
}
/* search fields */
#searchfields {
display: flex;
flex-wrap: wrap;
padding: 5px;
}
#searchfields div {
display: inline-block;
min-width: 500px;
display: flex;
flex-wrap: nowrap;
}
.searchfieldsoverride input[type=text] {
background-color: lightgrey;
#searchfields input[type=text] {
width: 16rem;
}
#searchfields input[type=radio] {
margin-top: 0.5rem;
}
#searchfields label.radio {
text-align: left;
width: 4rem;
line-height: 2em;
}
/* SOLR query bar */
#querybar {
/* Bottom Search bar */
#searchbar-bottom {
display: flex;
flex-wrap: nowrap;
padding: 5px;
}
#querybar div {
display: inline-block;
#searchbar-bottom input[type=text] {
flex-grow: 5;
max-width: 62rem;
}
#searchbar-bottom input[type=button],input[type=submit] {
width: 7rem;
}
#status {
float: right;
min-width: 14rem;
flex-grow: 1;
display: inline-block;
text-align: right;
font-weight: bold;
padding-left: 1em;
padding-right: 1em;
line-height: 2;
margin-left: 10px;
margin-right: 10px;
}
#status.error {
background-color: red;
}
.irrelevant input[type=text] {
background-color: lightgrey;
}
/* booklist is a container for items of the class bookentry */
#booklist {
padding-top: 3em;
width: 100%
padding-top: 15em;
display: table;
}
div .bookentry {
display: table-row;
}
.bookentry {
display: grid;
grid-template-columns: 200px auto;
grid-gap: 20px;
div .bookcover {
display: table-cell;
width: 200px;
border-bottom: 5px solid lightgrey;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 5px;
padding-right: 5px;
}
.bookcover {
grid-column: 1;
}
.bookcover img {
.bookcover img{
width: 100%;
padding-top: 5px;
height: auto;
}
.bookdata {
grid-column: 2;
display: table-cell;
vertical-align: top;
border-bottom: 5px solid lightgrey;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 5px;
padding-right: 5px;
}
.bookdata div {
padding-top: 5px;
......@@ -107,7 +168,7 @@ body {
border-radius: 3px;
}
.bookdata .booktitle {
font-size: 180%;
font-size: 160%;
}
.bookdata .bookauthors li {
color: #43b49e;
......@@ -142,14 +203,14 @@ body {
border-radius: 3px;
}
.bookdata .booksubjects li {
.bookdata .booktags li {
background-color: #5bc1df;
color: white;
font-size: 85%;
border: 3px solid #5bc1df;
border-radius: 3px;
}
.bookdata .booksubjects li {
.bookdata .booktags li {
color: white;
cursor: pointer;
......@@ -158,3 +219,31 @@ body {
.bookdata .bookdescription h1 {
font-size: 120%;
}
/*
@media (max-width: 800px) {
#booklist {
padding-top: 22rem;
}
*/
@media (max-width: 1000px) {
#searchfields {
display: none;
}
#searchbar-top label {
display: none;
}
#clearbutton {
display: none;
}
#status {
display: none;
}
#searchbar-bottom {
display: none;
}
#booklist {
padding-top: 3rem;
}
}
......@@ -2,6 +2,7 @@
<html>
<head>
<meta charset=utf-8 />
<meta name="viewport" content="width=device-width" />
<title>Ebook Suche</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/master.css" />
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
......@@ -75,6 +76,7 @@
var query = '';
var scroll_load_finished = true; // Flag to avoid multiple AJAX calls at once when scrolling to bottom
//$('#searchfields').stop(false,true).slideDown('fast'); // start with searchfield visible
$(window).scroll(function() {
if (scroll_load_finished == true && $(window).scrollTop() >= $(document).height() - $(window).height() - 300) {
......@@ -92,7 +94,8 @@
$.getJSON(solr_url_prefix + '/?q=' + encodeURIComponent(query) + '&wt=json&rows=' + query_limit + '&start=' + start_pos, function(data) {
if (data['responseHeader']['status'] != 0) {
$('#status').addClass('error').text('Keine Treffer');
} else {
}
else {
num_docs = data['response']['numFound'];
start = data['response']['start'];
var end = start + query_limit;
......@@ -150,6 +153,7 @@
bookidentifiers += '<li>' + htmlEncode(val['identifier'][i]) + '</li>';
}
}
// Book Languages
var booklanguages='';
if (val['language']) {
......@@ -207,7 +211,8 @@
scroll_load_finished = true;
}
}
/* this makes the page unusable on smaller devices: */
/*
$('#searchcontainer').mouseenter(function(){
$('#searchfields').stop(false,true).slideDown('fast');
});
......@@ -216,21 +221,28 @@
$('#searchfields').stop(false,true).slideUp('fast');
}
});
*/
/*
$('#searchcontainer:not("input[type=text]")').on("click",function(){
$('#searchfields').stop(false,true).slideToggle('fast');
});
*/
// construct solr query
function build_query() {
var form_params = {
'title' : $('input#search_title').val(),
'author' : $('input#search_author').val(),
'series' : $('input#search_series').val(),
'text' : $('input#search_text').val(),
'year' : $('input#search_year').val(),
'language' : $('#language input:checked').val()
'title' : $('input#search_title').filter(':visible').val(),
'author' : $('input#search_author').filter(':visible').val(),
'series' : $('input#search_series').filter(':visible').val(),
'text' : $('input#search_text').filter(':visible').val(),
'year' : $('input#search_year').filter(':visible').val(),
'tag' : $('input#search_tag').filter(':visible').val(),
'language' : $('#language input:checked').filter(':visible').val()
}
var queryparts = new Array;
for (var key in form_params) {
if (form_params[key]) {
queryparts.push( '(' + key + ':' + form_params[key] + ')' );
queryparts.push( key + ':' + '(' + form_params[key] + ')' );
}
}
query = queryparts.join(' AND ');
......@@ -245,18 +257,20 @@
// mark search form as irrelevant if solr query gets changed
$('#solr_query').bind('change keyup',function() {
if ($('input#solr_query').val() != build_query()) {
$('#searchfields').addClass('searchfieldsoverride');
$('#searchfields').addClass('irrelevant');
$('#searchbar-top').addClass('irrelevant');
}
else {
$('#searchfields').removeClass('searchfieldsoverride');
$('#searchfields').removeClass('irrelevant');
$('#searchbar-top').removeClass('irrelevant');
}
});
// update solr query if search form values change
$('#searchfields input:text').bind('change keyup',function() {
$('#searchfields,#searchbar-top input:text').bind('change keyup',function() {
$('input#solr_query').val(build_query()).change();
});
$('#searchfields input[type=radio]').bind('change',function() {
$('#searchfields,#searchbar-top input[type=radio]').bind('change',function() {
$('input#solr_query').val(build_query()).change();
});
......@@ -287,7 +301,7 @@
// click on book's publishing date
$(document).on("click",".bookdate ul li",function() {
var value=$(this).text();
$('input#search_year').val(value).change();
$('input#search_year').val('"'+value+'"').change();
query = build_query();
get_ebooks(start_pos=0);
});
......@@ -300,6 +314,19 @@
query = build_query();
get_ebooks(start_pos=0);
});
// click on book's tag
$(document).on("click",".booktags ul li",function() {
//var value = [];
//value = $('input#search_tag').val().split(',');
//value.push('"'+$(this).text()+'"');
//$('input#search_tag').val(value.join(', ')).change();
var value=$(this).text();
$('input#search_tag').val('"'+value+'"').change();
query = build_query();
get_ebooks(start_pos=0);
});
});
// clear form data
......@@ -316,19 +343,15 @@
<div id="searchcontainer">
<form id="searchform">
<div id="querybar">
<div id="querystring">
<label for="solr_query">SOLR Query</label>
<input type="text" name="solr_query" id="solr_query" />
</div>
<div id="buttons">
<div id="searchbar-top">
<label for="search_text">Suche</label>
<input type="text" name="text" id="search_text" />
<input type="submit" id="searchbutton" value="Suchen" />
<input type="button" id="clearbutton" value="Zurücksetzen" />
</div>
<div id="status"></div>
</div>
<div id="searchfields">
<div>
<label for="search_title">Titel</label>
......@@ -347,16 +370,22 @@
<input type="text" name="year" id="search_year" />
</div>
<div>
<label for="search_text">Irgendwo</label>
<input type="text" name="text" id="search_text" />
<label for="search_tag">Tags</label>
<input type="text" name="tag" id="search_tag" />
</div>
<div id="language">
<label for="search_lang_0">Sprache</label>
<input type="radio" name="lang" id="search_lang_0" value="" checked />Beides
<input type="radio" name="lang" id="search_lang_1" value="deu" />Deutsch
<input type="radio" name="lang" id="search_lang_2" value="eng" />Englisch
<input type="radio" name="lang" id="search_lang_0" value="" checked /><label class="radio" for="search_lang_0">Beides</label>
<input type="radio" name="lang" id="search_lang_1" value="deu" /><label class="radio" for="search_lang_1">Deutsch</label>
<input type="radio" name="lang" id="search_lang_2" value="eng" /><label class="radio" for="search_lang_2">Englisch</label>
</div>
</div>
<div id="searchbar-bottom">
<label for="solr_query">SOLR Query</label>
<input type="text" name="solr_query" id="solr_query" />
</div>
</form>
</div>
<div id="booklist"></div>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment