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
pullRight={true}
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
label also iterate over its items, to get all filterable options */}
{this.props.filterParams.map(({ label, items }, i) => {
@ -120,7 +120,7 @@ let PieceListToolbarFilterWidget = React.createClass({
<li
key={itemLabel}
onClick={this.filterBy(param)}
className="filter-widget-item">
className="ascribe-piece-list-toolbar-widget-item">
<div className="checkbox-line">
<span>
{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() {
let filterIcon = (
let orderIcon = (
<span>
<span className="ascribe-icon icon-ascribe-sort" aria-hidden="true"></span>
<span style={this.isOrderActive()}>&middot;</span>
@ -56,8 +56,8 @@ let PieceListToolbarOrderWidget = React.createClass({
return (
<DropdownButton
pullRight={true}
title={filterIcon}
className="ascribe-piece-list-toolbar-filter-widget">
className="ascribe-piece-list-toolbar-widget"
title={orderIcon}>
<li style={{'textAlign': 'center'}}>
<em>{getLangText('Sort by')}:</em>
</li>
@ -66,7 +66,7 @@ let PieceListToolbarOrderWidget = React.createClass({
<li
key={param}
onClick={this.orderBy(param)}
className="filter-widget-item">
className="ascribe-piece-list-toolbar-widget-item">
<div className="checkbox-line">
<span>
{getLangText(param.replace('_', ' '))}

43
sass/ascribe_custom_style.scss
View File

@ -152,10 +152,6 @@ hr {
color: $ascribe--button-default-color;
}
.ascribe-piece-list-toolbar .btn-ascribe-add{
display: none;
}
.ascribe-accordion-list {
margin-bottom: 1em;
}
@ -210,7 +206,6 @@ hr {
.route--login,
.route--signup {
.btn-spinner {
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!
// thought of the day:
// "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 {
font-weight: $ascribe--font-weight-light;
}

15
sass/ascribe_piece_list_toolbar.scss
View File

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