diff --git a/matrix_synapse_saml_mozilla/res/index.html b/matrix_synapse_saml_mozilla/res/index.html index c6463a8..9e75475 100644 --- a/matrix_synapse_saml_mozilla/res/index.html +++ b/matrix_synapse_saml_mozilla/res/index.html @@ -6,15 +6,28 @@
-
- - - -
- - +
+
+ + +
+
+
+
+
+ + + +
+
+
+ FOO +
+ + +
diff --git a/matrix_synapse_saml_mozilla/res/script.js b/matrix_synapse_saml_mozilla/res/script.js index 669def8..d4f4bfb 100644 --- a/matrix_synapse_saml_mozilla/res/script.js +++ b/matrix_synapse_saml_mozilla/res/script.js @@ -2,6 +2,8 @@ let inputField = document.getElementById("field-username"); let inputForm = document.getElementById("form"); let submitButton = document.getElementById("button-submit"); let message = document.getElementById("message"); +let tabLinkButtons = document.getElementsByClassName("tablinks"); +let tabContentBlocks = document.getElementsByClassName("tabcontent"); // Remove input field placeholder if the text field is not empty let switchClass = function(input) { @@ -114,3 +116,17 @@ inputField.addEventListener('change', function() { switchClass(inputField); }); +for (let i = 0; i < tabLinkButtons.length; i++) { + tabLinkButtons[i].addEventListener('click', function(event) { + for (let i = 0; i < tabContentBlocks.length; i++) { + tabContentBlocks[i].classList.remove("active"); + } + + for (let i = 0; i < tabLinkButtons.length; i++) { + tabLinkButtons[i].classList.remove("active"); + } + + document.getElementById(event.target.dataset.tabid).classList.add('active') + event.target.classList.add("active") + }) +} \ No newline at end of file diff --git a/matrix_synapse_saml_mozilla/res/style.css b/matrix_synapse_saml_mozilla/res/style.css index 472ee91..233df39 100644 --- a/matrix_synapse_saml_mozilla/res/style.css +++ b/matrix_synapse_saml_mozilla/res/style.css @@ -1,3 +1,35 @@ +.tab { + overflow: hidden; + background-color: #ededf0; +} + +.tab button { + background-color: inherit; + float: left; + border: none; + outline: none; + cursor: pointer; + padding: 15px; + transition: 0.1s; + width: 50%; +} + +.tab button:hover { + background-color: #ddd; +} + +.tab button.active { + background-color: #0060df; + color: #ffffff; +} + +.tabcontent { + display: none; +} +.tabcontent.active { + display: block; +} + body { background: #ededf0; color: #737373; @@ -10,15 +42,20 @@ body { .card { background-color: #fff; - padding: 2em; position: relative; margin: auto; width: 100%; box-shadow: 0 0.25em 0.25em 0 rgba(210, 210, 210, 0.5); - border-radius: 0.125em; } + border-radius: 0.125em; +} +.card-body { + padding: 2em; +} @media (min-width: 25em) { .card { max-width: 26em; + } + .card-body { padding: 2.5em; } } @supports (display: grid) { .card {