Files
proxmox-ve-install-scripts/Huntarr.io-6.3.6/frontend/templates/components/apps_section.html
T
2025-05-09 19:19:04 +02:00

234 lines
7.5 KiB
HTML

<section id="appsSection" class="content-section">
<div class="section-header">
<div class="log-dropdown">
<select id="appsAppSelect" class="styled-select">
<option value="sonarr">Sonarr</option>
<option value="radarr">Radarr</option>
<option value="lidarr">Lidarr</option>
<option value="readarr">Readarr</option>
<option value="whisparr">Whisparr V2</option>
<option value="eros">Whisparr V3</option>
<option value="swaparr">Swaparr</option>
<option value="cleanuperr">Cleanuperr</option>
</select>
</div>
<button id="saveAppsButton" class="save-button" disabled>
<i class="fas fa-save"></i> Save
</button>
</div>
<!-- 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 id="cleanuperrApps" class="app-apps-panel app-content-panel"></div>
</div>
</div>
</section>
<style>
/* 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;
position: absolute;
top: 100%;
left: 0;
min-width: 160px;
z-index: 100;
background: linear-gradient(135deg, rgba(22, 26, 34, 0.98), rgba(18, 22, 30, 0.95));
border-radius: 8px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
border: 1px solid rgba(90, 109, 137, 0.2);
margin-top: 5px;
transform: translateY(0);
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>