infrastructure/extensions-website
4
8
Fork 10
Code Issues 20 Pull Requests 2 Projects Releases Wiki Activity

UI: Improve multi OS display #205

Merged
Oleg-Komarov merged 40 commits from ui/multi-os into main 2024-07-16 07:24:07 +02:00
Conversation 1 Commits 40 Files Changed 10 +44 -17
3 changed files with 44 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 90ae5d3c52 - Show all commits

38
common/static/common/scripts/app.js
View File

@ -100,6 +100,7 @@
const btnInstallAction = document.querySelector('.js-btn-install-action');
const btnInstallGroup = document.querySelector('.js-btn-install-group');
const dropdownAllVersionsItemDot = document.querySelectorAll('.js-dropdown-all-versions-item-dot');
const dropdownAllVersionsWrapper = document.querySelector('.js-dropdown-all-versions-wrapper');
// Create variables multiple
@ -117,16 +118,6 @@
// Show dropdownAllVersionsWrapper
dropdownAllVersionsWrapper.classList.remove('d-none');
btnInstallActionItem.forEach(function(item) {
// Hide all items by default
item.classList.add('d-none');
// Get item platform
const itemPlatform = item.getAttribute('data-platform');
const itemPlatformBase = itemPlatform.split('-')[0];
const itemPlatformBasePrefix = itemPlatformBase.substring(0, 3);
// Get active platform
/*
@ -138,12 +129,39 @@
const activePlatform = navigator.platform.toLowerCase();
const activePlatformPrefix = activePlatform.substring(0, 3);
btnInstallActionItem.forEach(function(item) {
// Hide all items by default
item.classList.add('d-none');
// Hide dropdownAllVersionsItemDot by default
dropdownAllVersionsItemDot.forEach(function(item) {
item.classList.add('d-none');
});
// Get item platform
const itemPlatform = item.getAttribute('data-platform');
const itemPlatformBase = itemPlatform.split('-')[0];
const itemPlatformBasePrefix = itemPlatformBase.substring(0, 3);
// Show button if item platform matches active platform
if (itemPlatformBasePrefix.startsWith(activePlatformPrefix)) {
item.classList.add('btn-install-action-item-active');
item.classList.remove('d-none');
}
});
dropdownAllVersionsItemDot.forEach(function(item) {
// TODO: create named function to not repeat this (optional)
// Get item platform
const itemPlatform = item.getAttribute('data-platform');
const itemPlatformBase = itemPlatform.split('-')[0];
const itemPlatformBasePrefix = itemPlatformBase.substring(0, 3);
// Show dropdownAllVersionsItemDot if item platform matches active platform
if (itemPlatformBasePrefix.startsWith(activePlatformPrefix)) {
item.classList.remove('d-none');
}
});
}
// Show btnInstallAction

8
common/static/common/styles/_extension.sass
View File

@ -475,3 +475,11 @@ a
.featured-image-preview
width: 16rem
.dropdown-all-versions-item-dot
background-color: var(--color-accent)
border-radius: 50%
height: var(--spacer-1)
position: absolute
transform: translateX(-1.2rem)
width: var(--spacer-1)

7
extensions/templates/extensions/detail.html
View File

@ -295,12 +295,13 @@
<ul class="dropdown-menu js-dropdown-menu w-100" id="js-dropdown-all-versions">
{% for download_item in download_list %}
<li>
<a class="d-flex dropdown-item justify-content-between" download="{{ download_item.name }}" href="{{ request.scheme }}://{{ request.get_host }}{{ download_item.url }}">
<span>
<a class="align-items-center d-flex dropdown-item justify-content-between" download="{{ download_item.name }}" href="{{ request.scheme }}://{{ request.get_host }}{{ download_item.url }}">
{% with platform=download_item.platform %}
<span class="dropdown-all-versions-item-dot js-dropdown-all-versions-item-dot" data-platform="{{ platform.name_first_word|lower|slice:"3" }}"></span>
<span>
<i class="i-{{ platform.name_first_word|lower }} me-0"></i> {{ platform.name_first_word }} <span class="text-muted">{{ platform.name_rest}}</span>
{% endwith %}
</span>
{% endwith %}
<span class="text-muted">{{ download_item.size|filesizeformat }}</span>
</a>
</li>