From 91844c25b161eaa72dfffc2a0df41b1f6d4bb6b8 Mon Sep 17 00:00:00 2001 From: Sion Buckler Date: Fri, 14 Nov 2025 13:20:04 -0300 Subject: [PATCH] Auto-commit: 2025-11-14 13:20:01 - Automated PR update. --- .pr_trigger | 2 +- static/datro/CHANGELOG.md | 2 +- static/datro/css/custom-slider.css | 188 ++++++ static/datro/img/padlock-locked.png | 60 ++ static/datro/index.html | 671 ++++++++++++++++++++-- static/datro/js/custom-slider-dropdown.js | 108 ++++ static/gui/CHANGELOG.md | 2 +- 7 files changed, 969 insertions(+), 64 deletions(-) create mode 100644 static/datro/css/custom-slider.css create mode 100644 static/datro/img/padlock-locked.png create mode 100644 static/datro/js/custom-slider-dropdown.js diff --git a/.pr_trigger b/.pr_trigger index ceb4ee663..58d3e15ba 100644 --- a/.pr_trigger +++ b/.pr_trigger @@ -1 +1 @@ -Last run: 2025-11-13 03:22:23 +Last run: 2025-11-14 13:20:01 diff --git a/static/datro/CHANGELOG.md b/static/datro/CHANGELOG.md index f469e6325..00c1b7ed5 100755 --- a/static/datro/CHANGELOG.md +++ b/static/datro/CHANGELOG.md @@ -15,7 +15,7 @@ and [Semantic Versioning](https://semver.org/spec/v2.0.0.html). ### Added -Mar-25 - Added a sitemap generator script in sub-directory `sitemap` +Mar-25 - Added a sitemap generator script in sub-directory `sitemap` - TEST ## [-datro.06] - Q2/2022 diff --git a/static/datro/css/custom-slider.css b/static/datro/css/custom-slider.css new file mode 100644 index 000000000..bbf39d609 --- /dev/null +++ b/static/datro/css/custom-slider.css @@ -0,0 +1,188 @@ +.top-bar-container { + display: flex; + justify-content: space-between; + align-items: center; + padding: 10px 20px; + background-color: rgba(51, 51, 102, 0.9); /* Semi-transparent dark blue */ + color: white; + width: 100%; + box-sizing: border-box; + position: fixed; /* Fix to the top */ + top: 0; /* Position at the very top */ + z-index: 1000; /* Ensure it's above other content */ + overflow: hidden; /* Hide overflow if any */ +} + +.dropdown-section { + display: flex; + align-items: center; + flex-shrink: 0; /* Prevent dropdown from shrinking */ +} + +.custom-dropdown { + padding: 8px 12px; + border: 1px solid rgba(255, 255, 255, 0.3); + border-radius: 5px; + background-color: rgba(255, 255, 255, 0.1); + color: white; + font-size: 0.9rem; + margin-right: 10px; + cursor: pointer; + appearance: none; /* Remove default dropdown arrow */ + -webkit-appearance: none; + -moz-appearance: none; + background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%208%2012%2014%2018%208%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E'); + background-repeat: no-repeat; + background-position: right 10px center; + background-size: 12px auto; +} + +.custom-dropdown option { + background-color: #333666; /* Dark background for options */ + color: white; +} + +#dropdown-back-button { + padding: 8px 12px; + border: 1px solid rgba(255, 255, 255, 0.3); + border-radius: 5px; + background-color: rgba(255, 255, 255, 0.1); + color: white; + font-size: 0.9rem; + cursor: pointer; + margin-left: 10px; +} + +.slider-section { + flex-grow: 1; /* Allow slider to take available space */ + overflow-x: auto; /* Enable horizontal scrolling */ + white-space: nowrap; /* Prevent items from wrapping */ + padding: 5px 0; + scrollbar-width: thin; /* For Firefox */ + scrollbar-color: rgba(255, 255, 255, 0.3) transparent; /* For Firefox */ +} + +.slider-section::-webkit-scrollbar { + height: 8px; +} + +.slider-section::-webkit-scrollbar-track { + background: transparent; +} + +.slider-section::-webkit-scrollbar-thumb { + background-color: rgba(255, 255, 255, 0.3); + border-radius: 4px; +} + +.slider-items-wrapper { + display: inline-flex; /* Arrange items horizontally */ + align-items: center; +} + +.slider-item { + display: inline-flex; + align-items: center; + padding: 5px 15px; + margin-right: 10px; /* Space between items */ + border-radius: 5px; + background-color: rgba(255, 255, 255, 0.05); + white-space: nowrap; /* Ensure item text doesn't wrap */ + cursor: pointer; + transition: background-color 0.3s ease; +} + +.slider-item:hover { + background-color: rgba(255, 255, 255, 0.15); +} + +.slider-item .padlock { + display: inline-block; + width: 18px; + height: 18px; + margin-left: 8px; + background-size: contain; + background-repeat: no-repeat; + background-position: center; + cursor: pointer; + vertical-align: middle; + flex-shrink: 0; /* Prevent padlock from shrinking */ +} + +.slider-item .padlock.locked { + /* Using a simple SVG for padlock icon */ + background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%225%22%20y%3D%2211%22%20width%3D%2214%22%20height%3D%227%22%20rx%3D%222%22%3E%3C%2Frect%3E%3Cpath%20d%3D%22M7%2011V7a5%205%200%200%201%2010%200%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E'); +} + +.slider-item .padlock.unlocked { + /* Using a simple SVG for unlocked padlock icon */ + background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%225%22%20y%3D%2211%22%20width%3D%2214%22%20height%3D%227%22%20rx%3D%222%22%3E%3C%2Frect%3E%3Cpath%20d%3D%22M7%2011V7a5%205%200%200%201%205-5%205%205%200%200%201%205%205v4%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E'); +} + +/* Styles for the popup content */ +.featherlight-content .padlock-popup { + padding: 20px; + text-align: center; + background-color: #333666; + color: white; + border-radius: 8px; +} + +.featherlight-content .padlock-popup h3 { + margin-top: 0; + font-size: 1.5rem; + color: #66CCFF; +} + +.featherlight-content .padlock-popup p { + font-size: 1.1rem; + color: rgba(255, 255, 255, 0.8); +} + +/* Responsive adjustments */ +@media (max-width: 768px) { + .top-bar-container { + flex-direction: column; + align-items: flex-start; + } + .dropdown-section { + margin-bottom: 10px; + width: 100%; + } + .custom-dropdown { + width: calc(50% - 5px); /* Two dropdowns side-by-side */ + margin-right: 10px; + } + #dropdown-back-button { + width: calc(50% - 5px); + } + .slider-section { + width: 100%; + overflow-x: auto; + white-space: nowrap; + } + .slider-item { + padding: 5px 10px; + margin-right: 5px; + } + .slider-item .padlock { + width: 16px; + height: 16px; + margin-left: 5px; + } +} + +@media (max-width: 480px) { + .custom-dropdown, #dropdown-back-button { + width: 100%; + margin-right: 0; + margin-bottom: 10px; + } + .custom-dropdown { + margin-bottom: 10px; + } + .slider-item { + padding: 4px 8px; + font-size: 0.85rem; + } +} diff --git a/static/datro/img/padlock-locked.png b/static/datro/img/padlock-locked.png new file mode 100644 index 000000000..c26598846 --- /dev/null +++ b/static/datro/img/padlock-locked.png @@ -0,0 +1,60 @@ + + + + + Page Not Found + + + + + +

Page Not Found

+

Sorry, but the page you were trying to view does not exist.

+ + + \ No newline at end of file diff --git a/static/datro/index.html b/static/datro/index.html index d7b9d3ca5..8fcd345d7 100644 --- a/static/datro/index.html +++ b/static/datro/index.html @@ -94,6 +94,379 @@ } + + + +
+
+ +
+ +
+ 1 + 2 + 3 +
+
+ + + + + + +
+
+ + + +
@@ -118,6 +491,71 @@

Site Navigation

+ + +
+
+ +
+ +
+ 1 + 2 + 3 +
+
+ + + + + + +
+
+
-
+
- - -
-
-
-
-
-
-
- -
-
-
-
-
-
-
- -
-
-
- -
+

Release Version
@@ -373,7 +776,8 @@

-Free, Decentralized and Democratic Internet + +Free, Decentralized and Democratic Internet DATRO Consortium Limited,  ID: 13775817 (2021+) @@ -381,11 +785,11 @@

-Royal Signals Association,  + +Royal Signals Association,  Life Member ID: 55983 (2017+)

- Royal Signals,  @@ -395,7 +799,8 @@

-Open Government Licence 3.0,   + +Open Government Licence 3.0,   Crown Copyright

@@ -419,21 +824,165 @@

+ + \ No newline at end of file diff --git a/static/datro/js/custom-slider-dropdown.js b/static/datro/js/custom-slider-dropdown.js new file mode 100644 index 000000000..6fb075c8a --- /dev/null +++ b/static/datro/js/custom-slider-dropdown.js @@ -0,0 +1,108 @@ +document.addEventListener('DOMContentLoaded', function() { + const initialDropdownContainer = document.getElementById('initial-dropdown-container'); + const replacedDropdownContainer = document.getElementById('replaced-dropdown-container'); + const dropdownOptions = document.getElementById('dropdown-options'); + const dropdownBackButton = document.getElementById('dropdown-back-button'); + + // --- Dropdown Logic --- + dropdownOptions.addEventListener('change', function() { + const selectedValue = this.value; + if (selectedValue) { + // Hide initial dropdown and show back button + initialDropdownContainer.style.display = 'none'; + dropdownBackButton.style.display = 'inline-block'; + + // Create and show the replaced dropdown + replacedDropdownContainer.style.display = 'block'; + replacedDropdownContainer.innerHTML = ` + + `; + // Re-apply custom styling if needed for dynamically added select + // (This might require more complex JS if the select is complex) + } + }); + + dropdownBackButton.addEventListener('click', function() { + // Hide replaced dropdown and back button, show initial dropdown + replacedDropdownContainer.style.display = 'none'; + this.style.display = 'none'; + initialDropdownContainer.style.display = 'block'; + dropdownOptions.value = ''; // Reset the initial dropdown + }); + + // --- Slider and Padlock Logic --- + const padlocks = document.querySelectorAll('.slider-item .padlock'); + padlocks.forEach(padlock => { + padlock.addEventListener('click', function(e) { + e.stopPropagation(); // Prevent event from bubbling up to slider item click + const isLocked = this.classList.contains('locked'); + const popupContent = this.getAttribute('data-popup-content'); + + if (isLocked) { + this.classList.remove('locked'); + this.classList.add('unlocked'); + + // Trigger featherlight popup + if (popupContent) { + // Use Featherlight to show content + $.featherlight(popupContent, { + iframe: true, + iframeMaxWidth: '100%', + iframeMaxHeight: '90vh', + closeOnClick: 'background', + afterContent: function() { + // Add a close button to the popup if needed, or rely on Featherlight's default + // For simplicity, we'll rely on Featherlight's default close behavior. + // If custom content is needed, it would be added here. + } + }); + } + } else { + // If already unlocked, maybe just toggle back to locked or do nothing + // For now, let's assume clicking an unlocked padlock does nothing or re-opens it. + // If we want it to re-lock, we'd need a mechanism for that. + // For now, let's just re-open the popup if clicked again. + if (popupContent) { + $.featherlight(popupContent, { + iframe: true, + iframeMaxWidth: '100%', + iframeMaxHeight: '90vh', + closeOnClick: 'background' + }); + } + } + }); + }); + + // --- Library Link Handling --- + const libraryLinks = document.querySelectorAll('a[href*="library"]'); + const hostname = window.location.hostname; + + libraryLinks.forEach(link => { + const currentHref = link.getAttribute('href'); + let newHref = currentHref; + + if (hostname === 'datro.xyz') { + // Online: use https://library.datro.xyz/ + newHref = currentHref.replace('../library/', 'https://library.datro.xyz/'); + newHref = newHref.replace('/library/', 'https://library.datro.xyz/'); + } else { + // Offline/localhost: use ../library/ or default to it if not present + if (!currentHref.includes('../library/')) { + newHref = '../library/'; // Default to relative path if not already set + } + } + link.setAttribute('href', newHref); + }); + + // Ensure featherlight is initialized if it's not already + // This might be handled by an external script, but good to be sure. + if (typeof $.featherlight === 'undefined') { + console.error('Featherlight library not found. Please ensure it is included.'); + } +}); diff --git a/static/gui/CHANGELOG.md b/static/gui/CHANGELOG.md index af403414c..f56aec827 100755 --- a/static/gui/CHANGELOG.md +++ b/static/gui/CHANGELOG.md @@ -11,7 +11,7 @@ and a combination of [Prince2 Project Management](https://prince2.com). ## [gui-0.8] - Q3/2024 ### Fixed -Jun-07 - Few stylesheet tweaks before we migrate to tailwind css +Jun-07 - Few stylesheet tweaks before we migrate to tailwind css - TEST ## [gui-0.7] - Q2/2024