More work in header and distanceslider

.gitignore

@@ -3,6 +3,6 @@ settings-demo.json
 settings-staging.json
 settings-production.json
 settings-development.json
-imports/ui/stylesheets/.sass-cache/
 private/GeoLite2-City.mmdb*
 npm-debug.log
+**/.sass-cache

imports/ui/components/DistanceSlider/DistanceSlider.js

@@ -1,16 +1,24 @@
+/* eslint-disable react/jsx-indent-props */
+/* eslint-disable import/no-absolute-path */
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Trans, translate } from 'react-i18next';
 import Tooltip from 'rc-tooltip';
 import Slider from 'rc-slider';
 import 'rc-slider/assets/index.css';
+import './DistanceSlider.scss';
 
 // https://www.npmjs.com/package/rc-slider
 const createSliderWithTooltip = Slider.createSliderWithTooltip;
 const Handle = Slider.Handle;
 
 const handle = (props) => {
-  const { value, dragging, index, ...restProps } = props;
+  const {
+    value,
+    dragging,
+    index,
+    ...restProps
+  } = props;
   return (
     <Tooltip prefixCls="rc-slider-tooltip" overlay={value} visible={dragging} placement="top" key={index} >
       <Handle value={value} {...restProps} />
@@ -18,10 +26,7 @@ const handle = (props) => {
   );
 };
 
-const wrapperStyle = { width: 400, margin: 50 };
-
 // https://github.com/react-component/slider/tree/master/examples
-
 class DistanceSlider extends React.Component {
   constructor(props) {
     super(props);
@@ -48,39 +53,46 @@ class DistanceSlider extends React.Component {
 
   render() {
     return (
-      <div style={wrapperStyle}>
+      <div className="dist-slider">
         <p><Trans parent="span">¿A que distancia a la redonda quieres recibir notificaciones?</Trans></p>
-        <Slider min={5}
+        <Slider
-                max={105}
+            min={5}
-                value={this.state.value}
+            max={105}
-                trackStyle={{ backgroundColor: 'green', height: 8 }}
+            value={this.state.value}
-                railStyle={{ backgroundColor: 'orange', height: 8 }}
+            trackStyle={{ backgroundColor: 'green', height: 8 }}
-                dotStyle={{ top: 0, marginLeft: -1, width: 2, height: 8 }}
+            railStyle={{ backgroundColor: 'orange', height: 8 }}
-                marks={{
+            dotStyle={{
-                  10:  {style: {}, label: "10км"},
+              top: 0,
-                  20:  {style: {}, label: "20"},
+              marginLeft: -1,
-                  30:  {style: {}, label: "30"},
+              width: 2,
-                  40:  {style: {}, label: "40"},
+              height: 8
-                  50:  {style: {}, label: "50"},
+            }}
-                  60:  {style: {}, label: "60"},
+            marks={{
-                  70:  {style: {}, label: "70"},
+              10: { label: '10км' },
-                  80:  {style: {}, label: "80"},
+              20: { label: '20' },
-                  90:  {style: {}, label: "90"},
+              30: { label: '30' },
-                  100: {style: {}, label: "100км"}
+              40: { label: '40' },
-                }}
+              50: { label: '50' },
-                handleStyle={{
+              60: { label: '60' },
-                  borderColor: 'green',
+              70: { label: '70' },
-                  height: 20,
+              80: { label: '80' },
-                  width: 20,
+              90: { label: '90' },
-                  marginLeft: -10,
+              100: { label: '100км' }
-                  marginTop: -6,
+            }}
-                  /* backgroundColor: 'gray', */
+            handleStyle={{
-                }}
+              borderColor: 'green',
-                onAfterChange={this.onAfterChange}
+              height: 20,
-                onChange={this.onSliderChange}
+              width: 20,
-                defaultValue={10}
+              marginLeft: -10,
-                step={5}
+              marginTop: -6
-                handle={handle} />
+              /* backgroundColor: 'gray', */
+            }}
+            onAfterChange={this.onAfterChange}
+            onChange={this.onSliderChange}
+            defaultValue={10}
+            step={5}
+            handle={handle}
+        />
       </div>
     );
   }

imports/ui/components/DistanceSlider/DistanceSlider.scss

@@ -0,0 +1,11 @@
+.dist-slider {
+    width: 400px;
+    margin: 30px;
+}
+
+@media only screen and (max-width: 400px) {
+    .dist-slider {
+        width: 200px;
+        margin: 10px;
+    }
+}

imports/ui/components/Public/Public.js

@@ -9,7 +9,7 @@ const Public = ({ loggingIn, authenticated, component, path, exact, ...rest }) =
     render={props => (
       !authenticated ?
         (React.createElement(component, { ...props, ...rest, loggingIn, authenticated })) :
-        (<Redirect to="/documents" />)
+        (<Redirect to="/subscriptions" />)
     )}
   />
 );

imports/ui/layouts/App/App.js

@@ -75,7 +75,7 @@ const App = props => (
               <Public path="/login" component={Login} {...props} />
               <Route path="/logout" component={Logout} {...props} />
               <Route path="/sandbox" component={Sandbox} {...props} />
-              <Public path="/subscriptions" component={FireSubscription} focusInput {...props} />
+              <Route path="/subscriptions" render={props => <FireSubscription focusInput {...props} />} />
               <Route name="verify-email" path="/verify-email/:token" component={VerifyEmail} />
               <Route name="recover-password" path="/recover-password" component={RecoverPassword} />
               <Route name="reset-password" path="/reset-password/:token" component={ResetPassword} />
@@ -87,7 +87,6 @@ const App = props => (
             </Switch>
           </Grid>
           <Footer />
-
           {/* <Reconnect /> */}
           <Blaze template="cookieConsent" />
           {/* <Blaze template="cookieConsentImply" /> */}

imports/ui/pages/Login/Login.js

@@ -53,12 +53,6 @@ class Login extends React.Component {
         Bert.alert(T9n.get(`error.accounts.${error.reason}`), 'danger');
       } else {
         Bert.alert(this.t('Bienvenid@ de nuevo'), 'success');
-        console.log(this.props.location.state);
-        if (this.props.location.state &&
-            this.props.location.state.center &&
-            this.props.location.state.distance) {
-          this.props.history.push('/subscriptions', this.props.location.state);
-        }
       }
     });
   }

imports/ui/stylesheets/new-age.scss

@@ -47,13 +47,13 @@ p {
   margin-bottom: 20px; }
 
 div.section.platf > div.container {
-  padding: 100px 0; }
+  padding: 70px 0; }
 div.section h2 {
   font-size: 50px; }
 
 div.section.crowd > div.container {
   position: relative;
-  padding: 150px 0; }
+  padding: 120px 0; }
 div.section.crowd h2 {
   font-size: 50px;
   margin-top: 20px; }