From 5b6b6cac20f383698c831d5ca11f3779ca4dd178 Mon Sep 17 00:00:00 2001 From: Michael Panchenko Date: Wed, 5 Nov 2025 19:04:42 +0700 Subject: [PATCH] Better positioning of sponsor banners --- src/serena/resources/dashboard/dashboard.css | 122 ++++++++++++------- src/serena/resources/dashboard/dashboard.js | 113 +++++++++++++++++ src/serena/resources/dashboard/index.html | 98 +++++++-------- 3 files changed, 239 insertions(+), 94 deletions(-) diff --git a/src/serena/resources/dashboard/dashboard.css b/src/serena/resources/dashboard/dashboard.css index 92547f5a..bf3e580b 100644 --- a/src/serena/resources/dashboard/dashboard.css +++ b/src/serena/resources/dashboard/dashboard.css @@ -62,18 +62,21 @@ body { right: 0; background-color: var(--bg-secondary); border-bottom: 1px solid var(--border-color); - padding: 20px; + padding: 20px 20px; display: flex; justify-content: space-between; align-items: center; + gap: 20px; z-index: 1000; transition: background-color 0.3s ease, border-color 0.3s ease; - min-height: 70px; + min-height: 90px; box-shadow: var(--shadow); + max-width: 1600px; + margin: 0 auto; } .logo-container { - flex: 1; + flex-shrink: 0; } .logo-container img { @@ -87,6 +90,7 @@ body { display: flex; align-items: center; gap: 10px; + flex-shrink: 0; } .menu-button { @@ -144,28 +148,42 @@ body { } /* Sponsor Banners */ -.sponsors-container { - background-color: var(--bg-secondary); - border-bottom: 1px solid var(--border-color); - transition: background-color 0.3s ease, border-color 0.3s ease; -} - .platinum-sponsors-section { position: relative; display: flex; align-items: center; justify-content: center; height: 80px; + margin-bottom: 20px; + background-color: var(--bg-secondary); + border: 1px solid var(--border-color); + border-radius: 5px; + padding: 0; + box-shadow: var(--shadow); + transition: background-color 0.3s ease, border-color 0.3s ease; +} + +/* Platinum sponsor in header */ +.platinum-sponsors-section.header-sponsor { + flex: 1; + margin-bottom: 0; + height: 60px; + background-color: transparent; + border: 1px solid var(--border-color); + box-shadow: none; } .platinum-banner { position: relative; width: 100%; - max-width: 800px; height: 80px; overflow: hidden; } +.header-sponsor .platinum-banner { + height: 60px; +} + .platinum-sponsor-slide { position: absolute; top: 0; @@ -186,7 +204,7 @@ body { } .platinum-sponsor-slide .sponsor-content { - font-size: 60px; + font-size: 48px; font-weight: bold; color: var(--text-primary); text-align: center; @@ -194,25 +212,30 @@ body { transition: background-color 0.3s ease, color 0.3s ease; } +.header-sponsor .platinum-sponsor-slide .sponsor-content { + font-size: 32px; +} + .gold-sponsors-section { position: relative; display: flex; align-items: center; justify-content: center; height: 60px; - background-color: var(--bg-primary); - border-top: 1px solid var(--border-color); + background-color: var(--bg-secondary); + border: 1px solid var(--border-color); + border-radius: 5px; + padding: 0; } .gold-banner { position: relative; width: 100%; - max-width: 900px; height: 60px; overflow: hidden; } -.gold-sponsor-group { +.gold-sponsor-slide { position: absolute; top: 0; left: 0; @@ -221,33 +244,22 @@ body { display: flex; align-items: center; justify-content: center; - gap: 15px; opacity: 0; transition: opacity 0.5s ease-in-out; pointer-events: none; } -.gold-sponsor-group.active { +.gold-sponsor-slide.active { opacity: 1; pointer-events: auto; } -.gold-sponsor-item { - flex: 1; - display: flex; - align-items: center; - justify-content: center; -} - -.gold-sponsor-item .sponsor-content { - font-size: 18px; +.gold-sponsor-slide .sponsor-content { + font-size: 16px; font-weight: 600; color: var(--text-primary); text-align: center; padding: 10px 15px; - border: 2px solid var(--border-color); - border-radius: 6px; - background-color: var(--bg-secondary); width: 100%; transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; } @@ -257,17 +269,18 @@ body { background-color: transparent; color: var(--text-muted); border: none; - font-size: 36px; + font-size: 28px; cursor: pointer; - padding: 10px 15px; + padding: 8px 12px; transition: color 0.3s ease; z-index: 10; user-select: none; - opacity: 0.3; + opacity: 0.4; } .sponsor-nav-btn:hover { color: var(--text-primary); + opacity: 0.7; } .sponsor-nav-btn:active { @@ -275,44 +288,67 @@ body { } .platinum-sponsors-section .sponsor-nav-left { - left: 7px; + left: 5px; } .platinum-sponsors-section .sponsor-nav-right { - right: 7px; + right: 5px; } .gold-sponsors-section .sponsor-nav-btn { - font-size: 28px; + font-size: 24px; } .gold-sponsors-section .sponsor-nav-left { - left: 7px; + left: 5px; } .gold-sponsors-section .sponsor-nav-right { - right: 7px; + right: 5px; } /* Responsive adjustments for sponsors */ @media (max-width: 768px) { .platinum-sponsor-slide .sponsor-content { - font-size: 24px; - padding: 15px; + font-size: 28px; + padding: 10px; } - .gold-sponsor-item .sponsor-content { + .header-sponsor .platinum-sponsor-slide .sponsor-content { + font-size: 18px; + } + + .gold-sponsor-slide .sponsor-content { font-size: 14px; padding: 8px 10px; } .sponsor-nav-btn { - font-size: 28px; - padding: 5px 10px; + font-size: 22px; + padding: 5px 8px; } .gold-sponsors-section .sponsor-nav-btn { - font-size: 24px; + font-size: 20px; + } + + .header { + flex-wrap: wrap; + min-height: auto; + } + + .logo-container { + order: 1; + } + + .header-nav { + order: 3; + } + + .header-sponsor { + order: 2; + width: 100%; + margin-top: 10px; } } .page-view { diff --git a/src/serena/resources/dashboard/dashboard.js b/src/serena/resources/dashboard/dashboard.js index f24742bc..f264974f 100644 --- a/src/serena/resources/dashboard/dashboard.js +++ b/src/serena/resources/dashboard/dashboard.js @@ -243,6 +243,9 @@ class Dashboard { // Initialize theme this.initializeTheme(); + // Initialize sponsor rotation + this.initializeSponsorRotation(); + // Add ESC key handler for closing modals $(document).keydown(function (e) { if (e.key === 'Escape' || e.keyCode === 27) { @@ -1831,4 +1834,114 @@ class Dashboard { // Close menu self.$menuDropdown.hide(); } + + // ===== Sponsor Rotation Methods ===== + + initializeSponsorRotation() { + const self = this; + + // Platinum sponsor rotation + this.platinumCurrentIndex = 0; + this.platinumInterval = null; + + $('#platinum-prev').click(function() { + self.rotatePlatinumSponsor('prev'); + }); + + $('#platinum-next').click(function() { + self.rotatePlatinumSponsor('next'); + }); + + // Start automatic platinum rotation + this.startPlatinumRotation(); + + // Gold sponsor rotation + this.goldCurrentIndex = 0; + this.goldInterval = null; + + $('#gold-prev').click(function() { + self.rotateGoldSponsor('prev'); + }); + + $('#gold-next').click(function() { + self.rotateGoldSponsor('next'); + }); + + // Start automatic gold rotation + this.startGoldRotation(); + } + + rotatePlatinumSponsor(direction) { + const $slides = $('.platinum-sponsor-slide'); + const totalSlides = $slides.length; + + if (totalSlides === 0) return; + + // Remove active class from current slide + $slides.eq(this.platinumCurrentIndex).removeClass('active'); + + // Calculate new index + if (direction === 'next') { + this.platinumCurrentIndex = (this.platinumCurrentIndex + 1) % totalSlides; + } else { + this.platinumCurrentIndex = (this.platinumCurrentIndex - 1 + totalSlides) % totalSlides; + } + + // Add active class to new slide + $slides.eq(this.platinumCurrentIndex).addClass('active'); + + // Reset auto-rotation timer + this.startPlatinumRotation(); + } + + startPlatinumRotation() { + const self = this; + + // Clear existing interval + if (this.platinumInterval) { + clearInterval(this.platinumInterval); + } + + // Start new interval (30 seconds) + this.platinumInterval = setInterval(function() { + self.rotatePlatinumSponsor('next'); + }, 30000); + } + + rotateGoldSponsor(direction) { + const $slides = $('.gold-sponsor-slide'); + const totalSlides = $slides.length; + + if (totalSlides === 0) return; + + // Remove active class from current slide + $slides.eq(this.goldCurrentIndex).removeClass('active'); + + // Calculate new index + if (direction === 'next') { + this.goldCurrentIndex = (this.goldCurrentIndex + 1) % totalSlides; + } else { + this.goldCurrentIndex = (this.goldCurrentIndex - 1 + totalSlides) % totalSlides; + } + + // Add active class to new slide + $slides.eq(this.goldCurrentIndex).addClass('active'); + + // Reset auto-rotation timer + this.startGoldRotation(); + } + + startGoldRotation() { + const self = this; + + // Clear existing interval + if (this.goldInterval) { + clearInterval(this.goldInterval); + } + + // Start new interval (30 seconds) + this.goldInterval = setInterval(function() { + self.rotateGoldSponsor('next'); + }, 30000); + } } diff --git a/src/serena/resources/dashboard/index.html b/src/serena/resources/dashboard/index.html index 1ce20343..9d629d4a 100644 --- a/src/serena/resources/dashboard/index.html +++ b/src/serena/resources/dashboard/index.html @@ -20,6 +20,25 @@
+ + +
+ +
+
+ +
+
+ +
+
+ +
+ - -
- -
- -
-
- -
-
- -
-
- -
- - -
- -
-
-
- -
-
- -
-
-
-
- -
-
- -
-
- -
-
-
- -
-
+

Current Configuration

@@ -174,6 +143,33 @@
Loading contexts...
+ + +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +