From 71428219389d5fe429c0bad0bd31b2cda55cdfce Mon Sep 17 00:00:00 2001 From: Błażej Kardyś Date: Mon, 20 Jan 2020 17:13:28 +0100 Subject: Adding changes to HTML UI render --- .../src/main/resources/dokka/images/arrow_down.svg | 3 ++ core/src/main/resources/dokka/images/logo-icon.svg | 3 ++ core/src/main/resources/dokka/images/logo-text.svg | 6 +++ core/src/main/resources/dokka/scripts/scripts.js | 11 ++++ core/src/main/resources/dokka/scripts/search.js | 5 ++ core/src/main/resources/dokka/styles/style.css | 63 +++++++++++++++++++++- 6 files changed, 89 insertions(+), 2 deletions(-) create mode 100755 core/src/main/resources/dokka/images/arrow_down.svg create mode 100755 core/src/main/resources/dokka/images/logo-icon.svg create mode 100755 core/src/main/resources/dokka/images/logo-text.svg create mode 100644 core/src/main/resources/dokka/scripts/scripts.js create mode 100644 core/src/main/resources/dokka/scripts/search.js (limited to 'core/src/main/resources') diff --git a/core/src/main/resources/dokka/images/arrow_down.svg b/core/src/main/resources/dokka/images/arrow_down.svg new file mode 100755 index 00000000..89e7df47 --- /dev/null +++ b/core/src/main/resources/dokka/images/arrow_down.svg @@ -0,0 +1,3 @@ + + + diff --git a/core/src/main/resources/dokka/images/logo-icon.svg b/core/src/main/resources/dokka/images/logo-icon.svg new file mode 100755 index 00000000..1b3b3670 --- /dev/null +++ b/core/src/main/resources/dokka/images/logo-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/core/src/main/resources/dokka/images/logo-text.svg b/core/src/main/resources/dokka/images/logo-text.svg new file mode 100755 index 00000000..7bf3e6c5 --- /dev/null +++ b/core/src/main/resources/dokka/images/logo-text.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/core/src/main/resources/dokka/scripts/scripts.js b/core/src/main/resources/dokka/scripts/scripts.js new file mode 100644 index 00000000..c2e29b9f --- /dev/null +++ b/core/src/main/resources/dokka/scripts/scripts.js @@ -0,0 +1,11 @@ +document.getElementById("navigationFilter").oninput = function (e) { + var input = e.target.value; + var menuParts = document.getElementsByClassName("sideMenuPart") + for (let part of menuParts) { + if(part.querySelector("a").textContent.startsWith(input)) { + part.classList.remove("filtered"); + } else { + part.classList.add("filtered"); + } + } +} \ No newline at end of file diff --git a/core/src/main/resources/dokka/scripts/search.js b/core/src/main/resources/dokka/scripts/search.js new file mode 100644 index 00000000..63112ac5 --- /dev/null +++ b/core/src/main/resources/dokka/scripts/search.js @@ -0,0 +1,5 @@ +var query = new URLSearchParams(window.location.search).get("query"); + document.getElementById("searchTitle").innerHTML += '"' + query + '":'; + document.getElementById("searchTable").innerHTML = pages.filter(el => el.name.startsWith(query)).reduce((acc, element) => { return acc + + '' + element.name + '' + }, ""); \ No newline at end of file diff --git a/core/src/main/resources/dokka/styles/style.css b/core/src/main/resources/dokka/styles/style.css index 60ea133f..035b4fcd 100644 --- a/core/src/main/resources/dokka/styles/style.css +++ b/core/src/main/resources/dokka/styles/style.css @@ -1,9 +1,68 @@ @import url(https://fonts.googleapis.com/css?family=Open+Sans:300i,400,700); + +#content { + margin-top: 3em; + margin-left: 15em; +} + +#navigation { + position: relative +} + +#sideMenu, #searchBar { + position: absolute; +} + +#sideMenu { + width: 14em; + padding-left: 0.5em; +} + +#sideMenu .sideMenuPart { + margin-left: 0.25em; +} + +#sideMenu img { + margin: 1em 0.25em; +} + +#sideMenu hr { + background: #DADFE6; +} + +#searchBar { + width: 100%; +} + +#searchForm { + float: right; +} + +.sideMenuPart > .navButton { + margin-left:0.25em +} + +.sideMenuPart > .overview .navButtonContent::after { + float: right; + content: url("../images/arrow_down.svg"); +} + +.sideMenuPart.hidden > .navButton .navButtonContent::after { + content: '\02192'; +} + +.sideMenuPart.hidden > .sideMenuPart { + display: none; +} + +.filtered > a, .filtered > .navButton { + display: none; +} + body, table{ - padding:50px; font:14px/1.5 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif; - color:#555; + background: #F4F4F4; font-weight:300; margin-left: auto; margin-right: auto; -- cgit