Responsive master

CHANGELOG.rst

@@ -29,6 +29,20 @@ API changes and deprecations
   Note that logic.get_action() and toolkit.get_action() are *not* deprecated,
   core code and plugin code should still use ``get_action()``.
 
+Template changes
+----------------
+
+* Note to people with custom themes: If you've changed the
+  ``{% block secondary_content %}`` in templates/package/search.html pay close
+  attention as this pull request changes the structure of that template block a
+  little.
+
+  Also: There's a few more bootstrap classes (especially for grid layout) that
+  are now going to be in the templates. Take a look if any of the following
+  changes might effect your content blocks:
+
+  https://github.com/ckan/ckan/pull/1935
+
 
 v2.2 2014-02-04
 ===============

ckan/public/base/javascript/main.js

@@ -88,3 +88,14 @@ this.jQuery.fn.ie7redraw = function() {
     jQuery(this).css('zoom', 1);
   }
 };
+
+
+// Show / hide filters for mobile
+$(function() {
+  $(".show-filters").click(function() {
+    $("body").addClass("filters-modal");
+  });
+  $(".hide-filters").click(function() {
+    $("body").removeClass("filters-modal");
+  });
+});

ckan/public/base/less/dataset.less

@@ -3,6 +3,11 @@
   padding-bottom: 20px;
   margin-bottom: 20px;
 }
+@media (max-width: 768px) {
+  .dataset-item {
+    word-wrap:break-word;
+  }
+}
 
 .dataset-item:last-of-type {
   border-bottom: none;
@@ -93,6 +98,11 @@
   top: 14px;
   right: 10px;
 }
+@media (max-width: 768px) {
+  .resource-item .btn-group {
+    display:none;
+  }
+}
 
 .resource-list.reordering {
   .resource-item {

ckan/public/base/less/footer.less

@@ -13,24 +13,6 @@
   color: @footerLinkColor;
 }
 
-.footer-links,
-.attribution {
-  .makeColumn(6);
-}
-
-.footer-links {
-  margin-left: 0;
-}
-
-.footer-links ul {
-  float: left;
-  .makeColumn(3);
-}
-
-.footer-links ul:first-child {
-  margin-left: 0;
-}
-
 .footer-links ul li {
   margin-bottom: 5px;
 }

ckan/public/base/less/forms.less

@@ -68,6 +68,15 @@ textarea {
 .control-medium textarea {
   width: 320px;
 }
+@media (max-width: 768px) {
+  .control-medium input,
+  .control-medium select,
+  .control-medium textarea {
+    width: 100%;
+    .box-sizing(border-box);
+    min-height:28px;
+  }
+}
 
 .control-large input,
 .control-large .control-label {
@@ -99,30 +108,45 @@ textarea {
   margin-right: -@gutterX;
   margin-bottom: 0; // Prevents reduces the padding when included in a module.
   padding-bottom: 0;
-  text-align: right;
+}
+@media (min-width: 768px) {
+  .form-actions {
+    text-align: right;
+  }
 }
 
 .form-actions .action-info {
-  float: left;
-  width: 50%;
   line-height: 2;
   text-align: left;
   color: @formInfoText;
   margin: 0;
 }
+@media (min-width: 768px) {
+  .form-actions .action-info {
+    float: left;
+    width: 50%;
+  }
+}
 
 .form-actions .action-info.small {
   font-size: 11px;
   line-height: 1.2;
 }
 
+@media (max-width: 768px) {
+  .form-actions .btn {
+    margin-top:5px;
+  }
+}
+
 // Override the default form widths.
 .form-horizontal .control-label {
   width: 120px;
 }
-
-.form-horizontal .controls {
-  margin-left: 130px;
+@media (min-width: 768px) {
+  .form-horizontal .controls {
+    margin-left: 130px;
+  }
 }
 
 .form-horizontal .info-block {
@@ -131,7 +155,6 @@ textarea {
   font-size: 11px;
   color: @emptyTextColor;
   line-height: 1.3;
-  padding: 6px 0 6px 25px;
   margin-top: 6px;
 }
 
@@ -145,11 +168,16 @@ textarea {
   margin-top: -10px;
 }
 
-.form-horizontal .info-inline {
-  float: right;
-  width: 265px;
-  margin-top: 0;
-  padding-bottom: 0;
+@media (min-width: 980px) {
+  .form-horizontal .info-block {
+    padding: 6px 0 6px 25px;
+  }
+  .form-horizontal .info-inline {
+    float: right;
+    width: 265px;
+    margin-top: 0;
+    padding-bottom: 0;
+  }
 }
 
 .form-horizontal .control-medium .info-block.info-inline {
@@ -283,6 +311,27 @@ textarea {
   text-decoration: none;
 }
 
+// Custom Fields
+@media (max-width: 768px) {
+  [data-module="custom-fields"] {
+    .input-prepend .add-on {
+      display:block;
+    }
+  }
+}
+@media (max-width: 480px) {
+  [data-module="custom-fields"] {
+    .input-prepend {
+      width:100%;
+    }
+    .control-custom input {
+      width:100%;
+      .box-sizing(border-box);
+      min-height:28px;
+    }
+  }
+}
+
 // Controls
 
 // Custom Key/Value input
@@ -535,7 +584,11 @@ textarea {
   line-height: 27px;
   z-index: -1;
 }
-
+@media (max-width: 768px) {
+  .stages li .highlight {
+    text-indent:-9999px;
+  }
+}
 .stages li.active .highlight {
   color: @stagesActiveTextColor;
   background: @stagesActiveBackground;
@@ -667,9 +720,10 @@ textarea {
 }
 
 .control-full .select2-container {
-  // Important is bad but select2 incorrectly calculates the width and
-  // sets it on the element.
-  width: 520px !important;
+  // Important is bad but select2 incorrectly calculates the width and sets it on the element.
+  // Commenting out, as I cannot reproduce this problem (SS)
+  //width: 520px !important;
+  max-width:100%;
 }
 
 .control-group.error .select2-container {

ckan/public/base/less/homepage.less

@@ -1,17 +1,12 @@
 .homepage {
 
-  [role=main] {
-    padding: 20px 0;
-    min-height: 0;
-  }
-
   .row {
     position: relative;
   }
 
   .module-search {
     padding: 5px;
-    margin: 0;
+    margin: 20px 0 0 0;
     color: @mastheadTextColor;
     background: @layoutTrimBackgroundColor;
     .search-giant {
@@ -83,8 +78,19 @@
       }
     }
   }
+
 
-  &.layout-1 .row1 .col2 {
+  &.layout-2 .stats {
+    margin-top: @gutterY;
+  }
+
+}
+
+@media (min-width: 768px) {
+  .homepage [role=main] {
+    padding: 20px 0;
+  }
+  .homepage.layout-1 .row1 .col2 {
     position: absolute;
     bottom: 0;
     right: 0;
@@ -94,9 +100,4 @@
       right: 0;
     }
   }
-
-  &.layout-2 .stats {
-    margin-top: @gutterY;
-  }
-
 }

ckan/public/base/less/iehacks.less

@@ -61,10 +61,20 @@
 // Internet Explorer 7 & 8
 .ie8,
 .ie7 {
+  .masthead  .nav-collapse {
+    float:right;
+  }
+  [role=main], .main {
+    padding-top: 10px;
+    background: @layoutBackgroundColor url("@{bgPath}");
+  }
   // Homepage
-  .hero .hero-primary.module-popup .box {
-    padding-bottom: 20px !important;
-    margin-bottom: 0 !important;
+  .hero {
+    background: url("@{imagePath}/background-tile.png");
+    .hero-primary.module-popup .box {
+      padding-bottom: 20px !important;
+      margin-bottom: 0 !important;
+    }
   }
   // Footer
   .lang-dropdown {