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

Add v1 beta link

Browse Source
This commit is contained in:
Jeremy Thomas 2024-01-11 03:58:20 +00:00
parent f1d23c178d
commit 363f29b026
7 changed files with 316 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
docs/_includes/index/sponsors.html
View File

@ -2,34 +2,28 @@
<div class="bd-sponsors-body"> <div class="bd-sponsors-body">
<div class="bd-sponsors-content bd-index-content"> <div class="bd-sponsors-content bd-index-content">
<h1 class="title has-text-black"> <h1 class="title has-text-black">
<strong>Bulma</strong> is thankful to its <a class="has-text-sponsor" href="{{ site.data.meta.patreon_url }}" target="_blank">Patreon</a> and <a class="has-text-sponsor" href="{{ site.data.meta.sponsorship_url }}" target="_blank">GitHub sponsors</a> <strong>Bulma</strong> is thankful to its
<a class="has-text-sponsor" href="{{ site.data.meta.patreon_url }}" target="_blank">Patreon</a> and
<a class="has-text-sponsor" href="{{ site.data.meta.sponsorship_url }}" target="_blank">GitHub sponsors</a>
<span class="icon has-text-sponsor"> <span class="icon has-text-sponsor">
<i class="fas fa-thumbs-up"></i> <i class="fas fa-thumbs-up"></i>
</span> </span>
</h1> </h1>
<div class="content"> <div class="content">
<p> <p>Their support contributes to the continuous development of Bulma and other open source software.</p>
Their support contributes to the continuous development of Bulma and other open source software.
</p>
</div> </div>
<a class="button bd-fat-button is-sponsor" href="{{ site.url }}{{ site.data.links.by_id.['become-sponsor'].path }}"> <a
<span> class="button bd-fat-button is-sponsor"
Become a sponsor href="{{ site.url }}{{ site.data.links.by_id.['become-sponsor'].path }}"
</span> >
<span> Become a sponsor </span>
</a> </a>
</div> </div>
<div class="bd-sponsors-list"> <div class="bd-sponsors-list">
<div class="bd-partner-sponsors"> <div id="amis" class="bd-partner-sponsors"></div>
{% for sponsor_id in site.data.sponsors.home %}
{% include elements/sponsor-item.html
sponsor_id=sponsor_id
classname="bd-partner-sponsor"
%}
{% endfor %}
</div>
</div> </div>
</div> </div>

122
docs/_javascript/index.js
View File

@ -1,84 +1,128 @@
document.addEventListener('DOMContentLoaded', () => { document.addEventListener("DOMContentLoaded", () => {
// Intro // Intro
const introVideo = document.getElementById('introVideo'); const introVideo = document.getElementById("introVideo");
const introIframe = document.getElementById('introIframe'); const introIframe = document.getElementById("introIframe");
const npmClipboard = new Clipboard('#npmCopy'); const npmClipboard = new Clipboard("#npmCopy");
if (window.Vimeo) { if (window.Vimeo) {
const introPlayer = new Vimeo.Player(introIframe); const introPlayer = new Vimeo.Player(introIframe);
introPlayer.ready().then(function() { introPlayer.ready().then(function () {
introVideo.classList.add('has-loaded'); introVideo.classList.add("has-loaded");
}); });
} }
npmClipboard.on('success', function(e) { npmClipboard.on("success", function (e) {
e.trigger.innerText = 'copied!'; e.trigger.innerText = "copied!";
e.trigger.classList.add('is-success'); e.trigger.classList.add("is-success");
setTimeout(() => { setTimeout(() => {
e.trigger.innerText = 'copy'; e.trigger.innerText = "copy";
e.trigger.classList.remove('is-success'); e.trigger.classList.remove("is-success");
}, 500); }, 500);
e.clearSelection(); e.clearSelection();
}); });
npmClipboard.on('error', function(e) { npmClipboard.on("error", function (e) {
e.trigger.innerText = 'error!'; e.trigger.innerText = "error!";
e.trigger.classList.add('is-error'); e.trigger.classList.add("is-error");
setTimeout(() => { setTimeout(() => {
e.trigger.innerText = 'copy'; e.trigger.innerText = "copy";
e.trigger.classList.remove('is-error'); e.trigger.classList.remove("is-error");
}, 500); }, 500);
}); });
// Grid // Grid
const $grid = document.getElementById('grid'); const $grid = document.getElementById("grid");
const $columns = Array.prototype.slice.call(document.querySelectorAll('#grid > .column'), 0); const $columns = Array.prototype.slice.call(
const $markup = document.querySelector('#markup code'); document.querySelectorAll("#grid > .column"),
const $message = document.getElementById('message'); 0
const $add = document.getElementById('add'); );
const $remove = document.getElementById('remove'); const $markup = document.querySelector("#markup code");
const $message = document.getElementById("message");
const $add = document.getElementById("add");
const $remove = document.getElementById("remove");
let showing = 5; let showing = 5;
function showColumns() { function showColumns() {
if (showing === 13) { if (showing === 13) {
$message.style.display = 'block'; $message.style.display = "block";
} else { } else {
$message.style.display = 'none'; $message.style.display = "none";
} }
showing = Math.min(Math.max(parseInt(showing), 1), 12); showing = Math.min(Math.max(parseInt(showing), 1), 12);
$columns.forEach($el => { $columns.forEach(($el) => {
$el.style.display = 'none'; $el.style.display = "none";
}); });
$columns.slice(0, showing).forEach($el => { $columns.slice(0, showing).forEach(($el) => {
$el.style.display = 'block'; $el.style.display = "block";
}); });
$markup.innerHTML = '<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;columns&quot;</span><span class="nt">&gt;</span>'; $markup.innerHTML =
$markup.insertAdjacentHTML('beforeend', '\n'); '<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;columns&quot;</span><span class="nt">&gt;</span>';
$markup.insertAdjacentHTML("beforeend", "\n");
for(let i = 0; i < showing; i++) { for (let i = 0; i < showing; i++) {
$markup.insertAdjacentHTML('beforeend', ' <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;column&quot;</span><span class="nt">&gt;</span>'); $markup.insertAdjacentHTML(
$markup.insertAdjacentHTML('beforeend', i + 1); "beforeend",
$markup.insertAdjacentHTML('beforeend', '<span class="nt">&lt;/div&gt;</span>'); ' <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;column&quot;</span><span class="nt">&gt;</span>'
$markup.insertAdjacentHTML('beforeend', '\n'); );
$markup.insertAdjacentHTML("beforeend", i + 1);
$markup.insertAdjacentHTML(
"beforeend",
'<span class="nt">&lt;/div&gt;</span>'
);
$markup.insertAdjacentHTML("beforeend", "\n");
} }
$markup.insertAdjacentHTML('beforeend', '<span class="nt">&lt;/div&gt;</span>'); $markup.insertAdjacentHTML(
"beforeend",
'<span class="nt">&lt;/div&gt;</span>'
);
} }
$add.addEventListener('click', () => { $add.addEventListener("click", () => {
showing++; showing++;
showColumns(); showColumns();
}); });
$remove.addEventListener('click', () => { $remove.addEventListener("click", () => {
showing--; showing--;
showColumns(); showColumns();
}); });
// Amis
const $amis = document.getElementById("amis");
fetch("https://jgthms.com/amis.json")
.then((response) => {
if (!response.ok) {
throw new Error(`HTTP error! Status: ${response.status}`);
}
return response.json();
})
.then((response) => {
const { by_id, home } = response;
home.forEach((id) => {
const ami = by_id[id];
const { url, alt = "", width, height } = ami;
const el = document.createElement("a");
el.className = "bd-sponsor-item bd-partner-sponsor";
el.href = "url";
el.target = "_blank";
el.title = alt;
const extension = ami.svg ? ".svg" : ".png";
const img = document.createElement("img");
img.src = `/images/amis/${id}${extension}`;
img.height = height;
img.width = width;
el.appendChild(img);
$amis.appendChild(el);
});
});
}); });

57
docs/_sass/components/v1.scss
View File

@ -7,6 +7,7 @@
z-index: 100; z-index: 100;
} }
.v1-main,
.v1-banner, .v1-banner,
.v1-modal { .v1-modal {
background: conic-gradient( background: conic-gradient(
@ -93,4 +94,60 @@
.v1-banner { .v1-banner {
flex-wrap: nowrap; flex-wrap: nowrap;
} }
.v1-title {
font-size: 2em;
}
}
.v1-main {
padding: 1.5em;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
> div {
display: flex;
flex-direction: column;
gap: 2em;
justify-content: center;
align-items: center;
flex-grow: 1;
max-width: 24em;
width: 100%;
}
form {
background-color: #fff;
padding: 1.5em;
border-radius: 0.5em;
width: 100%;
}
.button {
background: radial-gradient(
219.67% 183.43% at 13.27% 123.96%,
#050637 0%,
#0033c6 16.24%,
#00368b 34.3%,
#5e07bf 53.58%,
#c428ac 71.9%,
#fe6567 86.15%,
#fd8644 100%
);
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1),
0px 2px 4px 0px rgba(0, 0, 0, 0.1), 0px 4px 8px 0px rgba(0, 0, 0, 0.1);
border: none;
font-weight: 500;
display: flex;
width: 100%;
}
}
.v1-tsp {
margin-top: 1em;
font-size: 0.75em;
opacity: 0.5;
} }

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

@ -16847,6 +16847,7 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
z-index: 100; z-index: 100;
} }
.v1-main,
.v1-banner, .v1-banner,
.v1-modal { .v1-modal {
background: conic-gradient(from 180deg at 50% 50%, #040435 0deg, #430677 60.0000017881deg, #b61bbd 97.5000035763deg, #fe5c65 149.9999964237deg, #ff896f 179.7256743908deg, #fc8433 209.5121526718deg, #fd8d4d 226.2606167793deg, #f45b10 244.5819711685deg, #ad267d 279.1821026802deg, #4b1acd 300.7368063927deg, #004e9c 319.7864770889deg, #003773 338.803768158deg, #040435 360deg); background: conic-gradient(from 180deg at 50% 50%, #040435 0deg, #430677 60.0000017881deg, #b61bbd 97.5000035763deg, #fe5c65 149.9999964237deg, #ff896f 179.7256743908deg, #fc8433 209.5121526718deg, #fd8d4d 226.2606167793deg, #f45b10 244.5819711685deg, #ad267d 279.1821026802deg, #4b1acd 300.7368063927deg, #004e9c 319.7864770889deg, #003773 338.803768158deg, #040435 360deg);
@ -16917,7 +16918,48 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
.v1-banner { .v1-banner {
flex-wrap: nowrap; flex-wrap: nowrap;
} }
.v1-title {
font-size: 2em;
}
} }
.v1-main {
padding: 1.5em;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.v1-main > div {
display: flex;
flex-direction: column;
gap: 2em;
justify-content: center;
align-items: center;
flex-grow: 1;
max-width: 24em;
width: 100%;
}
.v1-main form {
background-color: #fff;
padding: 1.5em;
border-radius: 0.5em;
width: 100%;
}
.v1-main .button {
background: radial-gradient(219.67% 183.43% at 13.27% 123.96%, #050637 0%, #0033c6 16.24%, #00368b 34.3%, #5e07bf 53.58%, #c428ac 71.9%, #fe6567 86.15%, #fd8644 100%);
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1), 0px 2px 4px 0px rgba(0, 0, 0, 0.1), 0px 4px 8px 0px rgba(0, 0, 0, 0.1);
border: none;
font-weight: 500;
display: flex;
width: 100%;
}
.v1-tsp {
margin-top: 1em;
font-size: 0.75em;
opacity: 0.5;
}
:root { :root {
--bd-index-vertical: 1.5rem; --bd-index-vertical: 1.5rem;
--bd-index-gap: 3rem; --bd-index-gap: 3rem;

2
docs/css/bulma-docs.min.css vendored
View File

File diff suppressed because one or more lines are too long

107
docs/lib/index.js
View File

@ -1,85 +1,122 @@
'use strict'; "use strict";
document.addEventListener('DOMContentLoaded', function () {
document.addEventListener("DOMContentLoaded", function () {
// Intro // Intro
var introVideo = document.getElementById('introVideo'); var introVideo = document.getElementById("introVideo");
var introIframe = document.getElementById('introIframe'); var introIframe = document.getElementById("introIframe");
var npmClipboard = new Clipboard('#npmCopy'); var npmClipboard = new Clipboard("#npmCopy");
if (window.Vimeo) { if (window.Vimeo) {
var introPlayer = new Vimeo.Player(introIframe); var introPlayer = new Vimeo.Player(introIframe);
introPlayer.ready().then(function () { introPlayer.ready().then(function () {
introVideo.classList.add('has-loaded'); introVideo.classList.add("has-loaded");
}); });
} }
npmClipboard.on('success', function (e) { npmClipboard.on("success", function (e) {
e.trigger.innerText = 'copied!'; e.trigger.innerText = "copied!";
e.trigger.classList.add('is-success'); e.trigger.classList.add("is-success");
setTimeout(function () { setTimeout(function () {
e.trigger.innerText = 'copy'; e.trigger.innerText = "copy";
e.trigger.classList.remove('is-success'); e.trigger.classList.remove("is-success");
}, 500); }, 500);
e.clearSelection(); e.clearSelection();
}); });
npmClipboard.on('error', function (e) { npmClipboard.on("error", function (e) {
e.trigger.innerText = 'error!'; e.trigger.innerText = "error!";
e.trigger.classList.add('is-error'); e.trigger.classList.add("is-error");
setTimeout(function () { setTimeout(function () {
e.trigger.innerText = 'copy'; e.trigger.innerText = "copy";
e.trigger.classList.remove('is-error'); e.trigger.classList.remove("is-error");
}, 500); }, 500);
}); });
// Grid // Grid
var $grid = document.getElementById('grid'); var $grid = document.getElementById("grid");
var $columns = Array.prototype.slice.call(document.querySelectorAll('#grid > .column'), 0); var $columns = Array.prototype.slice.call(document.querySelectorAll("#grid > .column"), 0);
var $markup = document.querySelector('#markup code'); var $markup = document.querySelector("#markup code");
var $message = document.getElementById('message'); var $message = document.getElementById("message");
var $add = document.getElementById('add'); var $add = document.getElementById("add");
var $remove = document.getElementById('remove'); var $remove = document.getElementById("remove");
var showing = 5; var showing = 5;
function showColumns() { function showColumns() {
if (showing === 13) { if (showing === 13) {
$message.style.display = 'block'; $message.style.display = "block";
} else { } else {
$message.style.display = 'none'; $message.style.display = "none";
} }
showing = Math.min(Math.max(parseInt(showing), 1), 12); showing = Math.min(Math.max(parseInt(showing), 1), 12);
$columns.forEach(function ($el) { $columns.forEach(function ($el) {
$el.style.display = 'none'; $el.style.display = "none";
}); });
$columns.slice(0, showing).forEach(function ($el) { $columns.slice(0, showing).forEach(function ($el) {
$el.style.display = 'block'; $el.style.display = "block";
}); });
$markup.innerHTML = '<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;columns&quot;</span><span class="nt">&gt;</span>'; $markup.innerHTML = '<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;columns&quot;</span><span class="nt">&gt;</span>';
$markup.insertAdjacentHTML('beforeend', '\n'); $markup.insertAdjacentHTML("beforeend", "\n");
for (var i = 0; i < showing; i++) { for (var i = 0; i < showing; i++) {
$markup.insertAdjacentHTML('beforeend', ' <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;column&quot;</span><span class="nt">&gt;</span>'); $markup.insertAdjacentHTML("beforeend", ' <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;column&quot;</span><span class="nt">&gt;</span>');
$markup.insertAdjacentHTML('beforeend', i + 1); $markup.insertAdjacentHTML("beforeend", i + 1);
$markup.insertAdjacentHTML('beforeend', '<span class="nt">&lt;/div&gt;</span>'); $markup.insertAdjacentHTML("beforeend", '<span class="nt">&lt;/div&gt;</span>');
$markup.insertAdjacentHTML('beforeend', '\n'); $markup.insertAdjacentHTML("beforeend", "\n");
} }
$markup.insertAdjacentHTML('beforeend', '<span class="nt">&lt;/div&gt;</span>'); $markup.insertAdjacentHTML("beforeend", '<span class="nt">&lt;/div&gt;</span>');
} }
$add.addEventListener('click', function () { $add.addEventListener("click", function () {
showing++; showing++;
showColumns(); showColumns();
}); });
$remove.addEventListener('click', function () { $remove.addEventListener("click", function () {
showing--; showing--;
showColumns(); showColumns();
}); });
// Amis
var $amis = document.getElementById("amis");
fetch("https://jgthms.com/amis.json").then(function (response) {
if (!response.ok) {
throw new Error("HTTP error! Status: " + response.status);
}
return response.json();
}).then(function (response) {
var by_id = response.by_id,
home = response.home;
home.forEach(function (id) {
var ami = by_id[id];
var url = ami.url,
_ami$alt = ami.alt,
alt = _ami$alt === undefined ? "" : _ami$alt,
width = ami.width,
height = ami.height;
var el = document.createElement("a");
el.className = "bd-sponsor-item bd-partner-sponsor";
el.href = "url";
el.target = "_blank";
el.title = alt;
var extension = ami.svg ? ".svg" : ".png";
var img = document.createElement("img");
img.src = "/images/amis/" + id + extension;
img.height = height;
img.width = width;
el.appendChild(img);
$amis.appendChild(el);
});
});
}); });

51
docs/v1-beta.html Normal file
View File

@ -0,0 +1,51 @@
---
title: v1 beta sign up
layout: playground
---
<div class="v1-main">
<div>
<h3 class="v1-title">
<span class="v1-emoji">🎉</span>
Bulma v1 is coming soon!
</h3>
<form action="https://mail.jgthms.com/subscribe" method="POST" accept-charset="utf-8">
<div class="content">
<p>Join the Beta to:</p>
<ul>
<li>gain access to the private v1 repository</li>
<li>be able to run the v1 locally</li>
<li>provide feedback about the new features</li>
<li>share suggestions about improvements</li>
</ul>
</div>
<div class="block">
<label class="label" for="name">Name</label>
<div class="form-control">
<input class="input" type="text" name="name" id="name">
</div>
</div>
<div class="block">
<label class="label" for="email">Email</label>
<div class="form-control">
<input class="input" type="email" name="email" id="email">
</div>
</div>
<div class="block" style="display: none;">
<label class="label" for="hp">HP</label>
<div class="form-control">
<input class="input" type="text" name="hp" id="hp">
</div>
</div>
<input type="hidden" name="list" value="cLsqDIbNTqfozYoXXXBLrw">
<input type="hidden" name="subform" value="yes">
<input class="button is-primary" type="submit" name="submit" id="submit">
<p class="v1-tsp">No spam. Just a few emails regarding gaining access and providing feedback.</p>
</form>
</div>
</div>