digibib · Leddfoot · Nov 8, 2017 · Nov 15, 2017
diff --git a/redef/patron-client/package-lock.json b/redef/patron-client/package-lock.json
diff --git a/redef/patron-client/package.json b/redef/patron-client/package.json
@@ -122,6 +122,7 @@
     "query-string": "4.2.3",
     "react-datepicker": "^0.40.0",
     "react-paginate": "^4.1.0",
+    "react-sticky-el": "^1.0.13",
     "react-tooltip-component": "^0.3.0",
     "sanitize-html": "1.13.0",
     "url-loader": "0.5.7",

diff --git a/redef/patron-client/src/frontend/components/SearchFilterItem.js b/redef/patron-client/src/frontend/components/SearchFilterItem.js
@@ -1,5 +1,4 @@
 import React, {PropTypes} from 'react'
-import ReactDOM from 'react-dom'
 import {injectIntl, intlShape} from 'react-intl'
 
 class SearchFilterItem extends React.Component {
@@ -13,11 +12,6 @@ class SearchFilterItem extends React.Component {
     event.preventDefault()
     const { filter: { id } } = this.props
     this.props.toggleFilter(id)
-    this.props.toggleAllFilters(event)
-
-    if (window.innerWidth < 668) {
-      ReactDOM.findDOMNode(this.props.scrollTargetNode).scrollIntoView()
-    }
   }
 
   handleKey (event) {

diff --git a/redef/patron-client/src/frontend/components/SearchFilters.js b/redef/patron-client/src/frontend/components/SearchFilters.js
@@ -8,6 +8,7 @@ import Constants from '../constants/Constants'
 import DataRangeFilter from '../components/DateRangeFilter'
 import AvailableFilter from '../components/AvailableFilter'
 import NoItemsFilter from '../components/NoItemsFilter'
+import Sticky from 'react-sticky-el'
 
 class SearchFilters extends React.Component {
   constructor (props) {
@@ -75,15 +76,21 @@ class SearchFilters extends React.Component {
           transitionLeaveTimeout={500}
           component="aside"
           className="filters">
-          <div className="limit-filters">
+
+          {this.props.locationQuery.hideFilters === Constants.enabledParameter
+            ? <div className="limit-filters">
             <Link className={buttonClass} to="#" onClick={this.handleFiltersOpenClick}>
-              {this.props.locationQuery.hideFilters === Constants.enabledParameter
-                ? (<span>Vis filter</span>)
-                : (<span>Skjul filter</span>)}
+              <span>Vis filter</span>
             </Link>
           </div>
-
-          <header className="limit-filters-header">
+          : <Sticky id="stuck" boundaryElement=".filters">
+              <div className="limit-filters">
+              <Link className={buttonClass} to="#" onClick={this.handleFiltersOpenClick}>
+                <span>Skjul filter</span>
+              </Link>
+            </div>
+          </Sticky>}
+            <header className="limit-filters-header">
             <FormattedMessage {...messages.limit} />
           </header>
 
@@ -97,6 +104,7 @@ class SearchFilters extends React.Component {
                 scrollTargetNode={this.props.scrollTargetNode}
               />
             }
+
             {this.props.locationQuery.hideFilters === Constants.enabledParameter
               ? null
               : <SearchFilter

diff --git a/redef/patron-client/src/frontend/components/SearchResults.js b/redef/patron-client/src/frontend/components/SearchResults.js
@@ -2,9 +2,6 @@ import React, {PropTypes} from 'react'
 import NonIETransitionGroup from './NonIETransitionGroup'
 import {defineMessages, FormattedMessage} from 'react-intl'
 import SearchResult from './SearchResult'
-import SearchResultsSettings from '../components/SearchResultsSettings'
-
-import SearchResultsText from '../components/SearchResultsText'
 
 class SearchResults extends React.Component {
   render () {
@@ -25,16 +22,6 @@ class SearchResults extends React.Component {
         component="section"
         id="main-search-content"
         className="search-results">
-        <div className="search-results-header-flex">
-          <SearchResultsText
-            totalHits={this.props.totalHits}
-            locationQuery={this.props.locationQuery}
-          />
-          <SearchResultsSettings
-            searchActions={this.props.searchActions}
-            locationQuery={this.props.locationQuery}
-          />
-        </div>
         <div data-automation-id="search-result-entries" className="search-results-list">
           {this.props.locationQuery.query
             ? this.props.searchResults.map(result => (

diff --git a/redef/patron-client/src/frontend/components/SearchResultsHeader.js b/redef/patron-client/src/frontend/components/SearchResultsHeader.js
@@ -0,0 +1,59 @@
+import React, {PropTypes} from 'react'
+import NonIETransitionGroup from './NonIETransitionGroup'
+import {defineMessages, FormattedMessage} from 'react-intl' //, injectIntl, intlShape
+import SearchResultsSettings from '../components/SearchResultsSettings'
+import SearchResultsText from '../components/SearchResultsText'
+// import {connect} from 'react-redux'
+// import {bindActionCreators} from 'redux'
+
+class SearchResultsHeader extends React.Component {
+  render () {
+    if (this.props.searchError) {
+      return (
+        <p data-automation-id="search-error">
+          <FormattedMessage {...messages.searchError} />
+        </p>
+      )
+    }
+    return (
+      <NonIETransitionGroup
+        transitionName="fade-in"
+        transitionAppear
+        transitionAppearTimeout={500}
+        transitionEnterTimeout={500}
+        transitionLeaveTimeout={500}
+        component="section"
+        id="main-search-content"
+        className="search-results">
+        <div className="search-results-header-flex">
+          <SearchResultsText
+            totalHits={this.props.totalHits}
+            locationQuery={this.props.locationQuery}
+          />
+          <SearchResultsSettings
+            searchActions={this.props.searchActions}
+            locationQuery={this.props.locationQuery}
+          />
+        </div>
+
+      </NonIETransitionGroup>
+    )
+  }
+}
+
+SearchResultsHeader.propTypes = {
+  locationQuery: PropTypes.object,
+  searchActions: PropTypes.object.isRequired,
+  searchError: PropTypes.any.isRequired,
+  totalHits: PropTypes.number.isRequired
+}
+
+export const messages = defineMessages({
+  searchError: {
+    id: 'SearchResults.searchError',
+    description: 'A message to display when the search fails',
+    defaultMessage: 'Something went wrong with the search #sadpanda'
+  }
+})
+
+export default SearchResultsHeader
diff --git a/redef/patron-client/src/frontend/containers/Search.js b/redef/patron-client/src/frontend/containers/Search.js
@@ -13,6 +13,7 @@ import * as SearchFilterActions from '../actions/SearchFilterActions'
 import * as ResourceActions from '../actions/ResourceActions'
 import * as RegistrationActions from '../actions/RegistrationActions'
 import SearchResults from '../components/SearchResults'
+import SearchResultsHeader from '../components/SearchResultsHeader'
 import SearchFilters from '../components/SearchFilters'
 import Constants from '../constants/Constants'
 import SearchFilterBox from '../components/SearchFilterBox'
@@ -90,6 +91,64 @@ class Search extends React.Component {
     }
   }
 
+  manageMobileHeaders () {
+    if (this.props.windowWidth < 668) {
+      return (
+        <div>
+
+                    <SearchResultsHeader key="search_results_header"
+                      locationQuery={this.props.location.query}
+                      searchActions={this.props.searchActions}
+                      searchError={this.props.searchError}
+                      totalHits={this.props.totalHits}
+                    />
+                    <SearchFilters key="search_filters"
+                                   filters={this.props.filters}
+                                   locationQuery={this.props.location.query}
+                                   toggleFilter={this.props.searchFilterActions.toggleFilter}
+                                   toggleFilterVisibility={this.props.searchFilterActions.toggleFilterVisibility}
+                                   toggleAllFiltersVisibility={this.props.searchFilterActions.toggleAllFiltersVisibility}
+                                   toggleCollapseFilter={this.props.searchFilterActions.toggleCollapseFilter}
+                                   togglePeriod={this.props.searchFilterActions.togglePeriod}
+                                   toggleAvailability={this.props.searchFilterActions.toggleAvailability}
+                                   toggleHideNoItems={this.props.searchFilterActions.toggleHideNoItems}
+                                   scrollTargetNode={this}
+                                   isSearching={this.props.isSearching}
+                                   windowWidth={this.props.windowWidth}
+                    />
+
+        </div>
+
+      )
+    } else {
+      return (
+          <div>
+            <SearchFilters key="search_filters"
+                           filters={this.props.filters}
+                           locationQuery={this.props.location.query}
+                           toggleFilter={this.props.searchFilterActions.toggleFilter}
+                           toggleFilterVisibility={this.props.searchFilterActions.toggleFilterVisibility}
+                           toggleAllFiltersVisibility={this.props.searchFilterActions.toggleAllFiltersVisibility}
+                           toggleCollapseFilter={this.props.searchFilterActions.toggleCollapseFilter}
+                           togglePeriod={this.props.searchFilterActions.togglePeriod}
+                           toggleAvailability={this.props.searchFilterActions.toggleAvailability}
+                           toggleHideNoItems={this.props.searchFilterActions.toggleHideNoItems}
+                           scrollTargetNode={this}
+                           isSearching={this.props.isSearching}
+                           windowWidth={this.props.windowWidth}
+            />
+
+              <SearchResultsHeader key="search_results_header"
+                locationQuery={this.props.location.query}
+                searchActions={this.props.searchActions}
+                searchError={this.props.searchError}
+                totalHits={this.props.totalHits}
+              />
+          </div>
+      )
+    }
+  }
+
   render () {
     return (
       <NonIETransitionGroup
@@ -150,20 +209,9 @@ class Search extends React.Component {
           : null}
         {this.props.totalHits > 0
           ? <div className="search-wrapper">
-              <SearchFilters key="search_filters"
-                             filters={this.props.filters}
-                             locationQuery={this.props.location.query}
-                             toggleFilter={this.props.searchFilterActions.toggleFilter}
-                             toggleFilterVisibility={this.props.searchFilterActions.toggleFilterVisibility}
-                             toggleAllFiltersVisibility={this.props.searchFilterActions.toggleAllFiltersVisibility}
-                             toggleCollapseFilter={this.props.searchFilterActions.toggleCollapseFilter}
-                             togglePeriod={this.props.searchFilterActions.togglePeriod}
-                             toggleAvailability={this.props.searchFilterActions.toggleAvailability}
-                             toggleHideNoItems={this.props.searchFilterActions.toggleHideNoItems}
-                             scrollTargetNode={this}
-                             isSearching={this.props.isSearching}
-                             windowWidth={this.props.windowWidth}
-              />
+            <div className="sticky-wrapper">
+            {this.manageMobileHeaders()}
+            </div>
               <SearchResults key="search_results"
                            locationQuery={this.props.location.query}
                            searchActions={this.props.searchActions}
@@ -175,6 +223,17 @@ class Search extends React.Component {
                            page={Number(this.props.location.query.page || '1')}
                            items={this.props.items}
                            homeBranch={this.props.userProfile.homeBranch}
+                           filters={this.props.filters}
+                           toggleFilter={this.props.searchFilterActions.toggleFilter}
+                           toggleFilterVisibility={this.props.searchFilterActions.toggleFilterVisibility}
+                           toggleAllFiltersVisibility={this.props.searchFilterActions.toggleAllFiltersVisibility}
+                           toggleCollapseFilter={this.props.searchFilterActions.toggleCollapseFilter}
+                           togglePeriod={this.props.searchFilterActions.togglePeriod}
+                           toggleAvailability={this.props.searchFilterActions.toggleAvailability}
+                           toggleHideNoItems={this.props.searchFilterActions.toggleHideNoItems}
+                           scrollTargetNode={this}
+                           isSearching={this.props.isSearching}
+                           windowWidth={this.props.windowWidth}
               />
             </div>
           : null}

diff --git a/redef/patron-client/src/sass/main.scss b/redef/patron-client/src/sass/main.scss
@@ -920,7 +920,15 @@ input[type="checkbox"]:checked + label i.checkbox-unchecked {
 
 // filters
 // --------------------------------------------------------
-
+.sticky {
+  z-index: 1;
+  opacity: 1;
+  background-color: $white
+  // background-color: $redColor;
+  // a {
+  //       color: $white
+  // }
+}
 .active-filters {
   /* border-top: 1px solid $mediumGreyColor; */
   margin-top: $rhythm1;
@@ -975,6 +983,10 @@ input[type="checkbox"]:checked + label i.checkbox-unchecked {
   @include span(12);
   @include clearfix;
   margin-bottom: $rhythm4;
+  // hack to fix extra mystery padding after filters in mobile version
+  @media (min-width: 1px) and (max-width: 667px) {
+          margin-bottom: 0px;
+      }
 }
 
 .filters .limit-filters {
@@ -986,6 +998,10 @@ input[type="checkbox"]:checked + label i.checkbox-unchecked {
   color: $redColor;
   margin-bottom: $rhythm3;
   /* border-top: 1px solid $mediumGreyColor; */
+  // hack to fix extra mystery padding after filters in mobile version
+  @media (min-width: 1px) and (max-width: 667px) {
+        margin-bottom: 0px;
+    }
 }
 
 @include breakpoint($small) {
@@ -1210,6 +1226,10 @@ input[type="checkbox"]:checked + label i.checkbox-unchecked {
   margin-top: 1em;
   margin-bottom: 1em;
   cursor: default;
+  //hack to make borders work properly in mobile version
+  @media (min-width: 1px) and (max-width: 667px) {
+        border-bottom: 2px solid $blackColor;
+    }
 }
 
 .filter-group.dateRangeFilters .form-item {
@@ -1285,7 +1305,6 @@ input[type="checkbox"]:checked + label i.checkbox-unchecked {
 }
 
 .search-results .search-results-list {
-  border-top: 2px solid $blackColor;
   padding-top: $rhythm2;
 }
 
@@ -1327,6 +1346,12 @@ input[type="checkbox"]:checked + label i.checkbox-unchecked {
   margin-top: 1.85em;
 }
 
+@media (min-width: 1px) and (max-width: 667px) {
+  .search-results-header-flex {
+    border-bottom: 2px solid $blackColor;
+  }
+}
+
 .search-results-header {
   @include clearfix;
   max-width: 100%;