From 4cb9885d0e5051c6e787ee6eb10ab779346a0e7b Mon Sep 17 00:00:00 2001 From: Rafael Barea Date: Wed, 16 Sep 2020 04:57:22 +0200 Subject: [PATCH] Completed redux and jss implementation --- src/App.css | 243 ----------------- src/App.tsx | 9 +- src/components/Carousel.tsx | 119 +++++++++ src/components/Central.tsx | 379 +++++++++------------------ src/components/Header.tsx | 1 - src/containers/Central.tsx | 7 + src/state/globalState.ts | 4 + src/styledComponents/Carousel-jss.ts | 37 +++ src/styledComponents/Carousel.js | 6 + src/styledComponents/Central-jss.ts | 77 ++++++ src/styledComponents/Central.js | 6 + 11 files changed, 391 insertions(+), 497 deletions(-) create mode 100644 src/components/Carousel.tsx create mode 100644 src/containers/Central.tsx create mode 100644 src/styledComponents/Carousel-jss.ts create mode 100644 src/styledComponents/Carousel.js create mode 100644 src/styledComponents/Central-jss.ts create mode 100644 src/styledComponents/Central.js diff --git a/src/App.css b/src/App.css index 3afa5f6..80df39d 100644 --- a/src/App.css +++ b/src/App.css @@ -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; -} diff --git a/src/App.tsx b/src/App.tsx index df954ae..587a26b 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -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 = (state: GlobalState = initialState, action: Action) => { +const reducer: Reducer = ( + state: GlobalState = initialState, + action: Action +) => { return state; }; const store = createStore(reducer, initialState); @@ -20,6 +24,7 @@ function App() {
+
diff --git a/src/components/Carousel.tsx b/src/components/Carousel.tsx new file mode 100644 index 0000000..0f155ba --- /dev/null +++ b/src/components/Carousel.tsx @@ -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 ( +
+ + + + + +
+ + + + + + +
+ + + + + + +
+ ); +} + +export default Carousel; diff --git a/src/components/Central.tsx b/src/components/Central.tsx index 5a7e4f7..9d5501c 100644 --- a/src/components/Central.tsx +++ b/src/components/Central.tsx @@ -1,280 +1,157 @@ import React from "react"; -import "../App.css"; import help from "../assets/img/system_help.png"; -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 Central() { +function Central(props: any) { return (
-
-
-
-

- CITA PREVIA PARA TRÁMITE DE CONDUCTORES / VEHÍCULOS -

-
- -
-
-
-
- Sevilla -
-
-
- Datos del interesado -
-
-
- - - - -
-
- - - - -
-
- - - - -
-
- - - - -
-
-
- - - -
- -
+
+ +
+
+
{props.place}
+
Datos del interesado
+
+
+ + + +
-
- Datos del representante +
+ + + +
-
-
- - - - -
-
- - - - -
-
- - - - -
-
- - - - -
-
-
- - - -
- -
+
+ + + +
-
- Otros datos +
+ + + +
-
-
- - - - -
-
- - - - -
-
- - - - -
+
+ + + +
-
-
- -
-
-
-
- +
+ Datos del representante
-
- -
-
- -
- -
-
- - - - - -
-
-
-
- Alta de vehículo. +
+
+ + + +
-
- - Alta de vehículo. - +
+ + + +
-
-
-
-
-
- Pago de multas. +
+ + + +
-
- - Pago de multas. - +
+ + + + +
+
+ + + +
-
-
-
-
- Pago y devolución de tasas. +
Otros datos
+
+
+ + + + +
+
+ + + +
-
- - Pago y devolución de tasas. - +
+ + + +
+
+
+ +
+
+
- + +
+
+
- - - - - - -
+
); } diff --git a/src/components/Header.tsx b/src/components/Header.tsx index f9352ca..e0860d1 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -1,5 +1,4 @@ import React from "react"; -import "../App.css"; import dot from "../assets/img/g.png"; function Header(props: any) { diff --git a/src/containers/Central.tsx b/src/containers/Central.tsx new file mode 100644 index 0000000..ab32ee2 --- /dev/null +++ b/src/containers/Central.tsx @@ -0,0 +1,7 @@ +import GlobalState from "../state/globalState"; +import { connect } from "react-redux"; +import Central from "../components/Central"; + +const mapStateToProps = (state: GlobalState) => state; + +export default connect(mapStateToProps)(Central); diff --git a/src/state/globalState.ts b/src/state/globalState.ts index 77ea962..8e6c617 100644 --- a/src/state/globalState.ts +++ b/src/state/globalState.ts @@ -2,10 +2,14 @@ import { Action } from "redux"; interface GlobalState { link1: string; + place: string; + type: string; } export default GlobalState; export const initialState: GlobalState = { link1: "Salto contenido", + place: "Sevilla", + type: "CITA PREVIA PARA TRÁMITE DE CONDUCTORES / VEHÍCULOS", }; diff --git a/src/styledComponents/Carousel-jss.ts b/src/styledComponents/Carousel-jss.ts new file mode 100644 index 0000000..77dfcd1 --- /dev/null +++ b/src/styledComponents/Carousel-jss.ts @@ -0,0 +1,37 @@ +const classes = { + sBox: { + display: "flex", + alignItems: "center", + border: "7px solid #f3f3f3", + padding: "1em", + }, + image: { + height: "7em", + }, + link: { + color: "#004488", + fontWeight: "bold", + fontSize: "1.2em", + }, + carousel: { + display: "flex", + flexFlow: "row", + justifyContent: "space-between", + marginBottom: "20px", + paddingTop: "4em", + }, + inner: { + width: "100%", + display: "flex", + flexFlow: "row wrap", + justifyContent: "space-around", + }, + control: { + background: "rgba(0, 0, 0, 0) !important", + color: "black", + width: "1%", + marginTop: "3%", + }, +}; + +export default classes; diff --git a/src/styledComponents/Carousel.js b/src/styledComponents/Carousel.js new file mode 100644 index 0000000..73afcb2 --- /dev/null +++ b/src/styledComponents/Carousel.js @@ -0,0 +1,6 @@ +import injectSheet from 'react-jss' +import Carousel from '../components/Carousel' +import classes from './Carousel-jss.ts' + + +export default injectSheet(classes)(Carousel) \ No newline at end of file diff --git a/src/styledComponents/Central-jss.ts b/src/styledComponents/Central-jss.ts new file mode 100644 index 0000000..78d57dd --- /dev/null +++ b/src/styledComponents/Central-jss.ts @@ -0,0 +1,77 @@ +import boton from "../assets/img/bot_n.gif"; + +const classes = { + subHeader: { + float: "left", + width: "100%", + backgroundColor: "#305880", + }, + shText: { + padding: "1em", + float: "left", + letterSpacing: "0.1em", + maxWidth: "430px", + }, + font: { + color: "white", + fontSize: "100% !important", + }, + help: { + margin: "0.5em", + float: "right", + }, + fieldset: { + float: "left", + background: "#ced7de no-repeat right 50%;", + }, + campos: { + float: "left", + width: "35%", + padding: "1em", + }, + field: { + fontSize: "1em", + width: "85%", + marginBottom: "10px", + }, + box: { + float: "left", + paddingLeft: "1em", + marginTop: "1em", + marginLeft: "1em", + width: "94%", + border: "solid 1px #eeeeee", + paddingBottom: "1.2em", + }, + subtitles: { + float: "left", + marginTop: "1em", + marginLeft: "1em", + width: "94%", + border: "0 !important", + fontWeight: "bold", + }, + buttonGroup: { + paddingTop: "0.5em", + paddingBottom: "0.5em", + width: "100%", + display: "flex", + justifyContent: "flex-end", + backgroundColor: "#ced7de", + }, + button: { + borderWidth: "0px", + float: "right", + backgroundImage: "url(" + boton + ")", + width: "86px !important", + cursor: "pointer !important", + color: "white", + height: "21px", + marginRight: "0.5em", + }, + none: { + border: "none", + }, +}; + +export default classes; diff --git a/src/styledComponents/Central.js b/src/styledComponents/Central.js new file mode 100644 index 0000000..17bfc4c --- /dev/null +++ b/src/styledComponents/Central.js @@ -0,0 +1,6 @@ +import injectSheet from 'react-jss' +import Central from '../containers/Central' +import classes from './Central-jss.ts' + + +export default injectSheet(classes)(Central) \ No newline at end of file