diff --git a/demo/chart.js b/demo/chart.js index e97b076ce..27004aa09 100644 --- a/demo/chart.js +++ b/demo/chart.js @@ -145,7 +145,9 @@ var billboardDemo = { type = type.replace("#", "").split("."); - this.generate(type[0], type[1]); + try { + this.generate(type[0], type[1]); + } catch(e) {} this.$title.innerHTML = type[1] .replace(/([A-Z][a-z])/g, " $1") @@ -162,8 +164,23 @@ var billboardDemo = { // add selected class $selected = this.$list.querySelector("[href='#"+ type.join(".") +"']"); $selected.className += this.selectedClass; - + window.scrollTo(0, 0); + + !this.isVisible($selected) && $selected.scrollIntoView({ + behavior: "auto", + block: "start" + }); + }, + + isVisible($el) { + const {clientWidth, clientHeight} = document.documentElement; + const {top, right, bottom, left} = $el.getBoundingClientRect(); + + return top <= clientHeight && + right >= 0 && + bottom >= 0 && + left <= clientWidth; }, /** @@ -229,10 +246,10 @@ var billboardDemo = { '// import bb, {'+ code.esm.join(", ") +'} from "billboard.js";\r\n'; if (hasPlugin) { - this.$code.innerHTML += '// import '+ pluginName +' from "billboard.js/dist/plugin/billboardjs-plugin-'+ pluginName +'";'; + this.$code.innerHTML += '// import '+ pluginName +' from "billboard.js/dist/plugin/billboardjs-plugin-'+ pluginName +'";\r\n'; } - this.$code.innerHTML += '\r\n\r\n'+ code.data; + this.$code.innerHTML += '\r\n'+ code.data; this.$code.scrollTop = 0; hljs.highlightBlock(this.$html); diff --git a/demo/index.html b/demo/index.html index f68f2c847..2e6e8dd25 100644 --- a/demo/index.html +++ b/demo/index.html @@ -115,49 +115,55 @@

billboard.js

Menu -

-

-
-

billboard.js examples

-

- Checkout total of examples, by clicking menu . -

- -

Supported chart types

- -
-
-

Sample code

-
-

- • Try it out by editing below code or click right sided buttons.
-   *for ESM imports usage example, checkout this link. -

-
- - -
- - +
+
+
+

+

+
+
+

billboard.js examples

+

+ Checkout total of examples, by clicking menu . +

+ +

Supported chart types

+ +
+
+
+

Sample code

+
+

+ • Try it out by editing below code or click right sided buttons.
+   *for ESM imports usage example, checkout this link. +

+
+ + +
+ + +
+
-
diff --git a/demo/simple-sidebar.css b/demo/simple-sidebar.css index 5f1c2c0aa..862637815 100644 --- a/demo/simple-sidebar.css +++ b/demo/simple-sidebar.css @@ -155,12 +155,14 @@ pre { .code .html { background-color: #eefbff; + max-height: 5; } .code .js { position: relative; font-family: Raleway; font-size: 11px; + height: 1; } .code .js .focus { diff --git a/demo/tomorrow.css b/demo/tomorrow.css index bf1fb1088..4e91bc93c 100644 --- a/demo/tomorrow.css +++ b/demo/tomorrow.css @@ -34,17 +34,55 @@ color: #8959a8; } +@media (min-width: 1200px) { + .example-grid { + display: grid; + grid-template-columns: 45% 55%; + grid-gap: 0 20px; + } + + .sub_tit { + margin-top: 0; + } + + .code .html { + max-height: 80px; + overflow: auto; + } + + .js code { + overflow-y: scroll; + margin: 0 auto; + height: calc(100vh - 200px); + } +} + +#title { + margin-top: 0; +} + +.sub_tit { + background-color: #0a82d3; + color: #fff; + padding: 5px; +} + pre code { display: block; background: white; color: #4d4d4c; font-family: Menlo, Monaco, Consolas, monospace; - font-size: 14px; + font-size: 13px; line-height: 1.3; border: 1px solid #ccc; padding: 10px; } +code.html { + font-size: 12px; +} + + .chart_area h4 { border-bottom:dotted 1px;padding:10px 0 5px } @@ -56,6 +94,7 @@ pre code { #description { font-size: 13px; color: gray; + display: inline-block; } .sparkline {