Skip to content

Commit

Permalink
Solucionado el error de scroll en móviles
Browse files Browse the repository at this point in the history
  • Loading branch information
@mendozagioo
mendozagioo committed Jun 15, 2018
1 parent f810426 commit ec18c93
Show file tree
Hide file tree
Showing 3 changed files with 148 additions and 138 deletions.
272 changes: 135 additions & 137 deletions app/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -241,155 +241,153 @@ <h4 class="modal-title" id="myModalLabel">Mensaje</h4>
<div class="modal-body">
<!-- esto sera el modal -->

<div class="row ">
<div class="col-xs-12">
<div id="alerta" class="alert alert-danger">
No es posible obtener el valor solicitado para este día.
</div>
</div>

<div class="col-xs-3 hidden-xs">
<div class="col-xs-4">
<img class="img-responsive" src="imagenes/fecha.png">
</div>
<div class="col-xs-8">
<p><b>Fecha</b></p>
<p id="fecha_detalle">24/05/17</p>
</div>
<div class="col-xs-4">
<img class="img-responsive" src="imagenes/estacion.png">
</div>
<div class="col-xs-8">
<p><b>Estación:</b></p>
<p id="estacion_detalle">XAL-Xalostoc</p>
</div>
<div class="col-xs-4 temperatura">
<img class="img-responsive" src="imagenes/temperatura.png">
</div>
<div class="col-xs-8 temperatura">
<p><b>Temperatura:</b></p>
<p id="temperatura_detalle"></p>
</div>
<div class="col-xs-4">
<img class="img-responsive" src="imagenes/contaminante.png">
</div>
<div class="col-xs-8">
<p><b >Contaminante:</b></p>
<p id="contaminante_detalle">PM<sub>10</sub>, 104</p>
<div class="row ">
<div class="col-xs-12">
<div id="alerta" class="alert alert-danger">
No es posible obtener el valor solicitado para este día.
</div>
</div>

<div class="col-xs-3 hidden-xs">
<div class="col-xs-4">
<img class="img-responsive" src="imagenes/fecha.png">
</div>
<div class="col-xs-8">
<p><b>Fecha</b></p>
<p id="fecha_detalle">24/05/17</p>
</div>
<div class="col-xs-9 hidden-xs">
<div class="col-xs-12">
<p class="titulo"><strong>Valores máximos registrados del contaminante <span id="contaminante_grafica"> XXX </span></strong></p>
<div class="col-xs-4">
<img class="img-responsive" src="imagenes/estacion.png">
</div>
<div class="col-xs-8">
<p><b>Estación:</b></p>
<p id="estacion_detalle">XAL-Xalostoc</p>
</div>
<div class="col-xs-4 temperatura">
<img class="img-responsive" src="imagenes/temperatura.png">
</div>
<div class="col-xs-8 temperatura">
<p><b>Temperatura:</b></p>
<p id="temperatura_detalle"></p>
</div>
<div class="col-xs-4">
<img class="img-responsive" src="imagenes/contaminante.png">
</div>
<div class="col-xs-8">
<p><b >Contaminante:</b></p>
<p id="contaminante_detalle">PM<sub>10</sub>, 104</p>
</div>
</div>
<div class="col-xs-9 hidden-xs">
<div class="col-xs-12">
<p class="titulo"><strong>Valores máximos registrados del contaminante <span id="contaminante_grafica"> XXX </span></strong></p>
</div>
<div id="max-values" class="margenes_pop">
<div class="row">
<div class="col-xs-4">
<p data-toggle="tooltip" data-id="PM10" data-hour="24" data-placement="bottom" data-code="PM10 (µg/m&sup3;)" data-title="Las partículas menores o iguales a 10 micras (PM&#8321;&#8320;) se depositan en la región extratorácica del tracto respiratorio (nariz, boca, naso, oro y laringofarínge); contienen principalmente materiales de la corteza terrestre y se originan en su mayoría por procesos de desintegración de partículas más grandes. También pueden contener material biológico como
polen, esporas, virus o bacterias o provenir de la combustión incompleta de combustibles fósiles." class="active_pop boton_pop"
id="botonPM10">PM<sub>10</sub> (µg/m&sup3;) 24 horas</p>
</div>
<div class="col-xs-4">
<p data-toggle="tooltip" data-id="PM2.5" data-hour="24" data-placement="bottom" data-code="PM25; (µg/m&sup3;)" data-title="Las partículas menores o iguales a 2.5 micras (PM&#8322;.&#8325;) están formadas primordialmente por gases y por material proveniente de la combustión. Se depositan fundamentalmente en la región traqueobronquial (tráquea hasta bronquiolo terminal), aunque pueden ingresar a los alvéolos."
class="boton_pop" id="botonPM25">PM<sub>2.5</sub> (µg/m&sup3;) 24 horas</p>
</div>
<div class="col-xs-4">
<p data-toggle="tooltip" data-id="NO2" data-hour="D" data-placement="bottom" data-code="NO2 (ppm)" data-title="El dióxido de nitrógeno es un compuesto químico gaseoso de color marrón amarillento, es un gas tóxico e irritante. La exposición a este gas disminuye la capacidad de difusión pulmonar."
class="boton_pop" id="botonNO2">NO<sub>2</sub> (ppm) Promedio horario</p>
</div>
</div>
<div id="max-values" class="margenes_pop">
<div class="row">
<div class="col-xs-4">
<p data-toggle="tooltip" data-id="PM10" data-hour="24" data-placement="bottom" data-code="PM10 (µg/m&sup3;)" data-title="Las partículas menores o iguales a 10 micras (PM&#8321;&#8320;) se depositan en la región extratorácica del tracto respiratorio (nariz, boca, naso, oro y laringofarínge); contienen principalmente materiales de la corteza terrestre y se originan en su mayoría por procesos de desintegración de partículas más grandes. También pueden contener material biológico como
polen, esporas, virus o bacterias o provenir de la combustión incompleta de combustibles fósiles." class="active_pop boton_pop"
id="botonPM10">PM<sub>10</sub> (µg/m&sup3;) 24 horas</p>
</div>
<div class="col-xs-4">
<p data-toggle="tooltip" data-id="PM2.5" data-hour="24" data-placement="bottom" data-code="PM25; (µg/m&sup3;)" data-title="Las partículas menores o iguales a 2.5 micras (PM&#8322;.&#8325;) están formadas primordialmente por gases y por material proveniente de la combustión. Se depositan fundamentalmente en la región traqueobronquial (tráquea hasta bronquiolo terminal), aunque pueden ingresar a los alvéolos."
class="boton_pop" id="botonPM25">PM<sub>2.5</sub> (µg/m&sup3;) 24 horas</p>
</div>
<div class="col-xs-4">
<p data-toggle="tooltip" data-id="NO2" data-hour="D" data-placement="bottom" data-code="NO2 (ppm)" data-title="El dióxido de nitrógeno es un compuesto químico gaseoso de color marrón amarillento, es un gas tóxico e irritante. La exposición a este gas disminuye la capacidad de difusión pulmonar."
class="boton_pop" id="botonNO2">NO<sub>2</sub> (ppm) Promedio horario</p>
</div>
<div class="row">
<div class="col-xs-4">
<p data-toggle="tooltip" data-id="SO2" data-hour="8" data-placement="bottom" data-code="SO2 (ppm)" data-title="Gas incoloro que se forma al quemar combustibles fósiles que contienen azufre. La exposición a niveles altos de este contaminante produce irritación e inflamación de garganta y bronquios."
class="boton_pop" id="botonSO28">SO<sub>2</sub> (ppm) 8 horas</p>
</div>
<div class="row">
<div class="col-xs-4">
<p data-toggle="tooltip" data-id="SO2" data-hour="8" data-placement="bottom" data-code="SO2 (ppm)" data-title="Gas incoloro que se forma al quemar combustibles fósiles que contienen azufre. La exposición a niveles altos de este contaminante produce irritación e inflamación de garganta y bronquios."
class="boton_pop" id="botonSO28">SO<sub>2</sub> (ppm) 8 horas</p>
</div>
<div class="col-xs-4">
<p data-toggle="tooltip" data-id="SO2" data-hour="24" data-placement="bottom" data-code="SO2 (ppm)" data-title="Gas incoloro que se forma al quemar combustibles fósiles que contienen azufre. La exposición a niveles altos de este contaminante produce irritación e inflamación de garganta y bronquios."
class="boton_pop" id="botonSO224">SO<sub>2</sub> (ppm) 24 horas</p>
</div>
<div class="col-xs-4">
<p data-toggle="tooltip" data-id="CO" data-hour="8" data-placement="bottom" data-code="C0 (ppm)" data-title="Es un gas incoloro e inodoro que en concentraciones altas puede ser letal ya que forma carboxihemoglobina, la cual impide la oxigenación de la sangre."
class="boton_pop" id="botonCO">CO (ppm) 8 horas</p>
</div>
<div class="col-xs-4">
<p data-toggle="tooltip" data-id="SO2" data-hour="24" data-placement="bottom" data-code="SO2 (ppm)" data-title="Gas incoloro que se forma al quemar combustibles fósiles que contienen azufre. La exposición a niveles altos de este contaminante produce irritación e inflamación de garganta y bronquios."
class="boton_pop" id="botonSO224">SO<sub>2</sub> (ppm) 24 horas</p>
</div>
<div class="row">
<div class="col-xs-4">
<p data-toggle="tooltip" data-id="O3" data-hour="D" data-placement="bottom" data-code="O3 (ppm)" data-title="Es un compuesto gaseoso incoloro, que posee la capacidad de oxidar materiales, y causa irritación ocular y en las vías respiratorias."
class="boton_pop" id="botonO3D">O<sub>3</sub> (ppm) Promedio horario</p>
</div>
<div class="col-xs-4">
<p data-toggle="tooltip" data-id="O3" data-hour="8" data-placement="bottom" data-code="O3 (ppm)" data-title="Es un compuesto gaseoso incoloro, que posee la capacidad de oxidar materiales, y causa irritación ocular y en las vías respiratorias."
class="boton_pop" id="botonO38">O<sub>3</sub> (ppm) 8 horas</p>
</div>
<div class="col-xs-4">
<p data-toggle="tooltip" data-id="CO" data-hour="8" data-placement="bottom" data-code="C0 (ppm)" data-title="Es un gas incoloro e inodoro que en concentraciones altas puede ser letal ya que forma carboxihemoglobina, la cual impide la oxigenación de la sangre."
class="boton_pop" id="botonCO">CO (ppm) 8 horas</p>
</div>
</div>
</div>
<div class="col-xs-12 hidden-sm hidden-md hidden-lg text-center">
<p>
<span id="estacion_detalle_m">XAL-Xalostoc </span>
<span id="fecha_detalle_m"><b>24/05/17</b></span>
</p>
<p class="temperatura">
<strong>Temperatura:</strong>
<span id="temperatura_detalle_m">20 ℃</span>
</p>
<select name="conataminatesMovil" id="conataminatesMovil">
<option value="PM10">PM&#8321;&#8320; (µg/m&sup3;) 24 horas</option>
<option value="PM2.5">PM&#8322;.&#8325; (µg/m&sup3;) 24 horas</option>
<option value="NO2">NO&#8322; (ppm) Promedio horario</option>
<option value="SO28">SO&#8322; (ppm) 8 horas</option>
<option value="SO224">SO&#8322; (ppm) 24 horas</option>
<option value="CO8">CO (ppm) 8 horas</option>
<option value="O3D">O&#8323; (ppm) Promedio horario</option>
<option value="O38">O&#8323; (ppm) 8 horas</option>
</select>
</div>
</div>

<div class="row">
<div class="col-xs-12 col-sm-4 text-center">
<div class="chart-gauge"></div>
<div class="date-gauge"></div>
</div>
<div class="col-xs-12 col-sm-8">
<div class="col-xs-12">
<h5 id="tituloTexto">parametro</h5>
<p id="textoTitulo">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias, delectus voluptate error libero, repudiandae </p>
<div id="recomendaciones">
<h6>Recomendaciones</h6>
<p>Reducir el tiempo de exposición en exteriores, sobre todo de sectores vulnerables</p>
<ul>
<li>Niños</li>
<li>Adultos mayores</li>
<li>Mujeres embarazadas</li>
<li>Personas con problemas respiratorios y cardiovasculares</li>
</ul>
<p>Evitar salir a realizar actividades deportivas.</p>
<div class="row">
<div class="col-xs-4">
<p data-toggle="tooltip" data-id="O3" data-hour="D" data-placement="bottom" data-code="O3 (ppm)" data-title="Es un compuesto gaseoso incoloro, que posee la capacidad de oxidar materiales, y causa irritación ocular y en las vías respiratorias."
class="boton_pop" id="botonO3D">O<sub>3</sub> (ppm) Promedio horario</p>
</div>
<div class="col-xs-4">
<p data-toggle="tooltip" data-id="O3" data-hour="8" data-placement="bottom" data-code="O3 (ppm)" data-title="Es un compuesto gaseoso incoloro, que posee la capacidad de oxidar materiales, y causa irritación ocular y en las vías respiratorias."
class="boton_pop" id="botonO38">O<sub>3</sub> (ppm) 8 horas</p>
</div>
</div>
</div>
</div>
</div>
<div class="row hidden-xs">
<div class="col-xs-12 offset-m1 offset-l2">
<canvas id="myChart"></canvas>
</div>
<div class="col-xs-12 botonera">
<a href="#" class="parametro">3 días</a>
<a href="#" class="parametro">7 días</a>
<a href="#" class="parametro">14 días</a>
<a href="#" id="pinta_primero" class="parametro active">28 días</a>
</div>
<input type="hidden" name="estacion" id="estacion_id" value="">
<input type="hidden" name="ciudad" id="ciudad" value="">
<div class="col-md-12">
<p class="info-text">*Datos preliminares del SMCA que no han pasado por el proceso de validación</p>
<p id="note-nom-24hrs" class="info-text">
**La NOM correspondiente establece el uso de promedios diarios, pero a fin de conocer la evolución del contaminante hora
a hora se emplean los promedios móviles de 24 hrs.
</p>
<div class="col-xs-12 hidden-sm hidden-md hidden-lg text-center">
<p>
<span id="estacion_detalle_m">XAL-Xalostoc </span>
<span id="fecha_detalle_m"><b>24/05/17</b></span>
</p>
<p class="temperatura">
<strong>Temperatura:</strong>
<span id="temperatura_detalle_m">20 ℃</span>
</p>
<select name="conataminatesMovil" id="conataminatesMovil">
<option value="PM10">PM&#8321;&#8320; (µg/m&sup3;) 24 horas</option>
<option value="PM2.5">PM&#8322;.&#8325; (µg/m&sup3;) 24 horas</option>
<option value="NO2">NO&#8322; (ppm) Promedio horario</option>
<option value="SO28">SO&#8322; (ppm) 8 horas</option>
<option value="SO224">SO&#8322; (ppm) 24 horas</option>
<option value="CO8">CO (ppm) 8 horas</option>
<option value="O3D">O&#8323; (ppm) Promedio horario</option>
<option value="O38">O&#8323; (ppm) 8 horas</option>
</select>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-4 text-center">
<div class="chart-gauge"></div>
<div class="date-gauge"></div>
</div>
<div class="col-xs-12 col-sm-8">
<div class="col-xs-12">
<h5 id="tituloTexto">parametro</h5>
<p id="textoTitulo">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias, delectus voluptate error libero, repudiandae </p>
<div id="recomendaciones">
<h6>Recomendaciones</h6>
<p>Reducir el tiempo de exposición en exteriores, sobre todo de sectores vulnerables</p>
<ul>
<li>Niños</li>
<li>Adultos mayores</li>
<li>Mujeres embarazadas</li>
<li>Personas con problemas respiratorios y cardiovasculares</li>
</ul>
<p>Evitar salir a realizar actividades deportivas.</p>
</div>
</div>
</div>

</div>
<div class="row hidden-xs">
<div class="col-xs-12 offset-m1 offset-l2">
<canvas id="myChart"></canvas>
</div>
<div class="col-xs-12 botonera">
<a href="#" class="parametro">3 días</a>
<a href="#" class="parametro">7 días</a>
<a href="#" class="parametro">14 días</a>
<a href="#" id="pinta_primero" class="parametro active">28 días</a>
</div>
<input type="hidden" name="estacion" id="estacion_id" value="">
<input type="hidden" name="ciudad" id="ciudad" value="">
<div class="col-md-12">
<p class="info-text">*Datos preliminares del SMCA que no han pasado por el proceso de validación</p>
<p id="note-nom-24hrs" class="info-text">
**La NOM correspondiente establece el uso de promedios diarios, pero a fin de conocer la evolución del contaminante hora
a hora se emplean los promedios móviles de 24 hrs.
</p>
</div>
</div>
</div> <!-- fin del body -->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
Expand Down
Loading

0 comments on commit ec18c93

Please sign in to comment.