diff --git a/src/client/components/ParticipantListPage/containers/GenericPropertyFilterContainer.jsx b/src/client/components/ParticipantListPage/containers/GenericPropertyFilterContainer.jsx index 32c20995..c1fa6f5a 100644 --- a/src/client/components/ParticipantListPage/containers/GenericPropertyFilterContainer.jsx +++ b/src/client/components/ParticipantListPage/containers/GenericPropertyFilterContainer.jsx @@ -37,7 +37,7 @@ export function getGenericPropertyFilterContainer(searchFilterStore, searchFilte render() { return (
- + { properties.map((property, index) => ) } diff --git a/src/client/components/ParticipantListPage/containers/PropertyFilterContainer.jsx b/src/client/components/ParticipantListPage/containers/PropertyFilterContainer.jsx index 3b090c54..e83776fe 100644 --- a/src/client/components/ParticipantListPage/containers/PropertyFilterContainer.jsx +++ b/src/client/components/ParticipantListPage/containers/PropertyFilterContainer.jsx @@ -37,6 +37,7 @@ export function getPropertyFilterContainer(searchFilterStore, searchFilterAction value={ this.props.currentSelection[this.props.property] } onChange={ this.props.onChange } options={ this.state.options } + className={ this.props.className } /> ); } @@ -47,6 +48,7 @@ export function getPropertyFilterContainer(searchFilterStore, searchFilterAction label: React.PropTypes.string, currentSelection: React.PropTypes.object.isRequired, onChange: React.PropTypes.func.isRequired, + className: React.PropTypes.string, }; return PropertyFilterContainer; diff --git a/src/client/components/ParticipantListPage/containers/QuickFilterContainer.jsx b/src/client/components/ParticipantListPage/containers/QuickFilterContainer.jsx index f6479d4b..9b4565e4 100644 --- a/src/client/components/ParticipantListPage/containers/QuickFilterContainer.jsx +++ b/src/client/components/ParticipantListPage/containers/QuickFilterContainer.jsx @@ -65,30 +65,35 @@ export function getQuickFilterContainer(participantStore, participantActions, se currentSelection={ currentSelection } label="Ikäkausi" property="ageGroup" + className="agegroup-filter" /> + { options.map(option => ) } ); } PropertySelect.propTypes = { + className: React.PropTypes.string, value: React.PropTypes.any, label: React.PropTypes.string.isRequired, property: React.PropTypes.string.isRequired, diff --git a/src/client/styles.scss b/src/client/styles.scss index 0340d2ab..01f6bc33 100644 --- a/src/client/styles.scss +++ b/src/client/styles.scss @@ -275,6 +275,25 @@ table { @media screen and (min-width: $screen-sm-min) { .form-inline .form-group { margin-right: 1em; + + .agegroup-filter { + width: 200px; + } + .subcamp-filter { + width: 100px; + } + .village-filter { + width: 300px; + } + .local-group-filter { + width: 300px; + } + .camp-group-filter { + width: 300px; + } + .property-selector { + width: 200px; + } } }