Merge pull request #373 from plexguide/dev

Dev
This commit is contained in:
Admin9705
2025-05-08 15:34:27 -04:00
committed by GitHub
5 changed files with 530 additions and 42 deletions
+88 -10
View File
@@ -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 */
+188 -15
View File
@@ -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
View File
@@ -1 +1 @@
6.2.25
6.3.0