Skip to content

GitLab

N
nutrapharm_producto
Commit 28c7465f authored by Cristian Mauricio Diaz Canales's avatar Cristian Mauricio Diaz Canales 💬
Browse files
Options

ajuste css 

Implementación Html Manuel
Sin ultimos ajustes solicitados.
parent 1dbe58a3
Expand all Show whitespace changes
Inline Side-by-side
Showing with 615 additions and 67 deletions
app/Resources/views/producto_final/camera_logic.html.twig 0 → 100644
View file @ 28c7465f
<div id="tomarFotoContainer" style="display:none">
<div class="form-group">
<div id="cameraContainer" class="camera" style="display: block">
<video id="video">No se encuentra disponible una camara</video>
<button id="startbutton">Tomar Foto</button>
</div>
</div>
<div class="form-group">
<canvas id="canvas" width="auto" height="auto">
</canvas>
</div>
</div>
<div id="output_img_inovage" class="output" style="display: none">
<img id="photo" width="100%" height="100%" alt="Foto Tomada por camara" src="">
</div>
<div id="subirFotoContainer" style="display:none">
<div class="form-group">
<input type='file' id="imgInp" accept="image/*" />
</div>
</div>
<img id="imagenUsuario" width="100%" height="100%" style="display:none" src="#" alt="Imagen subida" />
app/Resources/views/producto_final/landing_comparacion_cambios.html.twig 0 → 100644
View file @ 28c7465f
{% extends 'base.html.twig' %}
{% block head %}
<meta property="fb:app_id" content="{{facebookAppId}}" />
<meta property="og:url" content="{{urlSitio}}{{seccionComparacion}}?idp={{idp}}&us=0" />
<meta property="og:type" content="website" />
<meta property="og:title" content="NutraPharm - Comparación Foto" />
<meta property="og:description" content="{{comentarioFinal}}" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image" content="{{urlSitio}}uploads/users/{{idp}}_comparacion.png"/>
<script>
(function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id))
return;
js = d.createElement(s);
js.id = id;
js.src = "//connect.facebook.net/es_ES/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
{% endblock %}
{% block body %}
<div class="app-container">
<div class="container-c">
<div class="marco-foto" style="background: url('{{urlSitio}}nutrapharm/get/photo?file_name={{idp}}_comparacion.{{extComparacion}}') no-repeat center center; background-size:cover;"></div>
</div>
<div id="containerFormulario" class="container-form">
<div>
<button id="btnGuardar" onclick="iniciarProceso(event)" class="btn-guardar">Registra tu cambio</button>
</div>
<div>
<div class="rrss-icons">
<a href="#" id="buttonShare"></a>
</div>
<div class="txt-comparte">
Comparte con el hashtag <br><strong>#selfietestinovage</strong>
</div>
{#MENSAJES EXITO ERROR#}
{{ include('producto_final/mensaje-exito-error.html.twig') }}
{#MENSAJES EXITO ERROR#}
</div>
</div>
{% endblock %}
{% block javascripts %}
<script>
var url = '{{urlSitio}}{{seccionComparacion}}?idp={{idp}}';
var usuarioNutrapharm = {{idp}};
window.fbAsyncInit = function () {
FB.init({
appId: '{{facebookAppId}}',
status: true,
xfbml: true,
cookie: true,
version: 'v7.0'
});
}
function countCompartirFacebook(idUsuario) {
var url = "{{ path('nutrapharm_compartir_facebook') }}";
var formData = new FormData();
$.ajax
({
type: "POST",
url: url,
data: formData,
async: true,
cache: false,
contentType: false,
processData: false,
timeout: 60000,
statusCode: {
400: function (respuesta) {
console.log(respuesta.responseText);
var respuestaJson = JSON.parse(respuesta.responseText);
writeMessage(respuestaJson.msg, "error");
$("#btnGuardar").prop("disabled", false);
},
500: function (respuesta) {
console.log(respuesta.responseText);
var respuestaJson = JSON.parse(respuesta.responseText);
writeMessage(respuestaJson.msg, "error");
$("#btnGuardar").prop("disabled", false);
}
},
success: function (data) {
writeMessage(data.msg, "success");
}
});
}
$("#buttonShare").click(function () {
console.log("compartiendo en facebook...");
FB.ui({
xfbml: true,
method: 'share',
href: url
}, function (response) {
if (response && response.post_id) {
console.log('Comparación Compartido en Facebook.');
writeMessage("Compartido en Facebook!", "success");
countCompartirFacebook(usuarioNutraPharm);
} else {
console.log('Comparación No Compartido en Facebook.');
writeMessage("No se pudo comparir en Facebook. Intente nuevamente!", "error");
}
});
})
function iniciarProceso(event) {
event.preventDefault();
writeMessage("Iniciando proceso");
window.location.assign("{{path('nutrapharm_homepage')}}");
}
function writeMessage(msg, type) {
if (type === "success") {
$("#error-content-nutrapharm").html("");
$("#error-nutrapharm").hide();
$("#exito-content-nutrapharm").html(msg);
$("#exito-nutrapharm").show();
} else {
$("#exito-content-nutrapharm").html("");
$("#exito-nutrapharm").hide();
$("#error-content-nutrapharm").html(msg);
$("#error-nutrapharm").show();
}
}
</script>
{% endblock %}
app/Resources/views/producto_final/landing_producto.html.twig
View file @ 28c7465f
{% extends 'producto_final/base_final.html.twig' %}
{% block stylesheets %}
<link rel="stylesheet" href="{{asset('manuel/css/camera.css')}}">
<link rel="stylesheet" href="{{asset('manuel/css/camera.css')}}">
{% endblock %}
{% block head %}
<meta property="fb:app_id" content="{{facebookAppId}}" />
......@@ -27,35 +27,13 @@
{% block body %}
<div class="app-container">
<img class="img-responsive logo-app" src="{{asset('manuel/images/atrevete-desafio.png')}}" alt="Atrévete al desafío" />
<div class="marco-foto">
<div id="tomarFotoContainer" style="display:none">
<div class="form-group">
<div id="cameraContainer" class="camera" style="display: block">
<video id="video">No se encuentra disponible una camara</video>
<button id="startbutton">Tomar Foto</button>
</div>
</div>
<div class="form-group">
<canvas id="canvas" width="auto" height="auto">
</canvas>
</div>
</div>
<div id="output_img_inovage" class="output" style="display: none">
<img id="photo" width="100%" height="100%" alt="Foto Tomada por camara" src="">
</div>
<div id="subirFotoContainer" style="display:none">
<div class="form-group">
<input type='file' id="imgInp" accept="image/*" />
</div>
<div id="foto_actual" class="marco-foto-adaptable"
style="background: url('') no-repeat center center; background-size:cover;">
{#CODIGO OCULTO#}
{{ include('producto_final/camera_logic.html.twig') }}
{#CODIGO OCULTO#}
</div>
<img id="imagenUsuario" width="100%" height="100%" style="display:none" src="#" alt="Imagen subida" />
</div>
<div class="botonera-fotos">
<div>
<button id="tomarFoto" name="tomarFoto" class="tomarFoto" onclick="mostrarTomarFoto(event)">Tomar Foto</button>
......@@ -93,11 +71,9 @@
</div>
<div>
<button id="btnGuardar" class="btn-guardar">Guardar</button>
</div>
<div id="mensaje-nutrapharm" style="display:none" class="alert alert-success" role="alert"></div>
{#MENSAJES EXITO ERROR#}
{{ include('producto_final/mensaje-exito-error.html.twig') }}
{#MENSAJES EXITO ERROR#}
</div>
......@@ -124,22 +100,28 @@
$("#output_img_inovage").hide();
$("#imagenUsuario").attr('src', "");
$("#imagenUsuario").hide();
imagenTomada = false;
var fotoActual = $("#foto_actual");
fotoActual.css("background-image", "url('')");
imagenTomada = true;
imagenSubida = false;
}
function mostrarSubirFoto(event) {
event.preventDefault();
openSeleccionadorArchivos(event);
console.log("mostrando subir foto...");
$("#tomarFotoContainer").hide();
$("#cameraContainer").hide();
$("#subirFotoContainer").show();
//$("#subirFotoContainer").show();
$("#output_img_inovage").hide();
var fotoActual = $("#foto_actual");
fotoActual.css("background-image", "url('')");
imagenTomada = false;
imagenSubida = true;
}
function openSeleccionadorArchivos(event){
function openSeleccionadorArchivos(event) {
event.preventDefault();
$("#imgInp").trigger("click");
}
......@@ -149,9 +131,10 @@
var reader = new FileReader();
reader.onload = function (e) {
$('#imagenUsuario').attr('src', e.target.result);
generateUrlBackground(e.target.result, "data");
}
reader.readAsDataURL(input.files[0]); // convert to base64 string
$('#imagenUsuario').show();
//$('#imagenUsuario').show();
}
}
......@@ -215,19 +198,13 @@
400: function (respuesta) {
console.log(respuesta.responseText);
var respuestaJson = JSON.parse(respuesta.responseText);
$("#mensaje-nutrapharm").removeClass("alert-success");
$("#mensaje-nutrapharm").addClass("alert-danger");
$("#mensaje-nutrapharm").html(respuestaJson.msg);
$("#mensaje-nutrapharm").show();
writeMessage(respuestaJson.msg, "error");
$("#btnGuardar").prop("disabled", false);
},
500: function (respuesta) {
console.log(respuesta.responseText);
var respuestaJson = JSON.parse(respuesta.responseText);
$("#mensaje-nutrapharm").removeClass("alert-success");
$("#mensaje-nutrapharm").addClass("alert-danger");
$("#mensaje-nutrapharm").html(respuestaJson.msg);
$("#mensaje-nutrapharm").show();
writeMessage(respuestaJson.msg, "error");
$("#btnGuardar").prop("disabled", false);
}
},
......@@ -236,11 +213,7 @@
tipoUsuarioFormulario = data.tipo;
usuarioNutraPharm = data.usuario;
}
$("#mensaje-nutrapharm").removeClass("alert-danger");
$("#mensaje-nutrapharm").addClass("alert-success");
$("#mensaje-nutrapharm").html(data.msg);
$("#mensaje-nutrapharm").show();
writeMessage(data.msg, "success");
},
complete: function (data) {
......@@ -252,10 +225,7 @@
$("#btnGuardar").click(function (e) {
e.preventDefault();
if (imagenSubida == false && imagenTomada == false) {
$("#mensaje-nutrapharm").removeClass("alert-success");
$("#mensaje-nutrapharm").addClass("alert-danger");
$("#mensaje-nutrapharm").html("Debe seleccionar o tomar una imagen!");
$("#mensaje-nutrapharm").show();
writeMessage("Debe seleccionar o tomar una imagen!", "error");
return false;
}
if (typeof upload == "undefined") {
......@@ -274,5 +244,37 @@
} else
upload = new Upload(null);
});
function writeMessage(msg, type) {
if (type === "success") {
$("#error-content-nutrapharm").html("");
$("#error-nutrapharm").hide();
$("#exito-content-nutrapharm").html(msg);
$("#exito-nutrapharm").show();
} else {
$("#exito-content-nutrapharm").html("");
$("#exito-nutrapharm").hide();
$("#error-content-nutrapharm").html(msg);
$("#error-nutrapharm").show();
}
}
function generateUrlBackground(source, type) {
if (type == "url") {
var fotoActual = $("#foto_actual");
var img = new Image();
img.src = source;
fotoActual.css("background-image", "url('" + img.src + "')");
} else {
var fotoActual = $("#foto_actual");
var img = new Image();
img.src = source;
fotoActual.css("background-image", "url('" + img.src.replace(/(\r\n|\n|\r)/gm, "") + "')");
}
}
</script>
{% endblock %}
\ No newline at end of file
app/Resources/views/producto_final/mensaje-exito-error.html.twig 0 → 100644
View file @ 28c7465f
<div>
<div id="exito-nutrapharm" class="alert-box error" style="display:none"><img class="icp" src="{{asset('manuel/images/error.png')}}"> <span>error: </span> <span id="exito-content-nutrapharm">Write your error message here.</span></div>
<div id="error-nutrapharm" class="alert-box success" style="display:none"><img class="icp" src="{{asset('manuel/images/success.png')}}"> <span>success: </span> <span id="error-content-nutrapharm">Write your success message here.</span></div>
<button id="btnGuardar" class="btn-guardar">Finalizar</button>
</div>
src/NutrapharmBundle/Controller/DefaultController.php
View file @ 28c7465f
......@@ -58,7 +58,7 @@ class DefaultController extends Controller {
$ext = $usuario->getUnuExtInicial();
return $this->render('producto/landing_producto_generar_comparacion.html.twig', array("idp" => $id, "extInicial" => $ext,"seccionGenerarCambios" => $seccionGenerarCambios ,"seccionComparacion" => $seccionComparacion, "urlSitio" => Utiles::getParametroConfiguracion("url_sitio"), "facebookAppId" => $facebookAppId));
return $this->render('producto_final/landing_producto_generar_comparacion.html.twig', array("idp" => $id, "extInicial" => $ext,"seccionGenerarCambios" => $seccionGenerarCambios ,"seccionComparacion" => $seccionComparacion, "urlSitio" => Utiles::getParametroConfiguracion("url_sitio"), "facebookAppId" => $facebookAppId));
}
public function comparacionAction(Request $request) {
......
web/frontend/js/capture-2.js
View file @ 28c7465f
......@@ -62,6 +62,9 @@
var data = canvas.toDataURL('image/png');
photo.setAttribute('src', data);
var fotoActual = $("#foto_actual");
fotoActual.css("background-image", "url('')");
}
function takepicture() {
......@@ -74,12 +77,16 @@
var data = canvas.toDataURL('image/png');
console.log(data);
photo.setAttribute('src', data);
var fotoActual = $("#foto_actual");
var img = new Image();
img.src = data;
fotoActual.css("background-image", "url('" + img.src.replace(/(\r\n|\n|\r)/gm, "") + "')");
} else {
clearphoto();
}
$("#cameraContainer").hide();
$("#output_img_inovage").show();
//$("#output_img_inovage").show();
}
function showForm() {
......
web/manuel/css/style.css
View file @ 28c7465f
......@@ -283,19 +283,27 @@ button.subirFoto {
font-size: 1em;
text-align: center;
font-weight: bold;
margin: 0.5em 0 1em 0;
margin: 0.5em 0;
text-transform: uppercase;
color: #f5a800;
padding: 0.8em 1.2em;
}
.container-c {
display: flex;
flex-flow: row nowrap;
position: relative;
z-index: 5;
margin-top: -20em;
margin-bottom: 1em;
}
.contenedor-compara-fotos {
display: flex;
flex-flow: row nowrap;
position: relative;
/* position: relative; */
z-index: 5;
margin-top: -25em;
margin-top: 2em;
margin-bottom: 1em;
}
......@@ -402,19 +410,70 @@ div .txt-center {
.fondo-adaptable {
margin-top: -120px;
}
.contenedor-compara-fotos {
/* .contenedor-compara-fotos {
margin-top: -20em;
}
} */
img.desafio-inovage {
width: 250px;
}
}
/*** ALERT **********************************/
.alert-box {
color:#555;
font-family:Tahoma,Geneva,Arial,sans-serif;font-size:16px;
padding:1.7em 40px;
margin:0 0;
width:-webkit-fill-available;
position: absolute;
display: flex;
flex-flow: row nowrap;
justify-content: center;
}
.alert-box span {
font-weight:bold;
text-transform:uppercase;
padding-right: 5px;
}
.error {
background:#ffecec;
/* border:1px solid #f5aca6; */
}
.success {
background:#e9ffd9;
/* border:1px solid #a6ca8a; */
}
.warning {
background:#fff8c4 url('images/warning.png') no-repeat 10px 50%;
/* border:1px solid #f2c779; */
}
.notice {
background:#e3f7fc url('images/notice.png') no-repeat 10px 50%;
/* border:1px solid #8ed9f6; */
}
.icp { margin-right:8px;
width: 16px;
height: 16px;
}
/*** MEDIA QUERIES ***/
@media(max-width:768px){
.btn-guardar {
margin: 1em 0 3em 0;
}
.container-c {
z-index: 5;
margin-top: -8em;
}
img.desafio-inovage {
width: 250px;
}
......@@ -478,9 +537,9 @@ button.subirFoto, button.tomarFoto {
.fondo-adaptable {
margin-top: -4em;
}
.contenedor-compara-fotos {
/* .contenedor-compara-fotos {
margin-top: -8em;
}
} */
.txt-foto-anterior {
font-size: 0.8em;
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment