From 9661cba15b6a8999a46db50de094e5efb8689201 Mon Sep 17 00:00:00 2001
From: Seth Meranda <seth@meranda.org>
Date: Fri, 7 Sep 2012 06:41:36 -0500
Subject: [PATCH] Add specific media queries for better layout presentation.
---
.gitignore | 1 +
www/index.php | 10 +++-------
www/searchCSS.css | 44 +++++++++++++++++++++++++++++---------------
3 files changed, 33 insertions(+), 22 deletions(-)
create mode 100644 .gitignore
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..d5b67a2
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+/UNL_Search.esproj/
\ No newline at end of file
diff --git a/www/index.php b/www/index.php
index a7291fe..1b23fc3 100644
--- a/www/index.php
+++ b/www/index.php
@@ -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>
diff --git a/www/searchCSS.css b/www/searchCSS.css
index c2ec801..db341e1 100644
--- a/www/searchCSS.css
+++ b/www/searchCSS.css
@@ -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 **/
--
GitLab