diff --git a/package-lock.json b/package-lock.json index 39acafb..03ffb0b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1161,6 +1161,19 @@ "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-10.1.0.tgz", "integrity": "sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg==" }, + "@emotion/is-prop-valid": { + "version": "0.7.3", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.7.3.tgz", + "integrity": "sha512-uxJqm/sqwXw3YPA5GXX365OBcJGFtxUVkB6WyezqFHlNe9jqUWH5ur2O2M8dGBz61kn1g3ZBlzUunFQXQIClhA==", + "requires": { + "@emotion/memoize": "0.7.1" + } + }, + "@emotion/memoize": { + "version": "0.7.1", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.1.tgz", + "integrity": "sha512-Qv4LTqO11jepd5Qmlp3M1YEjBumoTHcHFdgPTQ+sFlIL5myi/7xu/POwP7IRu6odBdmLXdtIs1D6TuW6kbwbbg==" + }, "@hapi/address": { "version": "2.1.4", "resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz", @@ -1700,6 +1713,16 @@ "@types/node": "*" } }, + "@types/hoist-non-react-statics": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz", + "integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==", + "dev": true, + "requires": { + "@types/react": "*", + "hoist-non-react-statics": "^3.3.0" + } + }, "@types/istanbul-lib-coverage": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.3.tgz", @@ -1777,6 +1800,18 @@ "@types/react": "*" } }, + "@types/react-redux": { + "version": "7.1.9", + "resolved": "https://registry.npmjs.org/@types/react-redux/-/react-redux-7.1.9.tgz", + "integrity": "sha512-mpC0jqxhP4mhmOl3P4ipRsgTgbNofMRXJb08Ms6gekViLj61v1hOZEKWDCyWsdONr6EjEA6ZHXC446wdywDe0w==", + "dev": true, + "requires": { + "@types/hoist-non-react-statics": "^3.3.0", + "@types/react": "*", + "hoist-non-react-statics": "^3.3.0", + "redux": "^4.0.0" + } + }, "@types/stack-utils": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-1.0.1.tgz", @@ -4113,6 +4148,16 @@ } } }, + "css-jss": { + "version": "10.4.0", + "resolved": "https://registry.npmjs.org/css-jss/-/css-jss-10.4.0.tgz", + "integrity": "sha512-WA/MgZyQm6KAubnFlBn8d6jwNjpzv0kdRCZ9Qb81ylb3/EYTz8qyjGvhIMODa/MuRBUaIMgzr2qjkb1B7WXEkw==", + "requires": { + "@babel/runtime": "^7.3.1", + "jss": "10.4.0", + "jss-preset-default": "10.4.0" + } + }, "css-loader": { "version": "3.4.2", "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-3.4.2.tgz", @@ -4179,6 +4224,15 @@ } } }, + "css-vendor": { + "version": "2.0.8", + "resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-2.0.8.tgz", + "integrity": "sha512-x9Aq0XTInxrkuFeHKbYC7zWY8ai7qJ04Kxd9MnvbC1uO5DagxoHQjm4JvG+vCdXOoFtCjbL2XSZfxmoYa9uQVQ==", + "requires": { + "@babel/runtime": "^7.8.3", + "is-in-browser": "^1.0.2" + } + }, "css-what": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/css-what/-/css-what-3.3.0.tgz", @@ -6535,6 +6589,14 @@ "minimalistic-crypto-utils": "^1.0.1" } }, + "hoist-non-react-statics": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", + "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==", + "requires": { + "react-is": "^16.7.0" + } + }, "hosted-git-info": { "version": "2.8.8", "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.8.tgz", @@ -6733,6 +6795,11 @@ "resolved": "https://registry.npmjs.org/https-browserify/-/https-browserify-1.0.0.tgz", "integrity": "sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM=" }, + "hyphenate-style-name": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz", + "integrity": "sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ==" + }, "iconv-lite": { "version": "0.4.24", "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz", @@ -7108,6 +7175,11 @@ "is-extglob": "^2.1.1" } }, + "is-in-browser": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/is-in-browser/-/is-in-browser-1.1.3.tgz", + "integrity": "sha1-Vv9NtoOgeMYILrldrX3GLh0E+DU=" + }, "is-negative-zero": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.0.tgz", @@ -7986,6 +8058,154 @@ "verror": "1.10.0" } }, + "jss": { + "version": "10.4.0", + "resolved": "https://registry.npmjs.org/jss/-/jss-10.4.0.tgz", + "integrity": "sha512-l7EwdwhsDishXzqTc3lbsbyZ83tlUl5L/Hb16pHCvZliA9lRDdNBZmHzeJHP0sxqD0t1mrMmMR8XroR12JBYzw==", + "requires": { + "@babel/runtime": "^7.3.1", + "csstype": "^3.0.2", + "is-in-browser": "^1.1.3", + "tiny-warning": "^1.0.2" + } + }, + "jss-plugin-camel-case": { + "version": "10.4.0", + "resolved": "https://registry.npmjs.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.4.0.tgz", + "integrity": "sha512-9oDjsQ/AgdBbMyRjc06Kl3P8lDCSEts2vYZiPZfGAxbGCegqE4RnMob3mDaBby5H9vL9gWmyyImhLRWqIkRUCw==", + "requires": { + "@babel/runtime": "^7.3.1", + "hyphenate-style-name": "^1.0.3", + "jss": "10.4.0" + } + }, + "jss-plugin-compose": { + "version": "10.4.0", + "resolved": "https://registry.npmjs.org/jss-plugin-compose/-/jss-plugin-compose-10.4.0.tgz", + "integrity": "sha512-m1MKZQDH/48W2NHqgsfhYBAObVHzDzSCULLLqrc8nZh1fYGvEBUND82oqd6Jh95pJbMhTzx3E9st63MivEuvAw==", + "requires": { + "@babel/runtime": "^7.3.1", + "jss": "10.4.0", + "tiny-warning": "^1.0.2" + } + }, + "jss-plugin-default-unit": { + "version": "10.4.0", + "resolved": "https://registry.npmjs.org/jss-plugin-default-unit/-/jss-plugin-default-unit-10.4.0.tgz", + "integrity": "sha512-BYJ+Y3RUYiMEgmlcYMLqwbA49DcSWsGgHpVmEEllTC8MK5iJ7++pT9TnKkKBnNZZxTV75ycyFCR5xeLSOzVm4A==", + "requires": { + "@babel/runtime": "^7.3.1", + "jss": "10.4.0" + } + }, + "jss-plugin-expand": { + "version": "10.4.0", + "resolved": "https://registry.npmjs.org/jss-plugin-expand/-/jss-plugin-expand-10.4.0.tgz", + "integrity": "sha512-UiZ6D4Ud2Chg3GIzRGjgs3DLiueN4r+g1TkEgc7L/0J/L9wsvuFKOtkahdHn177+YUK5/+N05mIE9xsgREB4+Q==", + "requires": { + "@babel/runtime": "^7.3.1", + "jss": "10.4.0" + } + }, + "jss-plugin-extend": { + "version": "10.4.0", + "resolved": "https://registry.npmjs.org/jss-plugin-extend/-/jss-plugin-extend-10.4.0.tgz", + "integrity": "sha512-TsgSmvWnpZWvXWpCDHl9Vj/n8wA/Awluutg/dnrfU7rwnM+BKkssHocGai8wQ5mtmIR+lYt+y7zAO+MOeigPiw==", + "requires": { + "@babel/runtime": "^7.3.1", + "jss": "10.4.0", + "tiny-warning": "^1.0.2" + } + }, + "jss-plugin-global": { + "version": "10.4.0", + "resolved": "https://registry.npmjs.org/jss-plugin-global/-/jss-plugin-global-10.4.0.tgz", + "integrity": "sha512-b8IHMJUmv29cidt3nI4bUI1+Mo5RZE37kqthaFpmxf5K7r2aAegGliAw4hXvA70ca6ckAoXMUl4SN/zxiRcRag==", + "requires": { + "@babel/runtime": "^7.3.1", + "jss": "10.4.0" + } + }, + "jss-plugin-nested": { + "version": "10.4.0", + "resolved": "https://registry.npmjs.org/jss-plugin-nested/-/jss-plugin-nested-10.4.0.tgz", + "integrity": "sha512-cKgpeHIxAP0ygeWh+drpLbrxFiak6zzJ2toVRi/NmHbpkNaLjTLgePmOz5+67ln3qzJiPdXXJB1tbOyYKAP4Pw==", + "requires": { + "@babel/runtime": "^7.3.1", + "jss": "10.4.0", + "tiny-warning": "^1.0.2" + } + }, + "jss-plugin-props-sort": { + "version": "10.4.0", + "resolved": "https://registry.npmjs.org/jss-plugin-props-sort/-/jss-plugin-props-sort-10.4.0.tgz", + "integrity": "sha512-j/t0R40/2fp+Nzt6GgHeUFnHVY2kPGF5drUVlgkcwYoHCgtBDOhTTsOfdaQFW6sHWfoQYgnGV4CXdjlPiRrzwA==", + "requires": { + "@babel/runtime": "^7.3.1", + "jss": "10.4.0" + } + }, + "jss-plugin-rule-value-function": { + "version": "10.4.0", + "resolved": "https://registry.npmjs.org/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.4.0.tgz", + "integrity": "sha512-w8504Cdfu66+0SJoLkr6GUQlEb8keHg8ymtJXdVHWh0YvFxDG2l/nS93SI5Gfx0fV29dO6yUugXnKzDFJxrdFQ==", + "requires": { + "@babel/runtime": "^7.3.1", + "jss": "10.4.0", + "tiny-warning": "^1.0.2" + } + }, + "jss-plugin-rule-value-observable": { + "version": "10.4.0", + "resolved": "https://registry.npmjs.org/jss-plugin-rule-value-observable/-/jss-plugin-rule-value-observable-10.4.0.tgz", + "integrity": "sha512-Utnsvopa2Gg9Z/9rJ5uH0Gl5QRWlnx9Hd+K/rnAc7UyxbIpvTAWMv5hsnuCUbmUSyb9RKJPHlohJNwG8rFownQ==", + "requires": { + "@babel/runtime": "^7.3.1", + "jss": "10.4.0", + "symbol-observable": "^1.2.0" + } + }, + "jss-plugin-template": { + "version": "10.4.0", + "resolved": "https://registry.npmjs.org/jss-plugin-template/-/jss-plugin-template-10.4.0.tgz", + "integrity": "sha512-bpRu56Dnas1+G/HvB0TdeC2907YujZ8F3pwLls7gNS6oJSYZD3iYbqsJuRVcAkhNINYVdcuW1SCo1aigCI7r/Q==", + "requires": { + "@babel/runtime": "^7.3.1", + "jss": "10.4.0", + "tiny-warning": "^1.0.2" + } + }, + "jss-plugin-vendor-prefixer": { + "version": "10.4.0", + "resolved": "https://registry.npmjs.org/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.4.0.tgz", + "integrity": "sha512-DpF+/a+GU8hMh/948sBGnKSNfKkoHg2p9aRFUmyoyxgKjOeH9n74Ht3Yt8lOgdZsuWNJbPrvaa3U4PXKwxVpTQ==", + "requires": { + "@babel/runtime": "^7.3.1", + "css-vendor": "^2.0.8", + "jss": "10.4.0" + } + }, + "jss-preset-default": { + "version": "10.4.0", + "resolved": "https://registry.npmjs.org/jss-preset-default/-/jss-preset-default-10.4.0.tgz", + "integrity": "sha512-WnmqDtQiK7bcw7yOxoW4iwf2ytVhgJfxqsb9R7V0gYOQi8TuApxs99nXgLVr3XN2HfVwk8hXlc9j50N5imozCQ==", + "requires": { + "@babel/runtime": "^7.3.1", + "jss": "10.4.0", + "jss-plugin-camel-case": "10.4.0", + "jss-plugin-compose": "10.4.0", + "jss-plugin-default-unit": "10.4.0", + "jss-plugin-expand": "10.4.0", + "jss-plugin-extend": "10.4.0", + "jss-plugin-global": "10.4.0", + "jss-plugin-nested": "10.4.0", + "jss-plugin-props-sort": "10.4.0", + "jss-plugin-rule-value-function": "10.4.0", + "jss-plugin-rule-value-observable": "10.4.0", + "jss-plugin-template": "10.4.0", + "jss-plugin-vendor-prefixer": "10.4.0" + } + }, "jsx-ast-utils": { "version": "2.4.1", "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-2.4.1.tgz", @@ -11113,6 +11333,11 @@ } } }, + "react-display-name": { + "version": "0.2.5", + "resolved": "https://registry.npmjs.org/react-display-name/-/react-display-name-0.2.5.tgz", + "integrity": "sha512-I+vcaK9t4+kypiSgaiVWAipqHRXYmZIuAiS8vzFvXHHXVigg/sMKwlRgLy6LH2i3rmP+0Vzfl5lFsFRwF1r3pg==" + }, "react-dom": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.13.1.tgz", @@ -11134,6 +11359,36 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, + "react-jss": { + "version": "10.4.0", + "resolved": "https://registry.npmjs.org/react-jss/-/react-jss-10.4.0.tgz", + "integrity": "sha512-q0P6GQrq0bm0ms/l6QpqNaPwPuJpYP5kcCXLSwcOQUnKACXh4NCcEsnqxD56TQmbAhE1p3RhtGD5xoBda1pjwQ==", + "requires": { + "@babel/runtime": "^7.3.1", + "@emotion/is-prop-valid": "^0.7.3", + "css-jss": "10.4.0", + "hoist-non-react-statics": "^3.2.0", + "is-in-browser": "^1.1.3", + "jss": "10.4.0", + "jss-preset-default": "10.4.0", + "prop-types": "^15.6.0", + "shallow-equal": "^1.2.0", + "theming": "^3.3.0", + "tiny-warning": "^1.0.2" + } + }, + "react-redux": { + "version": "7.2.1", + "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.1.tgz", + "integrity": "sha512-T+VfD/bvgGTUA74iW9d2i5THrDQWbweXP0AVNI8tNd1Rk5ch1rnMiJkDD67ejw7YBKM4+REvcvqRuWJb7BLuEg==", + "requires": { + "@babel/runtime": "^7.5.5", + "hoist-non-react-statics": "^3.3.0", + "loose-envify": "^1.4.0", + "prop-types": "^15.7.2", + "react-is": "^16.9.0" + } + }, "react-scripts": { "version": "3.4.3", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-3.4.3.tgz", @@ -11256,6 +11511,15 @@ "strip-indent": "^3.0.0" } }, + "redux": { + "version": "4.0.5", + "resolved": "https://registry.npmjs.org/redux/-/redux-4.0.5.tgz", + "integrity": "sha512-VSz1uMAH24DM6MF72vcojpYPtrTUu3ByVWfPL1nPfVRb5mZVTve5GnNCUV53QM/BZ66xfWrm0CTWoM+Xlz8V1w==", + "requires": { + "loose-envify": "^1.4.0", + "symbol-observable": "^1.2.0" + } + }, "regenerate": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.1.tgz", @@ -12014,6 +12278,11 @@ } } }, + "shallow-equal": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/shallow-equal/-/shallow-equal-1.2.1.tgz", + "integrity": "sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA==" + }, "shebang-command": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz", @@ -12794,6 +13063,11 @@ "util.promisify": "~1.0.0" } }, + "symbol-observable": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz", + "integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==" + }, "symbol-tree": { "version": "3.2.4", "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz", @@ -12982,6 +13256,17 @@ "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz", "integrity": "sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=" }, + "theming": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/theming/-/theming-3.3.0.tgz", + "integrity": "sha512-u6l4qTJRDaWZsqa8JugaNt7Xd8PPl9+gonZaIe28vAhqgHMIG/DOyFPqiKN/gQLQYj05tHv+YQdNILL4zoiAVA==", + "requires": { + "hoist-non-react-statics": "^3.3.0", + "prop-types": "^15.5.8", + "react-display-name": "^0.2.4", + "tiny-warning": "^1.0.2" + } + }, "throat": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/throat/-/throat-4.1.0.tgz", @@ -13043,6 +13328,11 @@ "resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz", "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=" }, + "tiny-warning": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz", + "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==" + }, "tmp": { "version": "0.0.33", "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz", diff --git a/package.json b/package.json index 1d70cbf..00057b1 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,10 @@ "@types/react-dom": "^16.9.8", "react": "^16.13.1", "react-dom": "^16.13.1", + "react-jss": "^10.4.0", + "react-redux": "^7.2.1", "react-scripts": "3.4.3", + "redux": "^4.0.5", "typescript": "^3.7.5" }, "scripts": { @@ -39,6 +42,7 @@ ] }, "devDependencies": { + "@types/react-redux": "^7.1.9", "node-sass": "^4.14.1" } } diff --git a/src/App.css b/src/App.css index 824c955..3afa5f6 100644 --- a/src/App.css +++ b/src/App.css @@ -1,129 +1,75 @@ /*############ HEADER #################*/ -/*Estilos propios*/ -.header1 { - white-space: nowrap; -} -.header2 { - width: 1.2em; -} -.mleft { - margin-right: 5px; -} -.header5 { - border-left: 1px solid rgb(187, 187, 187); - color: rgb(118, 118, 118); -} -/*Estilos viejos*/ -* { - font-family: verdana, arial, geneva, helvetica, sans-serif !important; -} -* { - padding: 0px; - margin: 0px; -} - -fieldset, -img { - border: none; -} - -body { - background: #ffffff; - font-size: 68.75% !important; - position: relative; - margin: 0px; - padding: 0px; - text-align: center; - height: 100%; - width: 100%; -} #contenedor { - text-align: left; - padding: 0em; width: 70%; - align-content: center; margin-left: 15%; + font-size: 68.75% !important; + font-family: verdana, arial, geneva, helvetica, sans-serif !important; } -#cabecera .central { - background-color: #ebebeb; -} -.central-traducciones { - background-color: #ebebeb; - text-align: right; +.cabecera { + margin-bottom: 1em; } -.central-borde { +.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; } - -.saltoContenido { - padding-left: 0.5em; - color: #5c6d8d; -} -.saltoContenido { - color: white; - font-size: 1.05em; +.alignR { + text-align: right; } - -.goog-te-gadget-simple { +.traductor { background-color: #fff; - border-left: 1px solid #d5d5d5; - border-top: 1px solid #9b9b9b; - border-bottom: 1px solid #e8e8e8; - border-right: 1px solid #d5d5d5; - font-size: 10pt; + border: 1px solid #d5d5d5; + font-size: 1.2em; display: inline-block; - padding-top: 1px; - padding-bottom: 2px; + padding: 2px; cursor: pointer; } +.img { + width: 1.2em; +} -/*############ CENTRAL #################*/ - -.separacion10em { - width: 100%; - height: 1em; - clear: both; +.triengle { + border-left: 1px solid rgb(187, 187, 187); + color: rgb(118, 118, 118); } -.separacion7em { - width: 100%; - height: 0.7em; - clear: both; +fieldset, +img { + border: none; } +/*############ CENTRAL #################*/ .separacion5em { width: 100%; height: 0.5em; clear: both; } -.separacion1em { - width: 100%; - height: 1px; - clear: both; -} - .buscIntCab { float: left; width: 100%; - padding: 0.8em 0 0.8em 0; - background-color: #7b91b0; + background-color: #305880; } .buscIntCabTexto { + padding: 1em; margin-top: 0.2em; float: left; margin-bottom: 0.2em; margin-left: 0.45em; width: 81%; - height: auto; margin: auto 0 auto 1em; letter-spacing: 0.1em; max-width: 430px; @@ -156,8 +102,7 @@ body { padding-left: 1em; margin-top: 1em; margin-left: 1em; - height: auto; - width: 98%; + width: 94%; border: solid 1px #eeeeee; } .cuadroBlanco98por div { @@ -210,20 +155,15 @@ input[type="text"] { height: auto; width: 35%; } -.buscIntCamposGral { - float: left; - width: 100%; - height: auto; - background-color: #ced7de; -} + .buscIntCamposBuscar { - padding: 0.5em 1em 0.2em 0; - width: 80%; - height: auto; - text-align: right; + 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; @@ -280,11 +220,12 @@ input[type="text"] { } .carousel { - margin-top: 2em; - margin-bottom: 20px; display: flex; flex-flow: row; justify-content: space-between; + margin-bottom: 20px; + padding-top: 4em; + background-color: white; } .carousel-inner { width: 100%; @@ -303,20 +244,8 @@ input[type="text"] { /*############ FOOTER #################*/ .pie { - height: 30px; - text-align: right; - margin: 0; - padding: 0; -} -.pie .central { background-color: #ebebeb; - height: 30px; - padding-top: 8px; - box-sizing: border-box; -} -.marginright10 { - margin-right: 10px; -} -.colorBlack { - color: black !important; + padding: 1em; + text-align: right; + color: black; } diff --git a/src/App.tsx b/src/App.tsx index 48d206f..df954ae 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,382 +1,28 @@ 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"; -import dot from "./assets/img/g.png"; -function App() { - return ( -
-
-
- - Salto a contenido - -
-
-
-
-
- - Seleccionar idioma - -
-
-
-
- -
-
-
-
-
-
-
-

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

-
-
- - Ayuda en ventana nueva - -
-
-
-
-
-
- Sevilla -
-
-
- Datos del interesado -
-
-
- - - - -
-
-
- - - - -
-
- - - - -
-
- - - - -
+import { Provider } from "react-redux"; +import { createStore, Reducer, Action } from "redux"; +import GlobalState, { initialState } from "./state/globalState"; -
-
-
- - - -
- -
-
-
- Datos del representante -
-
-
- - - - -
-
-
- - - - -
-
- - - - -
-
- - - - -
-
-
-
- - - -
- -
-
-
- Otros datos -
-
-
- - - - -
-
- - - - -
-
- - - - -
-
-
-
+import Header from "./styledComponents/Header"; +import Central from "./components/Central"; +import Footer from "./styledComponents/Footer"; -
-
-
- -
-
- -
-
- -
-
-
-
-
-
-
-
-
- - - - - -
-
- -
-
-
-
- Pago de multas. -
- -
-
- -
- -
-
+const reducer: Reducer = (state: GlobalState = initialState, action: Action) => { + return state; +}; +const store = createStore(reducer, initialState); - - - - - -
-
-
-
- -
-
-
- - Aviso legal - - | - - Accesibilidad - -
+function App() { + return ( + +
+
+ +
-
+ ); } diff --git a/src/components/Central.tsx b/src/components/Central.tsx new file mode 100644 index 0000000..5a7e4f7 --- /dev/null +++ b/src/components/Central.tsx @@ -0,0 +1,282 @@ +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() { + return ( +
+
+
+
+

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

+
+
+ + Ayuda en ventana nueva + +
+
+
+
+
+
+ Sevilla +
+
+
+ Datos del interesado +
+
+
+ + + + +
+
+ + + + +
+
+ + + + +
+
+ + + + +
+
+
+ + + +
+ +
+
+
+ Datos del representante +
+
+
+ + + + +
+
+ + + + +
+
+ + + + +
+
+ + + + +
+
+
+ + + +
+ +
+
+
+ Otros datos +
+
+
+ + + + +
+
+ + + + +
+
+ + + + +
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+ + + + + +
+
+ +
+
+
+
+ Pago de multas. +
+ +
+
+
+ +
+
+ +
+
+ + + + + + +
+
+ ); +} + +export default Central; diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx new file mode 100644 index 0000000..3cb590d --- /dev/null +++ b/src/components/Footer.tsx @@ -0,0 +1,17 @@ +import React from "react"; + +function Footer(props: any) { + return ( +
+ + Aviso legal + + | + + Accesibilidad + +
+ ); +} + +export default Footer; diff --git a/src/components/Header.tsx b/src/components/Header.tsx new file mode 100644 index 0000000..f9352ca --- /dev/null +++ b/src/components/Header.tsx @@ -0,0 +1,31 @@ +import React from "react"; +import "../App.css"; +import dot from "../assets/img/g.png"; + +function Header(props: any) { + return ( +
+
+ + {props.link1} + +
+
+
+
+
+ + Seleccionar idioma + ▼ +
+
+
+
+ ); +} + +export default Header; diff --git a/src/containers/Header.tsx b/src/containers/Header.tsx new file mode 100644 index 0000000..a9db7e2 --- /dev/null +++ b/src/containers/Header.tsx @@ -0,0 +1,7 @@ +import GlobalState from '../state/globalState'; +import { connect } from 'react-redux'; +import Header from '../components/Header'; + +const mapStateToProps = (state: GlobalState) => state; + +export default connect(mapStateToProps)(Header); \ No newline at end of file diff --git a/src/state/globalState.ts b/src/state/globalState.ts new file mode 100644 index 0000000..77ea962 --- /dev/null +++ b/src/state/globalState.ts @@ -0,0 +1,11 @@ +import { Action } from "redux"; + +interface GlobalState { + link1: string; +} + +export default GlobalState; + +export const initialState: GlobalState = { + link1: "Salto contenido", +}; diff --git a/src/styledComponents/Footer-jss.ts b/src/styledComponents/Footer-jss.ts new file mode 100644 index 0000000..a7d19e2 --- /dev/null +++ b/src/styledComponents/Footer-jss.ts @@ -0,0 +1,10 @@ +const classes = { + pie: { + backgroundColor: '#ebebeb', + padding: '1em', + textAlign: 'right', + color: 'black', + } +} + +export default classes; \ No newline at end of file diff --git a/src/styledComponents/Footer.js b/src/styledComponents/Footer.js new file mode 100644 index 0000000..1995359 --- /dev/null +++ b/src/styledComponents/Footer.js @@ -0,0 +1,5 @@ +import injectSheet from 'react-jss' +import Footer from '../components/Footer' +import classes from './Footer-jss.ts' + +export default injectSheet(classes)(Footer) \ No newline at end of file diff --git a/src/styledComponents/Header-jss.ts b/src/styledComponents/Header-jss.ts new file mode 100644 index 0000000..655fb34 --- /dev/null +++ b/src/styledComponents/Header-jss.ts @@ -0,0 +1,44 @@ +import cab from "../assets/img/cab2.jpg"; + +const classes = { + cabecera: { + marginBottom: "1em", + }, + superior: { + height: "15px", + background: "none !important", + backgroundColor: "#666666 !important", + }, + saltoContenido: { + color: "white", + fontSize: "1.05em", + }, + central: { + backgroundColor: "#ebebeb", + }, + cabLogo: { + background: "url(" + cab + ") top left no-repeat", + height: "10em", + }, + alignR: { + textAlign: "right", + }, + traductor: { + backgroundColor: "#fff", + border: "1px solid #d5d5d5", + fontSize: "1.2em", + display: "inline-block", + padding: "2px", + cursor: "pointer", + }, + img: { + width: "1.2em", + border: "none", + }, + triangle: { + borderLeft: "1px solid rgb(187, 187, 187)", + color: "rgb(118, 118, 118)", + }, +}; + +export default classes; diff --git a/src/styledComponents/Header.js b/src/styledComponents/Header.js new file mode 100644 index 0000000..929a177 --- /dev/null +++ b/src/styledComponents/Header.js @@ -0,0 +1,6 @@ +import injectSheet from 'react-jss' +import Header from '../containers/Header' +import classes from './Header-jss.ts' + + +export default injectSheet(classes)(Header) \ No newline at end of file