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>

diff --git a/Open-ILS/src/templates/opac/css/style.css.tt2 b/Open-ILS/src/templates/opac/css/style.css.tt2
index 959609d..3deae3b 100644 (file)
--- a/Open-ILS/src/templates/opac/css/style.css.tt2
+++ b/Open-ILS/src/templates/opac/css/style.css.tt2
@@ -1515,3 +1515,55 @@ a.preflib_change {
 .record_author {
     font-style: italic;
 }
+
+@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 f1a5ee0..0e51783 100644 (file)
--- 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>