UI: Devfund-donation-box Web Assets v2 upgrade #1

Merged
Márton Lente merged 26 commits from ui/web-assets-v2-upgrade into main 2024-11-04 12:49:39 +01:00
4 changed files with 24 additions and 24 deletions
Showing only changes of commit 7050073dcf - Show all commits

View File

@ -49,9 +49,9 @@
<div class="fade h-0 js-tabbed-panel mb-0 row">
<!-- Class 'd-none' is used to hide column while keeping JavaScript coupled with donation-box.html -->
<div class="col-lg-6 col-12 d-none">
<h2 class="mb-5">Become a <strong class="js-monthly-level">Gold</strong> member</h2>
<h2 class="mb-4">Become a <strong class="js-monthly-level">Gold</strong> member</h2>
<div class="col-12 d-flex flex-wrap">
<div class="d-flex img-badges mb-5 w-100 w-sm-auto">
<div class="d-flex img-badges mb-4 w-100 w-sm-auto">
<img alt="" class="img-badge me-3" src="https://fund.blender.org/static/img/badge_devfund_30th_birthday.png?v=1.0.10">
<div class="position-relative">
<img alt="" class="img-badge" src="https://fund.blender.org/static/img/badge_devfund_bronze.png?v=1.0.10">
@ -87,7 +87,7 @@
</p>
</div>
<div class="col-lg-6 col-12">
<div class="btn-row btn-row-fluid btn-row-grid mb-5">
<div class="btn-row btn-row-fluid btn-row-grid mb-4">
<button class="btn btn-lg btn-link js-btn-monthly-select">
<span class="js-value-symbol"></span> <span class="js-value-amount" data-value-group="monthly">5</span>
</button>
@ -115,7 +115,7 @@
<div class="fade js-tabbed-panel mb-0 row show">
<!-- Class 'd-none' is used to hide column while keeping JavaScript coupled with donation-box.html -->
<div class="col-lg-6 col-12 d-none">
<h2 class="mb-5">Donate, just <strong>once</strong></h2>
<h2 class="mb-4">Donate, just <strong>once</strong></h2>
<div class="col-12 d-flex">
<div class="d-flex img-badges">
<img alt="" class="img-badge" src="https://fund.blender.org/static/img/badge_devfund_30th_birthday.png?v=1.0.10">
@ -140,7 +140,7 @@
</p>
</div>
<div class="col-lg-6 col-12">
<div class="btn-row btn-row-fluid btn-row-grid mb-5">
<div class="btn-row btn-row-fluid btn-row-grid mb-4">
<button class="btn btn-lg btn-link js-btn-one-time-select">
<span class="js-value-symbol"></span> <span class="js-value-amount" data-value-group="one-time">5</span>
</button>

View File

@ -30,12 +30,12 @@
</style>
<div class="dfdb smaller">
<div class="box js-donation-box">
<div class="btn-row btn-row-tabbed mb-5 rounded">
<div class="btn-row btn-row-tabbed mb-4 rounded">
<button class="btn btn-lg btn-tabbed js-btn-tabbed">Monthly</button>
<button class="active btn btn-lg btn-tabbed js-btn-tabbed">One-time</button>
</div>
<div class="fade h-0 js-tabbed-panel">
<div class="btn-row btn-row-fluid btn-row-grid mb-5">
<div class="btn-row btn-row-fluid btn-row-grid mb-4">
<button class="btn btn-lg btn-link js-btn-monthly-select">
<span class="js-value-symbol"></span> <span class="js-value-amount" data-value-group="monthly">5</span>
</button>
@ -55,10 +55,10 @@
<span class="js-value-symbol"></span> <span class="js-value-amount" data-value-group="monthly">250</span>
</button>
</div>
<h2 class="mb-5">Become a <strong class="js-monthly-level">Gold</strong> member</h2>
<div class="mb-5 row">
<h2 class="mb-4">Become a <strong class="js-monthly-level">Gold</strong> member</h2>
<div class="mb-4 row">
<div class="col-12 d-flex flex-wrap">
<div class="d-flex img-badges mb-5 mb-sm-0 w-100 w-sm-auto">
<div class="d-flex img-badges mb-4 mb-sm-0 w-100 w-sm-auto">
<div class="position-relative">
<img alt="" class="img-badge" src="https://fund.blender.org/static/img/badge_devfund_bronze.png?v=1.0.10">
<img alt="" class="img-badge js-monthly-img-badge position-absolute start-0 top-0" src="https://fund.blender.org/static/img/badge_devfund_bronze.png?v=1.0.10">
@ -84,7 +84,7 @@
</a>
</div>
<div class="fade js-tabbed-panel show">
<div class="btn-row btn-row-fluid btn-row-grid mb-5">
<div class="btn-row btn-row-fluid btn-row-grid mb-4">
<button class="btn btn-lg btn-link js-btn-one-time-select">
<span class="js-value-symbol"></span> <span class="js-value-amount" data-value-group="one-time">5</span>
</button>
@ -104,7 +104,7 @@
<span class="js-value-symbol"></span> <span class="js-value-amount" data-value-group="one-time">500</span>
</button>
</div>
<h2 class="mb-5">Donate, just <strong>once</strong></h2>
<h2 class="mb-4">Donate, just <strong>once</strong></h2>
<div class="donate-row pb-4">
<div class="d-flex position-relative">
<div class="align-items-center d-flex h-100 position-absolute ps-3 start-0 top-0 z-2">

View File

@ -19,9 +19,9 @@
<div class="fade h-0 js-tabbed-panel mb-0 row">
<!-- Class 'd-none' is used to hide column while keeping JavaScript coupled with donation-box.html -->
<div class="col-lg-6 col-12 d-none">
<h2 class="mb-5">Become a <strong class="js-monthly-level">Gold</strong> member</h2>
<h2 class="mb-4">Become a <strong class="js-monthly-level">Gold</strong> member</h2>
<div class="col-12 d-flex flex-wrap">
<div class="d-flex img-badges mb-5 w-100 w-sm-auto">
<div class="d-flex img-badges mb-4 w-100 w-sm-auto">
<img alt="" class="img-badge me-3" src="https://fund.blender.org/static/img/badge_devfund_30th_birthday.png?v=1.0.10">
<div class="position-relative">
<img alt="" class="img-badge" src="https://fund.blender.org/static/img/badge_devfund_bronze.png?v=1.0.10">
@ -57,7 +57,7 @@
</p>
</div>
<div class="col-lg-6 col-12">
<div class="btn-row btn-row-fluid btn-row-grid mb-5">
<div class="btn-row btn-row-fluid btn-row-grid mb-4">
<button class="btn btn-lg btn-link js-btn-monthly-select">
<span class="js-value-symbol"></span> <span class="js-value-amount" data-value-group="monthly">5</span>
</button>
@ -85,7 +85,7 @@
<div class="fade js-tabbed-panel mb-0 row show">
<!-- Class 'd-none' is used to hide column while keeping JavaScript coupled with donation-box.html -->
<div class="col-lg-6 col-12 d-none">
<h2 class="mb-5">Donate, just <strong>once</strong></h2>
<h2 class="mb-4">Donate, just <strong>once</strong></h2>
<div class="col-12 d-flex">
<div class="d-flex img-badges">
<img alt="" class="img-badge" src="https://fund.blender.org/static/img/badge_devfund_30th_birthday.png?v=1.0.10">
@ -110,7 +110,7 @@
</p>
</div>
<div class="col-lg-6 col-12">
<div class="btn-row btn-row-fluid btn-row-grid mb-5">
<div class="btn-row btn-row-fluid btn-row-grid mb-4">
<button class="btn btn-lg btn-link js-btn-one-time-select">
<span class="js-value-symbol"></span> <span class="js-value-amount" data-value-group="one-time">5</span>
</button>

View File

@ -1,11 +1,11 @@
<div class="dfdb smaller">
<div class="box js-donation-box">
<div class="btn-row btn-row-tabbed mb-5 rounded">
<div class="btn-row btn-row-tabbed mb-4 rounded">
<button class="btn btn-lg btn-tabbed js-btn-tabbed">Monthly</button>
<button class="active btn btn-lg btn-tabbed js-btn-tabbed">One-time</button>
</div>
<div class="fade h-0 js-tabbed-panel">
<div class="btn-row btn-row-fluid btn-row-grid mb-5">
<div class="btn-row btn-row-fluid btn-row-grid mb-4">
<button class="btn btn-lg btn-link js-btn-monthly-select">
<span class="js-value-symbol"></span> <span class="js-value-amount" data-value-group="monthly">5</span>
</button>
@ -25,10 +25,10 @@
<span class="js-value-symbol"></span> <span class="js-value-amount" data-value-group="monthly">250</span>
</button>
</div>
<h2 class="mb-5">Become a <strong class="js-monthly-level">Gold</strong> member</h2>
<div class="mb-5 row">
<h2 class="mb-4">Become a <strong class="js-monthly-level">Gold</strong> member</h2>
<div class="mb-4 row">
<div class="col-12 d-flex flex-wrap">
<div class="d-flex img-badges mb-5 mb-sm-0 w-100 w-sm-auto">
<div class="d-flex img-badges mb-4 mb-sm-0 w-100 w-sm-auto">
<div class="position-relative">
<img alt="" class="img-badge" src="https://fund.blender.org/static/img/badge_devfund_bronze.png?v=1.0.10">
<img alt="" class="img-badge js-monthly-img-badge position-absolute start-0 top-0" src="https://fund.blender.org/static/img/badge_devfund_bronze.png?v=1.0.10">
@ -54,7 +54,7 @@
</a>
</div>
<div class="fade js-tabbed-panel show">
<div class="btn-row btn-row-fluid btn-row-grid mb-5">
<div class="btn-row btn-row-fluid btn-row-grid mb-4">
<button class="btn btn-lg btn-link js-btn-one-time-select">
<span class="js-value-symbol"></span> <span class="js-value-amount" data-value-group="one-time">5</span>
</button>
@ -74,7 +74,7 @@
<span class="js-value-symbol"></span> <span class="js-value-amount" data-value-group="one-time">500</span>
</button>
</div>
<h2 class="mb-5">Donate, just <strong>once</strong></h2>
<h2 class="mb-4">Donate, just <strong>once</strong></h2>
<div class="donate-row pb-4">
<div class="d-flex position-relative">
<div class="align-items-center d-flex h-100 position-absolute ps-3 start-0 top-0 z-2">