mirror of
https://github.com/plexguide/Huntarr.git
synced 2026-04-26 04:30:10 -05:00
@@ -69,6 +69,17 @@
|
||||
}
|
||||
|
||||
/* Base Styles */
|
||||
body, html {
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: var(--bg-primary);
|
||||
color: var(--text-primary);
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: hidden !important; /* Prevent scrollbars on body and html */
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
@@ -76,13 +87,68 @@
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
background-color: var(--bg-primary);
|
||||
color: var(--text-primary);
|
||||
line-height: 1.6;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Global scrollbar management */
|
||||
.content-section {
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
/* Styling for scrollbars */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: #262a36;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #3d4353;
|
||||
border-radius: 4px;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #4d5569;
|
||||
}
|
||||
|
||||
/* Prevent double scrollbars globally */
|
||||
body, html, .main-content, .section-wrapper {
|
||||
overflow: hidden !important;
|
||||
scrollbar-width: none !important;
|
||||
}
|
||||
|
||||
/* Only allow scrollbars on specific elements */
|
||||
.single-scroll-container {
|
||||
scrollbar-width: thin !important;
|
||||
overflow-y: auto !important;
|
||||
}
|
||||
|
||||
/* Hide scrollbars on all table elements */
|
||||
table, tbody, tr, td, th {
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
/* Hide all WebKit scrollbars except on allowed containers */
|
||||
body::-webkit-scrollbar,
|
||||
html::-webkit-scrollbar,
|
||||
.content-section::-webkit-scrollbar,
|
||||
.main-content::-webkit-scrollbar,
|
||||
.section-wrapper::-webkit-scrollbar,
|
||||
table::-webkit-scrollbar,
|
||||
tr::-webkit-scrollbar,
|
||||
tbody::-webkit-scrollbar,
|
||||
th::-webkit-scrollbar,
|
||||
td::-webkit-scrollbar {
|
||||
width: 0 !important;
|
||||
height: 0 !important;
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
a {
|
||||
@@ -294,16 +360,28 @@ input:checked + .slider:before {
|
||||
color: var(--error-color);
|
||||
}
|
||||
|
||||
/* Content Sections */
|
||||
/* Content Sections - Strict section isolation */
|
||||
.content-section {
|
||||
display: none;
|
||||
height: calc(100vh - 60px);
|
||||
overflow-y: auto;
|
||||
padding: 20px;
|
||||
display: none !important;
|
||||
visibility: hidden;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.content-section.active {
|
||||
display: block;
|
||||
display: block !important;
|
||||
visibility: visible;
|
||||
position: relative;
|
||||
height: auto;
|
||||
overflow: visible;
|
||||
opacity: 1;
|
||||
z-index: 1;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
/* Cards */
|
||||
|
||||
@@ -16,28 +16,96 @@
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- App panels - use direct children without nested containers -->
|
||||
<div id="sonarrApps" class="app-apps-panel app-content-panel active" style="display: block;"></div>
|
||||
<div id="radarrApps" class="app-apps-panel app-content-panel"></div>
|
||||
<div id="lidarrApps" class="app-apps-panel app-content-panel"></div>
|
||||
<div id="readarrApps" class="app-apps-panel app-content-panel"></div>
|
||||
<div id="whisparrApps" class="app-apps-panel app-content-panel"></div>
|
||||
<div id="erosApps" class="app-apps-panel app-content-panel"></div>
|
||||
<div id="swaparrApps" class="app-apps-panel app-content-panel"></div>
|
||||
|
||||
<div id="appsStatus" class="apps-status"></div>
|
||||
|
||||
<div id="appsContainer" class="apps-container">
|
||||
<!-- Apps panels will be shown here -->
|
||||
<!-- Single scrollable container for all content -->
|
||||
<div class="single-scroll-container">
|
||||
<div id="appsContainer" class="apps-container">
|
||||
<!-- Settings content will be shown here -->
|
||||
</div>
|
||||
|
||||
<div id="appsStatus" class="apps-status"></div>
|
||||
|
||||
<!-- App panels at the bottom -->
|
||||
<div class="app-panels-container">
|
||||
<div id="sonarrApps" class="app-apps-panel app-content-panel active" style="display: block;"></div>
|
||||
<div id="radarrApps" class="app-apps-panel app-content-panel"></div>
|
||||
<div id="lidarrApps" class="app-apps-panel app-content-panel"></div>
|
||||
<div id="readarrApps" class="app-apps-panel app-content-panel"></div>
|
||||
<div id="whisparrApps" class="app-apps-panel app-content-panel"></div>
|
||||
<div id="erosApps" class="app-apps-panel app-content-panel"></div>
|
||||
<div id="swaparrApps" class="app-apps-panel app-content-panel"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
/* Add bottom padding to the app panels to prevent content from being hidden */
|
||||
.app-apps-panel {
|
||||
/* Apps Section Layout - Complete Redesign */
|
||||
#appsSection {
|
||||
display: none;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
overflow: hidden; /* Prevent double scrollbar */
|
||||
padding-bottom: 60px; /* Clear space at the bottom */
|
||||
}
|
||||
|
||||
#appsSection.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Single scroll container - ONLY this element should scroll */
|
||||
.single-scroll-container {
|
||||
display: block;
|
||||
width: 100%;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
padding-bottom: 100px; /* Significant padding to avoid content being cut off */
|
||||
min-height: 100%;
|
||||
height: auto;
|
||||
max-height: unset; /* Remove any max-height restriction */
|
||||
scrollbar-width: thin; /* Firefox */
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Force-hide scrollbars on all other elements */
|
||||
body, html, .main-content, .content-section,
|
||||
.app-apps-panel, .app-content-panel, #appsContainer,
|
||||
.app-panels-container, #appsStatus {
|
||||
overflow: hidden !important;
|
||||
scrollbar-width: none !important; /* Firefox */
|
||||
-ms-overflow-style: none !important; /* IE/Edge */
|
||||
}
|
||||
|
||||
/* Proper table positioning at bottom */
|
||||
.app-panels-container {
|
||||
margin-top: auto;
|
||||
padding: 10px 0 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Ensure Additional Options section is fully visible */
|
||||
#sonarrApps, #radarrApps, #lidarrApps, #readarrApps, #whisparrApps, #erosApps, #swaparrApps {
|
||||
padding-bottom: 150px; /* Extra padding to ensure bottom content is visible */
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
/* Add explicit styling for the Additional Options section */
|
||||
.additional-options-section, .additional-options {
|
||||
margin-bottom: 100px;
|
||||
padding-bottom: 100px;
|
||||
}
|
||||
|
||||
/* Ensure Skip Series Refresh is visible */
|
||||
.skip-series-refresh {
|
||||
margin-bottom: 50px;
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
|
||||
/* Panel styling */
|
||||
.app-apps-panel {
|
||||
padding-bottom: 10px;
|
||||
min-height: 0;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/* Fix dropdown positioning for apps section */
|
||||
.log-dropdown-content {
|
||||
display: none;
|
||||
@@ -55,4 +123,109 @@
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* Apps container styling */
|
||||
#appsContainer {
|
||||
height: auto;
|
||||
flex: 1;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/* Prevent scrollbars on all table elements */
|
||||
table, tbody, tr, td {
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
/* Hide scrollbars except the main content wrapper */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
/* Hide all scrollbars except on .single-scroll-container */
|
||||
body::-webkit-scrollbar,
|
||||
html::-webkit-scrollbar,
|
||||
.main-content::-webkit-scrollbar,
|
||||
.content-section::-webkit-scrollbar,
|
||||
#appsSection::-webkit-scrollbar,
|
||||
#appsContainer::-webkit-scrollbar,
|
||||
.app-panels-container::-webkit-scrollbar,
|
||||
.app-content-panel::-webkit-scrollbar,
|
||||
.app-apps-panel::-webkit-scrollbar,
|
||||
#sonarrApps::-webkit-scrollbar,
|
||||
#radarrApps::-webkit-scrollbar,
|
||||
#lidarrApps::-webkit-scrollbar,
|
||||
#readarrApps::-webkit-scrollbar,
|
||||
#whisparrApps::-webkit-scrollbar,
|
||||
#erosApps::-webkit-scrollbar,
|
||||
#swaparrApps::-webkit-scrollbar,
|
||||
table::-webkit-scrollbar,
|
||||
tr::-webkit-scrollbar,
|
||||
td::-webkit-scrollbar {
|
||||
display: none !important;
|
||||
width: 0 !important;
|
||||
height: 0 !important;
|
||||
}
|
||||
|
||||
/* Complete overhaul for mobile and desktop visibility */
|
||||
@media (max-width: 768px) {
|
||||
/* Full display mode for mobile */
|
||||
#appsSection, #appsSection.active {
|
||||
display: block;
|
||||
height: auto;
|
||||
overflow-y: visible;
|
||||
overflow-x: hidden;
|
||||
padding-bottom: 150px;
|
||||
}
|
||||
|
||||
/* Completely redesign scroll container for mobile */
|
||||
.single-scroll-container {
|
||||
display: block;
|
||||
position: relative;
|
||||
overflow-y: visible;
|
||||
height: auto;
|
||||
min-height: 100%;
|
||||
padding-bottom: 200px;
|
||||
}
|
||||
|
||||
/* Ensure proper section isolation */
|
||||
body, html, .main-content {
|
||||
overflow-y: auto !important;
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
/* Prevent other sections from showing */
|
||||
.content-section:not(.active) {
|
||||
display: none !important;
|
||||
height: 0 !important;
|
||||
visibility: hidden !important;
|
||||
position: absolute !important;
|
||||
z-index: -999 !important;
|
||||
overflow: hidden !important;
|
||||
opacity: 0 !important;
|
||||
}
|
||||
|
||||
/* Extra space for bottom content */
|
||||
.app-panels-container {
|
||||
margin-bottom: 100px;
|
||||
}
|
||||
|
||||
/* Force bottom option visibility */
|
||||
.additional-options, .skip-series-refresh {
|
||||
margin-bottom: 150px !important;
|
||||
padding-bottom: 150px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Desktop padding adjustments */
|
||||
@media (min-width: 769px) {
|
||||
.single-scroll-container {
|
||||
padding-bottom: 200px;
|
||||
}
|
||||
|
||||
.additional-options, .skip-series-refresh {
|
||||
margin-bottom: 150px;
|
||||
padding-bottom: 150px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -46,12 +46,12 @@
|
||||
<table class="modern-table history-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Date and Time</th>
|
||||
<th>Processed Information</th>
|
||||
<th>Operation</th>
|
||||
<th>ID Number</th>
|
||||
<th>Name of Instance</th>
|
||||
<th>How Long Ago</th>
|
||||
<th style="min-width: 140px; width: 15%;">Date and Time</th>
|
||||
<th style="min-width: 250px; width: 35%;">Processed Information</th>
|
||||
<th style="min-width: 100px; width: 10%;">Operation</th>
|
||||
<th style="min-width: 100px; width: 10%;">ID Number</th>
|
||||
<th style="min-width: 120px; width: 15%;">Name of Instance</th>
|
||||
<th style="min-width: 120px; width: 15%;">How Long Ago</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="historyTableBody">
|
||||
@@ -74,7 +74,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Pagination controls -->
|
||||
<div class="pagination-controls">
|
||||
<div class="pagination-controls mobile-sticky">
|
||||
<button id="historyPrevPage" class="pagination-button"><i class="fas fa-chevron-left"></i> Previous</button>
|
||||
<span id="historyPageInfo">Page <span id="historyCurrentPage">1</span> of <span id="historyTotalPages">1</span></span>
|
||||
<button id="historyNextPage" class="pagination-button">Next <i class="fas fa-chevron-right"></i></button>
|
||||
@@ -82,10 +82,44 @@
|
||||
</section>
|
||||
|
||||
<style>
|
||||
/* Scope all styles to this section only */
|
||||
#historySection {
|
||||
width: 100%;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#historySection.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Scrollbar handling for only this section */
|
||||
#historySection .history-container {
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
/* Hide WebKit scrollbar */
|
||||
html::-webkit-scrollbar, body::-webkit-scrollbar, #app::-webkit-scrollbar,
|
||||
.main-content::-webkit-scrollbar, .content-section::-webkit-scrollbar,
|
||||
.history-container::-webkit-scrollbar {
|
||||
display: none !important;
|
||||
width: 0 !important;
|
||||
height: 0 !important;
|
||||
}
|
||||
|
||||
/* Make space for the fixed pagination on mobile */
|
||||
.history-container {
|
||||
padding-bottom: 60px;
|
||||
}
|
||||
|
||||
/* Main container styling */
|
||||
.content-section {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/* Modern History Section Styling */
|
||||
#historySection {
|
||||
padding: 20px;
|
||||
padding-bottom: 60px;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
@@ -97,6 +131,11 @@
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.history-container {
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
/* Dropdown styling */
|
||||
.history-dropdown {
|
||||
position: relative;
|
||||
@@ -290,19 +329,28 @@
|
||||
|
||||
/* Table styling */
|
||||
.modern-table-wrapper {
|
||||
width: 100%;
|
||||
overflow-x: auto;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
|
||||
background: linear-gradient(180deg, rgba(22, 26, 34, 0.8), rgba(18, 22, 30, 0.75));
|
||||
border: 1px solid rgba(90, 109, 137, 0.15);
|
||||
scrollbar-width: thin;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* Make Processed Information column text wrap for very long content */
|
||||
.history-table td:nth-child(2) {
|
||||
white-space: normal;
|
||||
word-wrap: break-word;
|
||||
word-break: break-word;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.modern-table, .history-table {
|
||||
width: 100%;
|
||||
min-width: 830px; /* Sum of all min-widths */
|
||||
border-collapse: collapse;
|
||||
text-align: left;
|
||||
color: white;
|
||||
min-width: 800px;
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
.modern-table thead, .history-table thead {
|
||||
@@ -327,6 +375,9 @@
|
||||
border-bottom: 1px solid rgba(90, 109, 137, 0.1);
|
||||
font-size: 14px;
|
||||
transition: background-color 0.2s ease;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.modern-table tbody tr, .history-table tbody tr {
|
||||
@@ -382,6 +433,11 @@
|
||||
padding: 50px 20px;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.empty-state-message i, .loading-indicator i {
|
||||
@@ -398,8 +454,30 @@
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 20px;
|
||||
gap: 15px;
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background: rgba(22, 26, 34, 0.9);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.mobile-sticky {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
|
||||
border-top: 1px solid rgba(90, 109, 137, 0.3);
|
||||
}
|
||||
|
||||
@media (min-width: 769px) {
|
||||
.mobile-sticky {
|
||||
position: static;
|
||||
box-shadow: none;
|
||||
border-top: none;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.pagination-button {
|
||||
@@ -430,8 +508,22 @@
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* Responsive adjustments */
|
||||
/* Mobile Table Adjustments */
|
||||
@media (max-width: 768px) {
|
||||
/* Keep all columns at their natural width */
|
||||
.modern-table, .history-table {
|
||||
table-layout: fixed;
|
||||
min-width: 830px; /* Sum of all min-widths */
|
||||
width: auto;
|
||||
}
|
||||
|
||||
/* Ensure the wrapper allows horizontal scrolling */
|
||||
.modern-table-wrapper {
|
||||
overflow-x: auto !important;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
/* General responsive styling */
|
||||
.section-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
@@ -447,6 +539,39 @@
|
||||
|
||||
.pagination-controls {
|
||||
flex-wrap: wrap;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.pagination-button {
|
||||
padding: 8px 12px;
|
||||
font-size: 14px;
|
||||
min-width: 85px;
|
||||
}
|
||||
|
||||
#historyPageInfo {
|
||||
font-size: 14px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Ensure the table wrapper doesn't overflow in mobile */
|
||||
.modern-table-wrapper {
|
||||
max-height: calc(100vh - 300px);
|
||||
padding-bottom: 60px; /* Add padding to ensure content isn't hidden under pagination */
|
||||
}
|
||||
|
||||
/* Fix for small screen height */
|
||||
@media (max-height: 700px) {
|
||||
.pagination-controls {
|
||||
position: fixed !important;
|
||||
bottom: 0 !important;
|
||||
left: 0 !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -454,6 +579,99 @@
|
||||
<script>
|
||||
// Fixes for formatting the history items
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Force single scrollbar when in history section
|
||||
const fixHistoryScrolling = function() {
|
||||
// Apply global CSS to forcefully remove all scrollbars
|
||||
const style = document.createElement('style');
|
||||
style.id = 'history-scrollbar-fix';
|
||||
style.innerHTML = `
|
||||
html, body, #app, .main-content, #main, .content-section, .main-content > .inner, .section-content, .history-container {
|
||||
overflow: hidden !important;
|
||||
scrollbar-width: none !important;
|
||||
-ms-overflow-style: none !important;
|
||||
}
|
||||
html::-webkit-scrollbar, body::-webkit-scrollbar, #app::-webkit-scrollbar,
|
||||
.main-content::-webkit-scrollbar, #main::-webkit-scrollbar, .content-section::-webkit-scrollbar,
|
||||
.main-content > .inner::-webkit-scrollbar, .section-content::-webkit-scrollbar,
|
||||
.history-container::-webkit-scrollbar {
|
||||
display: none !important;
|
||||
width: 0px !important;
|
||||
height: 0px !important;
|
||||
}
|
||||
/* Ensure table wrapper can scroll horizontally and vertically */
|
||||
.modern-table-wrapper {
|
||||
overflow-y: scroll !important;
|
||||
overflow-x: auto !important;
|
||||
}
|
||||
|
||||
/* Prevent text from wrapping in table cells */
|
||||
.modern-table td, .history-table td {
|
||||
white-space: nowrap !important;
|
||||
overflow: hidden !important;
|
||||
text-overflow: ellipsis !important;
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
|
||||
// Also apply inline styles to containers that might have scrollbars
|
||||
const outerContainers = document.querySelectorAll('#app, .main-content, body, #main, .main-content > .inner, .section-content');
|
||||
outerContainers.forEach(container => {
|
||||
if (container) {
|
||||
container.style.overflow = 'hidden';
|
||||
}
|
||||
});
|
||||
|
||||
// Force scrollbar to only appear on the table wrapper
|
||||
const tableWrapper = document.querySelector('.modern-table-wrapper');
|
||||
if (tableWrapper) {
|
||||
tableWrapper.style.overflowY = 'scroll';
|
||||
tableWrapper.style.overflowX = 'auto';
|
||||
|
||||
// Calculate and set dynamic height
|
||||
const updateTableHeight = function() {
|
||||
const headerHeight = document.querySelector('.section-header').offsetHeight || 0;
|
||||
const paginationHeight = document.querySelector('.pagination-controls').offsetHeight || 0;
|
||||
const windowHeight = window.innerHeight;
|
||||
const padding = 80; // Account for margins and paddings
|
||||
|
||||
// Dynamic calculation based on available space
|
||||
const availableHeight = windowHeight - headerHeight - paginationHeight - padding;
|
||||
tableWrapper.style.height = availableHeight + 'px';
|
||||
};
|
||||
|
||||
// Initial calculation
|
||||
updateTableHeight();
|
||||
|
||||
// Update on window resize
|
||||
window.addEventListener('resize', updateTableHeight);
|
||||
}
|
||||
};
|
||||
|
||||
// Run immediately for history page
|
||||
if (huntarrUI && huntarrUI.currentSection === 'history') {
|
||||
setTimeout(fixHistoryScrolling, 100);
|
||||
}
|
||||
|
||||
// Add event listener for section changes
|
||||
document.addEventListener('sectionChanged', function(e) {
|
||||
if (e.detail.section === 'history') {
|
||||
setTimeout(fixHistoryScrolling, 100);
|
||||
} else {
|
||||
// Restore normal scrolling when leaving history page
|
||||
const styleElement = document.getElementById('history-scrollbar-fix');
|
||||
if (styleElement) {
|
||||
styleElement.remove();
|
||||
}
|
||||
|
||||
// Also clear inline styles
|
||||
document.querySelectorAll('#app, .main-content, body, #main, .main-content > .inner, .section-content').forEach(container => {
|
||||
if (container) {
|
||||
container.style.overflow = '';
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Original function exists in history.js
|
||||
const originalRenderHistoryData = historyModule.renderHistoryData;
|
||||
|
||||
|
||||
@@ -38,6 +38,15 @@
|
||||
#logsSection {
|
||||
padding: 20px;
|
||||
padding-bottom: 60px; /* Extra padding to account for the footer */
|
||||
overflow: hidden; /* Prevent outer scrolling */
|
||||
display: none; /* Hide by default */
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Only show when active */
|
||||
#logsSection.active {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
@@ -255,6 +264,8 @@
|
||||
line-height: 1.5;
|
||||
font-size: 13px;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
-webkit-overflow-scrolling: touch; /* For smooth scrolling on iOS */
|
||||
padding-bottom: 70px; /* Extra padding at bottom to ensure content isn't cut off */
|
||||
}
|
||||
|
||||
.logs::-webkit-scrollbar {
|
||||
@@ -390,8 +401,16 @@
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
/* Mobile specific log container styling */
|
||||
.logs {
|
||||
height: calc(100vh - 280px);
|
||||
height: calc(100vh - 240px); /* Adjusted height for mobile */
|
||||
padding-bottom: 120px; /* Extra padding to ensure no content is hidden */
|
||||
margin-bottom: 60px; /* Space for mobile browser UI */
|
||||
}
|
||||
|
||||
/* Make space for fixed elements at bottom on mobile */
|
||||
#logsSection {
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
+1
-1
@@ -1 +1 @@
|
||||
6.2.25
|
||||
6.3.0
|
||||
|
||||
Reference in New Issue
Block a user