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

Fix PieceListToolbar styling

Browse Source
This commit is contained in:
Brett Sun 2016-06-08 18:06:16 +02:00
parent 4fd0e0d99c
commit 1cc047d060
4 changed files with 38 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
js/components/ascribe_piece_list_toolbar/piece_list_toolbar.js
View File

@ -1,6 +1,7 @@
'use strict';
import React from 'react';
import classNames from 'classnames';
import PieceListToolbarFilterWidget from './piece_list_toolbar_filter_widget';
import PieceListToolbarOrderWidget from './piece_list_toolbar_order_widget';
@ -43,30 +44,26 @@ let PieceListToolbar = React.createClass({
const { className, children, searchFor, searchQuery } = this.props;
return (
<div className={className}>
<div className="row">
<div className="col-xs-12 col-sm-10 col-md-8 col-lg-8 col-sm-offset-1 col-md-offset-2 col-lg-offset-2">
<div className="row">
<span className="pull-left">
{children}
</span>
<span className="pull-right">
<PieceListToolbarOrderWidget
orderParams={this.props.orderParams}
orderBy={this.props.orderBy}
applyOrderBy={this.props.applyOrderBy}/>
<PieceListToolbarFilterWidget
filterParams={this.props.filterParams}
filterBy={this.props.filterBy}
applyFilterBy={this.props.applyFilterBy} />
</span>
<SearchBar
className="pull-right search-bar ascribe-input-glyph"
searchFor={searchFor}
searchQuery={searchQuery}
threshold={AppConstants.searchThreshold}/>
</div>
</div>
<div className={classNames('row', className)}>
<div className="col-xs-12 col-sm-10 col-md-8 col-lg-8 col-sm-offset-1 col-md-offset-2 col-lg-offset-2 ascribe-piece-list-toolbar">
<span className="pull-left">
{children}
</span>
<span className="pull-right">
<PieceListToolbarOrderWidget
orderParams={this.props.orderParams}
orderBy={this.props.orderBy}
applyOrderBy={this.props.applyOrderBy}/>
<PieceListToolbarFilterWidget
filterParams={this.props.filterParams}
filterBy={this.props.filterBy}
applyFilterBy={this.props.applyFilterBy} />
</span>
<SearchBar
className="pull-right search-bar ascribe-input-glyph"
searchFor={searchFor}
searchQuery={searchQuery}
threshold={AppConstants.searchThreshold}/>
</div>
</div>
);

1
js/components/piece_list.js
View File

@ -290,7 +290,6 @@ const PieceList = React.createClass({
return (
<div>
<PieceListToolbar
className="ascribe-piece-list-toolbar"
searchFor={this.searchFor}
searchQuery={this.state.search}
filterParams={filterParams}

8
sass/ascribe_custom_style.scss
View File

@ -241,14 +241,6 @@ fieldset[disabled] .btn-secondary.active {
}
}
.open > .btn-default.dropdown-toggle:hover,
.open > .btn-default.dropdown-toggle:focus,
.open > .btn-default.dropdown-toggle.focus,
.open > .btn-default.dropdown-toggle.dropdown-toggle {
background-color: darken($ascribe--button-secondary-fg-color, 20%);
border-color: darken($ascribe--button-secondary-fg-color, 20%);
}
.pager li > a,
.pager li > span {
background-color: $ascribe--button-default-color;

50
sass/ascribe_piece_list_toolbar.scss
View File

@ -1,8 +1,3 @@
.ascribe-piece-list-toolbar {
padding-left: 15px;
padding-right: 15px;
}
.search-bar {
max-width: 200px;
@ -29,42 +24,31 @@
}
}
.ascribe-piece-list-toolbar-widget {
button {
background-color: transparent;
border: 1px solid transparent;
color: $ascribe--button-default-color;
padding: 6px 4px 6px 8px;
.ascribe-piece-list-toolbar-widget.dropdown-toggle.btn {
background-color: transparent;
border: 1px solid transparent;
box-shadow: none;
color: $ascribe--button-default-color;
padding: 6px 4px 6px 8px;
&:hover,
&:active {
background-color: $ascribe--button-default-color !important;
border-color: $ascribe--button-default-color !important;
color: white;
}
.caret {
display: none;
}
.open &,
&:hover,
&:active {
background-color: $ascribe--button-default-color !important;
border-color: $ascribe--button-default-color !important;
color: white;
}
.ascribe-piece-list-toolbar-widget-item {
a {
padding-left: 0;
padding-right: 0;
}
.caret {
display: none;
}
}
.ascribe-piece-list-toolbar-widget-item {
.checkbox-line {
height: 25px;
position: relative;
color: #333333;
/* Fuck you react-bootstrap */
&:hover {
background-color: $dropdown-link-hover-bg;
cursor: pointer;
}
span {
cursor: pointer;
left: 9px;
@ -81,7 +65,7 @@
}
}
.dropdown-menu {
.dropdown-menu & {
min-width: 170px;
}
}