fix upvote slider positioning on mobile; fix slider's inconsistent state when...

fix upvote slider positioning on mobile; fix slider's inconsistent state when closed by clicking outside the slider (#1068)

app/components/elements/FoundationDropdown.jsx

@@ -7,6 +7,7 @@ export default class FoundationDropdown extends React.Component {
         show: React.PropTypes.bool.isRequired,
         className: React.PropTypes.string,
         children: React.PropTypes.any,
+        onHide: React.PropTypes.func,
     };
 
     constructor(props) {
@@ -36,8 +37,11 @@ export default class FoundationDropdown extends React.Component {
     closeOnOutsideClick(e) {
         const inside_dropdown = findParent(e.target, 'FoundationDropdown');
         // console.log('-- closeOnOutsideClick -->', e.target, inside_dropdown);
-        if (!inside_dropdown) this.setState({show: false});
-    };
+        if (!inside_dropdown) {
+            this.setState({show: false});
+            if (this.props.onHide) this.props.onHide();
+        }
+    }
 
     render() {
         if (!this.state.show) return null;

app/components/elements/Voting.jsx

@@ -142,7 +142,7 @@ class Voting extends React.Component {
             const flagWeight = post_obj.getIn(['stats', 'flagWeight']);
 
             // myVote === current vote
-            const dropdown = <FoundationDropdown show={showWeight} className="Voting__adjust_weight_down">
+            const dropdown = <FoundationDropdown show={showWeight} onHide={() => this.setState({showWeight: false})} className="Voting__adjust_weight_down">
                 {(myVote == null || myVote === 0) && vesting_shares > VOTE_WEIGHT_DROPDOWN_THRESHOLD &&
                     <div>
                         <div className="weight-display">- {weight / 100}%</div>
@@ -236,7 +236,7 @@ class Voting extends React.Component {
         let dropdown = null;
         if (myVote <= 0 && vesting_shares > VOTE_WEIGHT_DROPDOWN_THRESHOLD) {
             voteUpClick = this.toggleWeightUp;
-            dropdown = <FoundationDropdown show={showWeight}>
+            dropdown = <FoundationDropdown show={showWeight} onHide={() => this.setState({showWeight: false})}>
                 <div className="Voting__adjust_weight">
                     <a href="#" onClick={this.voteUp} className="confirm_weight" title="Upvote"><Icon size="2x" name="chevron-up-circle" /></a>
                     <div className="weight-display">{weight / 100}%</div>

app/components/elements/Voting.scss

@@ -125,7 +125,6 @@
   border-right: 1px solid #cacaca;
   padding-right: .8rem;
   margin-right: .6rem;
-  position: relative;
   .DropdownMenu .Icon.dropdown-arrow {
     margin-right: -0.5rem
   }
@@ -239,7 +238,8 @@
   .Voting__button-up {
     .dropdown-pane {
       margin-top: -36px;
-      margin-left: -10px;
+      position: absolute;
+      left: 1rem;
     }
   }
 }