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

collection page + footer

Browse Source
This commit is contained in:
diminator 2015-10-08 20:26:29 +02:00
parent 71988d502d
commit b7aaa9a4cf
9 changed files with 120 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
js/components/ascribe_accordion_list/accordion_list_item.js
View File

@ -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}

6
js/components/ascribe_accordion_list/accordion_list_item_edition_widget.js
View File

@ -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>
);

2
js/components/ascribe_spinner.js
View File

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

1
js/components/footer.js
View File

@ -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> |

100
sass/ascribe_custom_style.scss
View File

@ -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-sec-color: $ascribe-pink;
$ascribe--nav-fg-prim-color: white;
$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,

5
sass/ascribe_footer.scss
View File

@ -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;

18
sass/ascribe_navbar.scss Normal file
View File

@ -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;
}

7
sass/ascribe_notification_list.scss
View File

@ -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 {

46
sass/main.scss
View File

@ -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;