comunes/todos-contra-el-fuego-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Style improvements for mobile

Browse source
This commit is contained in:
vjrj 2018-01-19 11:04:14 +01:00
parent c79f8b5f8b
commit cd16f45d8e
28 changed files with 345 additions and 120 deletions
Download patch file Download diff file Expand all files Collapse all files

7
imports/ui/pages/FireSubscription/FireSubscription.js
View file

@ -2,7 +2,6 @@
/* eslint-disable react/jsx-indent-props */
import React from 'react';
import PropTypes from 'prop-types';
import { withTracker } from 'meteor/react-meteor-data';
import { Row, Col } from 'react-bootstrap';
import { translate } from 'react-i18next';
import DistanceSlider from '/imports/ui/components/DistanceSlider/DistanceSlider';
@ -10,6 +9,7 @@ import SelectionMap, { action } from '/imports/ui/components/SelectionMap/Select
import Gkeys from '/imports/startup/client/Gkeys';
import CenterInMyPosition from '/imports/ui/components/CenterInMyPosition/CenterInMyPosition.js';
import SubsAutocomplete from './SubsAutocomplete';
import { isNotHomeAndMobile } from '/imports/ui/components/Utils/isMobile';
class FireSubscription extends React.Component {
constructor(props) {
@ -73,6 +73,7 @@ class FireSubscription extends React.Component {
return (
<div>
<Row>
{isNotHomeAndMobile &&
<Col xs={12} sm={12} md={6} lg={6} >
<div>
<SubsAutocomplete
@ -80,12 +81,14 @@ class FireSubscription extends React.Component {
onChange={value => this.onAutocompleteChange(value)}
/>
</div>
</Col>
</Col> }
<Col xs={12} sm={12} md={6} lg={6} >
<DistanceSlider onChange={value => this.onSliderChange(value)} />
{isNotHomeAndMobile &&
<Row className="center-in-my-pos">
<CenterInMyPosition onClick={viewport => this.centerOnUserLocation(viewport)} />
</Row>
}
</Col>
</Row>
<Row className="align-items-center justify-content-center">

2
imports/ui/pages/Fires/Fires.js
View file

@ -74,7 +74,7 @@ class Fire extends React.Component {
{' '}
{t('Por ejemplo:')}
<ul>
<li>{t('si conoces esta zona y cómo acceder a el fuego (esto puede de ser de ayuda para apagarlo si sigue activo o para investigarlo en un futuro)')}</li>
<li>{t('si conoces esta zona y cómo acceder al fuego (esto puede de ser de ayuda para apagarlo si sigue activo o para investigarlo en un futuro)')}</li>
<li>{t('si conoces el motivo por el que comenzó el fuego')}</li>
<li>{t('si quieres denunciar algún tipo de ilegalidad, incluso anónimamente')}</li>
<li>{t('o cualquier otra información')}</li>

10
imports/ui/pages/Fires/Fires.scss
View file

@ -1,3 +1,6 @@
@import '../../stylesheets/colors';
@import '../../stylesheets/mixins';
.fire-leaflet-container {
min-height: 30vh;
min-width: 40vw;
@ -8,19 +11,18 @@
}
.ViewFire > h4.page-header {
line-height: 1.5em;
line-height: 1.3em;
}
@media (max-width: 768px) {
.leaflet-container {
.fire-leaflet-container {
width: 100%;
}
}
.comments-info {
font-size: 14px;
color: #818182;
color: $light;
/* display: inline-flex; */
/* background-color: #fefefe;
border-color: #fdfdfe;

94
imports/ui/pages/FiresMap/FiresMap.js
View file

@ -24,6 +24,7 @@ import Loading from '/imports/ui/components/Loading/Loading';
import ActiveFiresCollection from '/imports/api/ActiveFires/ActiveFires';
import FireAlertsCollection from '/imports/api/FireAlerts/FireAlerts';
import UserSubsToFiresCollection from '/imports/api/Subscriptions/Subscriptions';
import { isNotHomeAndMobile } from '/imports/ui/components/Utils/isMobile';
import './FiresMap.scss';
@ -136,15 +137,18 @@ class FiresMap extends React.Component {
<h4 className="page-header"><Trans parent="span">Fuegos activos</Trans></h4>
<Row>
<Col xs={12} sm={6} md={6} lg={6} >
<p>
<p className="firesmap-legend">
{ this.props.activefires.length === 0 ?
<Trans parent="span" i18nKey="noActiveFireInMapCount">No hay fuegos activos en esta zona del mapa. Hay un total de <strong>{{ countTotal: this.props.activefirestotal }}</strong> fuegos activos detectados en todo el mundo.</Trans> :
<Trans parent="span" i18nKey="activeFireInMapCount">En rojo, <strong>{{ count: this.props.activefires.length }}</strong> fuegos activos en el mapa. Hay un total de <strong>{{ countTotal: this.props.activefirestotal }}</strong> fuegos activos detectados en todo el mundo por la NASA.</Trans>
}
</p>
<p><Trans parent="span" i18nKey="activeNeigFireInMapCount">En naranja, los fuegos notificados por nuestros usuarios/as recientemente.</Trans></p>
{isNotHomeAndMobile &&
<p className="firesmap-legend"><Trans parent="span" i18nKey="activeNeigFireInMapCount">En naranja, los fuegos notificados por nuestros usuarios/as recientemente.</Trans></p> }
</Col>
<Col xs={12} sm={6} md={6} lg={6}>
{isNotHomeAndMobile &&
<Fragment>
<Checkbox inline={false} defaultChecked={this.state.showSubsUnion} onClick={e => this.setShowSubsUnion(e.target.checked)}>
<Trans className="mark-checkbox" parent="span">Resaltar en verde el área vigilada por nuestros usuarios/as</Trans>&nbsp;(*)
</Checkbox>
@ -153,7 +157,8 @@ class FiresMap extends React.Component {
<Trans className="mark-checkbox" parent="span">Resaltar los fuegos con un marcador</Trans>
</Checkbox>}
<CenterInMyPosition onClick={viewport => this.centerOnUserLocation(viewport)} />
<p>
</Fragment>}
<p className="firesmap-note">
<em>{ this.state.viewport.zoom >= MAXZOOMREACTIVE ?
<Trans>Los fuegos activos se actualizan en tiempo real.</Trans> :
<Trans>Haga zoom en una zona de su interés si quiere que los fuegos se actualicen en tiempo real.</Trans>
@ -162,48 +167,49 @@ class FiresMap extends React.Component {
</p>
</Col>
</Row>
{/* https://github.com/CliffCloud/Leaflet.Sleep */}
<Map
ref={(map) => {
this.fireMap = map;
this.handleLeafletLoad(map);
}}
className="firesmap-leaflet-container"
animate
minZoom={5}
preferCanvas
onClick={this.onClickReset}
viewport={this.state.viewport}
onViewportChanged={this.onViewportChanged}
sleep={window.location.pathname === '/'}
sleepTime={10750}
wakeTime={750}
sleepNote
hoverToWake
wakeMessage={this.props.t('Pulsa para activar')}
sleepOpacity={0.6}
>
{/* http://wiki.openstreetmap.org/wiki/Tile_servers */}
{!this.props.loading &&
<Fragment>
<FireList
fires={this.props.activefires}
scale={this.state.viewport.zoom >= MAXZOOM}
useMarkers={this.state.useMarkers}
nasa
/>
<FireList
fires={this.props.firealerts}
scale={false}
useMarkers={this.state.useMarkers}
nasa={false}
/>
</Fragment> }
<DefMapLayers />
</Map>
<Row>
{/* https://github.com/CliffCloud/Leaflet.Sleep */}
<Map
ref={(map) => {
this.fireMap = map;
this.handleLeafletLoad(map);
}}
animate
minZoom={5}
preferCanvas
onClick={this.onClickReset}
viewport={this.state.viewport}
onViewportChanged={this.onViewportChanged}
sleep={window.location.pathname === '/'}
sleepTime={10750}
wakeTime={750}
sleepNote
hoverToWake
wakeMessage={this.props.t('Pulsa para activar')}
sleepOpacity={0.6}
>
{/* http://wiki.openstreetmap.org/wiki/Tile_servers */}
{!this.props.loading &&
<Fragment>
<FireList
fires={this.props.activefires}
scale={this.state.viewport.zoom >= MAXZOOM}
useMarkers={this.state.useMarkers}
nasa
/>
<FireList
fires={this.props.firealerts}
scale={false}
useMarkers={this.state.useMarkers}
nasa={false}
/>
</Fragment> }
<DefMapLayers />
</Map>
</Row>
<Row>
<p><span style={{ paddingRight: '5px' }}>(*)</span><Trans i18nKey="mapPrivacy" parent="span"><em>Para preservar la privacidad de nuestros usuarios/as, los datos reflejados están aleatoriamente alterados y son solo orientativos.</em></Trans></p>
<Col xs={12} sm={12} md={12} lg={12}>
<p className="firesmap-footnote"><span style={{ paddingRight: '5px' }}>(*)</span><Trans i18nKey="mapPrivacy" parent="span"><em>Para preservar la privacidad de nuestros usuarios/as, los datos reflejados están aleatoriamente alterados y son solo orientativos.</em></Trans></p>
</Col>
</Row>
</div>
);

38
imports/ui/pages/FiresMap/FiresMap.scss
View file

@ -1,12 +1,23 @@
@import '../../stylesheets/mixins';
@import '../../stylesheets/colors';
/* https://github.com/PaulLeCam/react-leaflet/issues/108 */
.leaflet-container {
.firesmap-leaflet-container {
height: 100%;
min-height: 60vh;
width: 100%;
min-width: 75vw;
/* min-width: 75vw; */
display: flex;
margin: 30px auto;
margin: 20px auto;
}
@include breakpoint(mobile) {
.firesmap-leaflet-container {
height: 80%;
min-width: 85vw;
margin: 10px auto;
}
}
.Loading {
@ -22,13 +33,6 @@
stroke: grey;
}
@media only screen and (max-width: 400px) {
.leaflet-container {
height: 400px;
width: 85vw;
}
}
.mark-checkbox {
margin-left: 5px;
}
@ -37,7 +41,21 @@
background-image: url(/images/layers.png);
}
.leaflet-retina .leaflet-control-layers-toggle {
background-image: url(/images/layers.png);
background-size: 26px 26px;
}
.glyphicon .glyphicon-thumbs-up {
}
.firesmap-legend {
font-size: 16px;
}
.firesmap-note,
.firesmap-footnote {
font-size: 14px;
color: $light;
}

49
imports/ui/pages/Index/Index-custom.scss
View file

@ -1,3 +1,4 @@
@import '../../stylesheets/mixins';
@import '../../stylesheets/colors';
.carousel-item {
@ -29,6 +30,12 @@
text-shadow: 2px 2px 1px #280B0B;
}
@include breakpoint(mobile) {
.carousel-caption > h3 {
font-size: 2.0rem;
}
}
.py-5 > .container > {
div > h1 {
color: #280B0B;
@ -38,15 +45,35 @@
}
p {
padding-top: 10px;
font-size: 1.5em;
font-size: 1.7em;
}
}
@include breakpoint(mobile) {
.py-5 > .container > {
p {
font-size: 1.2em;
}
}
.pt-5, .py-5 {
padding-top: 1rem !important;
}
.moto {
margin-top: 5px;
margin-left: 5px;
}
.sectionTESTINGGGGG { // don't scroll sections in mobiles
overflow: visible !important;
}
}
.slide-2-icon {
border-radius: 50%;
position: relative;
width: 30%;
top: 25%;
left: 35%;
border: 14px solid #FFF;
opacity: .5;
@ -72,6 +99,20 @@
text-shadow: 1px 1px #280B0B;
}
@include breakpoint(mobile) {
.slide-1-icon:before,
.slide-2-icon:before,
.slide-3-icon:before,
.slide-4-icon:before {
font-size: 100px;
}
.slide-3-icon:before,
.slide-4-icon:before {
top: -50px;
}
}
.slide-1-icon:before {
content: "";
}
@ -124,7 +165,7 @@
.full-width {
position: relative;
width: 100vw;
margin-left: calc(-50vw + 50% - 8px);
margin-left: calc(-50vw + 50%);
position: relative;
/*
width: 100vw;
@ -171,4 +212,4 @@
.device[data-device=iPhone6][data-orientation=portrait][data-color=white] {
background-image: url(/mobile.png);
}
}

28
imports/ui/pages/Index/Index.js
View file

@ -12,6 +12,7 @@ import ReactResizeDetector from 'react-resize-detector';
import _ from 'lodash';
import { ScrollToTopOnMount, SectionsContainer, Section } from 'react-fullpage';
import 'html5-device-mockups/dist/device-mockups.min.css';
import { isAnyMobile } from '/imports/ui/components/Utils/isMobile';
import SubscriptionEditor from '/imports/ui/components/SubscriptionEditor/SubscriptionEditor';
import FiresMap from '../FiresMap/FiresMap';
@ -58,12 +59,12 @@ class Index extends Component {
// https://github.com/subtirelumihail/react-fullpage
const fullPageOptions = {
activeClass: 'active', // the class that is appended to the sections links
anchors: ['home', 'crowdsourcing', 'platforms', 'participe', 'fires'], // the anchors for each sections
anchors: ['home', 'crowdsourcing', 'participe', 'fires', 'platforms'], // the anchors for each sections
arrowNavigation: true, // use arrow keys (true after development)
className: 'section-container', // the class name for the section container
delay: 1000, // the scroll animation speed
navigation: true, // use dots navigation
scrollBar: false, // use the browser default scrollbar
navigation: true, // !isMobile, // use dots navigation
scrollBar: isAnyMobile, // use the browser default scrollbar
sectionClassName: 'section', // the section class name
sectionPaddingTop: '0', // the section top padding
sectionPaddingBottom: '0', // the section bottom padding
@ -84,6 +85,7 @@ class Index extends Component {
className="carousel slide"
ref={(ref) => { this.slides = ref; }}
>
{/* for dev: data-interval=false */}
<ol className="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" className="active" />
<li data-target="#carouselExampleIndicators" data-slide-to="1" />
@ -95,7 +97,7 @@ class Index extends Component {
<div className="carousel-item carousel-item-1 active">
<div className="slide-1-icon" />
<div className="carousel-caption">
<h3><i className="fa fa-map-pointer" aria-hidden="true" />Elige un lugar</h3>
<h3><i className="fa fa-map-pointer" aria-hidden="true" /><Trans>Elige un lugar</Trans></h3>
<p />
</div>
</div>
@ -103,7 +105,7 @@ class Index extends Component {
<div className="carousel-item carousel-item-2">
<div className="slide-2-icon" />
<div className="carousel-caption">
<h3><i className="fa fa-dot-circle-o" aria-hidden="true" />Elige un radio de vigilancia</h3>
<h3><i className="fa fa-dot-circle-o" aria-hidden="true" /><Trans>Elige un radio de vigilancia</Trans></h3>
<p />
</div>
</div>
@ -111,7 +113,7 @@ class Index extends Component {
<div className="carousel-item carousel-item-3">
<div className="slide-3-icon" />
<div className="carousel-caption">
<h3><i className="fa fa-podcast" aria-hidden="true" />Recibe alertas de fuegos en esa zona</h3>
<h3><i className="fa fa-podcast" aria-hidden="true" /><Trans>Recibe alertas de fuegos en esa zona</Trans></h3>
<p />
</div>
</div>
@ -119,18 +121,18 @@ class Index extends Component {
<div className="carousel-item carousel-item-4">
<div className="slide-4-icon" />
<div className="carousel-caption">
<h3><i className="fa fa-bell-o" aria-hidden="true" />Alerta cuando hay un fuego</h3>
<h3><i className="fa fa-bell-o" aria-hidden="true" /><Trans>Alerta cuando hay un fuego</Trans></h3>
<p />
</div>
</div>
</div>
<a className="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span className="carousel-control-prev-icon" aria-hidden="true" />
<span className="sr-only">Previous</span>
<span className="sr-only"><Trans>Anterior</Trans></span>
</a>
<a className="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span className="carousel-control-next-icon" aria-hidden="true" />
<span className="sr-only">Next</span>
<span className="sr-only"><Trans>Siguiente</Trans></span>
</a>
</div>
</header>
@ -139,7 +141,7 @@ class Index extends Component {
<div className="scale__container--js">
<h1 id="tcefh1" className="scale--js">{this.props.t('AppName')}</h1>
</div>
<p>Siempre alerta a los fuegos en nuestro vecindario</p>
<p className="moto"><Trans>Siempre alerta a los fuegos en nuestro vecindario</Trans></p>
{/* <Link className="participe-btn btn btn-lg btn-warning" role="button" to="/#platforms">{this.props.t('Participa')}</Link> */}
</div>
</section>
@ -149,7 +151,7 @@ class Index extends Component {
<div className="container">
<div className="row">
<div className="col-md-8 mx-auto">
<h2 className="section-heading">Colaboración masiva contra los incendios</h2>
<h2 className="section-heading"><Trans>Colaboración masiva contra los incendios</Trans></h2>
<p><Trans>Imágenes capturadas por los satélites de la NASA muestran el humo de grandes incendios que se extienden sobre el Océano Pacífico. La actividad del fuego está delineada en rojo.</Trans></p>
</div>
</div>
@ -207,8 +209,8 @@ class Index extends Component {
<div className="col-lg-6">
<div className="feature-item">
<i className="icon-envelope-open text-primary" />
<h3><Trans>Correo electronico</Trans></h3>
<p className="text-muted"><Trans>Recibe nuestras notificaciones de fuegos por correo</Trans></p>
<h3><Trans>Notificaciones</Trans></h3>
<p className="text-muted"><Trans>Recibe nuestras notificaciones de fuegos por correo o en tu navegador</Trans></p>
</div>
</div>
</div>

3
imports/ui/pages/Signup/Signup.js
View file

@ -97,6 +97,7 @@ class Signup extends React.Component {
<Col xs={12} sm={6} md={5} lg={4}>
<h4 className="page-header">{t('Registrarse')}</h4>
<Row>
{ false && // disabled
<Col xs={12}>
<button
className="btn btn-block btn-raised btn-primary OAuthLoginButtonDis OAuthLoginButton-telegram"
@ -105,7 +106,7 @@ class Signup extends React.Component {
>
<span><Icon icon="telegram" /> {t('Iniciar sesión con Telegram')}</span>
</button>
</Col>
</Col> }
<Col xs={12}>
<OAuthLoginButtons
services={['telegram', 'google']}