collection page + footer

js/components/ascribe_accordion_list/accordion_list_item.js

@@ -26,12 +26,12 @@ let AccordionListItem = React.createClass({
             <div className="row">
                 <div className={this.props.className}>
                     <div className="wrapper">
-                        <div className="col-xs-4 col-sm-3 col-md-2 col-lg-2 clear-paddings">
+                        <div className="pull-left">
                             <div className="thumbnail-wrapper">
                                 {this.props.thumbnail}
                             </div>
                         </div>
-                        <div className="col-xs-8 col-sm-9 col-md-9 col-lg-9 col-md-offset-1 col-lg-offset-1 accordion-list-item-header">
+                        <div className="accordion-list-item-header">
                             {this.props.heading}
                             {this.props.subheading}
                             {this.props.subsubheading}

js/components/ascribe_accordion_list/accordion_list_item_edition_widget.js

@@ -98,7 +98,7 @@ let AccordionListItemEditionWidget = React.createClass({
                 return (
                     <CreateEditionsButton
                         label={getLangText('Create editions')}
-                        className="btn-xs pull-right"
+                        className="btn-secondary btn-sm pull-right"
                         piece={piece}
                         toggleCreateEditionsDialog={this.props.toggleCreateEditionsDialog}
                         onPollingSuccess={this.props.onPollingSuccess}/>
@@ -115,7 +115,7 @@ let AccordionListItemEditionWidget = React.createClass({
                     <Button
                         disabled
                         title={getLangText('All editions for this have been deleted already.')}
-                        className={classNames('btn', 'btn-default', 'btn-xs', 'ascribe-accordion-list-item-edition-widget', this.props.className)}>
+                        className={classNames('btn', 'btn-secondary', 'btn-sm', 'ascribe-accordion-list-item-edition-widget', this.props.className)}>
                         {'0 ' + getLangText('Editions')}
                     </Button>
                 );
@@ -125,7 +125,7 @@ let AccordionListItemEditionWidget = React.createClass({
                 return (
                     <button
                         onClick={this.toggleTable}
-                        className={classNames('btn', 'btn-default', 'btn-xs', 'ascribe-accordion-list-item-edition-widget', this.props.className)}>
+                        className={classNames('btn', 'btn-secondary', 'btn-sm', 'ascribe-accordion-list-item-edition-widget', this.props.className)}>
                         {editionMapping + ' ' + getLangText('Editions')} {this.getGlyphicon()}
                     </button>
                 );

js/components/ascribe_spinner.js

@@ -11,7 +11,7 @@ let AscribeSpinner = React.createClass({
 
     getDefaultProps() {
         return {
-            size: 'sm',
+            size: 'md',
             color: 'loop'
         };
     },

js/components/footer.js

@@ -8,7 +8,6 @@ let Footer = React.createClass({
     render() {
         return (
             <div className="ascribe-footer">
-                <hr />
                 <p className="ascribe-sub-sub-statement">
                   <br />
                   <a href="https://github.com/ascribe/REST-main/" target="_blank">api</a> |

sass/ascribe_custom_style.scss

@@ -2,13 +2,14 @@ $ascribe-black: #1E1E1E;
 $ascribe-dark-blue: #003C69;
 $ascribe-blue: #65CFE9;
 $ascribe-light-blue: #D3DEE4;
+$ascribe-white: #F8F8F8;
 $ascribe-pink: #D10074;
 
 $ascribe--fg-color: $ascribe-dark-blue;
-$ascribe--bg-color: $ascribe-blue;
+$ascribe--bg-color: $ascribe-dark-blue;
 
-$ascribe--nav-fg-prim-color: $ascribe-light-blue;
+$ascribe--nav-fg-prim-color: white;
-$ascribe--nav-fg-sec-color: $ascribe-pink;
+$ascribe--nav-fg-sec-color: $ascribe-light-blue;
 $ascribe--nav-bg-color: $ascribe-dark-blue;
 $ascribe--button-color: $ascribe--bg-color;
 $ascribe--font-weight: 300;
@@ -20,12 +21,17 @@ body {
     //font-family: 'Helvetica Neue', 'Helvetica', sans-serif;
     font-family: 'canada-type-gibson', sans-serif !important;
     font-weight: $ascribe--font-weight !important;
+    background-color: #f9f9f9 !important;
 }
 h1, h3 {
     font-family: 'canada-type-gibson', sans-serif !important;
     font-weight: $ascribe--font-weight !important;
 }
 
+h1 {
+    font-size: 30px;
+}
+
 .nav .open > a,
 .nav .open > a:hover,
 .nav .open > a:focus {
@@ -34,20 +40,20 @@ h1, h3 {
 
 .navbar-default {
     background-color: $ascribe--nav-bg-color;
+    box-shadow: 0 0 4px rgba(0,0,0,.14),
+                0 4px 8px rgba(0,0,0,.28);
 
     .navbar-nav > li > a,
     .navbar-nav > li > .active a {
         text-transform: uppercase;
-        border-bottom-color: transparent;
         font-size: 12px;
+        color: $ascribe--nav-fg-prim-color;
+        border-bottom: 3px solid transparent;
     }
     .navbar-nav > li > a:hover {
         color: $ascribe--nav-fg-sec-color;
     }
 
-    .navbar-nav > li > a {
-        color: $ascribe--nav-fg-prim-color;
-    }
 
     .navbar-nav > .active a,
     .navbar-nav > .active a:hover,
@@ -55,6 +61,7 @@ h1, h3 {
         color: $ascribe--nav-fg-prim-color;
         border-bottom-color: $ascribe--nav-fg-prim-color;
         background-color: $ascribe--nav-bg-color;
+        font-weight: 500;
     }
 
     .navbar-nav > .active {
@@ -74,6 +81,9 @@ h1, h3 {
         color:  $ascribe--nav-fg-prim-color;
         background-color: $ascribe--nav-bg-color;
     }
+    .dropdown-menu {
+        background-color: $ascribe--nav-bg-color;
+    }
 
     .dropdown-menu > li > a {
         color:  $ascribe--nav-fg-prim-color;
@@ -86,7 +96,22 @@ h1, h3 {
         background-color: $ascribe--nav-bg-color;
     }
 
-    .navbar-brand {
+    .notification-menu {
+        .dropdown-menu {
+            background-color: white;
+            li:hover {
+                background-color: $ascribe-white;
+            }
+        }
+        .notification-action{
+            color: $ascribe-pink;
+        }
+    }
+
+    .navbar-brand,
+    .navbar-brand:hover {
+        font-size: 23px;
+        padding: 12px 15px;
         color: $ascribe--nav-fg-prim-color;
     }
     .img-brand .navbar-brand {
@@ -110,6 +135,46 @@ h1, h3 {
     }
 }
 
+.ascribe-accordion-list-item {
+    border: 1px solid rgba(0, 60, 105, 0.1);
+    -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);
+
+    margin-top: 0.7em;
+    .wrapper {
+        .thumbnail-wrapper {
+            margin-right: 2em;
+            width: 100px;
+        }
+        .accordion-list-item-header {
+            margin-top: 0;
+            padding: 1em;
+            h1 {
+                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;
+    bottom: 0;
+    height: 80px;
+    width: 100%;
+    text-transform: uppercase;
+    background-color: $ascribe-white;
+    border-top: 1px solid rgba(0, 60, 105, 0.1);
+}
 
 .route--landing {
     animation: color-loop 20s;
@@ -275,6 +340,25 @@ fieldset[disabled] .btn-default.active {
     }
 }
 
+.btn-secondary {
+    background-color: white;
+    border-color: $ascribe--button-color;
+    color: $ascribe--button-color;
+
+    &:hover,
+    &:active,
+    &:focus,
+    &:active:hover,
+    &:active:focus,
+    &:active.focus,
+    &.active:hover,
+    &.active:focus,
+    &.active.focus {
+        background-color: darken($ascribe--button-color, 20%);
+        border-color: darken($ascribe--button-color, 20%);
+    }
+}
+
 .open > .btn-default.dropdown-toggle:hover,
 .open > .btn-default.dropdown-toggle:focus,
 .open > .btn-default.dropdown-toggle.focus,

sass/ascribe_footer.scss

@@ -4,8 +4,7 @@
 
     hr {
         background-color: rgba(0, 0, 0, 0);
-        border-top: 1px solid #eee;
+        //border: 0;
-        border: 0;
         margin-bottom: 0 !important;
     }
 
@@ -26,9 +25,9 @@
             color: #48DACB;
         }
     }
-
 }
 
+
 .ascribe-footer-statement {
     font-family: 'mercury_light';
     font-size: 1.6em !important;

sass/ascribe_navbar.scss

@@ -0,0 +1,18 @@
+.navbar-default {
+    border: 0;
+    border-color: #ccc;
+    border-left: 0;
+    border-right: 0;
+    border-top: 0;
+    font-size: .8em;
+    margin-bottom: 1.5em;
+}
+
+.navbar-right {
+    margin-right: 0;
+}
+
+
+.img-brand {
+    height: 60px;
+}

sass/ascribe_notification_list.scss

@@ -16,13 +16,10 @@ $break-medium: 1200px;
 .notification-wrapper {
     height:8.4em;
     border-bottom: 1px solid #eeeeee;
-    margin: -3px 0;
+    margin: 0;
     padding: 0.5em;
     color: black;
 
-    &:hover{
-        background-color: rgba(2, 182, 163, .05);
-    }
     // ToDo: Include media queries for thumbnail
     .thumbnail-wrapper {
         width: 7.4em;
@@ -75,8 +72,6 @@ $break-medium: 1200px;
 
 .notification-amount {
     padding: 0.3em;
-    font-size: 1.2em;
-
 }
 
 .ascribe-global-action {

sass/main.scss

@@ -12,6 +12,7 @@ $BASE_URL: '<%= BASE_URL %>';
 @import 'glyphicons-social';
 @import 'ascribe_theme';
 @import './ascribe-fonts/ascribe-fonts';
+@import 'ascribe_navbar';
 @import 'ascribe_login';
 @import 'ascribe_table';
 @import 'ascribe_accordion_list';
@@ -81,48 +82,6 @@ hr {
     display: inline;
 }
 
-.navbar-default {
-    border: 0;
-    border-color: #ccc;
-    border-left: 0;
-    border-right: 0;
-    border-top: 0;
-    font-size: .8em;
-    margin-bottom: 1.5em;
-
-    .navbar-nav > li > a {
-        border: 1px solid rgba(0, 0, 0, 0);
-    }
-
-//     .navbar-nav > .active {
-//         a {
-//             background-color: transparent !important;
-//             border-bottom: 1px solid #02b6a3;
-//             color: #02b6a3;
-// 
-//             > span {
-//                 color: #02b6a3;
-//             }
-// 
-//             &:hover,
-//             &:focus {
-//                 background-color: transparent;
-//                 border-bottom: 1px solid #02b6a3;
-//                 color: #02b6a3;
-// 
-//                 > span {
-//                     color: #02b6a3;
-//                 }
-//             }
-//         }
-//     }
-}
-
-
-
-.img-brand {
-    height: 60px;
-}
 
 .truncate {
     overflow: hidden;
@@ -151,9 +110,6 @@ hr {
     }
 }
 
-.navbar-right {
-    margin-right: 0;
-}
 
 .clear-paddings {
     padding-left: 0;