Commit 9661cba1 authored by Seth Meranda's avatar Seth Meranda
Browse files

Add specific media queries for better layout presentation.

parent 0eec55b9
/UNL_Search.esproj/
\ No newline at end of file
......@@ -96,17 +96,13 @@ $page->maincontentarea = '
<div id="searchform">
<form action="./" method="get">
<fieldset>
<div class="grid10 first">
<label for="q">Search</label>
<input class="search-query" type="text" name="q" id="search_q" title="search" />';
if (!empty($local_results)) {
$page->maincontentarea .= '<input type="hidden" name="u" value="'.htmlentities($_GET['u'], ENT_QUOTES).'" />';
}
$page->maincontentarea .= '
</div>
<div class="grid2">
<input class="search-button" title="search" type="submit" value="Search" />
</div>
<input class="search-button" title="search" type="submit" value="Search" />
</fieldset>
</form>
<noscript>
......@@ -116,12 +112,12 @@ $page->maincontentarea .= '
</form>
</noscript>
</div>
<div class="grid8 first">
<div class="grid8 first" id="search_results">
'.$local_results.'
<h3 class="sec_header">UNL Web</h3>
<div id="unl_results" class="google-results"></div>
</div>
<div class="grid4">
<div class="grid4" id="directory_results">
<h3 class="sec_header">UNL Directory</h3>
<div id="ppl_results"></div>
<a href="http://www1.unl.edu/wdn/wiki/About_Peoplefinder">About the UNL Directory</a>
......
......@@ -8,14 +8,7 @@
#searchform fieldset {
}
#searchform .grid10 {
width: 90%;
}
#searchform .grid2 {
margin-left:0;
width: 10%;
text-align: right;
}
#searchform label {
display: none;
}
......@@ -28,8 +21,11 @@
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
width:auto;
width:100%;
overflow: auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#searchform input.search-query {
......@@ -38,7 +34,7 @@
font-size: 1.5em;
height: 31px;
padding: 2px 0 0 8px;
width: 99%;
width: 70%;
}
#searchform input.search-button {
-moz-border-radius: 5px;
......@@ -52,12 +48,30 @@
cursor: pointer;
}
@media only screen and (max-device-width: 480px), only screen and (max-width: 480px) {
#searchform .grid10,
#searchform .grid2 {
width: auto;
float: none;
@media (min-width: 480px) and (max-width: 599px) {
#maincontent .grid8 {
width: 49%;
margin-left: 0; /* It's the first column */
}
#maincontent #directory_results.grid4 {
width: 49%;
clear: none;
margin-left: 2%;
}
}
@media (min-width: 600px) {
#maincontent .grid8 {
width: 65.78%;
margin-left: 0; /* It's the first column */
}
#maincontent .grid4 {
width: 31.62%;
margin-left: 2.54%;
clear: none;
}
}
@media (min-width: 768px) {
}
/** Overridden directory styles **/
......
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