Skip to content

Commit

Permalink
Completed redux and jss implementation
Browse files Browse the repository at this point in the history
  • Loading branch information
Rafael Barea committed Sep 16, 2020
1 parent 0c4541d commit 4cb9885
Show file tree
Hide file tree
Showing 11 changed files with 391 additions and 497 deletions.
243 changes: 0 additions & 243 deletions src/App.css
Original file line number Diff line number Diff line change
Expand Up @@ -6,246 +6,3 @@
font-size: 68.75% !important;
font-family: verdana, arial, geneva, helvetica, sans-serif !important;
}

.cabecera {
margin-bottom: 1em;
}
.superior {
height: 15px;
background: none !important;
background-color: #666666 !important;
}
.saltoContenido {
color: white;
font-size: 1.05em;
}
.central {
background-color: #ebebeb;
}
.cabLogo {
background: url("./assets/img/cab2.jpg") top left no-repeat;
height: 10em;
}
.alignR {
text-align: right;
}
.traductor {
background-color: #fff;
border: 1px solid #d5d5d5;
font-size: 1.2em;
display: inline-block;
padding: 2px;
cursor: pointer;
}
.img {
width: 1.2em;
}

.triengle {
border-left: 1px solid rgb(187, 187, 187);
color: rgb(118, 118, 118);
}

fieldset,
img {
border: none;
}

/*############ CENTRAL #################*/
.separacion5em {
width: 100%;
height: 0.5em;
clear: both;
}

.buscIntCab {
float: left;
width: 100%;
background-color: #305880;
}
.buscIntCabTexto {
padding: 1em;
margin-top: 0.2em;
float: left;
margin-bottom: 0.2em;
margin-left: 0.45em;
width: 81%;
margin: auto 0 auto 1em;
letter-spacing: 0.1em;
max-width: 430px;
}
.letraBlancaBold {
color: white;
font-size: 100% !important;
}
.buscIntCabTextoHelp {
width: auto;
margin: auto 0.5em;
float: right;
}
.buscIntCamposEv2 {
border-top: #ffffff 0.2em solid;
float: left;
width: 100%;
border-bottom: #ffffff 0.3em solid;
}
.buscIntCamposEvPub {
background: #ced7de no-repeat right 50%;
}
.buscIntCamposLinea {
float: left;
width: 100%;
height: auto;
}
.cuadroBlanco98por {
float: left;
padding-left: 1em;
margin-top: 1em;
margin-left: 1em;
width: 94%;
border: solid 1px #eeeeee;
}
.cuadroBlanco98por div {
float: left;
}
.sinBorde {
border: 0 !important;
}
.saltobr {
height: 0.2em;
clear: both;
width: 100%;
float: none !important;
}
.cuadroBlanco98porPaso2 {
padding-bottom: 1.2em;
}
.campoNombre {
padding-right: 0.5em;
padding-left: 1.5em;
float: left;
padding-top: 0.9em;
height: auto;
width: 35%;
}
.campoNombre,
.campoApellidos {
margin-left: 4%;
margin-right: 1%;
}

.campoNombre label {
display: block;
}
input[type="text"] {
width: 85%;
margin-bottom: 10px;
}

.buscIntCamposEvProvInput2 {
margin-top: 0.2em;
font-size: 1em;
color: #000000;
}
.campoApellidos {
padding-right: 0.5em;
padding-left: 1.5em;
float: left;
padding-top: 0.9em;
height: auto;
width: 35%;
}

.buscIntCamposBuscar {
padding-top: 0.5em;
padding-bottom: 0.5em;
width: 100%;
display: flex;
justify-content: flex-end;
float: right;
background-color: #ced7de;
}
.botonSINimgen {
border-top-width: 0px;
border-left-width: 0px;
border-bottom-width: 0px;
border-right-width: 0px;

float: right;
font-size: 1em;
background-image: url("./assets/img/bot_n.gif");
width: 86px !important;
cursor: pointer !important;
color: white;
height: 21px;
background-color: transparent;
margin-right: 0.5em;
padding-top: 2px;
}

.margin {
margin-bottom: 1.2em;
}

/*############ CAROUSEL #################*/

.margin-carouselSuperior {
width: 40%;
margin-left: 21%;
margin-bottom: 50px;
margin-top: -1%;
}

.small-box {
flex: 0 0 24%;
margin: 0 1% 1em 0;
display: flex;
align-items: center;
margin-left: 5%;
border: 7px solid #f3f3f3;
padding: 1em;
}

.small-box .procedure-image img {
width: 70px;
}

.procedure-link {
color: #125d82 !important;
}
.link {
color: #004488;
font-weight: bold;
font-size: 1.2em;
}

.carousel {
display: flex;
flex-flow: row;
justify-content: space-between;
margin-bottom: 20px;
padding-top: 4em;
background-color: white;
}
.carousel-inner {
width: 100%;
}
.flex {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
}
.carousel-control {
background: rgba(0, 0, 0, 0) !important;
color: black;
width: 1%;
margin-top: 3%;
}

/*############ FOOTER #################*/
.pie {
background-color: #ebebeb;
padding: 1em;
text-align: right;
color: black;
}
9 changes: 7 additions & 2 deletions src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,14 @@ import { createStore, Reducer, Action } from "redux";
import GlobalState, { initialState } from "./state/globalState";

import Header from "./styledComponents/Header";
import Central from "./components/Central";
import Central from "./styledComponents/Central";
import Footer from "./styledComponents/Footer";
import Carousel from "./styledComponents/Carousel";

const reducer: Reducer<GlobalState,Action> = (state: GlobalState = initialState, action: Action) => {
const reducer: Reducer<GlobalState, Action> = (
state: GlobalState = initialState,
action: Action
) => {
return state;
};
const store = createStore(reducer, initialState);
Expand All @@ -20,6 +24,7 @@ function App() {
<div id="contenedor">
<Header />
<Central />
<Carousel />
<Footer />
</div>
</Provider>
Expand Down
119 changes: 119 additions & 0 deletions src/components/Carousel.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,119 @@
import React from "react";
import alta from "../assets/img/alta-vehiculo.png";
import pago from "../assets/img/pagodemultas.png";
import pago2 from "../assets/img/pagoydevoluciontasas.png";
import permiso from "../assets/img/permisoxpuntos.png";

function Carousel(props: any) {
return (
<div className={props.classes.carousel}>
<a
className={props.classes.control}
href="https://sedeapl.dgt.gob.es:7443/WEB_NCIT_CONSULTA/solicitarCitaPaso1.faces#myCarouselInferior"
>
<svg viewBox="0 0 256 512">
<path
fill="currentColor"
d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
></path>
</svg>
</a>
<div className={props.classes.inner}>
<div>
<div className={props.classes.sBox}>
<img
src={alta}
alt="Alta de vehículo."
className={props.classes.image}
/>
<div>
<a
href="https://sede.dgt.gob.es/es/vehiculos/altas-bajas-y-rehabilitacion-de-vehiculos/index.shtml"
target="_blank"
rel="noopener noreferrer"
title="Acceder a Alta de vehículo."
className={props.classes.link}
>
Alta de vehículo.
</a>
</div>
</div>
</div>

<div className={props.classes.sBox}>
<img
src={pago}
alt="Pago de multas."
className={props.classes.image}
/>
<div>
<a
href="https://sede.dgt.gob.es/es/multas/paga-tu-multa/index.shtml"
target="_blank"
rel="noopener noreferrer"
title="Acceder a Pago de multas."
className={props.classes.link}
>
Pago de multas.
</a>
</div>
</div>

<div>
<div className={props.classes.sBox}>
<img
src={pago2}
alt="Pago y devolución de tasas."
className={props.classes.image}
/>
<div>
<a
href="https://sede.dgt.gob.es/es/otros-tramites/pago-de-tasas/"
target="_blank"
rel="noopener noreferrer"
title="Acceder a Pago y devolución de tasas."
className={props.classes.link}
>
Pago y devolución de tasas.
</a>
</div>
</div>
</div>
<div>
<div className={props.classes.sBox}>
<img
src={permiso}
alt="Permiso por puntos."
className={props.classes.image}
/>
<div>
<a
href="https://sede.dgt.gob.es/es/permisos-de-conducir/consulta-tus-puntos/index.shtml"
target="_blank"
rel="noopener noreferrer"
title="Acceder a Permiso por puntos."
className={props.classes.link}
>
Permiso por puntos.
</a>
</div>
</div>
</div>
</div>

<a
className={props.classes.control}
href="https://sedeapl.dgt.gob.es:7443/WEB_NCIT_CONSULTA/solicitarCitaPaso1.faces#myCarouselInferior"
>
<svg viewBox="0 0 256 512">
<path
fill="currentColor"
d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
></path>
</svg>
</a>
</div>
);
}

export default Carousel;
Loading

0 comments on commit 4cb9885

Please sign in to comment.