Style improvements for mobile
This commit is contained in:
vjrj
parent
c79f8b5f8b
commit
cd16f45d8e
28 changed files with 345 additions and 120 deletions
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue