Skip to content

Add release slider with dynamic library popups #163

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
unclehowell wants to merge 1 commit into
base: gh-pages
Choose a base branch
from
Draft

Add release slider with dynamic library popups #163

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
188 changes: 188 additions & 0 deletions static/datro/css/release-controls.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,188 @@
.release-topbar {
margin: 5.5rem auto 1.5rem;
padding: 1rem 1.5rem;
background: linear-gradient(135deg, rgba(30, 30, 80, 0.92), rgba(40, 40, 110, 0.92));
border-radius: 18px;
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25);
color: #ffffff;
max-width: 100%;
}

@media (max-width: 768px) {
.release-topbar {
margin-top: 4.75rem;
padding: 0.85rem 1rem;
}
}

.release-dropdown-wrapper {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.75rem;
margin-bottom: 0.85rem;
}

.release-back-button {
display: none;
align-items: center;
justify-content: center;
gap: 0.35rem;
padding: 0.45rem 0.9rem;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.35);
background: rgba(255, 255, 255, 0.08);
color: #ffffff;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
cursor: pointer;
transition: background 0.2s ease, border-color 0.2s ease;
}

.release-back-button:hover,
.release-back-button:focus {
background: rgba(255, 255, 255, 0.18);
border-color: rgba(255, 255, 255, 0.55);
outline: none;
}

.release-back-button.is-visible {
display: inline-flex;
}

.release-select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
padding: 0.5rem 2.5rem 0.5rem 1rem;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.35);
background: rgba(255, 255, 255, 0.12);
color: #ffffff;
font-weight: 600;
letter-spacing: 0.04em;
cursor: pointer;
min-width: 160px;
position: relative;
}

.release-select option {
color: #222222;
}

.release-select:focus {
outline: none;
border-color: rgba(255, 255, 255, 0.55);
box-shadow: 0 0 0 2px rgba(102, 204, 255, 0.25);
}

.release-slider {
display: flex;
align-items: stretch;
gap: 0.75rem;
overflow-x: auto;
padding: 0.35rem 0.25rem 0.2rem;
scroll-behavior: smooth;
}

.release-slider::-webkit-scrollbar {
height: 6px;
}

.release-slider::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.08);
border-radius: 999px;
}

.release-slider::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.35);
border-radius: 999px;
}

.release-slider {
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 0.35) rgba(255, 255, 255, 0.08);
}

.release-item {
display: inline-flex;
align-items: center;
gap: 0.55rem;
padding: 0.55rem 0.85rem 0.55rem 1rem;
border-radius: 999px;
border: 1px solid transparent;
background: rgba(255, 255, 255, 0.12);
color: #ffffff;
text-align: left;
flex: 0 0 auto;
min-width: max-content;
transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.release-item.is-active {
background: rgba(255, 255, 255, 0.25);
border-color: rgba(102, 204, 255, 0.5);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.release-toggle {
border: none;
background: transparent;
color: inherit;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
cursor: pointer;
white-space: nowrap;
padding: 0;
}

.release-toggle:focus {
outline: none;
text-decoration: underline;
}

.release-padlock {
border: 1px solid rgba(255, 255, 255, 0.35);
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
width: 2.35rem;
height: 2.35rem;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.15rem;
color: #ffffff;
cursor: pointer;
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.release-padlock:hover,
.release-padlock:focus {
background: rgba(255, 255, 255, 0.18);
border-color: rgba(255, 255, 255, 0.55);
outline: none;
}

.release-padlock.is-unlocked {
border-color: rgba(102, 204, 255, 0.8);
color: #66ccff;
background: rgba(102, 204, 255, 0.15);
}

@media (max-width: 600px) {
.release-item {
padding: 0.5rem 0.75rem;
}
.release-toggle {
font-size: 0.85rem;
}
.release-padlock {
width: 2rem;
height: 2rem;
font-size: 1rem;
}
}

87 changes: 64 additions & 23 deletions static/datro/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,8 @@
<link href="css/featherlight.css" rel="stylesheet" type="text/css">
<link href="css/style.css" rel="stylesheet">
<link href="css/carousel.css" rel="stylesheet">
<link href="css/dropdownboxes.css" rel="stylesheet">
<link href="css/dropdownboxes.css" rel="stylesheet">
<link href="css/release-controls.css" rel="stylesheet">
<link href="css/footer.css" rel="stylesheet" type="text/css">
<link href="css/download-buttons.css" rel="stylesheet" type="text/css">
<link href="css/glyphicon.css" rel="stylesheet" type="text/css">
Expand Down Expand Up @@ -83,6 +84,7 @@
<script defer src="js/jquery-3.3.1.min.js"></script>
<link href="html/search-box/app.css" rel="stylesheet">
<script defer src="js/menu.js"></script>
<script defer src="js/release-controls.js"></script>

<style>
html {
Expand All @@ -105,9 +107,9 @@ <h1 class="v-h">Site Navigation</h1>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="technology.html">Portfolio</a>
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="technology.html">Technology</a>
</li>
<li class="nav-item"></li>
<li class="nav-item">
Expand All @@ -118,7 +120,62 @@ <h1 class="v-h">Site Navigation</h1>
</div>
</nav>
</header>
<main style="background-color: #333366;">
<main style="background-color: #333366;">
<div class="release-topbar" role="region" aria-label="Release roadmap">
<div class="release-dropdown-wrapper">
<button type="button" class="release-back-button" aria-hidden="true" aria-label="Return to main options">&#8592; Back</button>
<span class="v-h" id="release-primary-label">Select a starting option</span>
<select class="release-select release-select-initial" id="release-select-initial" aria-labelledby="release-primary-label">
<option value="">Choose an option</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select class="release-select release-select-secondary" id="release-select-secondary" aria-label="Select a secondary option" hidden></select>
</div>
<div class="release-slider" role="tablist" aria-label="Release checkpoints">
<div class="release-item is-active">
<button type="button" class="release-toggle" role="tab" aria-selected="true">Free</button>
<button type="button" class="release-padlock" aria-label="Open Free details" data-library-href="/library/">🔒</button>
</div>
<div class="release-item">
<button type="button" class="release-toggle" role="tab" aria-selected="false">Q1-2024 Release</button>
<button type="button" class="release-padlock" aria-label="Open Q1-2024 Release details" data-library-href="/library/">🔒</button>
</div>
<div class="release-item">
<button type="button" class="release-toggle" role="tab" aria-selected="false">Q2-2024 Release</button>
<button type="button" class="release-padlock" aria-label="Open Q2-2024 Release details" data-library-href="/library/">🔒</button>
</div>
<div class="release-item">
<button type="button" class="release-toggle" role="tab" aria-selected="false">Q3-2024 Release</button>
<button type="button" class="release-padlock" aria-label="Open Q3-2024 Release details" data-library-href="/library/">🔒</button>
</div>
<div class="release-item">
<button type="button" class="release-toggle" role="tab" aria-selected="false">Q4-2024 Release</button>
<button type="button" class="release-padlock" aria-label="Open Q4-2024 Release details" data-library-href="/library/">🔒</button>
</div>
<div class="release-item">
<button type="button" class="release-toggle" role="tab" aria-selected="false">Q1-2025 Release</button>
<button type="button" class="release-padlock" aria-label="Open Q1-2025 Release details" data-library-href="/library/">🔒</button>
</div>
<div class="release-item">
<button type="button" class="release-toggle" role="tab" aria-selected="false">Q2-2025 Release</button>
<button type="button" class="release-padlock" aria-label="Open Q2-2025 Release details" data-library-href="/library/">🔒</button>
</div>
<div class="release-item">
<button type="button" class="release-toggle" role="tab" aria-selected="false">Q3-2025 Release</button>
<button type="button" class="release-padlock" aria-label="Open Q3-2025 Release details" data-library-href="/library/">🔒</button>
</div>
<div class="release-item">
<button type="button" class="release-toggle" role="tab" aria-selected="false">Q4-2025 Release</button>
<button type="button" class="release-padlock" aria-label="Open Q4-2025 Release details" data-library-href="/library/">🔒</button>
</div>
<div class="release-item">
<button type="button" class="release-toggle" role="tab" aria-selected="false">Restricted Access Preview</button>
<button type="button" class="release-padlock" aria-label="Open Restricted Access Preview details" data-library-href="/library/">🔒</button>
</div>
</div>
</div>
<div class="carousel" data-ride="carousel" id="myCarousel">
<div class="carousel-inner" style="overflow:visible!important;">
<div class="carousel-item active">
Expand Down Expand Up @@ -263,7 +320,7 @@ <h2 class="carousel-title">Upgradable Now. For FREE.</h2>
</div>
</div>
<div class="Grid-col Grid-col--tablet-3 Grid-col--desktopSmall-2 FooterNew-link-section">
<h3 class="FooterNew-link-title" data-footerlink="footer-link">Portfolio <span class="Icon Icon--small Icon--light FooterNew-link-icon FooterNew-link-icon--disable"><svg class="Icon-image" height="24" viewbox="0 0 24 24" width="24" xmlns="https://www.w3.org/2000/svg">
<h3 class="FooterNew-link-title" data-footerlink="footer-link">Technology <span class="Icon Icon--small Icon--light FooterNew-link-icon FooterNew-link-icon--disable"><svg class="Icon-image" height="24" viewbox="0 0 24 24" width="24" xmlns="https://www.w3.org/2000/svg">
<path d="M12 16c-.3 0-.5-.1-.7-.3l-6-6 1.4-1.4 5.3 5.3 5.3-5.3 1.4 1.4-6 6c-.2.2-.4.3-.7.3z"></path></svg></span> <span class="Icon Icon--small Icon--light FooterNew-link-icon FooterNew-link-icon--active"><svg class="Icon-image" viewbox="0 0 24 24" xmlns="https://www.w3.org/2000/svg">
<path d="M12 8.3a.91.91 0 0 1 .7.3l6 6-1.4 1.4-5.3-5.3L6.7 16l-1.4-1.4 6-6a.91.91 0 0 1 .7-.3z"></path></svg></span></h3>
<div class="FooterNew-link-content">
Expand Down Expand Up @@ -419,21 +476,5 @@ <h3 class="FooterNew-link-title FooterNew-link-title--hideMobile" style="margin-
<script defer src="js/smoothloader2.js"></script>

<script defer src="js/footer-accordion.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
var libraryLinks = document.querySelectorAll('a[href*="library"]');
var hostname = window.location.hostname;

for (var i = 0; i < libraryLinks.length; i++) {
var link = libraryLinks[i];
if (hostname === 'datro.xyz') {
var oldHref = link.getAttribute('href');
var newHref = oldHref.replace('../library/', 'https://library.datro.xyz/');
newHref = newHref.replace('/library/', 'https://library.datro.xyz/');
link.setAttribute('href', newHref);
}
}
});
</script>
</body>
</html>
</html>
Loading