Update active class on owned-card-list

zooniverse · Dec 10, 2015 · a574807 · a574807
1 parent efc71ae
commit a574807
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 1 deletion.
diff --git a/app/components/owned-card-list.cjsx b/app/components/owned-card-list.cjsx
@@ -32,6 +32,8 @@ module.exports = React.createClass
       'All'
 
   render: ->
+    {location} = @props
+
     <div className="secondary-page all-resources-page">
       <section className={"hero #{@props.heroClass}"}>
         <div className="hero-container">
@@ -65,7 +67,15 @@ module.exports = React.createClass
                 {if meta
                   <nav className="pagination">
                     {for page in [1..meta.page_count]
-                      <Link to={"#{@props.linkTo}?page=#{page}"} activeClassName="active" key={page} className="pill-button" style={border: "2px solid" if page is 1 and window.location.search is ""}>{page}</Link>}
+                      active = (page is +location.query.page) or (page is 1 and not location.search)
+                      <Link
+                        key={page}
+                        to={"#{@props.linkTo}?page=#{page}"}
+                        activeClassName="active"
+                        className="pill-button"
+                        style={border: "2px solid" if active}>
+                        {page}
+                      </Link>}
                   </nav>}
               </nav>
             </div>

diff --git a/app/pages/collections.cjsx b/app/pages/collections.cjsx
@@ -61,6 +61,7 @@ List = React.createClass
 
   render: ->
     <OwnedCardList
+      {...@props}
       translationObjectName="collectionsPage"
       listPromise={@listCollections()}
       linkTo="collections"

diff --git a/app/pages/projects.cjsx b/app/pages/projects.cjsx
@@ -42,6 +42,7 @@ module.exports = React.createClass
 
   render: ->
     <OwnedCardList
+      {...@props}
       translationObjectName="projectsPage"
       listPromise={@listProjects()}
       linkTo="projects"