infrastructure/blender-buildbot-www
1
0
Fork 2
Code Issues 4 Pull Requests 1 Projects Releases Wiki Activity

UI: Blender-buildbot-www web-assets-v2 upgrade #11

Merged
Sergey Sharybin merged 13 commits from ui/web-assets-v2-upgrade into main 2024-08-16 11:15:56 +02:00
Conversation 2 Commits 13 Files Changed 4 +12889 -4348
4 changed files with 12889 additions and 4348 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
source/templates/content_build_lister.php
View File

@ -1,4 +1,5 @@
<div class="hero header-align-x-center"> <div class="hero-helper">
<div class="hero">
<div class="container"> <div class="container">
<div class="hero-content"> <div class="hero-content">
<?php if ($lister->isExperimental()) { ?> <?php if ($lister->isExperimental()) { ?>
@ -9,6 +10,7 @@
echo "<h1>Branch Builds</h1>"; echo "<h1>Branch Builds</h1>";
} }
?> ?>
<div class="hero-subtitle"> <div class="hero-subtitle">
<p>The following builds are from official branches. <p>The following builds are from official branches.
They have new features that may end up in official Blender releases. They have new features that may end up in official Blender releases.
@ -16,7 +18,9 @@
<strong>Use at your own risk.</strong> <strong>Use at your own risk.</strong>
</p> </p>
</div> </div>
<?php } elseif ($lister->isPatch()) { ?> <?php } elseif ($lister->isPatch()) { ?>
<?php <?php
if ($lister->getPatch()) { if ($lister->getPatch()) {
echo "<h1>" . $lister->getPatch() . " Builds</h1>"; echo "<h1>" . $lister->getPatch() . " Builds</h1>";
@ -24,17 +28,21 @@
echo "<h1>Patch Builds</h1>"; echo "<h1>Patch Builds</h1>";
} }
?> ?>
<div class="hero-subtitle"> <div class="hero-subtitle">
<p>The following builds have Patch based builds. <p>The following builds have Patch based builds.
They can be unstable and break your files. They can be unstable and break your files.
<strong>Use at your own risk.</strong> <strong>Use at your own risk.</strong>
</p> </p>
</div> </div>
<?php } elseif ($lister->isPythonModule()) { ?> <?php } elseif ($lister->isPythonModule()) { ?>
<h1>Python Module Builds</h1> <h1>Python Module Builds</h1>
<div class="hero-subtitle"> <div class="hero-subtitle">
<p>Builds of Blender as a Python module.</p> <p>Builds of Blender as a Python module.</p>
</div> </div>
<?php } else { ?> <?php } else { ?>
<h1>Daily Builds</h1> <h1>Daily Builds</h1>
<div class="hero-subtitle"> <div class="hero-subtitle">
@ -45,6 +53,7 @@
</div> </div>
<?php } ?> <?php } ?>
<div class="w-100">
<div class="platforms-list-header"> <div class="platforms-list-header">
<span class="platform-title js-toggle-content" data-platform="windows"> <span class="platform-title js-toggle-content" data-platform="windows">
<i class="i-windows"></i> Windows <i class="i-windows"></i> Windows
@ -94,17 +103,15 @@
<a href="/download/daily/archive/">All Archived Builds</a> <a href="/download/daily/archive/">All Archived Builds</a>
<?php } ?> <?php } ?>
</div> </div>
</div> <?php /* .hero-content */ ?>
</div> <?php /* .container */ ?>
<div class="hero-background-faded">
<div class="hero-background-faded-image">
<img src="https://www.blender.org/wp-content/uploads/2018/11/gleb-alexandrov-exploding-madness.jpg" alt="Background artwork by Gleb Alexandrov">
</div> </div>
</div> </div>
</div>
<div class="hero-bg" style="background-image: url(https://www.blender.org/wp-content/uploads/2018/11/gleb-alexandrov-exploding-madness.jpg); background-position-y: 0%">
</div>
<div class="hero-overlay"></div> <div class="hero-overlay"></div>
<div class="hero-overlay-bottom"></div> <div class="hero-overlay-bottom"></div>
</div> </div>
</div>
<?php include('banner_devfund.php'); ?> <?php include('banner_devfund.php'); ?>

5
source/templates/header.php
View File

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html data-theme="dark" lang="en">
<head> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
@ -30,7 +30,8 @@
<link rel="icon" type="image/png" sizes="32x32" href="/assets/icons/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="32x32" href="/assets/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/assets/icons/favicon-16x16.png"> <link rel="icon" type="image/png" sizes="16x16" href="/assets/icons/favicon-16x16.png">
<link href="/assets/css/main.css?v=3.2.3" rel="stylesheet"> <!-- TODO: add web-assets v2 upgrade markup and style changes -->
<link href="/assets/css/main.css?v=2.0.0-alpha.29" rel="stylesheet">
<script defer data-domain="builder.blender.org" src="https://analytics.blender.org/js/script.tagged-events.outbound-links.file-downloads.js"></script> <script defer data-domain="builder.blender.org" src="https://analytics.blender.org/js/script.tagged-events.outbound-links.file-downloads.js"></script>
<script>window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }</script> <script>window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>

179
webroot/assets/css/main.css
View File

@ -1,20 +1,24 @@
/* Import blender.org's style. */ /* Import blender.org's style. */
@import 'style.css'; @import 'style.css';
/* TODO: check explicit breakpoints px values to match web-assets v2 */
:root { :root {
color-scheme: dark;
--color-label-legacy: #999; --color-label-legacy: #999;
--color-label-stable: var(--color-success); --color-label-stable: var(--color-success);
--color-label-alpha: var(--color-danger); --color-label-alpha: var(--color-danger);
--color-label-beta: var(--color-warning); --color-label-beta: var(--color-warning);
--color-label-candidate: var(--color-primary); --color-label-candidate: var(--color-accent);
--header-bg-color: #000; --header-bg-color: #000;
--font-size-subtitle: var(--font-size-large); --fs-subtitle: var(--fs-lg);
--background-color-alt-hover: hsl(213, 10%, 23%); --color-bg-alt-hover: hsl(213, 10%, 23%);
--font-size-table: 15px; --fs-table: 1.4rem;
}
.nav-global .nav-global-container {
max-width: 117.0rem;
} }
.navbar-secondary { .navbar-secondary {
@ -59,123 +63,118 @@
} }
.hero { .hero {
align-items: flex-start; --hero-max-height: none;
height: unset;
max-height: unset; background-color: transparent;
height: auto;
z-index: 1;
} }
.hero .container { .hero .hero-bg {
z-index: 99; background-size: cover;
margin-left: auto;
margin-right: auto;
max-width: 144.0rem;
z-index: -3;
} }
.hero .hero-content { .hero .hero-bg:after,
padding-block: var(--spacer-4); .hero .hero-bg:before {
}
.hero-background-faded {
background-color: var(--header-bg-color);
display: flex;
height: 100%;
justify-content: center;
overflow: hidden;
position: absolute;
width: 100%;
}
.hero-background-faded::after {
background-color: rgba(55, 0, 0, 0.33);
}
.hero-background-faded-image {
position: absolute;
top: 0 !important;
}
.hero-background-faded-image img {
max-width: 1480px;
top: 0;
}
.hero-background-faded-image:before,
.hero-background-faded-image:after {
background-image: linear-gradient(90deg, var(--header-bg-color), transparent); background-image: linear-gradient(90deg, var(--header-bg-color), transparent);
content: ''; content: '';
height: 100%; height: 100%;
position: absolute; position: absolute;
top: 0; top: 0;
width: 300px; width: 30.0rem;
z-index: 1; z-index: -2;
} }
.hero-background-faded-image:after { .hero .hero-bg:after {
background-image: linear-gradient(90deg, transparent, var(--header-bg-color)); background-image: linear-gradient(-90deg, var(--header-bg-color), transparent);
position: absolute;
right: 0; right: 0;
} }
/* Gradient from the top of the header. */ .hero-helper {
.hero-overlay-bottom { background-color: var(--header-bg-color);
background-image: linear-gradient(-1deg, var(--header-bg-color) 20%, transparent 51%);
bottom: 0;
height: 300px;
left: 0;
position: absolute;
right: 0;
width: 100%;
}
.header-overlay-slanted {
background-image: linear-gradient(-1deg, transparent 50%, var(--header-bg-color) 51%);
top: 0;
height: 50px;
left: 0;
position: absolute;
right: 0;
} }
/* Text in the header. */ /* Text in the header. */
.hero-content { .hero-content {
align-items: center;
color: white; color: white;
font-size: var(--font-size-large); display: flex;
flex-direction: column;
font-size: var(--fs-lg);
padding-bottom: var(--spacer-5);
padding-top: var(--spacer-5);
text-align: center; text-align: center;
width: 100%; width: 100%;
} }
/* Main title in the header. */ /* Main title in the header. */
.hero h1 { .hero h1 {
font-size: 2.5rem; --fs-hero-title: var(--fs-xl);
margin-bottom: 0;
} }
.hero .hero-overlay {
background-color: rgba(0, 0, 0, .4)
}
/* Gradient from the top of the header. */
.hero-overlay-bottom {
background-image: linear-gradient(-1deg, var(--header-bg-color) 20%, transparent 51%);
bottom: 0;
height: 30.0rem;
left: 0;
position: absolute;
right: 0;
width: 100%;
z-index: -1;
}
.hero-subtitle {
margin-bottom: var(--spacer);
}
/* TODO: Cleanup and refactor styles devfund after donation-box web-assets v2 update */
.devfund { .devfund {
background-color: var(--header-bg-color); background-color: var(--header-bg-color);
} }
.devfund .btn:hover {
color: black;
}
.devfund a { .devfund a {
text-decoration: underline; text-decoration: underline;
} }
.devfund h2 { .devfund .btn:hover {
font-size: 2.5rem; color: black;
} }
@media(min-width: 1024px) {
.devfund h2 { .devfund .dfdb .btn-link:hover {
font-size: 3rem; color: var(--color-accent);
} }
.devfund .dfdb .btn-link:active,
.devfund .dfdb .btn-link:focus {
color: white;
}
.devfund .dfdb .btn-row-tabbed {
background-color: hsla(0, 0%, 100%, .1); /* --bs-body-bg */
}
.devfund h2 {
font-size: var(--fs-xl);
font-variation-settings: "wght" 800;
} }
.devfund p { .devfund p {
font-size: var(--font-size-large); font-size: var(--fs-h4);
} }
/* Override donation box styling. */ /* Override donation box styling. */
#js-donation-box .btn-row-tabbed { #js-donation-box .btn-row-tabbed {
--btn-bg-color: hsla(0, 0%, 100%, .1); --btn-color-bg: hsla(0, 0%, 100%, .1);
} }
#js-donation-box .btn { #js-donation-box .btn {
@ -195,7 +194,7 @@
border-top-right-radius: var(--border-radius-lg); border-top-right-radius: var(--border-radius-lg);
color: #787882; color: #787882;
display: flex; display: flex;
font-size: var(--font-size-table); font-size: var(--fs-table);
/* justify-content: space-around; */ /* justify-content: space-around; */
user-select: none; user-select: none;
} }
@ -261,14 +260,14 @@
/* Container for the list of builds. */ /* Container for the list of builds. */
.builds-list { .builds-list {
background-color: var(--background-color-alt); background-color: var(--color-bg-alt);
border-bottom-left-radius: var(--border-radius-lg); border-bottom-left-radius: var(--border-radius-lg);
border-bottom-right-radius: var(--border-radius-lg); border-bottom-right-radius: var(--border-radius-lg);
box-shadow: 1px 1px 25px rgba(0, 0, 0, 0.2), 1px 1px 50px rgba(0, 0, 0, 0.5); box-shadow: 1px 1px 25px rgba(0, 0, 0, 0.2), 1px 1px 50px rgba(0, 0, 0, 0.5);
color: var(--text-color-secondary); color: var(--color-text-secondary);
display: none; display: none;
font-family: var(--font-family-mono); font-family: var(--font-family-mono);
font-size: var(--font-size-table); font-size: var(--fs-table);
margin: 0; margin: 0;
padding: 0; padding: 0;
position: initial; position: initial;
@ -288,8 +287,8 @@
} }
.builds-list>li:hover { .builds-list>li:hover {
background-color: var(--background-color-alt-hover); background-color: var(--color-bg-alt-hover);
color: var(--text-color); color: var(--color-text);
} }
.builds-list a { .builds-list a {
@ -317,7 +316,7 @@
} }
.t-header .t-header-cell { .t-header .t-header-cell {
color: var(--text-color-tertiary); color: var(--color-text-tertiary);
padding: var(--spacer-2) var(--spacer-2) var(--spacer-1); padding: var(--spacer-2) var(--spacer-2) var(--spacer-1);
} }
@ -431,7 +430,7 @@ a.b-variant {
} }
.builds-archive { .builds-archive {
font-size: var(--font-size-small); font-size: var(--fs-sm);
padding: var(--spacer) 0 0 0; padding: var(--spacer) 0 0 0;
text-align: center; text-align: center;
} }
@ -450,9 +449,9 @@ a.b-variant {
var(--notice-bg-color) 25px, var(--notice-bg-color) 25px,
var(--notice-bg-color-alt) 25px, var(--notice-bg-color-alt) 25px,
var(--notice-bg-color-alt) 50px) black; var(--notice-bg-color-alt) 50px) black;
border-bottom: var(--border-width) solid var(--background-color-alt-hover); border-bottom: var(--border-width) solid var(--color-bg-alt-hover);
display: none; display: none;
font-size: var(--font-size-base); font-size: var(--fs-base);
padding: 1rem .5rem; padding: 1rem .5rem;
position: relative; position: relative;
} }
@ -475,6 +474,12 @@ a.b-variant {
padding: 0 !important; padding: 0 !important;
} }
/* TODO: cleanup remove if web-assets link default text-decoration changes */
.builder-dashboard a {
text-decoration: underline;
text-underline-offset: .1em;
}
.builder-dashboard .table.monospace .badge-danger { .builder-dashboard .table.monospace .badge-danger {
color: hsl(0, 0%, 96%); color: hsl(0, 0%, 96%);
background-color: hsl(0deg 78.49% 61.42%); background-color: hsl(0deg 78.49% 61.42%);

16828
webroot/assets/css/style.css
View File

File diff suppressed because one or more lines are too long