piece list styling

index.html

@@ -42,7 +42,7 @@
             <% DEBUG && print('window.CREDENTIALS = \'' + CREDENTIALS + '\''); %>
         </script>
         <!-- Typekit gibson font -->
-        <script src="https://use.typekit.net/gma2yhj.js"></script>;
+        <script src="https://use.typekit.net/gma2yhj.js"></script>
         <script>
             try {Typekit.load({ async: true });}
             catch(e){}

js/components/ascribe_accordion_list/accordion_list_item.js

@@ -3,6 +3,8 @@
 import React from 'react';
 import Router from 'react-router';
 
+let Link = Router.Link;
+
 let AccordionListItem = React.createClass({
     propTypes: {
         badge: React.PropTypes.object,
@@ -12,6 +14,7 @@ let AccordionListItem = React.createClass({
         subheading: React.PropTypes.object,
         subsubheading: React.PropTypes.object,
         buttons: React.PropTypes.object,
+        linkData: React.PropTypes.func,
         children: React.PropTypes.oneOfType([
             React.PropTypes.arrayOf(React.PropTypes.element),
             React.PropTypes.element
@@ -26,15 +29,19 @@ let AccordionListItem = React.createClass({
             <div className="row">
                 <div className={this.props.className}>
                     <div className="wrapper">
-                        <div className="pull-left">
+                        <Link {...this.props.linkData()}>
-                            <div className="thumbnail-wrapper">
+                            <div className="pull-left">
-                                {this.props.thumbnail}
+                                <div className="thumbnail-wrapper">
+                                    {this.props.thumbnail}
+                                </div>
                             </div>
-                        </div>
+                            <div className="pull-left accordion-list-item-header">
-                        <div className="accordion-list-item-header">
+                                {this.props.heading}
-                            {this.props.heading}
+                                {this.props.subheading}
-                            {this.props.subheading}
+                                {this.props.subsubheading}
-                            {this.props.subsubheading}
+                            </div>
+                        </Link>
+                        <div className="accordion-list-item-buttons">
                             {this.props.buttons}
                         </div>
                         <span style={{'clear': 'both'}}></span>

js/components/ascribe_accordion_list/accordion_list_item_piece.js

@@ -7,8 +7,6 @@ import AccordionListItem from './accordion_list_item';
 
 import { getLangText } from '../../utils/lang_utils';
 
-let Link = Router.Link;
-
 
 let AccordionListItemPiece = React.createClass({
     propTypes: {
@@ -50,14 +48,8 @@ let AccordionListItemPiece = React.createClass({
         return (
             <AccordionListItem
                 className={this.props.className}
-                thumbnail={
+                thumbnail={<img src={this.props.piece.thumbnail.url_safe}/>}
-                    <Link {...this.getLinkData()}>
+                heading={<h1>{this.props.piece.title}</h1>}
-                        <img src={this.props.piece.thumbnail.url_safe}/>
-                    </Link>}
-                heading={
-                    <Link {...this.getLinkData()}>
-                        <h1>{this.props.piece.title}</h1>
-                    </Link>}
                 subheading={
                     <h3>
                         {getLangText('by ')}
@@ -67,6 +59,7 @@ let AccordionListItemPiece = React.createClass({
                 subsubheading={this.props.subsubheading}
                 buttons={this.props.buttons}
                 badge={this.props.badge}
+                linkData={this.getLinkData}
                 >
                 {this.props.children}
             </AccordionListItem>

js/components/ascribe_app.js

@@ -16,7 +16,9 @@ let AscribeApp = React.createClass({
         return (
             <div className="container ascribe-default-app">
                 <Header routes={getRoutes()} />
-                <RouteHandler />
+                <div className="ascribe-body">
+                    <RouteHandler />
+                </div>
                 <Footer />
                 <GlobalNotification />
                 <div id="modal" className="container"></div>

js/components/piece_list.js

@@ -105,7 +105,7 @@ let PieceList = React.createClass({
         let currentPage = parseInt(this.getQuery().page, 10) || 1;
         let totalPages = Math.ceil(this.state.pieceListCount / this.state.pageSize);
 
-        if (this.state.pieceListCount > 10) {
+        if (this.state.pieceListCount > 20) {
             return (
                 <Pagination
                     currentPage={currentPage}

js/stores/piece_list_store.js

@@ -23,7 +23,7 @@ class PieceListStore {
         this.pieceListCount = -1;
         this.unfilteredPieceListCount = -1;
         this.page = 1;
-        this.pageSize = 10;
+        this.pageSize = 20;
         this.search = '';
         this.orderBy = 'artist_name';
         this.orderAsc = true;

sass/ascribe_accordion_list.scss

@@ -1,4 +1,4 @@
-$ascribe-accordion-list-item-height: 8em;
+$ascribe-accordion-list-item-height: 100px;
 
 .ascribe-accordion-list {
     padding-left: 15px;
@@ -12,11 +12,11 @@ $ascribe-accordion-list-item-height: 8em;
 .ascribe-accordion-list-item {
     background-color: white;
     border: 1px solid black;
-    height: $ascribe-accordion-list-item-height;
+    height: $ascribe-accordion-list-item-height + 2px;
 
     padding-left: 0;
     padding-right: 0;
-    margin-top: 1.5em;
+    margin-top: 1.2em;
     overflow: hidden;
 
     border-radius: 1px;
@@ -39,11 +39,12 @@ $ascribe-accordion-list-item-height: 8em;
 
         // ToDo: Include media queries for thumbnail
         .thumbnail-wrapper {
+            margin-right: 2em;
+            width: $ascribe-accordion-list-item-height;
+            height: $ascribe-accordion-list-item-height;
             cursor: pointer;
-            height: 110px;
             padding: 0;
             text-align: center;
-            width: 110px;
 
             img {
                 max-height: 100%;
@@ -84,13 +85,27 @@ $ascribe-accordion-list-item-height: 8em;
 }
 
 .accordion-list-item-header {
-    margin-top: .65em;
+    margin-top: 0;
+    padding: 0.5em 0;
+
+    h1 {
+        font-size: 1.9em;
+    }
+    h3 {
+        font-size: 1.1em;
+        margin-top: 0.4em;
+    }
 
     > a {
         text-decoration: none;
     }
 }
 
+.accordion-list-item-buttons {
+    padding-top: 60px;
+    padding-right: 10px;
+}
+
 .ascribe-accordion-list-loading img {
     display: block;
     margin: auto;

sass/ascribe_custom_style.scss

@@ -140,31 +140,20 @@ h1 {
     -webkit-box-shadow: 0 2px 2px -2px rgba(0,0,0,.58);
 	   -moz-box-shadow: 0 2px 2px -2px rgba(0,0,0,.58);
 	        box-shadow: 0 2px 2px -2px rgba(0,0,0,.58);
-
+    &:hover {
-    margin-top: 0.7em;
+        -webkit-transform: scale(1.02);
-    .wrapper {
+           -moz-transform: scale(1.02);
-        .thumbnail-wrapper {
+            -ms-transform: scale(1.02);
-            margin-right: 2em;
+             -o-transform: scale(1.02);
-            width: 100px;
+                transform: scale(1.02);
-        }
+        -webkit-transition: all 0.2s ease;
-        .accordion-list-item-header {
+         -moz-transition: all 0.2s ease;
-            margin-top: 0;
+       -o-transition: all 0.2s ease;
-            padding: 1em;
+      -ms-transition: all 0.2s ease;
-            h1 {
+          transition: all 0.2s ease;
-                font-size: 1.9em;
-            }
-            h3 {
-                font-size: 1.1em;
-                margin-top: 0.4em;
-            }
-        }
     }
 }
 
-.ascribe-accordion-list {
-    margin-bottom: 100px;
-}
-
 .ascribe-footer {
     position: fixed;
     left: 0;

sass/main.scss

@@ -56,6 +56,10 @@ html {
     padding-top: 70px;
 }
 
+.ascribe-body {
+    margin-bottom: 100px;
+}
+
 hr {
     margin-bottom: 15px;
 }