Merge pull request #160 from partio-scout/technical/filter-width

Technical/filter width
partio-scout · Jul 21, 2016 · 3850a26 · 3850a26
2 parents 72ac550 + c18d7e7
commit 3850a26
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 3 deletions.
diff --git 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 (
         <div>
-          <Input type="select" label="Kenttä" value={ this.state.property } onChange={ this.onPropertyChange }>
+          <Input type="select" className="property-selector" label="Kenttä" value={ this.state.property } onChange={ this.onPropertyChange }>
             <option value=""></option>
             { properties.map((property, index) => <option value={ _.keys(property)[0] } key={ index }>{ _.values(property)[0] }</option>) }
           </Input>

diff --git 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
@@ -65,30 +65,35 @@ export function getQuickFilterContainer(participantStore, participantActions, se
             currentSelection={ currentSelection }
             label="Ikäkausi"
             property="ageGroup"
+            className="agegroup-filter"
           />
           <PropertyFilterContainer
             onChange={ handleChange }
             currentSelection={ currentSelection }
             label="Alaleiri"
             property="subCamp"
+            className="subcamp-filter"
           />
           <PropertyFilterContainer
             onChange={ handleChange }
             currentSelection={ currentSelection }
             label="Kylä"
             property="village"
+            className="village-filter"
           />
           <PropertyFilterContainer
             onChange={ handleChange }
             currentSelection={ currentSelection }
             label="Lippukunta"
             property="localGroup"
+            className="local-group-filter"
           />
           <PropertyFilterContainer
             onChange={ handleChange }
             currentSelection={ currentSelection }
             label="Leirilippukunta"
             property="campGroup"
+            className="camp-group-filter"
           />
           <PresenceFilterContainer
             onChange={ handleChange }

diff --git a/src/client/components/Util/PropertySelect.jsx b/src/client/components/Util/PropertySelect.jsx
@@ -2,20 +2,21 @@ import React from 'react';
 import { Input } from 'react-bootstrap';
 
 export function getPropertySelect() {
-  function PropertySelect({ value, label, property, options, onChange }) {
+  function PropertySelect({ className, value, label, property, options, onChange }) {
     function handleValueChanged(event) {
       const newValue = event.target.value;
       onChange(property, newValue);
     }
 
     return (
-      <Input type="select" label={ label } value={ value } onChange={ handleValueChanged }>
+      <Input type="select" className={ className } label={ label } value={ value } onChange={ handleValueChanged }>
         { options.map(option => <option value={ option } key={ option }>{ option }</option>) }
       </Input>
     );
   }
 
   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
@@ -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;
+    }
   }
 }