ascribe/onion
1
0
Fork 0
mirror of https://github.com/ascribe/onion.git synced 2024-12-23 01:39:36 +01:00
Code Issues Releases Wiki Activity

thumbnails, header, footer, pager

Browse Source
This commit is contained in:
diminator 2015-10-16 13:00:19 +02:00
parent ed24ec194e
commit f8d2d39b2d
5 changed files with 32 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
js/components/ascribe_accordion_list/accordion_list_item_piece.js
View File

@ -48,7 +48,7 @@ let AccordionListItemPiece = React.createClass({
return ( return (
<AccordionListItem <AccordionListItem
className={this.props.className} 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>} heading={<h1>{this.props.piece.title}</h1>}
subheading={ subheading={
<h3> <h3>

5
js/components/ascribe_pagination/pagination_button.js
View File

@ -3,6 +3,7 @@
import React from 'react'; import React from 'react';
import Router from 'react-router'; import Router from 'react-router';
import Glyphicon from 'react-bootstrap/lib/Glyphicon';
import { getLangText } from '../../utils/lang_utils'; import { getLangText } from '../../utils/lang_utils';
let Link = Router.Link; let Link = Router.Link;
@ -29,14 +30,14 @@ let PaginationButton = React.createClass({
page -= 1; page -= 1;
directionDisplay = ( directionDisplay = (
<span> <span>
<span aria-hidden="true">&larr;</span> {getLangText('Previous')} <span aria-hidden="true"><Glyphicon glyph='chevron-left'/></span> {getLangText('Previous')}
</span> </span>
); );
} else { } else {
page += 1; page += 1;
directionDisplay = ( directionDisplay = (
<span> <span>
{getLangText('Next')} <span aria-hidden="true">&rarr;</span> {getLangText('Next')} <span aria-hidden="true"><Glyphicon glyph='chevron-right'/></span>
</span> </span>
); );
} }

16
sass/ascribe_accordion_list.scss
View File

@ -51,12 +51,20 @@ $ascribe-accordion-list-item-height: 100px;
max-width: 100%; max-width: 100%;
} }
&::before { div {
content: ' ';
display: inline-block; display: inline-block;
height: 100%; width: 100px;
vertical-align: middle; // vertical alignment of the inline element 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 { h1 {

26
sass/ascribe_custom_style.scss
View File

@ -11,9 +11,9 @@ $ascribe-red-error: rgb(169, 68, 66);
$ascribe--fg-color: $ascribe-dark-blue; $ascribe--fg-color: $ascribe-dark-blue;
$ascribe--bg-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-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-default-color: $ascribe--bg-color;
$ascribe--button-secondary-fg-color: $ascribe--bg-color; $ascribe--button-secondary-fg-color: $ascribe--bg-color;
@ -27,7 +27,7 @@ html,
body { body {
font-family: $ascribe--font; font-family: $ascribe--font;
font-weight: $ascribe--font-weight; font-weight: $ascribe--font-weight;
background-color: #fcfcfc !important; background-color: #f8f8f8 !important;
} }
h1, h3 { h1, h3 {
font-family: $ascribe--font; font-family: $ascribe--font;
@ -50,8 +50,8 @@ hr {
.navbar-default { .navbar-default {
background-color: $ascribe--nav-bg-color; background-color: $ascribe--nav-bg-color;
box-shadow: 0 0 2px rgba(0,0,0,.14), box-shadow: 0 0 1px rgba(0,0,0,.1),
0 2px 4px rgba(0,0,0,.28); 0 1px 2px rgba(0,0,0,.2);
.navbar-nav > li > a, .navbar-nav > li > a,
.navbar-nav > li > .active a { .navbar-nav > li > .active a {
@ -194,11 +194,11 @@ hr {
} }
} }
.ascribe-footer { .ascribe-footer {
position: fixed; //position: fixed;
left: 0; //left: 0;
bottom: 0; //bottom: 0;
height: 80px; //height: 80px;
width: 100%; //width: 100%;
text-transform: uppercase; text-transform: uppercase;
background-color: $ascribe-white; background-color: $ascribe-white;
border-top: 1px solid rgba(0, 60, 105, 0.1); 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; 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 > a,
.pager .disabled > span { .pager .disabled > span {
background-color: $ascribe--button-default-color!important; background-color: $ascribe--button-default-color!important;

6
sass/main.scss
View File

@ -58,10 +58,6 @@ html {
padding-top: 70px; padding-top: 70px;
} }
.ascribe-body {
margin-bottom: 100px;
}
hr { hr {
margin-bottom: 15px; margin-bottom: 15px;
} }
@ -76,8 +72,6 @@ hr {
.no-margin { .no-margin {
margin: 0; margin: 0;
margin-left: 0;
margin-right: 0;
} }
.no-padding { .no-padding {