diff options
author | Thomas <> | 2022-05-18 08:06:54 +0200 |
---|---|---|
committer | Thomas <> | 2022-05-18 08:06:54 +0200 |
commit | 07a2590e874288f002c725ac279d0bc0587b8beb (patch) | |
tree | fb1708d718b60cff0c224a567f648440a59d9f9b /basicConfig/templates/countrySelection.html | |
parent | ac8b7edeefc1850fdcab859ee6f544aa4f614471 (diff) | |
download | National_eIDAS_Gateway-07a2590e874288f002c725ac279d0bc0587b8beb.tar.gz National_eIDAS_Gateway-07a2590e874288f002c725ac279d0bc0587b8beb.tar.bz2 National_eIDAS_Gateway-07a2590e874288f002c725ac279d0bc0587b8beb.zip |
chore(ux): merge GUI elements that are updated on BM.I side
Diffstat (limited to 'basicConfig/templates/countrySelection.html')
-rw-r--r-- | basicConfig/templates/countrySelection.html | 179 |
1 files changed, 38 insertions, 141 deletions
diff --git a/basicConfig/templates/countrySelection.html b/basicConfig/templates/countrySelection.html index bfa30669..275d20f6 100644 --- a/basicConfig/templates/countrySelection.html +++ b/basicConfig/templates/countrySelection.html @@ -2,136 +2,20 @@ <html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorator="fragments/base" - th:with="lang=${#locale.language}" th:lang="${lang}"> + th:with="lang=${#locale.language}" th:lang="${lang}"> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <meta name="viewport" content="width=device-width, initial-scale=1"> - <link rel="stylesheet" href="../webcontent/css/css_country.css" th:href="@{/static/css/css_country.css}"/> +<!-- <link rel="stylesheet" href="$contextPath/css/css_country.css" th:href="@{/css/css_country.css}"/> --> + <link rel="stylesheet" href="/static/common.css"/> <title th:text="#{gui.countryselection.title}">eIDAS-Login Länderauswahl</title> -<script type="text/javascript"> -</script> <style> -body { - background-image: none; - margin: 0px; - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; -} - -div.header { - background-color: #e9ecef; - padding-top: 28px; - padding-left: 137px; - padding-right: 137px; - padding-bottom: 12px; -} -div.titlebar { - padding: 0px; -} -div.titlebar div { -} -.hidden { - display: none; -} -ul.nav_oben { - padding: 0px; - margin: 0px; - text-align: right; - text-transform: uppercase; -} -li { - display: inline-block; -} -div.header a { - text-decoration: none; - color: black; -} -a { - text-decoration: none; - color: #a22c1c; -} -.block { - /* override country.css */ - width: 200px; - padding-bottom: 20px; -} -@media only screen and (min-width: 1000px) { - div.header { - padding-left: 137px; - padding-right: 137px; - } - .content { - padding-left: 137px; - padding-right: 137px; - } - footer { - padding-left: 137px; - padding-right: 137px; - } -} -@media only screen and (max-width: 999px) { - div.header { - padding-left: 1em; - padding-right: 1em; - } - .content { - padding-left: 1em; - padding-right: 1em; - } - footer { - padding-left: 1em; - padding-right: 1em; - } -} - -div.subtitle h1 { - padding: 0px; - margin: 0px; - font-size: 130%; - align: right; -} -div.subtitle h2 { - padding: 0px; - margin: 0px; - font-size: 115%; -} -footer { - left: 0; - padding-top: 1em; - bottom: 0; - width: 100%; - height: 2em; - background-color: rgb(162,44,28); - color: white; -} -.float { - float: left; -} -.floatright { - float: right; -} -.copyright { - width: 66%; - font-size: 80%; -} -#countries { - padding-bottom: 40px; -} -#country { - padding-bottom: 20px; -} -input[type=submit] { - width: inherit; -/* text-align: left; */ -} -form { - justify-content: center; -} </style> <script type="text/javascript"> /* Element.closest polyfill - https://developer.mozilla.org/en-US/docs/Web/API/Element/closest License: public domain*/ if (!Element.prototype.matches) - Element.prototype.matches = Element.prototype.msMatchesSelector || + Element.prototype.matches = Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector; if (!Element.prototype.closest) @@ -141,7 +25,7 @@ if (!Element.prototype.closest) do { if (el.matches(s)) return el; el = el.parentElement || el.parentNode; - } while (el !== null && el.nodeType === 1); + } while (el !== null && el.nodeType === 1); return null; }; @@ -149,7 +33,7 @@ if (!Element.prototype.closest) function clickCountryFlag(element) { if (!element) return false; - var form = element.closest("form"); + var form = element.closest("form"); if (!form) return false; @@ -162,11 +46,11 @@ function clickCountryFlag(element) { <div class="header container"> <div class="titlebar"> <div> - <a href="https://www.bmi.gv.at/" target="_blank" title="Home"> - <img class="toplogo img-responsive" src="/static/BMI.png" alt="Logo BMI" - th:attr="alt=#{gui.countryselection.logo.bmi.alt}"> - <h1 class="hidden" th:text="#{gui.countryselection.header1}"> Bundesministerium für Inneres </h1> - </a> + <a href="https://www.bmi.gv.at/" target="_blank" title="Home"> + <img class="toplogo img-responsive" src="/static/BMI.png" alt="Logo BMI" + th:attr="alt=#{gui.countryselection.logo.bmi.alt}"> + <h1 class="hidden" th:text="#{gui.countryselection.header1}"> Bundesministerium für Inneres </h1> + </a> </div> <ul class="nav_oben"> <li> @@ -187,44 +71,57 @@ function clickCountryFlag(element) { <h1 th:text="#{gui.countryselection.header.selection}"> Wählen Sie Ihr Land / Select your country </h1> - <div id="country"> <!-- Active countries --> + + <div id="country" th:with="countries=${ {'be', 'dk', 'de', 'ee', 'el', 'it', 'hr', 'lt', 'lv', 'lu', 'nl', 'pt', 'sk', 'si', 'es', 'cz' }}"> + <form th:each="country : ${countries}" class="block" method="post" action="$contextPath$submitEndpoint" th:attr="action=@{${submitEndpoint}}"> + <a onclick='clickCountryFlag(this)'><img class="countryimage" + th:attr="src=@{#{gui.countryselection.country.__${country}__.img}},alt=#{gui.countryselection.country.__${country}__.logo.alt}"/></a> + + <input type="submit" class="country-button" role="button" value="?countryname?" th:attr="value=#{gui.countryselection.country.__${country}__}" /> + <input type="hidden" name="selectedCountry" th:value="${#strings.toUpperCase(country)}"> + <input type="hidden" name="pendingid" value="$pendingid" th:attr="value=${pendingid}" /> + </form> + </div> +<!--/* + <div id="country"> <form class="block" method="post" action="$contextPath$submitEndpoint" th:attr="action=@{${submitEndpoint}}"> <a><img class="countryimage" src="$contextPath/img/countries/germany-eu_.png" alt="Germany-eID" th:attr="src=@{/img/countries/germany-eu_.png},alt=#{gui.countryselection.country.de.logo.alt}"/></a> <input type="submit" role="button" value="Deutschland / Germany" th:attr="value=#{gui.countryselection.country.de}" /> - <input type="hidden" name="selectedCountry" value="XX"> + <input type="hidden" name="selectedCountry" value="DE"> <input type="hidden" name="pendingid" value="$pendingid" th:attr="value=${pendingid}" /> </form> - + </div> +*/--> <!-- Abbrechen Button --> - <form class="block" method="post" action="$contextPath$submitEndpoint" th:attr="action=@{${submitEndpoint}}"> - <input type="submit" class="btn btn-outline-primary btn-block" value="Abbrechen/Cancel" th:attr="value=#{gui.countryselection.cancel}"> + <form class="block" method="post" action="$contextPath$submitEndpoint" th:attr="action=@{${submitEndpoint}}"> + <input type="submit" class="btn btn-outline-primary btn-block cancel-button" value="Abbrechen/Cancel" th:attr="value=#{gui.countryselection.cancle}"> <input type="hidden" name="stopAuthProcess" value="true" > <input type="hidden" name="pendingid" value="$pendingid" th:attr="value=${pendingid}"> </form> - <p th:text="#{gui.countryselection.notsupportedinfo}" >Wenn Sie Ihr Land in dieser Aufzählung nicht entdecken ... </p> - + <p th:text="#{gui.countryselection.notsupportedinfo}" >Wenn Sie Ihr Land in dieser Aufzählung nicht entdecken ... </p> + <h2 th:text="#{gui.countryselection.infos.general.header}" > Information zur Anmeldung über Europäische eIDs </h2> <p> - <span th:text="#{gui.countryselection.infos.general.part.1}"> first part </span> - <a href="https://www.bmi.gv.at/" target="_blank" th:text="#{gui.countryselection.header1}" > Bundesministerium für Inneres </a> + <span th:text="#{gui.countryselection.infos.general.part.1}"> first part </span> + <a href="https://www.bmi.gv.at/" target="_blank" th:text="#{gui.countryselection.header1}" > Bundesministerium für Inneres </a> <span th:text="#{gui.countryselection.infos.general.part.2}"> second part </span> </p> - + <p> <span th:text="#{gui.countryselection.infos.general.part.3}"> third part </span> - <a href="https://eur-lex.europa.eu/legal-content/DE/TXT/HTML/?uri=CELEX:32014R0910&from=DE" target="_blank" th:text="#{gui.countryselection.infos.general.link.1}"> eIDAS-Verordnung der Europäischen Union </a> + <a href="https://eur-lex.europa.eu/legal-content/DE/TXT/HTML/?uri=CELEX:32014R0910&from=DE" target="_blank" th:text="#{gui.countryselection.infos.general.link.1}"> eIDAS-Verordnung der Europäischen Union </a> <span th:text="#{gui.countryselection.infos.general.part.4}"> fourth part </span> </p> -<p +<p> <span th:text="#{gui.countryselection.infos.general.part.5}"> fived part </span> - <a href="https://www.dsb.gv.at/-/das-erganzungsregister-fur-naturliche-personen-ernp-" target="_blank" th:text="#{gui.countryselection.infos.general.link.2}" ></a> - <span th:text="#{gui.countryselection.infos.general.part.6}"> sixed part </span> + <a href="http://ernp.bmi.gv.at/" target="_blank" th:text="#{gui.countryselection.infos.general.link.2}" ></a> + <span th:text="#{gui.countryselection.infos.general.part.6}"> sixed part </span> </p> </div> |