Ajustes y nuevas páginas para el rediseño de TOD

argob · Sep 20, 2023 · 1eb0396 · 1eb0396
1 parent bf794f0
commit 1eb0396
Show file tree

Hide file tree

Showing 12 changed files with 105 additions and 53 deletions.
diff --git a/src/_includes/snt/tod_header-interior.html b/src/_includes/snt/tod_header-interior.html
@@ -7,7 +7,7 @@
   <h1 class="text-center col-12 mb-2">
 
 
-                  <a class="tod-logo  mx-auto text-center mt-1" href="tod.html"> <img alt="Sistema Nacional de Turnos" src="{{ "/proyectos/snt/img/Logo_SNT-01.svg" | prepend: site.baseurl }}" height="70" > </a> 
+                  <a class="tod-logo  mx-auto text-center mt-1" href="tod.html"> <img alt="Instituto Nacional de Juventudes" src="{{ "/proyectos/snt/img/logoInjuve.png" | prepend: site.baseurl }}" height="80" > </a> 
 
   </h1>
           </div>

diff --git a/src/_includes/snt/tod_header.html b/src/_includes/snt/tod_header.html
@@ -6,7 +6,7 @@
   <div class="container">
 
   <h1 class="text-center col-12 mb-2">
-                  <a class="tod-logo  mx-auto text-center mt-5" href="https://qa-back-turnos.argentina.gob.ar/organismos" aria-label="Sistema Nacional de turnos"> <img alt="Sistema Nacional de Turnos" src="{{ "/proyectos/snt/img/Logo_SNT-01.svg" | prepend: site.baseurl }}" height="70"> </a> 
+                  <a class="tod-logo  mx-auto text-center mt-5" href="https://qa-back-turnos.argentina.gob.ar/organismos" aria-label="Instituto Nacional de Juventudes"> <img alt="Instituto Nacional de Juventudes" src="{{ "/proyectos/snt/img/logoInjuve.png" | prepend: site.baseurl }}" height="80"> </a> 
   </h1> 
 
           </div>

diff --git a/src/_sass/buttons.scss b/src/_sass/buttons.scss
@@ -315,7 +315,7 @@ span {
     color: $gray-base;
     border: $gray-base 3px solid;
     text-align: left;
-    font-size: 22px;
+    font-size: 20px;
         margin-top: 20px;
         background: $white;
 

diff --git a/src/_sass/main.scss b/src/_sass/main.scss
@@ -53,17 +53,23 @@ font-size: 14px;}
 //==TOD
 @media (max-width: 420px){
 .tod-logo img {
-max-height: 50px;
+max-height: 70px;
 }
 }
 
 
 .tod-logo  img {
-height: 70px;
+height: 80px;
 }
 
 
-
+.tod_requisito { 
+    font-size:18px; 
+
+    li { 
+    margin: 10px 0px;
+    }
+}
 
 
 /*///Organimos Revisar //////*/

diff --git a/src/_sass/typography.scss b/src/_sass/typography.scss
@@ -22,4 +22,28 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
 .title-snt {
 margin-bottom: 16px; 
 border-bottom: 1px solid $gray;
+}
+
+.ql-indent-1 {
+    padding-left: 1rem!important
+}
+
+.ql-indent-2 {
+    padding-left: 2rem!important
+}
+
+.ql-indent-3 {
+    padding-left: 3rem!important
+}
+
+.ql-indent-4 {
+    padding-left: 4rem!important
+}
+
+.ql-indent-5 {
+    padding-left: 5rem!important
+}
+
+.ql-indent-6 {
+    padding-left: 6rem!important
 }
diff --git a/src/proyectos/snt/img/logoInjuve.png b/src/proyectos/snt/img/logoInjuve.png
diff --git a/src/proyectos/snt/v1/TOD/tod.html b/src/proyectos/snt/v1/TOD/tod.html
@@ -15,7 +15,7 @@ <h2>¡Te damos la bienvenida!</h2>
     <p class="display-6">Desde aquí podés solicitar turno para tus trámites.</p>
 
 	  <div class="mt-5">
-	  	<a href="tod_seleccion.html" type="button" class="btn btn-success">Sacar turno</a>
+	  	<a href="tod_seleccion.html" class="btn btn-success">Sacar turno</a>
   </div>
 
 

diff --git a/src/proyectos/snt/v1/TOD/tod_confirmacion.html b/src/proyectos/snt/v1/TOD/tod_confirmacion.html
@@ -26,12 +26,13 @@ <h2 class="h4">Confirmación</h2>
 
 
 <section>
+
 
-<div class="alert alert-info d-flex align-text-bottom col-md-8 offset-md-2 " role="alert">
+<div class="alert alert-info d-flex align-text-bottom col-md-8 offset-md-2 align-items-center" role="alert">
 
 <i class="fa icono-arg-turno fa-fw fa-4x me-2"></i>
 
-  <div><p class="h5 align-text-top flex-shrink-0 ">Tu tiempo de espera:</p>
+  <div><h2 class="h5 align-text-top flex-shrink-0">Tu tiempo de espera:</h2>
 Tenés 3 personas delante  </div>
 </div>
 
@@ -48,12 +49,12 @@ <h2 class="h4">Confirmación</h2>
 	<div class="row  justify-content-between col-12">
 
 		<div class="col-auto">
-		<a href="tod.html" type="button" class="btn btn-danger btn-md mt-5">Cancelar</a>
-		<a href="tod_form.html" type="button" class="btn btn-default btn-md mt-5 ms-2">Volver</a>
+		<a href="tod.html" class="btn btn-danger btn-md mt-5">Cancelar</a>
+		<a href="tod_form.html"  class="btn btn-default btn-md mt-5 ms-2">Volver</a>
 		</div>
 
 		<div class="col-auto">
-		<a href="tod_ticket" type="button" class="btn btn-success text-end mt-5">Imprimir ticket</a>
+		<a href="tod_ticket" class="btn btn-success text-end mt-5">Imprimir ticket</a>
 		</div>	
 
 </div>

diff --git a/src/proyectos/snt/v1/TOD/tod_form.html b/src/proyectos/snt/v1/TOD/tod_form.html
@@ -37,31 +37,31 @@ <h2 class="h4">Completá el formulario:</h2>
   			<legend class="visually-hidden">Completá el formulario con tu información personal</legend>
   		<div class="row">
 		<div class="col-12 col-md-6 form-group  mt-3">
-			<label for="firstname" class="form-label fw-bold">Nombre *</label>
-			<input type="text" aria-label="Nombre" id="firstname" name="nombre" formcontrolname="nombre" placeholder="Ingresar el nombre" class="border-3 border-black form-control">
+			<label for="nombre" class="form-label fw-bold">Nombre *</label>
+			<input type="text" aria-label="Nombre" id="nombre" name="nombre" placeholder="Ingresar el nombre" class="border-3 border-black form-control">
 		</div>
 
 		<div class="col-12 col-md-6 form-group  mt-3">
-			<label for="firstname" class="form-label fw-bold">Apellido *</label>
-			<input type="text" aria-label="Apellido" id="lastname" name="apellido" formcontrolname="nombre" placeholder="Ingresar el apellido" class="border-3 border-black form-control">
+			<label for="apellido" class="form-label fw-bold">Apellido *</label>
+			<input type="text" aria-label="Apellido" id="apellido" name="apellido"  placeholder="Ingresar el apellido" class="border-3 border-black form-control">
 		</div>
 
 
 <div class="col-12 col-lg-4  col-sm-12 form-group  my-5">
-			<label for="firstname" class="form-label fw-bold ">Tipo de documento *</label>
-		<select id="documento" formcontrolname="documento" class="form-control form-select border-3 border-black form-control"  aria-label="seleccionar tipo de documento" >
+			<label for="tipodocumento" class="form-label fw-bold ">Tipo de documento *</label>
+		<select id="tipodocumento"  class="form-control form-select border-3 border-black form-control"  aria-label="seleccionar tipo de documento" >
 			<option value="1: 1">Seleccionar</option>
 			<option value="2: 2">CUIL</option>
 			<option value="3: 3">Documento extranjero</option></select>
 		</div>
 
 		<div class="col-12 col-lg-8 col-sm-12  form-group mt-md-5 mt-0  mb-5">
-			<label for="firstname" class="form-label fw-bold">Número de documento*</label>
-			<input type="text" aria-label="Número de documento" id="nrodocumento" name="nrodocumento" formcontrolname="nrodocumento" placeholder="Ingresar el documento" class="border-3 border-black form-control"><p class="text-muted mt-1"> Escribí (sin puntos ni guiones). </p>
+			<label for="nrodocumento" class="form-label fw-bold">Número de documento*</label>
+			<input type="text" aria-label="Número de documento" id="nrodocumento" name="nrodocumento" placeholder="Ingresar el documento" class="border-3 border-black form-control"><!--<p class="text-muted mt-1"> Escribí (sin puntos ni guiones). </p>-->
 		</div>
 
 
-
+</div>
 </fieldset>
 </form>
 
@@ -77,12 +77,12 @@ <h2 class="h4">Completá el formulario:</h2>
 	<div class="row  justify-content-between col-12">
 
 		<div class="col-auto">
-		<a href="tod.html" type="button" class="btn btn-danger btn-md mt-5">Cancelar</a>
-		<a href="tod_requisito.html" type="button" class="btn btn-default btn-md mt-5 ms-2">Volver</a>
+		<a href="tod.html"  class="btn btn-danger btn-md mt-5">Cancelar</a>
+		<a href="tod_requisito.html"  class="btn btn-default btn-md mt-5 ms-2">Volver</a>
 		</div>
 
 		<div class="col-auto">
-		<a href="tod_confirmacion" type="button" class="btn btn-success text-end mt-5">Confirmar</a>
+		<a href="tod_confirmacion" class="btn btn-success text-end mt-5">Confirmar</a>
 		</div>	
 
 </div>

diff --git a/src/proyectos/snt/v1/TOD/tod_interior.html b/src/proyectos/snt/v1/TOD/tod_interior.html
@@ -15,7 +15,7 @@ <h2>¡Te damos la bienvenida!</h2>
     <p class="display-6">Desde aquí podés solicitar turno para tus trámites.</p>
 
 	  <div class="mt-5">
-	  	<a href="#" type="button" class="btn btn-success">Sacar turno</a>
+	  	<a href="#"  class="btn btn-success">Sacar turno</a>
   </div>
 
 

diff --git a/src/proyectos/snt/v1/TOD/tod_requisito.html b/src/proyectos/snt/v1/TOD/tod_requisito.html
@@ -25,17 +25,24 @@
 <div class="container-fluid bg-gray py-3">
 
 <div class="container">
-	<div class="row  justify-content-center">
+	<div class="row  justify-content-center align-items-center">
 
 
 <div class="text-center col-12 col-md-8">
 <h2 class="h4 text-start">Requisitos:</h2>
 
-
-<div  class="col-12 border-3 border-gray p-3 rounded-2 bg-white p-3" style="height: 200px;	overflow-y: scroll;">
+<section class="pt-0">
+<div  class="col-12 border-3 border-gray p-3 rounded-2 bg-white p-3" style="height: 300px;	overflow-y: scroll;">
   <div class="text-start" style="height: auto">
 
-  <p>
+
+<ul class="tod_requisito">
+	<li>Tener entre 15 a 29 años.</li>
+<li>Menores de 18 años (Entre 15 a 17 años) tienen que inscribirse en la Casa de Juventudes, presentando copia de su DNI y copia del DNI de su madre, padre o tutor. La persona adulta responsable deberá firmar: Código de convivencia de la Casa de Juventudes, Ficha médica, Uso de cesión de imagen y Declaración Jurada de que los datos aportados son verídicos. Se finaliza la inscripción con una entrevista de relevamiento de datos de contacto.</li>
+<li>Mayores de 18 años (Entre 18 a 29 años) tienen que inscribirse en la Casa de Juventudes, presentando copia del DNI propio. La persona deberá firmar: Código de convivencia de la Casa de Juventudes, Ficha médica, Uso de cesión de imagen y Declaración Jurada de que los datos aportados son verídicos. Se finaliza la inscripción con una entrevista de relevamiento de datos de contacto.
+</li>
+	  </ul>
+
 
 <h1>Prueba H1</h1>
 <h2>Prueba H2 </h2>
@@ -50,29 +57,32 @@ <h5>Prueba H5 </h5>
 <li>Opción (segunda)</li>
 <li>Opción (tercera)</li></ol>
 
-<ul><li>Opción (primera)</li><li>Opción (segunda)</li><li class="ql-indent-1">Opción (A)</li><li class="ql-indent-2">Opción (B)</li><li class="ql-indent-3">Opción (C)</li><li>Opción (tercera)</li></ul>
-
-
-  	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+<ul><li>Opción (primera)</li>
+	<li>Opción (segunda)</li>
+	<li class="ql-indent-1">Opción (1)</li>
+	<li class="ql-indent-2">Opción (2)</li>
+	<li class="ql-indent-3">Opción (3)</li>
+		<li class="ql-indent-4">Opción (4)</li>
+			<li class="ql-indent-5">Opción (5)</li>
+				<li class="ql-indent-6">Opción (6)</li>
+	<li>Opción (tercera)</li>
+</ul>
 
-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
 
-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et </p>
-    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 
-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et </p>
   </div>
  </div>
 
 
-
+</section>
 </div>
+
+
+<div class="col-1">
+<a class="" href="#" ><span class="fa fa-chevron-circle-up fa-4x mb-4
+    "></span><span class="visually-hidden">subir</span></a>
+    <a class="" href="#"><span class="fa fa-chevron-circle-down fa-4x"></span><span class="visually-hidden">bajar</span></a></div>
+
 </div>
 
 </div>
@@ -85,12 +95,12 @@ <h5>Prueba H5 </h5>
 	<div class="row  justify-content-between col-12">
 
 		<div class="col-auto">
-		<a href="tod.html" type="button" class="btn btn-danger btn-md mt-5">Cancelar</a>
-		<a href="tod_seleccion.html" type="button" class="btn btn-default btn-md mt-5 ms-2">Volver</a>
+		<a href="tod.html"  class="btn btn-danger btn-md mt-5">Cancelar</a>
+		<a href="tod_seleccion.html"  class="btn btn-default btn-md mt-5 ms-2">Volver</a>
 		</div>
 
 		<div class="col-auto">
-		<a href="tod_form" type="button" class="btn btn-success text-end mt-5">Continuar</a>
+		<a href="tod_form" class="btn btn-success text-end mt-5">Continuar</a>
 		</div>	
 
 </div>

diff --git a/src/proyectos/snt/v1/TOD/tod_seleccion.html b/src/proyectos/snt/v1/TOD/tod_seleccion.html
@@ -12,26 +12,37 @@
 <div class="container-fluid bg-gray py-3">
 
 <div class="container">
-	<div class="row  justify-content-center">
+<div class="row  justify-content-between align-items-center">
+
+
+<div class="col-1"><a class="" href="#"><span class="fa fa-chevron-circle-left fa-4x"></span><span class="visually-hidden">página anterior</span></a></div>
 
 
 <div class="text-center col-12 col-md-8">
 <h2 class="h4 text-start">Seleccioná tu trámite:</h2>
 
-		 <a href="tod_requisito.html" type="button" class="btn btn-md  d-flex btn-tramite w-100">
+		 <a href="tod_requisito.html"  class="btn btn-md  d-flex btn-tramite w-100">
 		   Reservar sala de radio, ensayo o grabación 
 		</a>
 
 
- <a href="tod_requisito.html" type="button" class="btn btn-md d-flex btn-tramite w-100">
+ <a href="tod_requisito.html"  class="btn btn-md d-flex btn-tramite w-100">
 		   Texto de botón
 		</a>
 
-	  <a href="tod_requisito.html" type="button" class="btn btn-md d-flex btn-tramite w-100">
-		   Texto de botón con mucho texto que obliga a tener más de una línea
+	  <a href="tod_requisito.html"  class="btn btn-md d-flex btn-tramite w-100">
+		   Texto de botón con mucho texto que obliga a tener más de una línea.  Texto de botón con mucho texto que obliga a tener más de una línea
 		</a>
 
+<a href="tod_requisito.html" class="btn btn-md d-flex btn-tramite w-100">
+		   Texto de botón con mucho texto que obliga a tener más de una línea
+		</a>
 	 </div>
+
+<div class="col-1"><a class="" href="#">><span class="fa fa-chevron-circle-right fa-4x"></span><span class="visually-hidden">página siguiente</span></a></div>
+
+
+
 </div>
 </div>
 
@@ -42,7 +53,7 @@ <h2 class="h4 text-start">Seleccioná tu trámite:</h2>
 	<div class="row  justify-content-between col-12">
 
 		<div class="col-12">
-		<a href="tod.html" type="button" class="btn btn-danger btn-md mt-5">Cancelar</a> 
+		<a href="tod.html" class="btn btn-danger btn-md mt-5">Cancelar</a> 
 		</div>