From 015840004d5f3ec25948d2ecf1eb132f4481df04 Mon Sep 17 00:00:00 2001
From: ritvje <jenna.ritvanen@gmail.com>
Date: Thu, 21 Jul 2016 11:51:48 +0300
Subject: [PATCH] Set select widths

---
 .../GenericPropertyFilterContainer.jsx        |  2 +-
 .../containers/PropertyFilterContainer.jsx    |  2 ++
 .../containers/QuickFilterContainer.jsx       |  5 +++++
 src/client/components/Util/PropertySelect.jsx |  5 +++--
 src/client/styles.scss                        | 19 +++++++++++++++++++
 5 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/src/client/components/ParticipantListPage/containers/GenericPropertyFilterContainer.jsx b/src/client/components/ParticipantListPage/containers/GenericPropertyFilterContainer.jsx
index 165f5aa7..de3bbaea 100644
--- a/src/client/components/ParticipantListPage/containers/GenericPropertyFilterContainer.jsx
+++ b/src/client/components/ParticipantListPage/containers/GenericPropertyFilterContainer.jsx
@@ -36,7 +36,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
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 769c7afc..acd59a5c 100644
--- a/src/client/components/ParticipantListPage/containers/QuickFilterContainer.jsx
+++ b/src/client/components/ParticipantListPage/containers/QuickFilterContainer.jsx
@@ -66,30 +66,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
index 5c148626..42d12f88 100644
--- 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
index 997f52a1..d079b5dc 100644
--- a/src/client/styles.scss
+++ b/src/client/styles.scss
@@ -268,6 +268,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;
+    }
   }
 }