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