ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request #11438 from MoonE/apidoc-navigation-scroll

Browse Source 
Better scroll behaviour for apidocs
This commit is contained in:
Andreas Hocevar
2020-08-23 12:46:24 +02:00
committed by GitHub
parent 83055add03 d74da75561
commit 323fbca2e6
4 changed files with 54 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
config/jsdoc/api/template/static/scripts/main.js
View File

@@ -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;

53
config/jsdoc/api/template/static/styles/jaguar.css
View File

@@ -18,7 +18,7 @@
}
body {
padding-top: 55px;
padding-top: 54px;
}
.nameContainer .anchor {
padding-top: 70px;
@@ -61,24 +61,43 @@ 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;
}
@media (max-width:768px) {
.navigation-list {
padding: 0 15px 0 15px;
}
@supports (position: sticky) {
.navigation {
max-height:220px;
}
.navigation-list{
height:140px;
}
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 {
flex-flow: column;
}
.navigation {
height: inherit;
position: inherit;
}
.navigation-list {
overflow: auto;
max-height: 33vh;
height: inherit;
}
}
.navigation .applicationName {
@@ -107,10 +126,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 {

34
config/jsdoc/api/template/tmpl/navigation.tmpl
View File

@@ -51,20 +51,24 @@ function listContent(item, title, listItemPrinter) {
}
?>
<div class="navigation col-md-4 col-lg-3">
<div class="search">
<input id="search" type="text" autocomplete="off" class="form-control input-sm" placeholder="Search Documentation">
<div class="search-wrapper">
<div class="search">
<input id="search" type="text" autocomplete="off" class="form-control input-sm" placeholder="Search Documentation">
</div>
</div>
<div class="navigation-list-wrapper">
<ul class="navigation-list search-empty"><?js
this.nav.forEach(function (item) { ?>
<li class="item item-<?js= item.type ?>" data-longname="<?js= item.longname ?>" data-name="<?js= item.prettyname.toLowerCase() ?>">
<span class="title toggle">
<span class="fa <?js= getItemCssClass(item.type) ?> mr-2 mt-1"></span>
<span><?js= self.linkto(item.longname, item.prettyname.replace(/[.~\/]/g, '\u200b$&')) ?></span>
</span><?js
listContent(item, 'Members', printListItem);
listContent(item, 'Typedefs', printListItemWithStability);
listContent(item, 'Methods', printListItemWithStability);
listContent(item, 'Fires', printFiresListItem);
}); ?>
</ul>
</div>
<ul class="navigation-list search-empty"><?js
this.nav.forEach(function (item) { ?>
<li class="item item-<?js= item.type ?>" data-longname="<?js= item.longname ?>" data-name="<?js= item.prettyname.toLowerCase() ?>">
<span class="title toggle">
<span class="fa <?js= getItemCssClass(item.type) ?> mr-2 mt-1"></span>
<span><?js= self.linkto(item.longname, item.prettyname.replace(/[.~\/]/g, '\u200b$&')) ?></span>
</span><?js
listContent(item, 'Members', printListItem);
listContent(item, 'Typedefs', printListItemWithStability);
listContent(item, 'Methods', printListItemWithStability);
listContent(item, 'Fires', printFiresListItem);
}); ?>
</ul>
</div>

23
examples/index.html
View File

@@ -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;
}
</style>
<script type="text/javascript" src="Jugl.js"></script>
<script type="text/javascript" src="examples-info.js"></script>