library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2024-11-14 11:14:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add grid interactions

Browse Source
This commit is contained in:
Jeremy Thomas 2022-05-13 18:00:50 +02:00
parent d82b994387
commit 800fa207c5
3 changed files with 111 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
docs/_javascript/playground.js Normal file
View File

@ -0,0 +1,23 @@
document.addEventListener("DOMContentLoaded", () => {
const $grid = document.getElementById("grid");
const $columns = document.querySelectorAll(".jsColumns");
$columns.forEach(($) =>
$.addEventListener(
"input",
(event) => {
const count = event.target.valueAsNumber;
const suffix = event.target.dataset.suffix;
console.log("Column count", count);
$grid.className = `grid has-${count}-cols${suffix}`;
const $columnsCount = getAll("strong", $.parentNode);
$columnsCount.innerHTML = count;
},
false
)
);
function getAll(selector, parent = document) {
return Array.prototype.slice.call(parent.querySelectorAll(selector), 0);
}
});

87
docs/cyp/grid/grid.html
View File

@ -1,27 +1,70 @@
---
layout: cypress
title: Grid/Grid
breakpoints:
- name: mobile
visibility: mobile
count: 2
suffix: '-mobile'
- name: tablet
visibility: tablet-only
count: 4
suffix: '-tablet'
- name: desktop
visibility: desktop-only
count: 8
suffix: '-desktop'
- name: widescreen
visibility: widescreen-only
count: 12
suffix: '-widescreen'
- name: fullhd
visibility: fullhd
count: 16
suffix: '-fullhd'
---
<div class="grid">
<div class="cell">#1</div>
<div class="cell">#2</div>
<div class="cell">#3</div>
<div class="cell">#4</div>
<div class="cell">#5</div>
<div class="cell">#6</div>
<div class="cell">#7</div>
<div class="cell">#8</div>
<div class="cell">#9</div>
<div class="cell">#10</div>
<div class="cell">#11</div>
<div class="cell">#12</div>
<div class="cell">#13</div>
<div class="cell">#14</div>
<div class="cell">#15</div>
<div class="cell">#16</div>
<div class="cell">#17</div>
<div class="cell">#18</div>
<div class="cell">#19</div>
<div class="cell">#20</div>
</div>
<script src="{{ site.url }}/lib/playground.js"></script>
<section style="padding: 3rem;">
{% for breakpoint in page.breakpoints %}
<p style="display: none;" class="block is-block-{{ breakpoint.visibility }}">
Current breakpoint: <strong>{{ breakpoint.name }}</strong>
</p>
{% endfor %}
<div style="display: flex; flex-wrap: wrap;">
{% for breakpoint in page.breakpoints %}
<div style="margin: 0 1.5em 1.5em 0; position: relative; width: 180px;">
<p style="border: 2px solid hsl(153, 53%, 53%); border-radius: 1em; pointer-events: none; display: none; position: absolute; left: -1em; right: -1em; top: -1em; bottom: -1em;" class="has-background-success-light is-block-{{ breakpoint.visibility }}"></p>
<div style="position: relative;">
<p style="font-size: 0.75em"><strong>{{ breakpoint.count }}</strong> columns on {{ breakpoint.name }}</p>
<input id="columns" class="jsColumns" type="range" min="1" max="16" value="{{ breakpoint.count }}" data-suffix="{{ breakpoint.suffix }}">
</div>
</div>
{% endfor %}
</div>
<div id="grid" class="grid">
<div class="cell">#1</div>
<div class="cell">#2</div>
<div class="cell">#3</div>
<div class="cell">#4</div>
<div class="cell">#5</div>
<div class="cell">#6</div>
<div class="cell">#7</div>
<div class="cell">#8</div>
<div class="cell">#9</div>
<div class="cell">#10</div>
<div class="cell">#11</div>
<div class="cell">#12</div>
<div class="cell">#13</div>
<div class="cell">#14</div>
<div class="cell">#15</div>
<div class="cell">#16</div>
<div class="cell">#17</div>
<div class="cell">#18</div>
<div class="cell">#19</div>
<div class="cell">#20</div>
</div>
</section>

23
docs/lib/playground.js Normal file
View File

@ -0,0 +1,23 @@
"use strict";
document.addEventListener("DOMContentLoaded", function () {
var $grid = document.getElementById("grid");
var $columns = document.querySelectorAll(".jsColumns");
$columns.forEach(function ($) {
return $.addEventListener("input", function (event) {
var count = event.target.valueAsNumber;
var suffix = event.target.dataset.suffix;
console.log("Column count", count);
$grid.className = "grid has-" + count + "-cols" + suffix;
var $columnsCount = getAll("strong", $.parentNode);
$columnsCount.innerHTML = count;
}, false);
});
function getAll(selector) {
var parent = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : document;
return Array.prototype.slice.call(parent.querySelectorAll(selector), 0);
}
});