From f8d2d39b2d674268b15635c89efef45ae27be1d8 Mon Sep 17 00:00:00 2001
From: diminator <dimi.dejonghe@gmail.com>
Date: Fri, 16 Oct 2015 13:00:19 +0200
Subject: [PATCH] thumbnails, header, footer, pager

---
 .../accordion_list_item_piece.js              |  2 +-
 .../ascribe_pagination/pagination_button.js   |  5 ++--
 sass/ascribe_accordion_list.scss              | 16 +++++++++---
 sass/ascribe_custom_style.scss                | 26 ++++++++++++-------
 sass/main.scss                                |  6 -----
 5 files changed, 32 insertions(+), 23 deletions(-)

diff --git a/js/components/ascribe_accordion_list/accordion_list_item_piece.js b/js/components/ascribe_accordion_list/accordion_list_item_piece.js
index 5357c2e7..8bdfed90 100644
--- a/js/components/ascribe_accordion_list/accordion_list_item_piece.js
+++ b/js/components/ascribe_accordion_list/accordion_list_item_piece.js
@@ -48,7 +48,7 @@ let AccordionListItemPiece = React.createClass({
         return (
             <AccordionListItem
                 className={this.props.className}
-                thumbnail={<img src={this.props.piece.thumbnail.url_safe}/>}
+                thumbnail={<div style={{backgroundImage: 'url("' + this.props.piece.thumbnail.url_safe + '")'}}/>}
                 heading={<h1>{this.props.piece.title}</h1>}
                 subheading={
                     <h3>
diff --git a/js/components/ascribe_pagination/pagination_button.js b/js/components/ascribe_pagination/pagination_button.js
index 3adf0b50..87fc3b81 100644
--- a/js/components/ascribe_pagination/pagination_button.js
+++ b/js/components/ascribe_pagination/pagination_button.js
@@ -3,6 +3,7 @@
 import React from 'react';
 import Router from 'react-router';
 
+import Glyphicon from 'react-bootstrap/lib/Glyphicon';
 import { getLangText } from '../../utils/lang_utils';
 
 let Link = Router.Link;
@@ -29,14 +30,14 @@ let PaginationButton = React.createClass({
             page -= 1;
             directionDisplay = (
                 <span>
-                    <span aria-hidden="true">&larr;</span> {getLangText('Previous')}
+                    <span aria-hidden="true"><Glyphicon glyph='chevron-left'/></span> {getLangText('Previous')}
                 </span>
                 );
         } else {
             page += 1;
             directionDisplay = (
                 <span>
-                    {getLangText('Next')} <span aria-hidden="true">&rarr;</span>
+                    {getLangText('Next')} <span aria-hidden="true"><Glyphicon glyph='chevron-right'/></span>
                 </span>
                 );
         }
diff --git a/sass/ascribe_accordion_list.scss b/sass/ascribe_accordion_list.scss
index be5a26f2..7bdfd68d 100644
--- a/sass/ascribe_accordion_list.scss
+++ b/sass/ascribe_accordion_list.scss
@@ -51,12 +51,20 @@ $ascribe-accordion-list-item-height: 100px;
                 max-width: 100%;
             }
 
-            &::before {
-                content: ' ';
+            div {
                 display: inline-block;
-                height: 100%;
-                vertical-align: middle; // vertical alignment of the inline element
+                width: 100px;
+                height: 100px;
+                background-position: center center;
+                background-size: cover;
             }
+
+            //&::before {
+            //    content: ' ';
+            //    display: inline-block;
+            //    height: 100%;
+            //    vertical-align: middle; // vertical alignment of the inline element
+            //}
         }
 
         h1 {
diff --git a/sass/ascribe_custom_style.scss b/sass/ascribe_custom_style.scss
index 35062ead..d1c9e0a5 100644
--- a/sass/ascribe_custom_style.scss
+++ b/sass/ascribe_custom_style.scss
@@ -11,9 +11,9 @@ $ascribe-red-error: rgb(169, 68, 66);
 $ascribe--fg-color: $ascribe-dark-blue;
 $ascribe--bg-color: $ascribe-dark-blue;
 
-$ascribe--nav-fg-prim-color: white;
+$ascribe--nav-fg-prim-color: $ascribe-dark-blue;
 $ascribe--nav-fg-sec-color: $ascribe-light-blue;
-$ascribe--nav-bg-color: $ascribe-dark-blue;
+$ascribe--nav-bg-color: white;
 
 $ascribe--button-default-color: $ascribe--bg-color;
 $ascribe--button-secondary-fg-color: $ascribe--bg-color;
@@ -27,7 +27,7 @@ html,
 body {
     font-family: $ascribe--font;
     font-weight: $ascribe--font-weight;
-    background-color: #fcfcfc !important;
+    background-color: #f8f8f8 !important;
 }
 h1, h3 {
     font-family: $ascribe--font;
@@ -50,8 +50,8 @@ hr {
 
 .navbar-default {
     background-color: $ascribe--nav-bg-color;
-    box-shadow: 0 0 2px rgba(0,0,0,.14),
-                0 2px 4px rgba(0,0,0,.28);
+    box-shadow: 0 0 1px rgba(0,0,0,.1),
+                0 1px 2px rgba(0,0,0,.2);
 
     .navbar-nav > li > a,
     .navbar-nav > li > .active a {
@@ -194,11 +194,11 @@ hr {
     }
 }
 .ascribe-footer {
-    position: fixed;
-    left: 0;
-    bottom: 0;
-    height: 80px;
-    width: 100%;
+    //position: fixed;
+    //left: 0;
+    //bottom: 0;
+    //height: 80px;
+    //width: 100%;
     text-transform: uppercase;
     background-color: $ascribe-white;
     border-top: 1px solid rgba(0, 60, 105, 0.1);
@@ -400,6 +400,12 @@ fieldset[disabled] .btn-secondary.active {
     border-color: $ascribe--button-default-color;
 }
 
+.pager li > a:hover,
+.pager li > span:hover {
+    background-color: lighten($ascribe--button-default-color, 20%);
+    border-color: lighten($ascribe--button-default-color, 20%);
+}
+
 .pager .disabled > a,
 .pager .disabled > span {
     background-color: $ascribe--button-default-color!important;
diff --git a/sass/main.scss b/sass/main.scss
index ab37d699..1d98b7e8 100644
--- a/sass/main.scss
+++ b/sass/main.scss
@@ -58,10 +58,6 @@ html {
     padding-top: 70px;
 }
 
-.ascribe-body {
-    margin-bottom: 100px;
-}
-
 hr {
     margin-bottom: 15px;
 }
@@ -76,8 +72,6 @@ hr {
 
 .no-margin {
     margin: 0;
-    margin-left: 0;
-    margin-right: 0;
 }
 
 .no-padding {