library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2025-01-09 15:44:25 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Improve snippet

Browse Source
This commit is contained in:
Jeremy Thomas 2017-10-09 15:38:12 +01:00
parent 3ac5137192
commit 31a2deb145
5 changed files with 2062 additions and 670 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
docs/_javascript/main.js
View File

@ -107,24 +107,12 @@ document.addEventListener('DOMContentLoaded', () => {
const expandEl = '<button class="button is-small bd-expand">Expand</button>';
$el.insertAdjacentHTML('beforeend', copyEl);
<<<<<<< HEAD
const $parent = $el.parentNode;
if ($parent && $parent.classList.contains('bd-is-more')) {
const showEl = '<button class="bd-show"><div><span class="icon"><i class="fa fa-code"></i></span> <strong>Show code</strong></div></button>';
$el.insertAdjacentHTML('beforeend', showEl);
} else if ($el.firstElementChild.scrollHeight > 480 && $el.firstElementChild.clientHeight <= 480) {
$el.insertAdjacentHTML('beforeend', expandEl);
=======
if ($el.firstElementChild.scrollHeight > 480 && $el.firstElementChild.clientHeight <= 480) {
$el.insertAdjacentHTML('beforeend', expandEl);
}
const $parent = $el.parentNode;
if ($parent && $parent.className == 'bd-highlight-clipped') {
const showEl = '<button class="bd-show"><div><span class="icon"><i class="fa fa-code"></i></span> <strong>Show code</strong></div></button>';
$el.classList.add('bd-is-clipped');
$el.insertAdjacentHTML('beforeend', showEl);
>>>>>>> Add show code
}
itemsProcessed++;
@ -159,7 +147,7 @@ document.addEventListener('DOMContentLoaded', () => {
$highlightShows.forEach($el => {
$el.addEventListener('click', () => {
$el.parentNode.classList.remove('bd-is-clipped');
$el.parentNode.parentNode.classList.remove('bd-is-more-clipped');
});
});
}

31
docs/_sass/example.sass
View File

@ -42,10 +42,6 @@
margin-top: -1.5rem
&:not(:last-child)
margin-bottom: 1.5rem
& + .bd-highlight-clipped
margin-top: -1.5rem
&:not(:last-child)
margin-bottom: 1.5rem
// Snippet
.bd-snippet
@ -214,33 +210,6 @@ $structure-invert: $danger-invert
pre
white-space: pre-wrap
.bd-highlight-clipped
.bd-show
+overlay
align-items: center
background-color: rgba(#000, 0.9)
background-image: linear-gradient(rgba(#000, 0), rgba(#000, 0) 90%, rgba(#000, 1))
border: none
color: $white
cursor: pointer
display: none
font-size: $size-6
justify-content: center
opacity: 0.7
width: 100%
strong
color: currentColor
font-weight: $weight-semibold
&:hover
opacity: 0.8
.highlight.bd-is-clipped
height: 4em
overflow: hidden
pre
overflow: hidden
.bd-show
display: flex
+tablet
.section:not(.is-fullwidth) > .bd-example:not(.is-fullwidth)
margin-left: 1.5rem

2649
docs/css/bulma-docs.css
View File

File diff suppressed because it is too large Load Diff

9
docs/css/bulma-docs.css.map
View File

File diff suppressed because one or more lines are too long

29
docs/lib/main.js
View File

@ -112,8 +112,11 @@ document.addEventListener('DOMContentLoaded', function () {
<<<<<<< HEAD
<<<<<<< HEAD
<<<<<<< HEAD
<<<<<<< HEAD
=======
>>>>>>> Add show code
=======
>>>>>>> Improve snippet
var $parent = $el.parentNode;
if ($parent && $parent.classList.contains('bd-is-more')) {
var showEl = '<button class="bd-show"><div><span class="icon"><i class="fa fa-code"></i></span> <strong>Show code</strong></div></button>';
@ -125,6 +128,7 @@ document.addEventListener('DOMContentLoaded', function () {
$el.insertAdjacentHTML('beforeend', expandEl);
}
<<<<<<< HEAD
<<<<<<< HEAD
=======
>>>>>>> Improve snippet
@ -139,13 +143,24 @@ document.addEventListener('DOMContentLoaded', function () {
$el.insertAdjacentHTML('beforeend', expandEl);
>>>>>>> Improve snippet
=======
=======
=======
>>>>>>> Improve snippet
>>>>>>> Improve snippet
var $parent = $el.parentNode;
if ($parent && $parent.className == 'bd-highlight-clipped') {
if ($parent && $parent.classList.contains('bd-is-more')) {
var showEl = '<button class="bd-show"><div><span class="icon"><i class="fa fa-code"></i></span> <strong>Show code</strong></div></button>';
$el.classList.add('bd-is-clipped');
$el.insertAdjacentHTML('beforeend', showEl);
<<<<<<< HEAD
>>>>>>> Add show code
<<<<<<< HEAD
>>>>>>> Add show code
=======
=======
} else if ($el.firstElementChild.scrollHeight > 480 && $el.firstElementChild.clientHeight <= 480) {
$el.insertAdjacentHTML('beforeend', expandEl);
>>>>>>> Improve snippet
>>>>>>> Improve snippet
}
itemsProcessed++;
@ -179,6 +194,9 @@ document.addEventListener('DOMContentLoaded', function () {
<<<<<<< HEAD
<<<<<<< HEAD
<<<<<<< HEAD
<<<<<<< HEAD
=======
>>>>>>> Improve snippet
var $highlightShows = getAll('.highlight .bd-show');
$highlightShows.forEach(function ($el) {
@ -192,14 +210,18 @@ document.addEventListener('DOMContentLoaded', function () {
$el.parentNode.classList.remove('bd-is-clipped');
>>>>>>> Add show code
=======
<<<<<<< HEAD
=======
>>>>>>> Add show code
=======
>>>>>>> Improve snippet
var $highlightShows = getAll('.highlight .bd-show');
$highlightShows.forEach(function ($el) {
$el.addEventListener('click', function () {
$el.parentNode.parentNode.classList.remove('bd-is-more-clipped');
<<<<<<< HEAD
<<<<<<< HEAD
>>>>>>> Improve snippet
=======
=======
@ -210,6 +232,9 @@ document.addEventListener('DOMContentLoaded', function () {
$el.parentNode.classList.remove('bd-is-clipped');
>>>>>>> Add show code
>>>>>>> Add show code
=======
>>>>>>> Improve snippet
>>>>>>> Improve snippet
});
});
}