From d9bc466f43a4ae859cd4ad0a481dc107e627b573 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maximilian=20Kr=C3=B6g?= Date: Sun, 23 Aug 2020 11:18:19 +0200 Subject: [PATCH 1/2] Better scroll behaviour for apidocs --- .../jsdoc/api/template/static/scripts/main.js | 23 ---------- .../api/template/static/styles/jaguar.css | 46 +++++++++++-------- .../jsdoc/api/template/tmpl/navigation.tmpl | 34 ++++++++------ examples/index.html | 23 ---------- 4 files changed, 47 insertions(+), 79 deletions(-) diff --git a/config/jsdoc/api/template/static/scripts/main.js b/config/jsdoc/api/template/static/scripts/main.js index f93b44a33f..5d682626db 100644 --- a/config/jsdoc/api/template/static/scripts/main.js +++ b/config/jsdoc/api/template/static/scripts/main.js @@ -237,29 +237,6 @@ $(function () { search.manualToggle(clsItem, show); }); -// Auto resizing on navigation - var _onResize = function () { - var height_w = $(window).height(); - var height_s = $('section').height(); - var $el = $('.navigation'); - var dif_h = height_w - height_s; - if (window.matchMedia("(min-width: 768px)").matches) { - if (dif_h >=0){ - $('.navigation').height(height_s+dif_h+74); - $('.navigation-list').height(height_s+dif_h) - } - else { - $('.navigation').height(height_s+74); - $('.navigation-list').height(height_s-60); - } - } - else{ - $('.navigation').height(220); - $('.navigation-list').height(140); - } - } - $(window).on('resize', _onResize); - _onResize(); var currentVersion = document.getElementById('package-version').innerHTML; diff --git a/config/jsdoc/api/template/static/styles/jaguar.css b/config/jsdoc/api/template/static/styles/jaguar.css index b25bbce331..52d0523f87 100644 --- a/config/jsdoc/api/template/static/styles/jaguar.css +++ b/config/jsdoc/api/template/static/styles/jaguar.css @@ -18,7 +18,7 @@ } body { - padding-top: 55px; + padding-top: 54px; } .nameContainer .anchor { padding-top: 70px; @@ -61,24 +61,36 @@ ol { li { list-style-type: none; } -::-webkit-scrollbar { - width: 8px; - background-color: transparent; -} -::-webkit-scrollbar-thumb { - background-color: transparent; - border-radius: 4px; +#wrap { + display: flex; + flex-flow: row; } .navigation { background-color: #2a2a2a; + position: sticky; + top: 54px; + height: calc(100vh - 54px); } -@media (max-width:768px) { +.navigation-list { + overflow: auto; + padding: 0 15px 0 15px; + /* 54px navbar height */ + /* 4.25rem + 2px searchbox height */ + /* 25px navigation padding */ + height: calc(100vh - 54px - 4.25rem - 2px - 25px); +} +@media (max-width: 768px) { + #wrap { + flex-flow: column; + } .navigation { - max-height:220px; - } - .navigation-list{ - height:140px; - } + height: inherit; + position: inherit; + } + .navigation-list { + max-height: 33vh; + height: inherit; + } } .navigation .applicationName { @@ -107,10 +119,8 @@ li { color: #fff; border-color: #555; } -.navigation .navigation-list { - padding: 10px 15px 0 15px; - position: relative; - overflow: auto; +.navigation .navigation-list-wrapper { + padding: 10px 0 15px 0; width: 100%; } .navigation li.item { diff --git a/config/jsdoc/api/template/tmpl/navigation.tmpl b/config/jsdoc/api/template/tmpl/navigation.tmpl index 50709af9cc..03b03cca63 100644 --- a/config/jsdoc/api/template/tmpl/navigation.tmpl +++ b/config/jsdoc/api/template/tmpl/navigation.tmpl @@ -51,20 +51,24 @@ function listContent(item, title, listItemPrinter) { } ?>
-
- +
+
+ +
+
+
+
    +
  • + + + + +
-
    -
  • - - - - -
diff --git a/examples/index.html b/examples/index.html index c2359c350e..be31b4b36f 100644 --- a/examples/index.html +++ b/examples/index.html @@ -28,29 +28,6 @@ .example:hover { background-color: #F5F5F5; } - - ::-webkit-scrollbar { - width: 8px; - } - - ::-webkit-scrollbar-button { - width: 0; - height: 0; - display: none; - } - - ::-webkit-scrollbar-thumb { - background-color: rgba(0, 0, 0, 0.2); - -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.10),inset 0 -1px 0 rgba(0, 0, 0, 0.07); - } - - ::-webkit-scrollbar-thumb:hover { - background-color: rgba(0, 0, 0, 0.4); - } - - ::-webkit-scrollbar-corner { - background-color: transparent; - } From d74da7556159425cbc61b9280db39faa7053101c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maximilian=20Kr=C3=B6g?= Date: Sun, 23 Aug 2020 12:21:47 +0200 Subject: [PATCH 2/2] Graceful fallback for internet explorer 11 --- .../api/template/static/styles/jaguar.css | 23 ++++++++++++------- 1 file changed, 15 insertions(+), 8 deletions(-) diff --git a/config/jsdoc/api/template/static/styles/jaguar.css b/config/jsdoc/api/template/static/styles/jaguar.css index 52d0523f87..13494f2af0 100644 --- a/config/jsdoc/api/template/static/styles/jaguar.css +++ b/config/jsdoc/api/template/static/styles/jaguar.css @@ -67,17 +67,23 @@ li { } .navigation { background-color: #2a2a2a; - position: sticky; - top: 54px; - height: calc(100vh - 54px); } .navigation-list { - overflow: auto; padding: 0 15px 0 15px; - /* 54px navbar height */ - /* 4.25rem + 2px searchbox height */ - /* 25px navigation padding */ - height: calc(100vh - 54px - 4.25rem - 2px - 25px); +} +@supports (position: sticky) { + .navigation { + position: sticky; + top: 54px; + height: calc(100vh - 54px); + } + .navigation-list { + overflow: auto; + /* 54px navbar height */ + /* 4.25rem + 2px searchbox height */ + /* 25px navigation padding */ + height: calc(100vh - 54px - 4.25rem - 2px - 25px); + } } @media (max-width: 768px) { #wrap { @@ -88,6 +94,7 @@ li { position: inherit; } .navigation-list { + overflow: auto; max-height: 33vh; height: inherit; }