Merged PR 1368: Fix website TOC and related bugs
- Increase size of "small screen" to 640 so we can test it on a desktop using Chrome (desktop web browsers have a minimum width that is pretty big these days). - fix responsive intent of reference content and footer when "fixed" TOC is also auto-sizing itself. - Change scrollable TOC to "auto" so scrollbar is not always visible. - Make "scrollintoview" of selected TOC item jump to content on the phone sized screens where TOC is not a separate scrollable panel. - Fix auto-height setting of TOC so it does not do that on phone sized devices where TOC is not a "fixed" layout. - Fix height calculation of "fixed" layout TOC so it is not sensitive to page scroll position.
This commit is contained in:
Chris Lovett
Родитель
16c1762faa
Коммит
4552368f3c
|
|
@ -5,7 +5,7 @@ description: 'Coyote - for rapid development of reliable asynchronous software'
|
|||
|
||||
#Global content
|
||||
footer-join: 'Join our community'
|
||||
footer-join-descrip: 'Coyote welcomes new developers and contributors. We depend on you to ≈help make Coyote the framework of choice for highly reliable asynchronous software.'
|
||||
footer-join-descrip: 'Coyote welcomes new developers and contributors. We depend on you to help make Coyote the framework of choice for highly reliable asynchronous software.'
|
||||
footer-join-i: github
|
||||
footer-join-social:
|
||||
- p: <strong>Keep up to date with what's happening in Coyote. Help us build!</strong>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
{% endif %}
|
||||
>
|
||||
<section class="footer-join pt-40 pb-80">
|
||||
<div class="container">
|
||||
<div class="container-fluid">
|
||||
<div class="row text-center">
|
||||
<div class="col-sm-8 col-sm-offset-2">
|
||||
<h1>{{ site.data.global.footer-join }}</h1>
|
||||
|
|
@ -32,7 +32,7 @@
|
|||
<section class="footer-dark pt-60">
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="hidden-xs col-sm-5 col-md-6">
|
||||
<div class="hidden-xs col-sm-5 col-lg-6">
|
||||
<a href="{{ site.baseurl }}/" title="homepage" class="logo-footer">
|
||||
{% include logo-mark.svg %}
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -1,18 +1,18 @@
|
|||
//bootstrap defaults
|
||||
|
||||
|
||||
/* phones -- */
|
||||
/* phones -- */
|
||||
$breakpoint-xs: 320px;
|
||||
/* phones ++ */
|
||||
$breakpoint-sm: 480px;
|
||||
/* phones ++ */
|
||||
$breakpoint-sm: 640px;
|
||||
|
||||
/* tablets */
|
||||
/* tablets */
|
||||
$breakpoint-md: 768px;
|
||||
|
||||
/* desktop */
|
||||
/* desktop */
|
||||
$breakpoint-lg: 992px;
|
||||
|
||||
/* biggie */
|
||||
/* biggie */
|
||||
$breakpoint-xl: 1200px;
|
||||
|
||||
@mixin screen($size, $type: max, $pixels: $breakpoint-xs) {
|
||||
|
|
@ -40,7 +40,7 @@ $breakpoint-xl: 1200px;
|
|||
@media screen and ($type + -width: $breakpoint-xl) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
@else if $size == 'custom' {
|
||||
@media screen and ($type + -width: $pixels + px) {
|
||||
@content;
|
||||
|
|
|
|||
|
|
@ -282,10 +282,10 @@ p {
|
|||
|
||||
.navmenu-fixed-left a::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
left: -10px;
|
||||
width: 2px;
|
||||
//display: inline-block;
|
||||
margin-left: -7px;
|
||||
float: left;
|
||||
width: 4px;
|
||||
height: 14px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
|
@ -307,16 +307,18 @@ p {
|
|||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
li a:before {
|
||||
/*Using a Bootstrap glyphicon as the bullet point*/
|
||||
content: "\e080";
|
||||
font-family: 'Glyphicons Halflings';
|
||||
font-size: 9px;
|
||||
float: left;
|
||||
margin-left: -7px;
|
||||
color: #ccc;
|
||||
background: none;
|
||||
}
|
||||
// puts a little ">" icon next to the list item, problem is this implies expandability
|
||||
// but not all items are expandable, so this is confusing.
|
||||
// li a:before {
|
||||
// /*Using a Bootstrap glyphicon as the bullet point*/
|
||||
// content: "\e080";
|
||||
// font-family: 'Glyphicons Halflings';
|
||||
// font-size: 9px;
|
||||
// float: left;
|
||||
// margin-left: -10px;
|
||||
// color: #ccc;
|
||||
// background: none;
|
||||
// }
|
||||
|
||||
li a.active:before {
|
||||
color: $brand-color;
|
||||
|
|
@ -434,17 +436,27 @@ p {
|
|||
|
||||
//reference v1
|
||||
.navmenu-fixed-left-wrapper {
|
||||
background-color: $learn-gray;
|
||||
max-width: 300px;
|
||||
position: fixed;
|
||||
|
||||
@include screen(lg) {
|
||||
width: 27%;
|
||||
max-width: 300px;
|
||||
background-color: $learn-gray;
|
||||
|
||||
// Fixed position if we are not on small screen.
|
||||
@include screen(lg, min) {
|
||||
width: 300px;
|
||||
position: fixed;
|
||||
z-index: 300;
|
||||
}
|
||||
|
||||
@include screen(md) {
|
||||
@media (min-width: $breakpoint-sm) and (max-width: $breakpoint-lg) {
|
||||
width: 27%;
|
||||
position: fixed;
|
||||
z-index: 300;
|
||||
}
|
||||
|
||||
@include screen(sm, max) {
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.navmenu-fixed-left {
|
||||
|
|
@ -458,13 +470,23 @@ p {
|
|||
}
|
||||
|
||||
.reference-content {
|
||||
margin-left: 300px;
|
||||
@include screen(lg) {
|
||||
width: 73%;
|
||||
z-index: 0;
|
||||
|
||||
@include screen(lg, min) {
|
||||
width: 100%;
|
||||
margin-left: 300px;
|
||||
padding-left: 0px;
|
||||
}
|
||||
|
||||
@include screen(md) {
|
||||
@media (min-width: $breakpoint-sm) and (max-width: $breakpoint-lg) {
|
||||
width: 100%;
|
||||
margin-left: 27%;
|
||||
}
|
||||
|
||||
@include screen(sm) {
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
padding-top: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -479,22 +501,8 @@ p {
|
|||
padding-left: 34px;
|
||||
}
|
||||
|
||||
#results-container {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
||||
// reference v2
|
||||
|
||||
|
||||
// .reference footer {
|
||||
// height: 900px;
|
||||
// position: fixed;
|
||||
// bottom: 0;
|
||||
// width: 100%;
|
||||
// z-index: 0;
|
||||
// }
|
||||
|
||||
.container-reference {
|
||||
height: 100%;
|
||||
}
|
||||
|
|
@ -517,23 +525,26 @@ p {
|
|||
}
|
||||
|
||||
.nav-left-wrapper {
|
||||
overflow-y: scroll;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
// max-height: 90vh;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
// provide space at bottom of TOC so last entry is not slammed right at the bottom.
|
||||
.nav-left-wrapper:after {
|
||||
content: "";
|
||||
background: linear-gradient(0deg, rgba(234, 234, 234, 1) 0%, rgba(255, 255, 255, 0) 100%);
|
||||
height: 70px;
|
||||
width: 300px;
|
||||
width: 30px;
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
display: block;
|
||||
|
||||
@include screen(md) {
|
||||
height: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-left-wrapper .list-unstyled li {
|
||||
|
|
@ -601,9 +612,7 @@ p {
|
|||
|
||||
#results-container {
|
||||
padding: 0;
|
||||
}
|
||||
.reference-content {
|
||||
padding-left: 30px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// reference mobile styles
|
||||
|
|
@ -629,13 +638,6 @@ p {
|
|||
}
|
||||
}
|
||||
|
||||
.reference-content {
|
||||
@include screen(md) {
|
||||
width: 100%;
|
||||
padding-top: 30px;
|
||||
|
||||
}
|
||||
}
|
||||
.search-wrapper {
|
||||
@include screen(md) {
|
||||
position: relative;
|
||||
|
|
@ -644,21 +646,27 @@ p {
|
|||
}
|
||||
|
||||
.reference footer {
|
||||
@include screen(md) {
|
||||
position: relative;
|
||||
height: auto;
|
||||
z-index: 0;
|
||||
|
||||
@include screen(lg, min) {
|
||||
// width: 100%;
|
||||
margin-left: 300px;
|
||||
}
|
||||
|
||||
@media (min-width: $breakpoint-sm) and (max-width: $breakpoint-lg) { // 480px to 992px
|
||||
width: 73%;
|
||||
margin-left: 27%;
|
||||
}
|
||||
|
||||
@include screen(sm) {
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
/*
|
||||
end reference section
|
||||
*/
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
//footer navigation
|
||||
footer {
|
||||
h4 {
|
||||
|
|
@ -680,6 +688,10 @@ footer {
|
|||
background-color: $light-gray;
|
||||
color: $dark-gray;
|
||||
|
||||
.container-fluid {
|
||||
max-width: 992px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-weight: 300;
|
||||
}
|
||||
|
|
@ -710,10 +722,6 @@ footer {
|
|||
}
|
||||
}
|
||||
|
||||
.reference-footer {
|
||||
margin-left: 300px;
|
||||
}
|
||||
|
||||
.footer-dark {
|
||||
background-color: $bg-gray;
|
||||
color: $white;
|
||||
|
|
@ -1176,7 +1184,6 @@ article .btn:first-of-type {
|
|||
align-items: stretch;
|
||||
}
|
||||
|
||||
|
||||
.container-fluid-no-gutters,
|
||||
.no-gutters {
|
||||
padding-right: 0;
|
||||
|
|
@ -1187,7 +1194,6 @@ article .btn:first-of-type {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* End helpers
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -7,8 +7,8 @@ layout: null
|
|||
{
|
||||
"title" : "{{ post.title | escape }}",
|
||||
"url" : "{{ post.url | relative_url }}",
|
||||
"content" : {{ post.content | markdownify | truncate: '2000' | strip_html | strip_newlines | escape | jsonify }},
|
||||
"excerpt" : {{ post.content | markdownify | truncate: '150' | strip_html | strip_newlines | escape | jsonify }}
|
||||
"content" : {{ post.content | markdownify | strip_html | truncate: '2000' | strip_newlines | escape | jsonify }},
|
||||
"excerpt" : {{ post.content | markdownify | strip_html | truncate: '150' | strip_newlines | escape | jsonify }}
|
||||
} {% unless forloop.last %},{% endunless %}
|
||||
{% endfor %}
|
||||
,
|
||||
|
|
@ -17,8 +17,8 @@ layout: null
|
|||
{% if page.title != nil %}
|
||||
"title" : "{{ page.title | escape }}",
|
||||
"url" : "{{ page.url | relative_url }}",
|
||||
"content" : {{ post.content | markdownify | truncate: '8000' | strip_html | strip_newlines | escape | jsonify }},
|
||||
"excerpt" : {{ post.content | markdownify | truncate: '150' | strip_html | strip_newlines | escape | jsonify }}
|
||||
"content" : {{ post.content | markdownify | strip_html | truncate: '8000' | strip_newlines | escape | jsonify }},
|
||||
"excerpt" : {{ post.content | markdownify | strip_html | truncate: '150' | strip_newlines | escape | jsonify }}
|
||||
{% endif %}
|
||||
} {% unless forloop.last %},{% endunless %}
|
||||
{% endfor %}
|
||||
|
|
|
|||
|
|
@ -16,33 +16,57 @@ function expand_nav(item)
|
|||
$(id).addClass("in");
|
||||
}
|
||||
|
||||
// make sure selected item is visible in the TOC by scrolling it into view.
|
||||
item[0].scrollIntoView();
|
||||
// make sure selected item is visible in the TOC by scrolling it into view
|
||||
// unless the TOC is not scrollable (i.e. not "fixed") in which case we scroll
|
||||
// the main reference content into view instead
|
||||
var wrapper = $(".navmenu-fixed-left-wrapper");
|
||||
if (wrapper.length && wrapper.css("position") == "fixed")
|
||||
{
|
||||
item[0].scrollIntoView();
|
||||
}
|
||||
else
|
||||
{
|
||||
// on the phone this will jump us from selected TOC entry down to the
|
||||
// readable content on that topic.
|
||||
var content = $(".reference-content");
|
||||
if (content.length)
|
||||
{
|
||||
content[0].scrollIntoView();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function handle_resize()
|
||||
{
|
||||
height = window.innerHeight;
|
||||
wrapper = $(".nav-left-wrapper")
|
||||
if (wrapper.length) {
|
||||
var top = $(".nav-left-wrapper").offset().top
|
||||
$(".nav-left-wrapper").height(height - top)
|
||||
} else {
|
||||
$(".navmenu").height(height);
|
||||
var height = window.innerHeight;
|
||||
var width = window.innerWidth;
|
||||
var wrapper = $(".navmenu-fixed-left-wrapper");
|
||||
if (wrapper.length && width >= 640)
|
||||
{
|
||||
var wrapper = $(".nav-left-wrapper")
|
||||
if (wrapper.length) {
|
||||
var search_top = $(".search-wrapper").offset().top;
|
||||
var top = $(".nav-left-wrapper").offset().top;
|
||||
var search_height = 110 + top - search_top;
|
||||
var scroller_height = height - search_height
|
||||
$(".nav-left-wrapper").height(scroller_height)
|
||||
} else {
|
||||
$(".navmenu").height(height);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
jQuery(document).ready(function ($) {
|
||||
$(document).ready(function () {
|
||||
$(window).resize(function(){
|
||||
handle_resize();
|
||||
});
|
||||
handle_resize();
|
||||
|
||||
$(".navmenu").each(function() {
|
||||
permalink = $(this).attr("permalink");
|
||||
var permalink = $(this).attr("permalink");
|
||||
if (permalink.length){
|
||||
// ok we have one, so time to synchronize the expand/collapse state on the TOC.
|
||||
li = $("li").find("[permalink='" + permalink + "']");
|
||||
var li = $("li").find("[permalink='" + permalink + "']");
|
||||
expand_nav(li);
|
||||
}
|
||||
});
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче