mirror of
https://github.com/plexguide/Huntarr-Sonarr.git
synced 2025-12-16 20:04:16 -06:00
update
This commit is contained in:
Admin9705
@@ -13,10 +13,10 @@ const appsModule = {
|
||||
// DOM elements
|
||||
elements: {},
|
||||
|
||||
// Initialize the apps module
|
||||
init: function() {
|
||||
// Initialize the apps module for a specific app
|
||||
init: function(appType) {
|
||||
// Initialize state
|
||||
this.currentApp = null;
|
||||
this.currentApp = appType || null;
|
||||
this.settingsChanged = false; // Legacy flag (auto-save enabled)
|
||||
this.originalSettings = {}; // Store original settings to compare
|
||||
|
||||
@@ -38,8 +38,10 @@ const appsModule = {
|
||||
// Initialize state
|
||||
this.settingsChanged = false;
|
||||
|
||||
// Load apps for initial display
|
||||
this.loadApps();
|
||||
// Load the specific app if provided
|
||||
if (appType) {
|
||||
this.loadAppSettings(appType);
|
||||
}
|
||||
|
||||
// Auto-save enabled - no unsaved changes detection needed
|
||||
},
|
||||
@@ -49,88 +51,38 @@ const appsModule = {
|
||||
// Cache DOM elements
|
||||
cacheElements: function() {
|
||||
this.elements = {
|
||||
// Apps dropdown
|
||||
appsOptions: document.querySelectorAll('#appsSection .log-option'),
|
||||
currentAppsApp: document.getElementById('current-apps-app'),
|
||||
appsDropdownBtn: document.querySelector('#appsSection .log-dropdown-btn'),
|
||||
appsDropdownContent: document.querySelector('#appsSection .log-dropdown-content'),
|
||||
|
||||
// Apps panels
|
||||
// Apps panels - now individual sections
|
||||
appAppsPanels: document.querySelectorAll('.app-apps-panel'),
|
||||
|
||||
// Individual app sections
|
||||
sonarrSection: document.getElementById('sonarrSection'),
|
||||
radarrSection: document.getElementById('radarrSection'),
|
||||
lidarrSection: document.getElementById('lidarrSection'),
|
||||
readarrSection: document.getElementById('readarrSection'),
|
||||
whisparrSection: document.getElementById('whisparrSection'),
|
||||
erosSection: document.getElementById('erosSection'),
|
||||
|
||||
// Controls - auto-save enabled, no save button needed
|
||||
};
|
||||
},
|
||||
|
||||
// Set up event listeners
|
||||
setupEventListeners: function() {
|
||||
// App selection via <select>
|
||||
const appsAppSelect = document.getElementById('appsAppSelect');
|
||||
if (appsAppSelect) {
|
||||
appsAppSelect.addEventListener('change', (e) => {
|
||||
const app = e.target.value;
|
||||
this.handleAppsAppChange(app);
|
||||
});
|
||||
}
|
||||
|
||||
// Dropdown toggle
|
||||
if (this.elements.appsDropdownBtn) {
|
||||
this.elements.appsDropdownBtn.addEventListener('click', () => {
|
||||
this.elements.appsDropdownContent.classList.toggle('show');
|
||||
|
||||
// Close all other dropdowns
|
||||
document.querySelectorAll('.log-dropdown-content.show').forEach(dropdown => {
|
||||
if (dropdown !== this.elements.appsDropdownContent) {
|
||||
dropdown.classList.remove('show');
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Close dropdown when clicking outside
|
||||
document.addEventListener('click', e => {
|
||||
if (!e.target.matches('#appsSection .log-dropdown-btn') &&
|
||||
!e.target.closest('#appsSection .log-dropdown-btn')) {
|
||||
if (this.elements.appsDropdownContent && this.elements.appsDropdownContent.classList.contains('show')) {
|
||||
this.elements.appsDropdownContent.classList.remove('show');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// No dropdown needed anymore - apps have individual sections
|
||||
// Auto-save enabled - no save button needed
|
||||
},
|
||||
|
||||
// Load apps for initial display
|
||||
loadApps: function() {
|
||||
// Set default app if none is selected
|
||||
if (!this.currentApp) {
|
||||
this.currentApp = 'sonarr'; // Default to Sonarr
|
||||
|
||||
// Update the dropdown text to show current app
|
||||
if (this.elements.currentAppsApp) {
|
||||
this.elements.currentAppsApp.textContent = 'Sonarr';
|
||||
}
|
||||
|
||||
// Mark the sonarr option as active in the dropdown
|
||||
if (this.elements.appsOptions) {
|
||||
this.elements.appsOptions.forEach(option => {
|
||||
option.classList.remove('active');
|
||||
if (option.getAttribute('data-app') === 'sonarr') {
|
||||
option.classList.add('active');
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Load the currently selected app
|
||||
this.loadAppSettings(this.currentApp);
|
||||
// Load specific app settings
|
||||
loadApp: function(appType) {
|
||||
this.currentApp = appType;
|
||||
this.loadAppSettings(appType);
|
||||
},
|
||||
|
||||
// Load app settings
|
||||
loadAppSettings: function(app) {
|
||||
console.log(`[Apps] Loading settings for ${app}`);
|
||||
|
||||
// Get the container to put the settings in
|
||||
// Get the container to put the settings in - now using individual app sections
|
||||
const appPanel = document.getElementById(app + 'Apps');
|
||||
if (!appPanel) {
|
||||
console.error(`App panel not found for ${app}`);
|
||||
@@ -612,9 +564,5 @@ const appsModule = {
|
||||
}
|
||||
};
|
||||
|
||||
// Initialize when document is ready
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
appsModule.init();
|
||||
|
||||
// Auto-save enabled - no save button needed
|
||||
});
|
||||
// Apps module is now initialized per-app when navigating to individual app sections
|
||||
// No automatic initialization needed
|
||||
|
||||
@@ -141,6 +141,7 @@ let huntarrUI = {
|
||||
|
||||
// Setup navigation for sidebars
|
||||
this.setupRequestarrNavigation();
|
||||
this.setupAppsNavigation();
|
||||
this.setupSettingsNavigation();
|
||||
|
||||
// Auto-save enabled - no unsaved changes handler needed
|
||||
@@ -624,19 +625,106 @@ let huntarrUI = {
|
||||
|
||||
// Show history view
|
||||
this.showRequestarrView('history');
|
||||
} else if (section === 'apps' && document.getElementById('appsSection')) {
|
||||
document.getElementById('appsSection').classList.add('active');
|
||||
document.getElementById('appsSection').style.display = 'block';
|
||||
} else if (section === 'apps') {
|
||||
// Show Apps section with sidebar - similar to Settings
|
||||
const appsSection = document.getElementById('appsSection');
|
||||
if (appsSection) {
|
||||
appsSection.classList.add('active');
|
||||
appsSection.style.display = 'block';
|
||||
}
|
||||
if (document.getElementById('appsNav')) document.getElementById('appsNav').classList.add('active');
|
||||
newTitle = 'Apps';
|
||||
this.currentSection = 'apps';
|
||||
|
||||
// Show main sidebar for main sections and clear settings sidebar preference
|
||||
localStorage.removeItem('huntarr-settings-sidebar');
|
||||
this.showMainSidebar();
|
||||
// Switch to Apps sidebar
|
||||
this.showAppsSidebar();
|
||||
|
||||
// Load app connections when switching to Apps
|
||||
this.checkAppConnections();
|
||||
// Show message to select an app
|
||||
return;
|
||||
} else if (section === 'sonarr' && document.getElementById('sonarrSection')) {
|
||||
document.getElementById('sonarrSection').classList.add('active');
|
||||
document.getElementById('sonarrSection').style.display = 'block';
|
||||
if (document.getElementById('appsSonarrNav')) document.getElementById('appsSonarrNav').classList.add('active');
|
||||
newTitle = 'Sonarr';
|
||||
this.currentSection = 'sonarr';
|
||||
|
||||
// Switch to Apps sidebar
|
||||
this.showAppsSidebar();
|
||||
|
||||
// Initialize app module for sonarr
|
||||
if (typeof appsModule !== 'undefined') {
|
||||
appsModule.init('sonarr');
|
||||
}
|
||||
} else if (section === 'radarr' && document.getElementById('radarrSection')) {
|
||||
document.getElementById('radarrSection').classList.add('active');
|
||||
document.getElementById('radarrSection').style.display = 'block';
|
||||
if (document.getElementById('appsRadarrNav')) document.getElementById('appsRadarrNav').classList.add('active');
|
||||
newTitle = 'Radarr';
|
||||
this.currentSection = 'radarr';
|
||||
|
||||
// Switch to Apps sidebar
|
||||
this.showAppsSidebar();
|
||||
|
||||
// Initialize app module for radarr
|
||||
if (typeof appsModule !== 'undefined') {
|
||||
appsModule.init('radarr');
|
||||
}
|
||||
} else if (section === 'lidarr' && document.getElementById('lidarrSection')) {
|
||||
document.getElementById('lidarrSection').classList.add('active');
|
||||
document.getElementById('lidarrSection').style.display = 'block';
|
||||
if (document.getElementById('appsLidarrNav')) document.getElementById('appsLidarrNav').classList.add('active');
|
||||
newTitle = 'Lidarr';
|
||||
this.currentSection = 'lidarr';
|
||||
|
||||
// Switch to Apps sidebar
|
||||
this.showAppsSidebar();
|
||||
|
||||
// Initialize app module for lidarr
|
||||
if (typeof appsModule !== 'undefined') {
|
||||
appsModule.init('lidarr');
|
||||
}
|
||||
} else if (section === 'readarr' && document.getElementById('readarrSection')) {
|
||||
document.getElementById('readarrSection').classList.add('active');
|
||||
document.getElementById('readarrSection').style.display = 'block';
|
||||
if (document.getElementById('appsReadarrNav')) document.getElementById('appsReadarrNav').classList.add('active');
|
||||
newTitle = 'Readarr';
|
||||
this.currentSection = 'readarr';
|
||||
|
||||
// Switch to Apps sidebar
|
||||
this.showAppsSidebar();
|
||||
|
||||
// Initialize app module for readarr
|
||||
if (typeof appsModule !== 'undefined') {
|
||||
appsModule.init('readarr');
|
||||
}
|
||||
} else if (section === 'whisparr' && document.getElementById('whisparrSection')) {
|
||||
document.getElementById('whisparrSection').classList.add('active');
|
||||
document.getElementById('whisparrSection').style.display = 'block';
|
||||
if (document.getElementById('appsWhisparrNav')) document.getElementById('appsWhisparrNav').classList.add('active');
|
||||
newTitle = 'Whisparr V2';
|
||||
this.currentSection = 'whisparr';
|
||||
|
||||
// Switch to Apps sidebar
|
||||
this.showAppsSidebar();
|
||||
|
||||
// Initialize app module for whisparr
|
||||
if (typeof appsModule !== 'undefined') {
|
||||
appsModule.init('whisparr');
|
||||
}
|
||||
} else if (section === 'eros' && document.getElementById('erosSection')) {
|
||||
document.getElementById('erosSection').classList.add('active');
|
||||
document.getElementById('erosSection').style.display = 'block';
|
||||
if (document.getElementById('appsErosNav')) document.getElementById('appsErosNav').classList.add('active');
|
||||
newTitle = 'Whisparr V3';
|
||||
this.currentSection = 'eros';
|
||||
|
||||
// Switch to Apps sidebar
|
||||
this.showAppsSidebar();
|
||||
|
||||
// Initialize app module for eros
|
||||
if (typeof appsModule !== 'undefined') {
|
||||
appsModule.init('eros');
|
||||
}
|
||||
} else if (section === 'swaparr' && document.getElementById('swaparrSection')) {
|
||||
document.getElementById('swaparrSection').classList.add('active');
|
||||
document.getElementById('swaparrSection').style.display = 'block';
|
||||
@@ -4504,6 +4592,74 @@ let huntarrUI = {
|
||||
localStorage.removeItem('huntarr-settings-sidebar');
|
||||
},
|
||||
|
||||
showMainSidebar: function() {
|
||||
// Remove flash prevention style if it exists
|
||||
const flashPreventionStyle = document.getElementById('sidebar-flash-prevention');
|
||||
if (flashPreventionStyle) {
|
||||
flashPreventionStyle.remove();
|
||||
}
|
||||
|
||||
// Show main sidebar and hide others
|
||||
const mainSidebar = document.getElementById('sidebar');
|
||||
const requestarrSidebar = document.getElementById('requestarr-sidebar');
|
||||
const settingsSidebar = document.getElementById('settings-sidebar');
|
||||
const appsSidebar = document.getElementById('apps-sidebar');
|
||||
|
||||
if (mainSidebar) mainSidebar.style.display = 'block';
|
||||
if (requestarrSidebar) requestarrSidebar.style.display = 'none';
|
||||
if (settingsSidebar) settingsSidebar.style.display = 'none';
|
||||
if (appsSidebar) appsSidebar.style.display = 'none';
|
||||
|
||||
console.log('[huntarrUI] Main sidebar shown');
|
||||
|
||||
// Clear Settings sidebar preference when showing main sidebar
|
||||
localStorage.removeItem('huntarr-settings-sidebar');
|
||||
},
|
||||
|
||||
showRequestarrSidebar: function() {
|
||||
// Remove flash prevention style if it exists
|
||||
const flashPreventionStyle = document.getElementById('sidebar-flash-prevention');
|
||||
if (flashPreventionStyle) {
|
||||
flashPreventionStyle.remove();
|
||||
}
|
||||
|
||||
// Hide main sidebar and show requestarr sidebar
|
||||
const mainSidebar = document.getElementById('sidebar');
|
||||
const requestarrSidebar = document.getElementById('requestarr-sidebar');
|
||||
const settingsSidebar = document.getElementById('settings-sidebar');
|
||||
const appsSidebar = document.getElementById('apps-sidebar');
|
||||
|
||||
if (mainSidebar) mainSidebar.style.display = 'none';
|
||||
if (requestarrSidebar) requestarrSidebar.style.display = 'block';
|
||||
if (settingsSidebar) settingsSidebar.style.display = 'none';
|
||||
if (appsSidebar) appsSidebar.style.display = 'none';
|
||||
|
||||
// Update active states in Requestarr sidebar
|
||||
this.updateRequestarrSidebarActive();
|
||||
},
|
||||
|
||||
showAppsSidebar: function() {
|
||||
// Remove flash prevention style if it exists
|
||||
const flashPreventionStyle = document.getElementById('sidebar-flash-prevention');
|
||||
if (flashPreventionStyle) {
|
||||
flashPreventionStyle.remove();
|
||||
}
|
||||
|
||||
// Hide main sidebar and show apps sidebar
|
||||
const mainSidebar = document.getElementById('sidebar');
|
||||
const requestarrSidebar = document.getElementById('requestarr-sidebar');
|
||||
const settingsSidebar = document.getElementById('settings-sidebar');
|
||||
const appsSidebar = document.getElementById('apps-sidebar');
|
||||
|
||||
if (mainSidebar) mainSidebar.style.display = 'none';
|
||||
if (requestarrSidebar) requestarrSidebar.style.display = 'none';
|
||||
if (settingsSidebar) settingsSidebar.style.display = 'none';
|
||||
if (appsSidebar) appsSidebar.style.display = 'block';
|
||||
|
||||
// Update active states in Apps sidebar
|
||||
this.updateAppsSidebarActive();
|
||||
},
|
||||
|
||||
showSettingsSidebar: function() {
|
||||
// Remove flash prevention style if it exists
|
||||
const flashPreventionStyle = document.getElementById('sidebar-flash-prevention');
|
||||
@@ -4515,9 +4671,11 @@ let huntarrUI = {
|
||||
const mainSidebar = document.getElementById('sidebar');
|
||||
const requestarrSidebar = document.getElementById('requestarr-sidebar');
|
||||
const settingsSidebar = document.getElementById('settings-sidebar');
|
||||
const appsSidebar = document.getElementById('apps-sidebar');
|
||||
|
||||
if (mainSidebar) mainSidebar.style.display = 'none';
|
||||
if (requestarrSidebar) requestarrSidebar.style.display = 'none';
|
||||
if (appsSidebar) appsSidebar.style.display = 'none';
|
||||
if (settingsSidebar) settingsSidebar.style.display = 'block';
|
||||
|
||||
// Update active states in Settings sidebar
|
||||
@@ -4583,6 +4741,33 @@ let huntarrUI = {
|
||||
}
|
||||
},
|
||||
|
||||
updateAppsSidebarActive: function() {
|
||||
// Remove active from all Apps nav items
|
||||
const appsNavItems = document.querySelectorAll('#apps-sidebar .nav-item');
|
||||
appsNavItems.forEach(item => item.classList.remove('active'));
|
||||
|
||||
// Set appropriate active state based on current section
|
||||
if (this.currentSection === 'sonarr') {
|
||||
const sonarrNav = document.getElementById('appsSonarrNav');
|
||||
if (sonarrNav) sonarrNav.classList.add('active');
|
||||
} else if (this.currentSection === 'radarr') {
|
||||
const radarrNav = document.getElementById('appsRadarrNav');
|
||||
if (radarrNav) radarrNav.classList.add('active');
|
||||
} else if (this.currentSection === 'lidarr') {
|
||||
const lidarrNav = document.getElementById('appsLidarrNav');
|
||||
if (lidarrNav) lidarrNav.classList.add('active');
|
||||
} else if (this.currentSection === 'readarr') {
|
||||
const readarrNav = document.getElementById('appsReadarrNav');
|
||||
if (readarrNav) readarrNav.classList.add('active');
|
||||
} else if (this.currentSection === 'whisparr') {
|
||||
const whisparrNav = document.getElementById('appsWhisparrNav');
|
||||
if (whisparrNav) whisparrNav.classList.add('active');
|
||||
} else if (this.currentSection === 'eros') {
|
||||
const erosNav = document.getElementById('appsErosNav');
|
||||
if (erosNav) erosNav.classList.add('active');
|
||||
}
|
||||
},
|
||||
|
||||
updateSettingsSidebarActive: function() {
|
||||
// Remove active from all Settings nav items
|
||||
const settingsNavItems = document.querySelectorAll('#settings-sidebar .nav-item');
|
||||
@@ -4604,6 +4789,71 @@ let huntarrUI = {
|
||||
}
|
||||
},
|
||||
|
||||
setupAppsNavigation: function() {
|
||||
// Return button - goes back to main Huntarr
|
||||
const returnNav = document.getElementById('appsReturnNav');
|
||||
if (returnNav) {
|
||||
returnNav.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
window.location.hash = '#home';
|
||||
});
|
||||
}
|
||||
|
||||
// Sonarr button
|
||||
const sonarrNav = document.getElementById('appsSonarrNav');
|
||||
if (sonarrNav) {
|
||||
sonarrNav.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
window.location.hash = '#sonarr';
|
||||
});
|
||||
}
|
||||
|
||||
// Radarr button
|
||||
const radarrNav = document.getElementById('appsRadarrNav');
|
||||
if (radarrNav) {
|
||||
radarrNav.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
window.location.hash = '#radarr';
|
||||
});
|
||||
}
|
||||
|
||||
// Lidarr button
|
||||
const lidarrNav = document.getElementById('appsLidarrNav');
|
||||
if (lidarrNav) {
|
||||
lidarrNav.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
window.location.hash = '#lidarr';
|
||||
});
|
||||
}
|
||||
|
||||
// Readarr button
|
||||
const readarrNav = document.getElementById('appsReadarrNav');
|
||||
if (readarrNav) {
|
||||
readarrNav.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
window.location.hash = '#readarr';
|
||||
});
|
||||
}
|
||||
|
||||
// Whisparr button
|
||||
const whisparrNav = document.getElementById('appsWhisparrNav');
|
||||
if (whisparrNav) {
|
||||
whisparrNav.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
window.location.hash = '#whisparr';
|
||||
});
|
||||
}
|
||||
|
||||
// Eros button
|
||||
const erosNav = document.getElementById('appsErosNav');
|
||||
if (erosNav) {
|
||||
erosNav.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
window.location.hash = '#eros';
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
setupSettingsNavigation: function() {
|
||||
// Return button - goes back to main Huntarr
|
||||
const returnNav = document.getElementById('settingsReturnNav');
|
||||
|
||||
@@ -110,46 +110,190 @@
|
||||
</style>
|
||||
<section id="appsSection" class="content-section">
|
||||
<div class="section-header">
|
||||
<div class="apps-app-filter">
|
||||
<label for="appsAppSelect">
|
||||
<i class="fas fa-layer-group"></i>
|
||||
<span>App:</span>
|
||||
</label>
|
||||
<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>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Auto-save enabled - save button removed -->
|
||||
<h2>Apps</h2>
|
||||
<p>Select an app from the sidebar to configure its settings.</p>
|
||||
</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 class="apps-overview">
|
||||
<div class="apps-grid">
|
||||
<div class="app-card" onclick="window.location.hash = '#sonarr'">
|
||||
<div class="app-icon">
|
||||
<i class="fas fa-tv"></i>
|
||||
</div>
|
||||
<h3>Sonarr</h3>
|
||||
<p>TV Series Management</p>
|
||||
</div>
|
||||
|
||||
<div class="app-card" onclick="window.location.hash = '#radarr'">
|
||||
<div class="app-icon">
|
||||
<i class="fas fa-film"></i>
|
||||
</div>
|
||||
<h3>Radarr</h3>
|
||||
<p>Movie Management</p>
|
||||
</div>
|
||||
|
||||
<div class="app-card" onclick="window.location.hash = '#lidarr'">
|
||||
<div class="app-icon">
|
||||
<i class="fas fa-music"></i>
|
||||
</div>
|
||||
<h3>Lidarr</h3>
|
||||
<p>Music Management</p>
|
||||
</div>
|
||||
|
||||
<div class="app-card" onclick="window.location.hash = '#readarr'">
|
||||
<div class="app-icon">
|
||||
<i class="fas fa-book"></i>
|
||||
</div>
|
||||
<h3>Readarr</h3>
|
||||
<p>Book Management</p>
|
||||
</div>
|
||||
|
||||
<div class="app-card" onclick="window.location.hash = '#whisparr'">
|
||||
<div class="app-icon">
|
||||
<i class="fas fa-heart"></i>
|
||||
</div>
|
||||
<h3>Whisparr V2</h3>
|
||||
<p>Adult Content Management</p>
|
||||
</div>
|
||||
|
||||
<div class="app-card" onclick="window.location.hash = '#eros'">
|
||||
<div class="app-icon">
|
||||
<i class="fas fa-fire"></i>
|
||||
</div>
|
||||
<h3>Whisparr V3</h3>
|
||||
<p>Adult Content Management (V3)</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
#appsSection {
|
||||
display: none;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
#appsSection.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
margin-bottom: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.section-header h2 {
|
||||
color: #fff;
|
||||
font-size: 28px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.section-header p {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.apps-overview {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.apps-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 20px;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.app-card {
|
||||
background: linear-gradient(135deg, rgba(30, 39, 56, 0.8) 0%, rgba(14, 20, 32, 0.8) 100%);
|
||||
border: 1px solid rgba(90, 109, 137, 0.3);
|
||||
border-radius: 12px;
|
||||
padding: 30px 20px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.app-card:hover {
|
||||
transform: translateY(-5px);
|
||||
border-color: rgba(52, 152, 219, 0.6);
|
||||
box-shadow: 0 10px 25px rgba(52, 152, 219, 0.2);
|
||||
background: linear-gradient(135deg, rgba(40, 49, 66, 0.9) 0%, rgba(24, 30, 42, 0.9) 100%);
|
||||
}
|
||||
|
||||
.app-icon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
margin: 0 auto 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, rgba(52, 152, 219, 0.2) 0%, rgba(155, 89, 182, 0.2) 100%);
|
||||
border-radius: 50%;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.app-card:hover .app-icon {
|
||||
background: linear-gradient(135deg, rgba(52, 152, 219, 0.4) 0%, rgba(155, 89, 182, 0.4) 100%);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.app-icon i {
|
||||
font-size: 24px;
|
||||
color: rgba(52, 152, 219, 0.9);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.app-card:hover .app-icon i {
|
||||
color: #fff;
|
||||
text-shadow: 0 0 10px rgba(52, 152, 219, 0.5);
|
||||
}
|
||||
|
||||
.app-card h3 {
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 10px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.app-card:hover h3 {
|
||||
color: rgba(52, 152, 219, 0.9);
|
||||
}
|
||||
|
||||
.app-card p {
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.app-card:hover p {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.apps-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 15px;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.app-card {
|
||||
padding: 20px 15px;
|
||||
}
|
||||
|
||||
.section-header h2 {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
/* Apps Section Layout - Complete Redesign */
|
||||
/* Remove unwanted background behind app headers */
|
||||
|
||||
86
frontend/templates/components/eros_section.html
Normal file
86
frontend/templates/components/eros_section.html
Normal file
@@ -0,0 +1,86 @@
|
||||
<section id="erosSection" class="content-section">
|
||||
<div class="section-header">
|
||||
<h2>Whisparr V3 (Eros) Settings</h2>
|
||||
<!-- Auto-save enabled - save button removed -->
|
||||
</div>
|
||||
|
||||
<!-- Single scrollable container for all content -->
|
||||
<div class="single-scroll-container">
|
||||
<div id="erosContainer" class="app-container">
|
||||
<!-- Settings content will be shown here -->
|
||||
</div>
|
||||
|
||||
<div id="erosStatus" class="app-status"></div>
|
||||
|
||||
<!-- App panel -->
|
||||
<div class="app-panels-container">
|
||||
<div id="erosApps" class="app-apps-panel app-content-panel active" style="display: block;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
/* Eros Section Layout */
|
||||
#erosSection {
|
||||
display: none;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
overflow: hidden;
|
||||
padding-bottom: 60px;
|
||||
}
|
||||
|
||||
#erosSection.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Single scroll container - ONLY this element should scroll */
|
||||
#erosSection .single-scroll-container {
|
||||
display: block;
|
||||
width: 100%;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
padding-bottom: 100px;
|
||||
min-height: 100%;
|
||||
height: auto;
|
||||
max-height: unset;
|
||||
scrollbar-width: thin;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* App container styling */
|
||||
#erosContainer {
|
||||
height: auto;
|
||||
flex: 1;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/* Panel styling */
|
||||
#erosSection .app-apps-panel {
|
||||
padding-bottom: 10px;
|
||||
min-height: 0;
|
||||
height: auto;
|
||||
background-color: transparent !important;
|
||||
box-shadow: none !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
/* Ensure bottom content is visible */
|
||||
#erosApps {
|
||||
padding-bottom: 150px;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
/* Section header styling */
|
||||
#erosSection .section-header {
|
||||
padding: 20px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
#erosSection .section-header h2 {
|
||||
margin: 0;
|
||||
color: #fff;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
}
|
||||
</style>
|
||||
86
frontend/templates/components/lidarr_section.html
Normal file
86
frontend/templates/components/lidarr_section.html
Normal file
@@ -0,0 +1,86 @@
|
||||
<section id="lidarrSection" class="content-section">
|
||||
<div class="section-header">
|
||||
<h2>Lidarr Settings</h2>
|
||||
<!-- Auto-save enabled - save button removed -->
|
||||
</div>
|
||||
|
||||
<!-- Single scrollable container for all content -->
|
||||
<div class="single-scroll-container">
|
||||
<div id="lidarrContainer" class="app-container">
|
||||
<!-- Settings content will be shown here -->
|
||||
</div>
|
||||
|
||||
<div id="lidarrStatus" class="app-status"></div>
|
||||
|
||||
<!-- App panel -->
|
||||
<div class="app-panels-container">
|
||||
<div id="lidarrApps" class="app-apps-panel app-content-panel active" style="display: block;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
/* Lidarr Section Layout */
|
||||
#lidarrSection {
|
||||
display: none;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
overflow: hidden;
|
||||
padding-bottom: 60px;
|
||||
}
|
||||
|
||||
#lidarrSection.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Single scroll container - ONLY this element should scroll */
|
||||
#lidarrSection .single-scroll-container {
|
||||
display: block;
|
||||
width: 100%;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
padding-bottom: 100px;
|
||||
min-height: 100%;
|
||||
height: auto;
|
||||
max-height: unset;
|
||||
scrollbar-width: thin;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* App container styling */
|
||||
#lidarrContainer {
|
||||
height: auto;
|
||||
flex: 1;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/* Panel styling */
|
||||
#lidarrSection .app-apps-panel {
|
||||
padding-bottom: 10px;
|
||||
min-height: 0;
|
||||
height: auto;
|
||||
background-color: transparent !important;
|
||||
box-shadow: none !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
/* Ensure bottom content is visible */
|
||||
#lidarrApps {
|
||||
padding-bottom: 150px;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
/* Section header styling */
|
||||
#lidarrSection .section-header {
|
||||
padding: 20px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
#lidarrSection .section-header h2 {
|
||||
margin: 0;
|
||||
color: #fff;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
}
|
||||
</style>
|
||||
86
frontend/templates/components/radarr_section.html
Normal file
86
frontend/templates/components/radarr_section.html
Normal file
@@ -0,0 +1,86 @@
|
||||
<section id="radarrSection" class="content-section">
|
||||
<div class="section-header">
|
||||
<h2>Radarr Settings</h2>
|
||||
<!-- Auto-save enabled - save button removed -->
|
||||
</div>
|
||||
|
||||
<!-- Single scrollable container for all content -->
|
||||
<div class="single-scroll-container">
|
||||
<div id="radarrContainer" class="app-container">
|
||||
<!-- Settings content will be shown here -->
|
||||
</div>
|
||||
|
||||
<div id="radarrStatus" class="app-status"></div>
|
||||
|
||||
<!-- App panel -->
|
||||
<div class="app-panels-container">
|
||||
<div id="radarrApps" class="app-apps-panel app-content-panel active" style="display: block;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
/* Radarr Section Layout */
|
||||
#radarrSection {
|
||||
display: none;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
overflow: hidden;
|
||||
padding-bottom: 60px;
|
||||
}
|
||||
|
||||
#radarrSection.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Single scroll container - ONLY this element should scroll */
|
||||
#radarrSection .single-scroll-container {
|
||||
display: block;
|
||||
width: 100%;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
padding-bottom: 100px;
|
||||
min-height: 100%;
|
||||
height: auto;
|
||||
max-height: unset;
|
||||
scrollbar-width: thin;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* App container styling */
|
||||
#radarrContainer {
|
||||
height: auto;
|
||||
flex: 1;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/* Panel styling */
|
||||
#radarrSection .app-apps-panel {
|
||||
padding-bottom: 10px;
|
||||
min-height: 0;
|
||||
height: auto;
|
||||
background-color: transparent !important;
|
||||
box-shadow: none !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
/* Ensure bottom content is visible */
|
||||
#radarrApps {
|
||||
padding-bottom: 150px;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
/* Section header styling */
|
||||
#radarrSection .section-header {
|
||||
padding: 20px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
#radarrSection .section-header h2 {
|
||||
margin: 0;
|
||||
color: #fff;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
}
|
||||
</style>
|
||||
86
frontend/templates/components/readarr_section.html
Normal file
86
frontend/templates/components/readarr_section.html
Normal file
@@ -0,0 +1,86 @@
|
||||
<section id="readarrSection" class="content-section">
|
||||
<div class="section-header">
|
||||
<h2>Readarr Settings</h2>
|
||||
<!-- Auto-save enabled - save button removed -->
|
||||
</div>
|
||||
|
||||
<!-- Single scrollable container for all content -->
|
||||
<div class="single-scroll-container">
|
||||
<div id="readarrContainer" class="app-container">
|
||||
<!-- Settings content will be shown here -->
|
||||
</div>
|
||||
|
||||
<div id="readarrStatus" class="app-status"></div>
|
||||
|
||||
<!-- App panel -->
|
||||
<div class="app-panels-container">
|
||||
<div id="readarrApps" class="app-apps-panel app-content-panel active" style="display: block;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
/* Readarr Section Layout */
|
||||
#readarrSection {
|
||||
display: none;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
overflow: hidden;
|
||||
padding-bottom: 60px;
|
||||
}
|
||||
|
||||
#readarrSection.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Single scroll container - ONLY this element should scroll */
|
||||
#readarrSection .single-scroll-container {
|
||||
display: block;
|
||||
width: 100%;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
padding-bottom: 100px;
|
||||
min-height: 100%;
|
||||
height: auto;
|
||||
max-height: unset;
|
||||
scrollbar-width: thin;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* App container styling */
|
||||
#readarrContainer {
|
||||
height: auto;
|
||||
flex: 1;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/* Panel styling */
|
||||
#readarrSection .app-apps-panel {
|
||||
padding-bottom: 10px;
|
||||
min-height: 0;
|
||||
height: auto;
|
||||
background-color: transparent !important;
|
||||
box-shadow: none !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
/* Ensure bottom content is visible */
|
||||
#readarrApps {
|
||||
padding-bottom: 150px;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
/* Section header styling */
|
||||
#readarrSection .section-header {
|
||||
padding: 20px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
#readarrSection .section-header h2 {
|
||||
margin: 0;
|
||||
color: #fff;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
}
|
||||
</style>
|
||||
@@ -1,16 +1,18 @@
|
||||
<div class="sidebar" id="sidebar">
|
||||
<div class="sidebar-top-line"></div>
|
||||
<div class="logo-container">
|
||||
<a href="https://huntarr.io" target="_blank" rel="noopener noreferrer" style="display: flex; align-items: center; text-decoration: none; color: inherit;">
|
||||
<a href="https://huntarr.io" target="_blank" rel="noopener noreferrer"
|
||||
style="display: flex; align-items: center; text-decoration: none; color: inherit;">
|
||||
<img src="./static/logo/256.png" alt="Huntarr Logo" class="logo logo-large">
|
||||
<img src="./static/logo/32.png" alt="Huntarr Logo" class="logo logo-small">
|
||||
<h1>Huntarr</h1>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
<nav class="nav-menu">
|
||||
<!-- Project Sponsors Link -->
|
||||
<a href="https://plexguide.github.io/Huntarr.io/donate.html" class="nav-item" target="_blank" rel="noopener noreferrer">
|
||||
<a href="https://plexguide.github.io/Huntarr.io/donate.html" class="nav-item" target="_blank"
|
||||
rel="noopener noreferrer">
|
||||
<div class="nav-icon-wrapper heart-icon">
|
||||
<i class="fas fa-heart"></i>
|
||||
</div>
|
||||
@@ -44,7 +46,7 @@
|
||||
<span>Requestarr</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Features Group -->
|
||||
<div class="nav-group">
|
||||
<div class="nav-group-title">Features</div>
|
||||
@@ -68,15 +70,16 @@
|
||||
<span>Settings</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Resources Group -->
|
||||
<div class="nav-group">
|
||||
<div class="nav-group-title">Resources</div>
|
||||
<a href="https://github.com/plexguide/Unraid_Intel-ARC_Deployment" class="nav-item" target="_blank" rel="noopener noreferrer">
|
||||
<a href="https://github.com/plexguide/Unraid_Intel-ARC_Deployment" class="nav-item" target="_blank"
|
||||
rel="noopener noreferrer">
|
||||
<div class="nav-icon-wrapper">
|
||||
<i class="fas fa-film"></i>
|
||||
</div>
|
||||
<span>My AV1 Guide</span>
|
||||
<span>My AV1 Guide</span>
|
||||
</a>
|
||||
<a href="https://github.com/flmorg/cleanuperr" class="nav-item" target="_blank" rel="noopener noreferrer">
|
||||
<div class="nav-icon-wrapper">
|
||||
@@ -105,22 +108,24 @@
|
||||
<div class="sidebar requestarr-sidebar" id="requestarr-sidebar" style="display: none;">
|
||||
<div class="sidebar-top-line"></div>
|
||||
<div class="logo-container">
|
||||
<a href="https://huntarr.io" target="_blank" rel="noopener noreferrer" style="display: flex; align-items: center; text-decoration: none; color: inherit;">
|
||||
<a href="https://huntarr.io" target="_blank" rel="noopener noreferrer"
|
||||
style="display: flex; align-items: center; text-decoration: none; color: inherit;">
|
||||
<img src="./static/logo/256.png" alt="Huntarr Logo" class="logo logo-large">
|
||||
<img src="./static/logo/32.png" alt="Huntarr Logo" class="logo logo-small">
|
||||
<h1>Huntarr</h1>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
<nav class="nav-menu">
|
||||
<!-- Project Sponsors Link -->
|
||||
<a href="https://plexguide.github.io/Huntarr.io/donate.html" class="nav-item" target="_blank" rel="noopener noreferrer">
|
||||
<a href="https://plexguide.github.io/Huntarr.io/donate.html" class="nav-item" target="_blank"
|
||||
rel="noopener noreferrer">
|
||||
<div class="nav-icon-wrapper heart-icon">
|
||||
<i class="fas fa-heart"></i>
|
||||
</div>
|
||||
<span>Become A Sponsor</span>
|
||||
</a>
|
||||
|
||||
|
||||
<!-- Huntarr Navigation Group -->
|
||||
<div class="nav-group" style="margin-top: -10px;">
|
||||
<div class="nav-group-title">Huntarr</div>
|
||||
@@ -131,7 +136,7 @@
|
||||
<span>Return</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Requestarr Group -->
|
||||
<div class="nav-group">
|
||||
<div class="nav-group-title">Requestarr</div>
|
||||
@@ -151,26 +156,104 @@
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<!-- Settings Sidebar -->
|
||||
<div class="sidebar settings-sidebar" id="settings-sidebar" style="display: none;">
|
||||
<!-- Apps Sidebar -->
|
||||
<div class="sidebar apps-sidebar" id="apps-sidebar" style="display: none;">
|
||||
<div class="sidebar-top-line"></div>
|
||||
<div class="logo-container">
|
||||
<a href="https://huntarr.io" target="_blank" rel="noopener noreferrer" style="display: flex; align-items: center; text-decoration: none; color: inherit;">
|
||||
<a href="https://huntarr.io" target="_blank" rel="noopener noreferrer"
|
||||
style="display: flex; align-items: center; text-decoration: none; color: inherit;">
|
||||
<img src="./static/logo/256.png" alt="Huntarr Logo" class="logo logo-large">
|
||||
<img src="./static/logo/32.png" alt="Huntarr Logo" class="logo logo-small">
|
||||
<h1>Huntarr</h1>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
<nav class="nav-menu">
|
||||
<!-- Project Sponsors Link -->
|
||||
<a href="https://plexguide.github.io/Huntarr.io/donate.html" class="nav-item" target="_blank" rel="noopener noreferrer">
|
||||
<a href="https://plexguide.github.io/Huntarr.io/donate.html" class="nav-item" target="_blank"
|
||||
rel="noopener noreferrer">
|
||||
<div class="nav-icon-wrapper heart-icon">
|
||||
<i class="fas fa-heart"></i>
|
||||
</div>
|
||||
<span>Become A Sponsor</span>
|
||||
</a>
|
||||
|
||||
|
||||
<!-- Huntarr Navigation Group -->
|
||||
<div class="nav-group" style="margin-top: -10px;">
|
||||
<div class="nav-group-title">Huntarr</div>
|
||||
<a href="./" class="nav-item" id="appsReturnNav">
|
||||
<div class="nav-icon-wrapper">
|
||||
<i class="fas fa-arrow-left"></i>
|
||||
</div>
|
||||
<span>Return</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Apps Group -->
|
||||
<div class="nav-group">
|
||||
<div class="nav-group-title">Apps</div>
|
||||
<a href="./#sonarr" class="nav-item" id="appsSonarrNav">
|
||||
<div class="nav-icon-wrapper">
|
||||
<i class="fas fa-tv"></i>
|
||||
</div>
|
||||
<span>Sonarr</span>
|
||||
</a>
|
||||
<a href="./#radarr" class="nav-item" id="appsRadarrNav">
|
||||
<div class="nav-icon-wrapper">
|
||||
<i class="fas fa-film"></i>
|
||||
</div>
|
||||
<span>Radarr</span>
|
||||
</a>
|
||||
<a href="./#lidarr" class="nav-item" id="appsLidarrNav">
|
||||
<div class="nav-icon-wrapper">
|
||||
<i class="fas fa-music"></i>
|
||||
</div>
|
||||
<span>Lidarr</span>
|
||||
</a>
|
||||
<a href="./#readarr" class="nav-item" id="appsReadarrNav">
|
||||
<div class="nav-icon-wrapper">
|
||||
<i class="fas fa-book"></i>
|
||||
</div>
|
||||
<span>Readarr</span>
|
||||
</a>
|
||||
<a href="./#whisparr" class="nav-item" id="appsWhisparrNav">
|
||||
<div class="nav-icon-wrapper">
|
||||
<i class="fas fa-heart"></i>
|
||||
</div>
|
||||
<span>Whisparr V2</span>
|
||||
</a>
|
||||
<a href="./#eros" class="nav-item" id="appsErosNav">
|
||||
<div class="nav-icon-wrapper">
|
||||
<i class="fas fa-fire"></i>
|
||||
</div>
|
||||
<span>Whisparr V3</span>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<!-- Settings Sidebar -->
|
||||
<div class="sidebar settings-sidebar" id="settings-sidebar" style="display: none;">
|
||||
<div class="sidebar-top-line"></div>
|
||||
<div class="logo-container">
|
||||
<a href="https://huntarr.io" target="_blank" rel="noopener noreferrer"
|
||||
style="display: flex; align-items: center; text-decoration: none; color: inherit;">
|
||||
<img src="./static/logo/256.png" alt="Huntarr Logo" class="logo logo-large">
|
||||
<img src="./static/logo/32.png" alt="Huntarr Logo" class="logo logo-small">
|
||||
<h1>Huntarr</h1>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<nav class="nav-menu">
|
||||
<!-- Project Sponsors Link -->
|
||||
<a href="https://plexguide.github.io/Huntarr.io/donate.html" class="nav-item" target="_blank"
|
||||
rel="noopener noreferrer">
|
||||
<div class="nav-icon-wrapper heart-icon">
|
||||
<i class="fas fa-heart"></i>
|
||||
</div>
|
||||
<span>Become A Sponsor</span>
|
||||
</a>
|
||||
|
||||
<!-- Huntarr Navigation Group -->
|
||||
<div class="nav-group" style="margin-top: -10px;">
|
||||
<div class="nav-group-title">Huntarr</div>
|
||||
@@ -181,7 +264,7 @@
|
||||
<span>Return</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Settings Group -->
|
||||
<div class="nav-group">
|
||||
<div class="nav-group-title">Settings</div>
|
||||
@@ -225,18 +308,19 @@
|
||||
color: #e74c3c;
|
||||
animation: pulse-heart 1.5s infinite alternate;
|
||||
}
|
||||
|
||||
|
||||
@keyframes pulse-heart {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1.2);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.sidebar {
|
||||
width: 250px;
|
||||
height: 100vh;
|
||||
@@ -253,9 +337,10 @@
|
||||
transition: all 0.3s ease;
|
||||
/* Add subtle texture overlay */
|
||||
position: relative;
|
||||
backdrop-filter: blur(5px); /* Add subtle blur for depth */
|
||||
backdrop-filter: blur(5px);
|
||||
/* Add subtle blur for depth */
|
||||
}
|
||||
|
||||
|
||||
/* Add horizontal line at the top of the sidebar */
|
||||
.sidebar-top-line {
|
||||
content: '';
|
||||
@@ -264,11 +349,13 @@
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, rgba(52, 152, 219, 0.6), rgba(155, 89, 182, 0.6)); /* Sonarr blue to Whisparr purple */
|
||||
background: linear-gradient(90deg, rgba(52, 152, 219, 0.6), rgba(155, 89, 182, 0.6));
|
||||
/* Sonarr blue to Whisparr purple */
|
||||
z-index: 2;
|
||||
box-shadow: 0 0 8px rgba(52, 152, 219, 0.4); /* Add subtle glow */
|
||||
box-shadow: 0 0 8px rgba(52, 152, 219, 0.4);
|
||||
/* Add subtle glow */
|
||||
}
|
||||
|
||||
|
||||
/* Add vertical color line to right edge of sidebar */
|
||||
.sidebar::after {
|
||||
content: '';
|
||||
@@ -277,11 +364,12 @@
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 1px;
|
||||
background: linear-gradient(to bottom, rgba(52, 152, 219, 0.6), rgba(155, 89, 182, 0.6)); /* Sonarr blue to Whisparr purple */
|
||||
background: linear-gradient(to bottom, rgba(52, 152, 219, 0.6), rgba(155, 89, 182, 0.6));
|
||||
/* Sonarr blue to Whisparr purple */
|
||||
z-index: 2;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
|
||||
/* Add matching vertical color line to left edge of sidebar */
|
||||
.sidebar::before {
|
||||
content: '';
|
||||
@@ -290,10 +378,11 @@
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 1px;
|
||||
background: linear-gradient(to bottom, rgba(52, 152, 219, 0.6), rgba(155, 89, 182, 0.6)); /* Sonarr blue to Whisparr purple */
|
||||
background: linear-gradient(to bottom, rgba(52, 152, 219, 0.6), rgba(155, 89, 182, 0.6));
|
||||
/* Sonarr blue to Whisparr purple */
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
|
||||
.logo-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -302,7 +391,7 @@
|
||||
margin-bottom: -12px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
/* Improve logo container with subtle background */
|
||||
.logo-container::after {
|
||||
content: '';
|
||||
@@ -311,35 +400,73 @@
|
||||
right: 10px;
|
||||
bottom: 0;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg,
|
||||
rgba(255, 255, 255, 0.01),
|
||||
rgba(255, 255, 255, 0.1),
|
||||
rgba(255, 255, 255, 0.01)
|
||||
);
|
||||
background: linear-gradient(90deg,
|
||||
rgba(255, 255, 255, 0.01),
|
||||
rgba(255, 255, 255, 0.1),
|
||||
rgba(255, 255, 255, 0.01));
|
||||
}
|
||||
|
||||
|
||||
/* Remove the line under logo by setting this to empty */
|
||||
.logo-container::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
/* Define logo glowing animation */
|
||||
@keyframes logo-glow {
|
||||
0% { box-shadow: 0 0 15px #3498db, 0 0 5px rgba(52, 152, 219, 0.4); } /* Sonarr blue */
|
||||
20% { box-shadow: 0 0 15px #f1c40f, 0 0 5px rgba(241, 196, 15, 0.4); } /* Radarr yellow */
|
||||
40% { box-shadow: 0 0 15px #2ecc71, 0 0 5px rgba(46, 204, 113, 0.4); } /* Lidarr green */
|
||||
60% { box-shadow: 0 0 15px #e74c3c, 0 0 5px rgba(231, 76, 60, 0.4); } /* Readarr red */
|
||||
80% { box-shadow: 0 0 15px #9b59b6, 0 0 5px rgba(155, 89, 182, 0.4); } /* Whisparr purple */
|
||||
100% { box-shadow: 0 0 15px #3498db, 0 0 5px rgba(52, 152, 219, 0.4); } /* Back to Sonarr blue */
|
||||
0% {
|
||||
box-shadow: 0 0 15px #3498db, 0 0 5px rgba(52, 152, 219, 0.4);
|
||||
}
|
||||
|
||||
/* Sonarr blue */
|
||||
20% {
|
||||
box-shadow: 0 0 15px #f1c40f, 0 0 5px rgba(241, 196, 15, 0.4);
|
||||
}
|
||||
|
||||
/* Radarr yellow */
|
||||
40% {
|
||||
box-shadow: 0 0 15px #2ecc71, 0 0 5px rgba(46, 204, 113, 0.4);
|
||||
}
|
||||
|
||||
/* Lidarr green */
|
||||
60% {
|
||||
box-shadow: 0 0 15px #e74c3c, 0 0 5px rgba(231, 76, 60, 0.4);
|
||||
}
|
||||
|
||||
/* Readarr red */
|
||||
80% {
|
||||
box-shadow: 0 0 15px #9b59b6, 0 0 5px rgba(155, 89, 182, 0.4);
|
||||
}
|
||||
|
||||
/* Whisparr purple */
|
||||
100% {
|
||||
box-shadow: 0 0 15px #3498db, 0 0 5px rgba(52, 152, 219, 0.4);
|
||||
}
|
||||
|
||||
/* Back to Sonarr blue */
|
||||
}
|
||||
|
||||
|
||||
/* Define heart icon pulsing animation */
|
||||
@keyframes heart-pulse {
|
||||
0% { color: #ff4d6d; text-shadow: 0 0 10px #ff4d6d, 0 0 20px #ff4d6d; } /* Pink */
|
||||
50% { color: #ff0a33; text-shadow: 0 0 15px #ff0a33, 0 0 25px #ff0a33; } /* Red */
|
||||
100% { color: #ff4d6d; text-shadow: 0 0 10px #ff4d6d, 0 0 20px #ff4d6d; } /* Pink */
|
||||
0% {
|
||||
color: #ff4d6d;
|
||||
text-shadow: 0 0 10px #ff4d6d, 0 0 20px #ff4d6d;
|
||||
}
|
||||
|
||||
/* Pink */
|
||||
50% {
|
||||
color: #ff0a33;
|
||||
text-shadow: 0 0 15px #ff0a33, 0 0 25px #ff0a33;
|
||||
}
|
||||
|
||||
/* Red */
|
||||
100% {
|
||||
color: #ff4d6d;
|
||||
text-shadow: 0 0 10px #ff4d6d, 0 0 20px #ff4d6d;
|
||||
}
|
||||
|
||||
/* Pink */
|
||||
}
|
||||
|
||||
|
||||
.logo {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
@@ -348,11 +475,11 @@
|
||||
animation: logo-glow 10s infinite ease-in-out;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
|
||||
.logo-small {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
.logo-container h1 {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
@@ -364,14 +491,14 @@
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
|
||||
.nav-menu {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 4px 0 16px 0;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
|
||||
.nav-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -384,7 +511,7 @@
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
/* Add hover effect for nav items */
|
||||
.nav-item::before {
|
||||
content: '';
|
||||
@@ -396,7 +523,7 @@
|
||||
background: linear-gradient(to bottom, rgba(52, 152, 219, 0), rgba(155, 89, 182, 0));
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
|
||||
.nav-icon-wrapper {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
@@ -410,7 +537,7 @@
|
||||
background: rgba(30, 39, 56, 0.3);
|
||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
|
||||
.nav-icon-wrapper i {
|
||||
font-size: 13px;
|
||||
position: absolute;
|
||||
@@ -420,22 +547,22 @@
|
||||
transition: all 0.3s ease;
|
||||
filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.5));
|
||||
}
|
||||
|
||||
|
||||
/* Apply the pulsing animation to the heart icon */
|
||||
.heart-icon i {
|
||||
animation: heart-pulse 7.2s infinite ease-in-out;
|
||||
}
|
||||
|
||||
|
||||
.nav-group {
|
||||
margin-top: 4px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
|
||||
/* Specific adjustment for the Core nav group */
|
||||
.nav-group:first-of-type {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
|
||||
.nav-group-title {
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
@@ -448,107 +575,107 @@
|
||||
text-shadow: 0 0 10px rgba(52, 152, 219, 0.3);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
.nav-item span {
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
transition: all 0.3s ease;
|
||||
letter-spacing: 0.24px;
|
||||
}
|
||||
|
||||
|
||||
.nav-item:hover {
|
||||
background: rgba(59, 130, 246, 0.15);
|
||||
color: #fff;
|
||||
transform: translateX(2px);
|
||||
}
|
||||
|
||||
|
||||
.nav-item:hover .nav-icon-wrapper {
|
||||
background: rgba(59, 130, 246, 0.2);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
|
||||
.nav-item:hover::before {
|
||||
background: linear-gradient(to bottom, rgba(52, 152, 219, 0.4), rgba(155, 89, 182, 0.4));
|
||||
}
|
||||
|
||||
|
||||
.nav-item.active {
|
||||
background: linear-gradient(to right, rgba(59, 130, 246, 0.9), rgba(59, 130, 246, 0.7));
|
||||
color: #ffffff;
|
||||
box-shadow: 0 2px 10px rgba(59, 130, 246, 0.3);
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
|
||||
.nav-item.active .nav-icon-wrapper {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
|
||||
.nav-item.active i {
|
||||
color: #ffffff;
|
||||
filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.5));
|
||||
}
|
||||
|
||||
|
||||
.nav-item.active::before {
|
||||
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.3));
|
||||
}
|
||||
|
||||
|
||||
/* Mobile view optimization */
|
||||
@media (max-width: 768px) {
|
||||
.sidebar {
|
||||
width: 70px !important;
|
||||
overflow-x: hidden !important;
|
||||
}
|
||||
|
||||
|
||||
/* Adjust vertical color lines on mobile */
|
||||
.sidebar::before,
|
||||
.sidebar::after {
|
||||
width: 1px;
|
||||
}
|
||||
|
||||
|
||||
.logo-container {
|
||||
padding: 15px 5px !important;
|
||||
justify-content: center !important;
|
||||
flex-direction: column !important;
|
||||
}
|
||||
|
||||
|
||||
.sidebar .nav-item span,
|
||||
.sidebar .nav-group-title {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
.sidebar .logo-container {
|
||||
justify-content: center;
|
||||
padding: 15px 0;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
|
||||
.sidebar .logo-container h1 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
.logo-large {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
.logo-small {
|
||||
display: block;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
.nav-menu {
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
|
||||
.nav-item {
|
||||
width: 60px;
|
||||
justify-content: center;
|
||||
padding: 12px 0;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
|
||||
.nav-item:hover,
|
||||
.nav-item.active {
|
||||
width: 42px;
|
||||
@@ -560,18 +687,18 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
|
||||
.nav-icon-wrapper {
|
||||
margin-right: 0;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
|
||||
.nav-icon-wrapper i {
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Adjust spacing for the sponsor link */
|
||||
.nav-menu a.nav-item:first-child {
|
||||
margin-top: 5px;
|
||||
@@ -582,37 +709,83 @@
|
||||
<script>
|
||||
// Function to set active nav item based on the current hash
|
||||
function setActiveNavItem() {
|
||||
// Get all navigation items
|
||||
// Get all navigation items from all sidebars
|
||||
const navItems = document.querySelectorAll('.nav-item');
|
||||
|
||||
|
||||
// Remove active class from all items
|
||||
navItems.forEach(item => {
|
||||
item.classList.remove('active');
|
||||
});
|
||||
|
||||
|
||||
// Get current hash, or default to home if no hash
|
||||
let currentHash = window.location.hash;
|
||||
if (!currentHash) {
|
||||
currentHash = '#home';
|
||||
}
|
||||
|
||||
// Set the appropriate nav item as active
|
||||
const selector = currentHash === '#home' ? '#homeNav' :
|
||||
currentHash === '#hunt-manager' ? '#huntManagerNav' :
|
||||
currentHash === '#logs' ? '#logsNav' :
|
||||
currentHash === '#apps' ? '#appsNav' :
|
||||
currentHash === '#settings' ? '#settingsNav' :
|
||||
currentHash === '#scheduling' ? '#schedulingNav' : '#homeNav';
|
||||
|
||||
|
||||
// Set the appropriate nav item as active based on current section
|
||||
let selector = null;
|
||||
|
||||
// Main sidebar items
|
||||
if (currentHash === '#home') {
|
||||
selector = '#homeNav';
|
||||
} else if (currentHash === '#hunt-manager') {
|
||||
selector = '#huntManagerNav';
|
||||
} else if (currentHash === '#logs') {
|
||||
selector = '#logsNav';
|
||||
} else if (currentHash === '#apps') {
|
||||
selector = '#appsNav';
|
||||
} else if (currentHash === '#swaparr') {
|
||||
selector = '#swaparrNav';
|
||||
} else if (currentHash === '#requestarr') {
|
||||
selector = '#requestarrNav';
|
||||
}
|
||||
// Apps sidebar items
|
||||
else if (currentHash === '#sonarr') {
|
||||
selector = '#appsSonarrNav';
|
||||
} else if (currentHash === '#radarr') {
|
||||
selector = '#appsRadarrNav';
|
||||
} else if (currentHash === '#lidarr') {
|
||||
selector = '#appsLidarrNav';
|
||||
} else if (currentHash === '#readarr') {
|
||||
selector = '#appsReadarrNav';
|
||||
} else if (currentHash === '#whisparr') {
|
||||
selector = '#appsWhisparrNav';
|
||||
} else if (currentHash === '#eros') {
|
||||
selector = '#appsErosNav';
|
||||
}
|
||||
// Settings sidebar items
|
||||
else if (currentHash === '#settings') {
|
||||
selector = '#settingsMainNav';
|
||||
} else if (currentHash === '#scheduling') {
|
||||
selector = '#settingsSchedulingNav';
|
||||
} else if (currentHash === '#notifications') {
|
||||
selector = '#settingsNotificationsNav';
|
||||
} else if (currentHash === '#prowlarr') {
|
||||
selector = '#settingsProwlarrNav';
|
||||
} else if (currentHash === '#user') {
|
||||
selector = '#settingsUserNav';
|
||||
}
|
||||
// Requestarr sidebar items
|
||||
else if (currentHash === '#requestarr') {
|
||||
selector = '#requestarrHomeNav';
|
||||
} else if (currentHash === '#requestarr-history') {
|
||||
selector = '#requestarrHistoryNav';
|
||||
}
|
||||
// Default to home
|
||||
else {
|
||||
selector = '#homeNav';
|
||||
}
|
||||
|
||||
const activeItem = document.querySelector(selector);
|
||||
if (activeItem) {
|
||||
activeItem.classList.add('active');
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Set active on page load
|
||||
document.addEventListener('DOMContentLoaded', setActiveNavItem);
|
||||
|
||||
|
||||
// Update active when hash changes
|
||||
window.addEventListener('hashchange', setActiveNavItem);
|
||||
</script>
|
||||
</script>
|
||||
86
frontend/templates/components/sonarr_section.html
Normal file
86
frontend/templates/components/sonarr_section.html
Normal file
@@ -0,0 +1,86 @@
|
||||
<section id="sonarrSection" class="content-section">
|
||||
<div class="section-header">
|
||||
<h2>Sonarr Settings</h2>
|
||||
<!-- Auto-save enabled - save button removed -->
|
||||
</div>
|
||||
|
||||
<!-- Single scrollable container for all content -->
|
||||
<div class="single-scroll-container">
|
||||
<div id="sonarrContainer" class="app-container">
|
||||
<!-- Settings content will be shown here -->
|
||||
</div>
|
||||
|
||||
<div id="sonarrStatus" class="app-status"></div>
|
||||
|
||||
<!-- App panel -->
|
||||
<div class="app-panels-container">
|
||||
<div id="sonarrApps" class="app-apps-panel app-content-panel active" style="display: block;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
/* Sonarr Section Layout */
|
||||
#sonarrSection {
|
||||
display: none;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
overflow: hidden;
|
||||
padding-bottom: 60px;
|
||||
}
|
||||
|
||||
#sonarrSection.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Single scroll container - ONLY this element should scroll */
|
||||
#sonarrSection .single-scroll-container {
|
||||
display: block;
|
||||
width: 100%;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
padding-bottom: 100px;
|
||||
min-height: 100%;
|
||||
height: auto;
|
||||
max-height: unset;
|
||||
scrollbar-width: thin;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* App container styling */
|
||||
#sonarrContainer {
|
||||
height: auto;
|
||||
flex: 1;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/* Panel styling */
|
||||
#sonarrSection .app-apps-panel {
|
||||
padding-bottom: 10px;
|
||||
min-height: 0;
|
||||
height: auto;
|
||||
background-color: transparent !important;
|
||||
box-shadow: none !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
/* Ensure bottom content is visible */
|
||||
#sonarrApps {
|
||||
padding-bottom: 150px;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
/* Section header styling */
|
||||
#sonarrSection .section-header {
|
||||
padding: 20px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
#sonarrSection .section-header h2 {
|
||||
margin: 0;
|
||||
color: #fff;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
}
|
||||
</style>
|
||||
86
frontend/templates/components/whisparr_section.html
Normal file
86
frontend/templates/components/whisparr_section.html
Normal file
@@ -0,0 +1,86 @@
|
||||
<section id="whisparrSection" class="content-section">
|
||||
<div class="section-header">
|
||||
<h2>Whisparr V2 Settings</h2>
|
||||
<!-- Auto-save enabled - save button removed -->
|
||||
</div>
|
||||
|
||||
<!-- Single scrollable container for all content -->
|
||||
<div class="single-scroll-container">
|
||||
<div id="whisparrContainer" class="app-container">
|
||||
<!-- Settings content will be shown here -->
|
||||
</div>
|
||||
|
||||
<div id="whisparrStatus" class="app-status"></div>
|
||||
|
||||
<!-- App panel -->
|
||||
<div class="app-panels-container">
|
||||
<div id="whisparrApps" class="app-apps-panel app-content-panel active" style="display: block;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
/* Whisparr Section Layout */
|
||||
#whisparrSection {
|
||||
display: none;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
overflow: hidden;
|
||||
padding-bottom: 60px;
|
||||
}
|
||||
|
||||
#whisparrSection.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Single scroll container - ONLY this element should scroll */
|
||||
#whisparrSection .single-scroll-container {
|
||||
display: block;
|
||||
width: 100%;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
padding-bottom: 100px;
|
||||
min-height: 100%;
|
||||
height: auto;
|
||||
max-height: unset;
|
||||
scrollbar-width: thin;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* App container styling */
|
||||
#whisparrContainer {
|
||||
height: auto;
|
||||
flex: 1;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/* Panel styling */
|
||||
#whisparrSection .app-apps-panel {
|
||||
padding-bottom: 10px;
|
||||
min-height: 0;
|
||||
height: auto;
|
||||
background-color: transparent !important;
|
||||
box-shadow: none !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
/* Ensure bottom content is visible */
|
||||
#whisparrApps {
|
||||
padding-bottom: 150px;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
/* Section header styling */
|
||||
#whisparrSection .section-header {
|
||||
padding: 20px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
#whisparrSection .section-header h2 {
|
||||
margin: 0;
|
||||
color: #fff;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
}
|
||||
</style>
|
||||
@@ -7,7 +7,7 @@
|
||||
<!-- Immediate CSS to prevent sidebar flash -->
|
||||
<style id="initial-sidebar-state">
|
||||
/* Hide all sidebars initially, JavaScript will show the correct one */
|
||||
#sidebar, #settings-sidebar, #requestarr-sidebar {
|
||||
#sidebar, #settings-sidebar, #requestarr-sidebar, #apps-sidebar {
|
||||
display: none !important;
|
||||
}
|
||||
</style>
|
||||
@@ -43,6 +43,14 @@
|
||||
<!-- Apps Section -->
|
||||
{% include 'components/apps_section.html' %}
|
||||
|
||||
<!-- Individual App Sections -->
|
||||
{% include 'components/sonarr_section.html' %}
|
||||
{% include 'components/radarr_section.html' %}
|
||||
{% include 'components/lidarr_section.html' %}
|
||||
{% include 'components/readarr_section.html' %}
|
||||
{% include 'components/whisparr_section.html' %}
|
||||
{% include 'components/eros_section.html' %}
|
||||
|
||||
<!-- Swaparr Section -->
|
||||
{% include 'components/swaparr_section.html' %}
|
||||
|
||||
@@ -71,6 +79,8 @@
|
||||
|
||||
<!-- Load settings-related scripts -->
|
||||
<script src="./static/js/settings_forms.js?v=20250615"></script>
|
||||
<!-- Load apps module -->
|
||||
<script src="./static/js/apps.js"></script>
|
||||
<!-- Load logging module -->
|
||||
<script src="./static/js/logs.js"></script>
|
||||
<!-- Load main UI script -->
|
||||
|
||||
Reference in New Issue
Block a user