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

Refactor PieceListToolbarWidget CSS

Browse Source
This commit is contained in:
Brett Sun 2016-01-27 15:01:33 +01:00
parent 0d01ae1642
commit f06ad6597c
4 changed files with 14 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
js/components/ascribe_piece_list_toolbar/piece_list_toolbar_filter_widget.js
View File

@ -86,7 +86,7 @@ let PieceListToolbarFilterWidget = React.createClass({
<DropdownButton <DropdownButton
pullRight={true} pullRight={true}
title={filterIcon} title={filterIcon}
className="ascribe-piece-list-toolbar-filter-widget"> className="ascribe-piece-list-toolbar-widget">
{/* We iterate over filterParams, to receive the label and then for each {/* We iterate over filterParams, to receive the label and then for each
label also iterate over its items, to get all filterable options */} label also iterate over its items, to get all filterable options */}
{this.props.filterParams.map(({ label, items }, i) => { {this.props.filterParams.map(({ label, items }, i) => {
@ -120,7 +120,7 @@ let PieceListToolbarFilterWidget = React.createClass({
<li <li
key={itemLabel} key={itemLabel}
onClick={this.filterBy(param)} onClick={this.filterBy(param)}
className="filter-widget-item"> className="ascribe-piece-list-toolbar-widget-item">
<div className="checkbox-line"> <div className="checkbox-line">
<span> <span>
{getLangText(itemLabel)} {getLangText(itemLabel)}

8
js/components/ascribe_piece_list_toolbar/piece_list_toolbar_order_widget.js
View File

@ -45,7 +45,7 @@ let PieceListToolbarOrderWidget = React.createClass({
}, },
render() { render() {
let filterIcon = ( let orderIcon = (
<span> <span>
<span className="ascribe-icon icon-ascribe-sort" aria-hidden="true"></span> <span className="ascribe-icon icon-ascribe-sort" aria-hidden="true"></span>
<span style={this.isOrderActive()}>&middot;</span> <span style={this.isOrderActive()}>&middot;</span>
@ -56,8 +56,8 @@ let PieceListToolbarOrderWidget = React.createClass({
return ( return (
<DropdownButton <DropdownButton
pullRight={true} pullRight={true}
title={filterIcon} className="ascribe-piece-list-toolbar-widget"
className="ascribe-piece-list-toolbar-filter-widget"> title={orderIcon}>
<li style={{'textAlign': 'center'}}> <li style={{'textAlign': 'center'}}>
<em>{getLangText('Sort by')}:</em> <em>{getLangText('Sort by')}:</em>
</li> </li>
@ -66,7 +66,7 @@ let PieceListToolbarOrderWidget = React.createClass({
<li <li
key={param} key={param}
onClick={this.orderBy(param)} onClick={this.orderBy(param)}
className="filter-widget-item"> className="ascribe-piece-list-toolbar-widget-item">
<div className="checkbox-line"> <div className="checkbox-line">
<span> <span>
{getLangText(param.replace('_', ' '))} {getLangText(param.replace('_', ' '))}

45
sass/ascribe_custom_style.scss
View File

@ -148,14 +148,10 @@ hr {
font-weight: $ascribe--font-weight-light; font-weight: $ascribe--font-weight-light;
} }
.icon-ascribe-search{ .icon-ascribe-search {
color: $ascribe--button-default-color; color: $ascribe--button-default-color;
} }
.ascribe-piece-list-toolbar .btn-ascribe-add{
display: none;
}
.ascribe-accordion-list { .ascribe-accordion-list {
margin-bottom: 1em; margin-bottom: 1em;
} }
@ -210,7 +206,6 @@ hr {
.route--login, .route--login,
.route--signup { .route--signup {
.btn-spinner { .btn-spinner {
background-color: $ascribe--button-default-color; background-color: $ascribe--button-default-color;
} }
@ -233,31 +228,6 @@ hr {
} }
} }
.btn-ascribe-add {
width: 30px;
height: 30px;
background-color: transparent !important;
border: 1px solid $ascribe-dark-blue;
border-radius: 50%;
&:hover {
border-color: white!important;
background-color: $ascribe-dark-blue!important;
}
> span {
position: absolute;
left: 0;
top: 2px;
width: 30px;
height: 30px;
color: $ascribe-dark-blue;
padding: 0.4em;
&:hover {
color: white;
}
}
}
// buttons! // buttons!
// thought of the day: // thought of the day:
// "every great atrocity is the result of people just following orders" // "every great atrocity is the result of people just following orders"
@ -374,19 +344,6 @@ fieldset[disabled] .btn-secondary.active {
} }
} }
.ascribe-piece-list-toolbar-filter-widget button {
background-color: transparent;
border: 1px solid transparent;
color: $ascribe--button-default-color;
&:hover,
&:active {
background-color: $ascribe--button-default-color !important;
border-color: $ascribe--button-default-color !important;
color: white;
}
}
.btn-wide { .btn-wide {
font-weight: $ascribe--font-weight-light; font-weight: $ascribe--font-weight-light;
} }

15
sass/ascribe_piece_list_toolbar.scss
View File

@ -1,4 +1,3 @@
.ascribe-piece-list-toolbar { .ascribe-piece-list-toolbar {
padding-left: 15px; padding-left: 15px;
padding-right: 15px; padding-right: 15px;
@ -30,17 +29,17 @@
} }
} }
.ascribe-piece-list-toolbar-filter-widget { .ascribe-piece-list-toolbar-widget {
button { button {
background-color: rgba(0, 0, 0, 0); background-color: transparent;
border: 1px solid rgba(0, 0, 0, 0); border: 1px solid transparent;
color: #02b6a3; color: $ascribe--button-default-color;
padding: 6px 4px 6px 8px; padding: 6px 4px 6px 8px;
&:hover, &:hover,
&:active { &:active {
background-color: #02b6a3 !important; background-color: $ascribe--button-default-color !important;
border-color: $ascribe--button-default-color !important;
color: white; color: white;
} }
.caret { .caret {
@ -48,7 +47,7 @@
} }
} }
.filter-widget-item { .ascribe-piece-list-toolbar-widget-item {
a { a {
padding-left: 0; padding-left: 0;
padding-right: 0; padding-right: 0;