From 832fa367ccef3ade21023c8d103337e8e86bde5f Mon Sep 17 00:00:00 2001
From: Dan Scott <dscott@laurentian.ca>
Date: Wed, 18 Sep 2013 08:49:32 -0400
Subject: [PATCH] TPAC: Towards a responsive mobile design

Responsive design serves up different layouts based on CSS media
queries; typically, the display width is used. This is a fairly brute
force approach to providing a more usable display for mobile devices
based purely on using CSS to hide or shift around elements of the same
HTML.

Currently this is focused on making search results more usable, although
it will also improve the general header layout.

Functionality lost by this approach:
* Preferred library picker is hidden
* Facets are hidden
* Language picker is hidden
* Actions (such as add to list / place hold) for each result are hidden

Lots of room for improvement; for example, retaining functionality by
moving facets below the results, or making the language picker less
bulky, or moving actions under each search result.

Signed-off-by: Dan Scott <dscott@laurentian.ca>

Conflicts:
	Open-ILS/src/templates/opac/css/style.css.tt2
---
 Open-ILS/src/templates/opac/css/style.css.tt2 | 54 ++++++++++++++++++++++++++-
 Open-ILS/src/templates/opac/parts/base.tt2    |  1 +
 2 files changed, 54 insertions(+), 1 deletion(-)

diff --git a/Open-ILS/src/templates/opac/css/style.css.tt2 b/Open-ILS/src/templates/opac/css/style.css.tt2
index 0a5d71b864..78ff08fca0 100644
--- a/Open-ILS/src/templates/opac/css/style.css.tt2
+++ b/Open-ILS/src/templates/opac/css/style.css.tt2
@@ -1529,7 +1529,7 @@ a.preflib_change {
 .password_message {
     padding-top: 1em;
     padding-bottom: 0.5em;
-	font-style: italic;
+    font-style: italic;
 }
 
 #maintenance_message {
@@ -1610,3 +1610,55 @@ a.preflib_change {
     color: red;
     padding-right: 10px;
 }
+
+@media only screen and (max-width: 600px) {
+    #header {
+        padding: 0px;
+        margin: 0px;
+    }
+    #topnav_logo {
+        padding: 0px;
+    }
+    #topnav_logo img {
+        width: 190px;
+    }
+    #locale_picker_form {
+        display: none;
+    }
+    #gold-links-holder {
+        display: none;
+    }
+    #search-wrapper, #search-box, #search-wrapper #search-box {
+        padding: 0px;
+    }
+    #search-box .search_catalog_lbl, #search-box #home_adv_search_link {
+        display: none;
+    }
+    #search_box {
+        width: 10em;
+    }
+    .almost-content-wrapper {
+        display: none;
+    }
+    .results_header_nav1 span.h1 {
+        display: none;
+    }
+    .facet_sidebar {
+        display: none;
+    }
+    .preflib {
+        display: none;
+    }
+    .start_end_links_span {
+        display: block;
+    }
+    .invisible {
+        display: none;
+    }
+    .result_table_pic_header {
+        display: none;
+    }
+    .result_table_utils_cont {
+        display: none;
+    }
+}
diff --git a/Open-ILS/src/templates/opac/parts/base.tt2 b/Open-ILS/src/templates/opac/parts/base.tt2
index f1a5ee003d..0e51783fe6 100644
--- a/Open-ILS/src/templates/opac/parts/base.tt2
+++ b/Open-ILS/src/templates/opac/parts/base.tt2
@@ -7,6 +7,7 @@
         [% ELSIF ctx.authtime %]
         <meta http-equiv="refresh" content="[% ctx.authtime %]; url=[% ctx.logout_page %]">
         [% END %]
+        <meta name = "viewport" content = "initial-scale = 1.0">
         <link rel="stylesheet" type="text/css" href="[% ctx.media_prefix %]/css/skin/default/opac/semiauto.css" />
         <link rel="stylesheet" type="text/css" href="[% ctx.opac_root %]/css/style.css" />
         <title>[% l('Catalog - [_1]', ctx.page_title) %]</title>
-- 
2.11.0