Fork/gitea-custom
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI: Upgrade nav-global to latest web-assets v2 component v2.0.0-beta

Browse Source 
Part of #9
This commit is contained in:
Márton Lente
2024-11-29 14:30:01 +01:00
parent 345c549da2
commit 393f30f9ac
1 changed files with 122 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

176
templates/custom/body_inner_pre.tmpl
View File

@@ -1,6 +1,5 @@
<style>
/* This style block is copied across all sites using the developer navbar.
* For custom styling on this website, add a <style> block after this one. */
/* TODO: @web-assets build and prepend version number to templates */
/* Variables. */
.nav-global {
@@ -32,8 +31,8 @@
--bwa-transition-speed: 150ms;
--bwa-zindex-fixed: 1030;
--bwa-zindex-dropdown: 1040;
--bwa-zindex-fixed: 1030;
/* Grid. */
--bwa-spacer: 16px;
@@ -43,6 +42,9 @@
/* Type. */
--bwa-fs-base: 14px;
/* Components. */
--bwa-navbar-zindex: calc(var(--bwa-zindex-fixed) + 1);
}
/* Reset. */
@@ -73,7 +75,7 @@
color: var(--bwa-color-text);
display: flex;
position: relative;
z-index: var(--zindex-fixed);
z-index: var(--bwa-navbar-zindex);
}
.nav-global h3,
@@ -220,6 +222,10 @@
}
/* Apps button. */
.nav-global {
--bwa-nav-global-btn-height: calc(var(--bwa-spacer) * 2.25);
}
.nav-global button,
.nav-global .nav-global-btn {
-webkit-appearance: button;
@@ -232,7 +238,7 @@
cursor: pointer;
display: inline-flex;
font: inherit;
height: calc(var(--bwa-spacer) * 2.25);
height: var(--bwa-nav-global-btn-height);
margin: 0;
outline: 0;
overflow: visible;
@@ -242,6 +248,20 @@
white-space: nowrap;
}
/* Button overrides. */
/*
*Button overrides for Web Assets button components for BWA projects.
*/
.nav-global button,
.nav-global .btn {
height: var(--bwa-nav-global-btn-height);
line-height: 1;
}
.nav-global .btn-accent {
color: white !important;
}
.nav-global .nav-global-btn.nav-global-btn-primary {
padding-left: var(--bwa-spacer);
padding-right: var(--bwa-spacer);
@@ -498,6 +518,24 @@
text-decoration: none;
}
}
.nav-global .nav-global-nav-links li a.nav-global-link-active {
font-variation-settings: 'wght' 700;
font-weight: bold;
}
/* Site-specific tweaks. */
/* Make sure to start every line with ".nav-global"
* so changes affect the developer navbar only. */
/* Limit navbar width on large screens (optional). */
/*
@media (min-width: 1380px) { // grid breakpoint 'xl'
.nav-global .nav-global-container {
max-width: var(--container-width);
}
}
*/
</style>
<div class="nav-global">
@@ -505,21 +543,29 @@
<nav>
<a href="https://developer.blender.org/" class="nav-global-logo">
<svg fill-rule="nonzero" viewBox="0 0 200 162.05">
<path d="M61.1 104.56c.05 2.6.88 7.66 2.12 11.61a61.27 61.27 0 0 0 13.24 22.92 68.39 68.39 0 0 0 23.17 16.64 74.46 74.46 0 0 0 30.42 6.32 74.52 74.52 0 0 0 30.4-6.42 68.87 68.87 0 0 0 23.15-16.7 61.79 61.79 0 0 0 13.23-22.97 58.06 58.06 0 0 0 2.07-25.55 59.18 59.18 0 0 0-8.44-23.1 64.45 64.45 0 0 0-15.4-16.98h.02L112.76 2.46l-.16-.12c-4.09-3.14-10.96-3.13-15.46.02-4.55 3.18-5.07 8.44-1.02 11.75l-.02.02 26 21.14-79.23.08h-.1c-6.55.01-12.85 4.3-14.1 9.74-1.27 5.53 3.17 10.11 9.98 10.14v.02l40.15-.07-71.66 55-.27.2c-6.76 5.18-8.94 13.78-4.69 19.23 4.32 5.54 13.51 5.55 20.34.03l39.1-32s-.56 4.32-.52 6.91zm100.49 14.47c-8.06 8.2-19.34 12.86-31.54 12.89-12.23.02-23.5-4.6-31.57-12.79-3.93-4-6.83-8.59-8.61-13.48a35.57 35.57 0 0 1 2.34-29.25 39.1 39.1 0 0 1 9.58-11.4 44.68 44.68 0 0 1 28.24-9.85 44.59 44.59 0 0 1 28.24 9.77 38.94 38.94 0 0 1 9.58 11.36 35.58 35.58 0 0 1 4.33 14.18 35.1 35.1 0 0 1-1.98 15.05 37.7 37.7 0 0 1-8.61 13.52zm-57.6-27.91a23.55 23.55 0 0 1 8.55-16.68 28.45 28.45 0 0 1 18.39-6.57 28.5 28.5 0 0 1 18.38 6.57 23.57 23.57 0 0 1 8.55 16.67c.37 6.83-2.37 13.19-7.2 17.9a28.18 28.18 0 0 1-19.73 7.79c-7.83 0-14.84-3-19.75-7.8a23.13 23.13 0 0 1-7.19-17.88z"></path>
</svg><strong>Developer</strong>
<path
d="M61.1 104.56c.05 2.6.88 7.66 2.12 11.61a61.27 61.27 0 0 0 13.24 22.92 68.39 68.39 0 0 0 23.17 16.64 74.46 74.46 0 0 0 30.42 6.32 74.52 74.52 0 0 0 30.4-6.42 68.87 68.87 0 0 0 23.15-16.7 61.79 61.79 0 0 0 13.23-22.97 58.06 58.06 0 0 0 2.07-25.55 59.18 59.18 0 0 0-8.44-23.1 64.45 64.45 0 0 0-15.4-16.98h.02L112.76 2.46l-.16-.12c-4.09-3.14-10.96-3.13-15.46.02-4.55 3.18-5.07 8.44-1.02 11.75l-.02.02 26 21.14-79.23.08h-.1c-6.55.01-12.85 4.3-14.1 9.74-1.27 5.53 3.17 10.11 9.98 10.14v.02l40.15-.07-71.66 55-.27.2c-6.76 5.18-8.94 13.78-4.69 19.23 4.32 5.54 13.51 5.55 20.34.03l39.1-32s-.56 4.32-.52 6.91zm100.49 14.47c-8.06 8.2-19.34 12.86-31.54 12.89-12.23.02-23.5-4.6-31.57-12.79-3.93-4-6.83-8.59-8.61-13.48a35.57 35.57 0 0 1 2.34-29.25 39.1 39.1 0 0 1 9.58-11.4 44.68 44.68 0 0 1 28.24-9.85 44.59 44.59 0 0 1 28.24 9.77 38.94 38.94 0 0 1 9.58 11.36 35.58 35.58 0 0 1 4.33 14.18 35.1 35.1 0 0 1-1.98 15.05 37.7 37.7 0 0 1-8.61 13.52zm-57.6-27.91a23.55 23.55 0 0 1 8.55-16.68 28.45 28.45 0 0 1 18.39-6.57 28.5 28.5 0 0 1 18.38 6.57 23.57 23.57 0 0 1 8.55 16.67c.37 6.83-2.37 13.19-7.2 17.9a28.18 28.18 0 0 1-19.73 7.79c-7.83 0-14.84-3-19.75-7.8a23.13 23.13 0 0 1-7.19-17.88z" />
</svg>
<strong>Developer</strong>
</a>
<button class="nav-global-logo js-dropdown-toggle" data-toggle-menu-id="nav-global-nav-links">
<svg fill-rule="nonzero" viewBox="0 0 200 162.05">
<path d="M61.1 104.56c.05 2.6.88 7.66 2.12 11.61a61.27 61.27 0 0 0 13.24 22.92 68.39 68.39 0 0 0 23.17 16.64 74.46 74.46 0 0 0 30.42 6.32 74.52 74.52 0 0 0 30.4-6.42 68.87 68.87 0 0 0 23.15-16.7 61.79 61.79 0 0 0 13.23-22.97 58.06 58.06 0 0 0 2.07-25.55 59.18 59.18 0 0 0-8.44-23.1 64.45 64.45 0 0 0-15.4-16.98h.02L112.76 2.46l-.16-.12c-4.09-3.14-10.96-3.13-15.46.02-4.55 3.18-5.07 8.44-1.02 11.75l-.02.02 26 21.14-79.23.08h-.1c-6.55.01-12.85 4.3-14.1 9.74-1.27 5.53 3.17 10.11 9.98 10.14v.02l40.15-.07-71.66 55-.27.2c-6.76 5.18-8.94 13.78-4.69 19.23 4.32 5.54 13.51 5.55 20.34.03l39.1-32s-.56 4.32-.52 6.91zm100.49 14.47c-8.06 8.2-19.34 12.86-31.54 12.89-12.23.02-23.5-4.6-31.57-12.79-3.93-4-6.83-8.59-8.61-13.48a35.57 35.57 0 0 1 2.34-29.25 39.1 39.1 0 0 1 9.58-11.4 44.68 44.68 0 0 1 28.24-9.85 44.59 44.59 0 0 1 28.24 9.77 38.94 38.94 0 0 1 9.58 11.36 35.58 35.58 0 0 1 4.33 14.18 35.1 35.1 0 0 1-1.98 15.05 37.7 37.7 0 0 1-8.61 13.52zm-57.6-27.91a23.55 23.55 0 0 1 8.55-16.68 28.45 28.45 0 0 1 18.39-6.57 28.5 28.5 0 0 1 18.38 6.57 23.57 23.57 0 0 1 8.55 16.67c.37 6.83-2.37 13.19-7.2 17.9a28.18 28.18 0 0 1-19.73 7.79c-7.83 0-14.84-3-19.75-7.8a23.13 23.13 0 0 1-7.19-17.88z"></path>
</svg><strong>Developer</strong>
<path
d="M61.1 104.56c.05 2.6.88 7.66 2.12 11.61a61.27 61.27 0 0 0 13.24 22.92 68.39 68.39 0 0 0 23.17 16.64 74.46 74.46 0 0 0 30.42 6.32 74.52 74.52 0 0 0 30.4-6.42 68.87 68.87 0 0 0 23.15-16.7 61.79 61.79 0 0 0 13.23-22.97 58.06 58.06 0 0 0 2.07-25.55 59.18 59.18 0 0 0-8.44-23.1 64.45 64.45 0 0 0-15.4-16.98h.02L112.76 2.46l-.16-.12c-4.09-3.14-10.96-3.13-15.46.02-4.55 3.18-5.07 8.44-1.02 11.75l-.02.02 26 21.14-79.23.08h-.1c-6.55.01-12.85 4.3-14.1 9.74-1.27 5.53 3.17 10.11 9.98 10.14v.02l40.15-.07-71.66 55-.27.2c-6.76 5.18-8.94 13.78-4.69 19.23 4.32 5.54 13.51 5.55 20.34.03l39.1-32s-.56 4.32-.52 6.91zm100.49 14.47c-8.06 8.2-19.34 12.86-31.54 12.89-12.23.02-23.5-4.6-31.57-12.79-3.93-4-6.83-8.59-8.61-13.48a35.57 35.57 0 0 1 2.34-29.25 39.1 39.1 0 0 1 9.58-11.4 44.68 44.68 0 0 1 28.24-9.85 44.59 44.59 0 0 1 28.24 9.77 38.94 38.94 0 0 1 9.58 11.36 35.58 35.58 0 0 1 4.33 14.18 35.1 35.1 0 0 1-1.98 15.05 37.7 37.7 0 0 1-8.61 13.52zm-57.6-27.91a23.55 23.55 0 0 1 8.55-16.68 28.45 28.45 0 0 1 18.39-6.57 28.5 28.5 0 0 1 18.38 6.57 23.57 23.57 0 0 1 8.55 16.67c.37 6.83-2.37 13.19-7.2 17.9a28.18 28.18 0 0 1-19.73 7.79c-7.83 0-14.84-3-19.75-7.8a23.13 23.13 0 0 1-7.19-17.88z" />
</svg>
<strong>Developer</strong>
<i class="i-chevron-right nav-global-icon-alt"></i>
<!--
Use nav-global-icon instead of 'nav-global-icon-alt' if fontutti is not present
<svg class="nav-global-icon nav-global-icon-dropdown-toggle" height="100" width="100" viewBox="0 0 1000 1000">
<path
d="m 206.53824,376.41174 a 42,42 0 0 1 71,-29 l 221,220 220,-220 a 42,42 0 1 1 59,59 l -250,250 a 42,42 0 0 1 -59,0 l -250,-250 a 42,42 0 0 1 -12,-30 z" />
</svg>
-->
</button>
<ul class="nav-global-nav-links nav-global-dropdown js-dropdown-menu js-nav-global-dropdown" id="nav-global-nav-links">
<ul class="nav-global-nav-links nav-global-dropdown" id="nav-global-nav-links">
<li>
<a href="https://projects.blender.org" class="is-active">Projects</a>
</li>
@@ -538,11 +584,32 @@
</ul>
<ul class="nav-global-links-right">
<!-- Use 'navbar-search' only if Web Assets is present -->
<li class="d-lg-inline-flex d-none">
<search>
<form class="navbar-search">
<input aria-label="Search" aria-describedby="nav-search-button" class="form-control" type="text" placeholder="Search...">
<button id="nav-search-button" type="submit">
<i class="i-search"></i>
</button>
</form>
</search>
</li>
<li class="d-lg-inline-flex d-none">
<a class="nav-global-btn nav-global-btn-primary"><i class="i-blender"></i><span>Call to action</span></a>
</li>
<li>
<button class="js-toggle-theme-btn"><i class="i-adjust js-toggle-theme-btn-icon"></i></button>
</li>
<li>
<a class="nav-global-btn" href="#"><i class="i-bell"></i></a>
</li>
<li>
<div class="nav-global-apps-dropdown-container">
<button class="js-dropdown-toggle" data-toggle-menu-id="nav-global-apps-menu">
<svg class="nav-global-icon" height="100" width="100" viewBox="0 0 1000 1000">
<path d="m 150.5,899 a 50,50 0 0 1 -49,-50 V 749 a 50,50 0 0 1 49,-50 h 100 a 50,50 0 0 1 50,50 v 100 a 50,50 0 0 1 -50,50 z m 299,0 a 50,50 0 0 1 -50,-50 V 749 a 50,50 0 0 1 50,-50 h 100 a 50,50 0 0 1 50,50 v 100 a 50,50 0 0 1 -50,50 z m 299,0 a 50,50 0 0 1 -50,-50 V 749 a 50,50 0 0 1 50,-50 h 100 a 50,50 0 0 1 50,50 v 100 a 50,50 0 0 1 -50,50 z m -598,-299 a 50,50 0 0 1 -49,-50 V 450 a 50,50 0 0 1 49,-50 h 100 a 50,50 0 0 1 50,50 v 100 a 50,50 0 0 1 -50,50 z m 299,0 a 50,50 0 0 1 -50,-50 V 450 a 50,50 0 0 1 50,-50 h 100 a 50,50 0 0 1 50,50 v 100 a 50,50 0 0 1 -50,50 z m 299,0 a 50,50 0 0 1 -50,-50 V 450 a 50,50 0 0 1 50,-50 h 100 a 50,50 0 0 1 50,50 v 100 a 50,50 0 0 1 -50,50 z m -598,-299 a 50,50 0 0 1 -49,-50 V 151 a 50,50 0 0 1 49,-50 h 100 a 50,50 0 0 1 50,50 v 100 a 50,50 0 0 1 -50,50 z m 299,0 a 50,50 0 0 1 -50,-50 V 151 a 50,50 0 0 1 50,-50 h 100 a 50,50 0 0 1 50,50 v 100 a 50,50 0 0 1 -50,50 z m 299,0 a 50,50 0 0 1 -50,-50 V 151 a 50,50 0 0 1 50,-50 h 100 a 50,50 0 0 1 50,50 v 100 a 50,50 0 0 1 -50,50 z"></path>
<path
d="m 150.5,899 a 50,50 0 0 1 -49,-50 V 749 a 50,50 0 0 1 49,-50 h 100 a 50,50 0 0 1 50,50 v 100 a 50,50 0 0 1 -50,50 z m 299,0 a 50,50 0 0 1 -50,-50 V 749 a 50,50 0 0 1 50,-50 h 100 a 50,50 0 0 1 50,50 v 100 a 50,50 0 0 1 -50,50 z m 299,0 a 50,50 0 0 1 -50,-50 V 749 a 50,50 0 0 1 50,-50 h 100 a 50,50 0 0 1 50,50 v 100 a 50,50 0 0 1 -50,50 z m -598,-299 a 50,50 0 0 1 -49,-50 V 450 a 50,50 0 0 1 49,-50 h 100 a 50,50 0 0 1 50,50 v 100 a 50,50 0 0 1 -50,50 z m 299,0 a 50,50 0 0 1 -50,-50 V 450 a 50,50 0 0 1 50,-50 h 100 a 50,50 0 0 1 50,50 v 100 a 50,50 0 0 1 -50,50 z m 299,0 a 50,50 0 0 1 -50,-50 V 450 a 50,50 0 0 1 50,-50 h 100 a 50,50 0 0 1 50,50 v 100 a 50,50 0 0 1 -50,50 z m -598,-299 a 50,50 0 0 1 -49,-50 V 151 a 50,50 0 0 1 49,-50 h 100 a 50,50 0 0 1 50,50 v 100 a 50,50 0 0 1 -50,50 z m 299,0 a 50,50 0 0 1 -50,-50 V 151 a 50,50 0 0 1 50,-50 h 100 a 50,50 0 0 1 50,50 v 100 a 50,50 0 0 1 -50,50 z m 299,0 a 50,50 0 0 1 -50,-50 V 151 a 50,50 0 0 1 50,-50 h 100 a 50,50 0 0 1 50,50 v 100 a 50,50 0 0 1 -50,50 z" />
</svg>
</button>
@@ -705,58 +772,59 @@
</style>
<script>
// TODO: revise component pre-compiled JavaScript in web-assets
const dropdownToggles = document.getElementsByClassName("js-dropdown-toggle");
const btnActiveClass = 'nav-global-btn-active';
const isVisibleClass = 'is-visible';
/* Simple dropdown toggle.
* Synced with 'navbar.js' manually. */
function dropdownToggle() {
let dropdownToggleBtn = this;
let dropdownMenuName;
let dropdownMenuItem;
/* Hide all dropdowns. */
function dropdownHideAll() {
const dropdownMenus = document.getElementsByClassName("js-dropdown-menu");
if (dropdownMenus) {
for (let i = 0; i < dropdownMenus.length; i++) {
dropdownMenus[i].classList.remove(isVisibleClass);
}
if (dropdownToggleBtn.hasAttribute('data-toggle-menu-id')) {
dropdownMenuName = dropdownToggleBtn.getAttribute('data-toggle-menu-id');
dropdownMenuItem = document.getElementById(dropdownMenuName);
} else {
dropdownMenuItem = dropdownToggleBtn.nextElementSibling;
}
/* Remove styling from all dropdown toggles. */
for (let i = 0; i < dropdownToggles.length; i++) {
dropdownToggles[i].classList.remove(btnActiveClass);
if (!dropdownMenuItem) {
return;
}
dropdownToggleBtn.classList.toggle('active');
dropdownMenuItem.classList.toggle('is-visible');
}
for (let i = 0; i < dropdownToggles.length; i++) {
dropdownToggles[i].addEventListener("click", function (e) {
e.stopPropagation();
window.onload = function(e) {
const dropdownToggles = document.querySelectorAll('.js-dropdown-toggle, .js-show-toggle');
const dropdownId = this.getAttribute('data-toggle-menu-id');
const el = document.getElementById(dropdownId);
for (var i = 0; i < dropdownToggles.length; i++) {
dropdownToggles[i].addEventListener('click', dropdownToggle, false);
}
if (el) {
/* If the button is already active, remove styling. */
if (el.classList.contains(isVisibleClass)) {
dropdownHideAll();
} else {
/* Style button as active and show menu. */
this.classList.add(btnActiveClass);
el.classList.add(isVisibleClass);
/* Close all menus, to prevent multiple menus open at the same time. */
document.onclick = function (e) {
const targetMenuId = e.target.getAttribute('data-toggle-menu-id');
const targetMenuElement = document.getElementById(targetMenuId);
/* If the clicked element is not a menu, or it's not the menu
* that we are trying to open, close it. */
if (!e.target.classList.contains('.js-dropdown-toggle') || targetMenuElement && targetMenuElement.classList.contains('is-visible')) {
const dropdownMenus = document.querySelectorAll('.dropdown-menu, .js-dropdown-menu');
if (dropdownMenus.length == 0) { return };
for (var i = 0; i < dropdownMenus.length; i++) {
if (dropdownMenus[i].id && dropdownMenus[i].id != targetMenuId) {
dropdownMenus[i].classList.remove('is-visible', 'active');
}
}
}
});
}
/* Hide all dropdowns when clicking anywhere except menus. */
document.body.addEventListener("click", function (e) {
if (!e.target.classList.contains("js-dropdown-menu")) {
dropdownHideAll();
for (var i = 0; i < dropdownToggles.length; i++) {
if (dropdownToggles[i].id && dropdownToggles[i].id != targetMenuId) {
dropdownToggles[i].classList.remove('is-active', 'active');
}
}
};
}
});
/* Hide all dropdowns when pressing Esc. */
window.addEventListener('keydown', function (event) {
if (event.key === 'Escape') {
dropdownHideAll();
}
});
};
</script>