Personal/cops
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

move search & sort. That also fix w3c validation error. re #41

Browse source
This commit is contained in:
Sébastien Lucas 2013-03-01 17:45:55 +01:00
parent ab84d1e721
commit 6f0bae5ae4
2 changed files with 57 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
index.php
View file

@ -93,11 +93,11 @@
<?php if ($isEink) echo ", openEffect : 'none', closeEffect : 'none', helpers : {overlay : null}"; ?> <?php if ($isEink) echo ", openEffect : 'none', closeEffect : 'none', helpers : {overlay : null}"; ?>
}); });
$("#searchImage").click(function(){ $("#settingsImage").click(function(){
if ($("#search").is(":hidden")) { if ($("#tool").is(":hidden")) {
$("#search").slideDown("slow"); $("#tool").slideDown("slow");
} else { } else {
$("#search").slideUp(); $("#tool").slideUp();
} }
}); });
@ -151,21 +151,31 @@
</a> </a>
</div> </div>
<div class="headright"> <div class="headright">
<img id="searchImage" src="<?php echo getUrlWithVersion("images/setting64.png") ?>" alt="Settings and menu" /> <img id="settingsImage" src="<?php echo getUrlWithVersion("images/setting64.png") ?>" alt="Settings and menu" />
</div> </div>
<div class="headcenter"> <div class="headcenter">
<p><?php echo htmlspecialchars ($currentPage->title) ?></p> <p><?php echo htmlspecialchars ($currentPage->title) ?></p>
</div> </div>
</div> </div>
<div class="clearer" /> <div class="clearer" />
<div class="menu"> <div id="tool" >
<div id="search" class="search"> <div style="float: left; width: 60%">
<form action="index.php?page=9" method="get"> <form action="index.php?page=9" method="get">
<input type="text" name="query" /> <div style="float: right">
<input type="hidden" name="page" value="9" />
<input type="image" src="images/search32.png" alt="Search" /> <input type="image" src="images/search32.png" alt="Search" />
</div>
<div class="stop">
<input type="hidden" name="page" value="9" />
<input type="text" name="query" />
</div>
</form> </form>
<form action="index.php?page=9" method="get"> </div>
<?php if ($currentPage->containsBook ()) { ?>
<div style="float: right; width: 35%">
<div style="float: right">
<img id="sort" src="images/sort32.png" alt="Sort" />
</div>
<div class="stop">
<select id="sortchoice"> <select id="sortchoice">
<option value="st"><?php echo localize("bookword.title") ?></option> <option value="st"><?php echo localize("bookword.title") ?></option>
<option value="sa"><?php echo localize("authors.title") ?></option> <option value="sa"><?php echo localize("authors.title") ?></option>
@ -176,10 +186,10 @@
<option value="asc">Asc</option> <option value="asc">Asc</option>
<option value="desc">Desc</option> <option value="desc">Desc</option>
</select> </select>
<img id="sort" src="images/sort32.png" alt="Sort" />
</form>
</div> </div>
</div> </div>
<?php } ?>
</div>
<div class="clearer" /> <div class="clearer" />
<div id="content" style="display: none;"></div> <div id="content" style="display: none;"></div>
<div class="entries"> <div class="entries">

69
style.css
View file

@ -35,6 +35,40 @@ width:100%;
height:32px; height:32px;
} }
#tool
{
margin-top: 5px;
color:white;
background-color:black;
width:100%;
height:32px;
overflow: hidden;
}
#tool input[type=text]
{
vertical-align: middle;
width: 100%;
margin: 5px;
}
.stop select
{
vertical-align: middle;
margin: 5px;
}
#sort
{
cursor:pointer;
}
.stop
{
display: block;
overflow: hidden;
}
img img
{ {
margin:0; margin:0;
@ -219,46 +253,11 @@ padding: 6px;
display: inline; display: inline;
} }
.menu
{
float: right;
width : 250px;
}
.search
{
display:none;
width : 250px;
position: absolute;
background: white;
}
.search form
{
background-color: black;
margin-top: 3px;
border-radius: 6px;
}
.search input[type=text], .search select
{
vertical-align: middle;
margin: 8px 10px;
}
.search input[type=image], .search img
{
vertical-align: middle;
float:right;
padding: 3px 2px;
}
.bookdetail .bookdetail
{ {
color:black; color:black;
} }
.bookpopup .bookpopup
{ {
min-width: 400px; min-width: 400px;