mirror/archived-Huntarr.io
1
0
Fork 0
mirror of https://github.com/plexguide/Huntarr.io.git synced 2026-02-23 07:08:45 -06:00
Code Issues Packages Projects Releases Wiki Activity

style: refine mobile responsiveness across various components, including sidebar, history section, and settings, with adjustments for better layout and usability

Browse Source
This commit is contained in:
Admin9705
2025-05-16 13:18:21 -04:00
parent 7248896970
commit ad46bf5c19
6 changed files with 147 additions and 170 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/static/css/new-style.css
+82 -70
View File
@@ -1243,62 +1243,6 @@ section[id*="scheduling"] select.form-control,
}
/* Responsive Adjustments */
@media (max-width: 950px) {
.sidebar {
width: 70px;
}
.sidebar h1, .nav-item span, .switch-label {
display: none;
}
.nav-item i {
margin-right: 0;
font-size: 22px;
}
.logo-container {
justify-content: center;
}
.logo {
margin-right: 0;
}
}
@media (max-width: 992px) {
.settings-group {
padding: 15px;
}
.setting-item label {
width: 100%;
margin-bottom: 8px;
}
.setting-help {
margin-left: 0;
}
.stats-grid {
grid-template-columns: 1fr;
}
/* Make inputs responsive on narrow screens */
.setting-item input[type="text"],
.setting-item input[type="number"],
.setting-item input[type="password"] {
width: 100%;
max-width: 300px;
}
/* Specific width for short number inputs */
.setting-item input.short-number-input {
width: 80px; /* Adjust width as needed */
max-width: 80px;
}
}
@media (max-width: 768px) {
.dashboard-grid {
grid-template-columns: 1fr;
@@ -1337,6 +1281,88 @@ section[id*="scheduling"] select.form-control,
margin-right: 0;
margin-bottom: 10px;
}
/* Styles moved from 992px breakpoint */
.settings-group {
padding: 15px;
}
.setting-item label {
width: 100%;
margin-bottom: 8px;
}
.setting-help {
margin-left: 0;
}
.stats-grid {
grid-template-columns: 1fr;
}
/* Make inputs responsive on narrow screens */
.setting-item input[type="text"],
.setting-item input[type="number"],
.setting-item input[type="password"] {
width: 100%;
max-width: 300px;
}
/* Specific width for short number inputs */
.setting-item input.short-number-input {
width: 80px; /* Adjust width as needed */
max-width: 80px;
}
/* History styles moved from 992px breakpoint */
.history-table {
font-size: 13px;
}
.history-table th, .history-table td {
padding: 8px 10px;
}
.history-search input {
width: 150px;
}
/* Original mobile history styles */
.history-controls {
flex-wrap: wrap;
gap: 10px;
}
.history-search {
width: 100%;
margin-bottom: 10px;
}
.history-search input {
width: calc(100% - 40px);
}
/* Sidebar styles moved from 950px breakpoint */
.sidebar {
width: 60px;
}
.sidebar h1, .nav-item span, .switch-label {
display: none;
}
.nav-item i {
margin-right: 0;
font-size: 22px;
}
.logo-container {
justify-content: center;
}
.logo {
margin-right: 0;
}
}
/* Ensure very small screens can still access everything */
@@ -2037,20 +2063,6 @@ section[id*="scheduling"] select.form-control,
}
/* Responsive adjustments */
@media (max-width: 992px) {
.history-table {
font-size: 13px;
}
.history-table th, .history-table td {
padding: 8px 10px;
}
.history-search input {
width: 150px;
}
}
@media (max-width: 768px) {
.history-controls {
flex-wrap: wrap;
frontend/static/css/responsive-fix.css
+8 -11
View File
@@ -22,9 +22,9 @@
margin-left: auto;
}
/* Additional breakpoint for medium-sized screens */
@media (max-width: 992px) {
/* Force mobile mode at this breakpoint for consistency */
/* Mobile-specific settings adjustments */
@media (max-width: 768px) {
/* Force mobile mode at this breakpoint for consistency - moved from tablet view */
.sidebar {
width: 60px !important;
min-width: 60px !important;
@@ -36,7 +36,7 @@
width: calc(100% - 60px) !important;
}
/* Navbar item adjustments */
/* Navbar item adjustments - moved from tablet view */
.nav-item {
padding: 10px 0;
justify-content: center;
@@ -50,12 +50,12 @@
margin-right: 0 !important;
}
/* Ensure General Settings header is responsive */
/* Ensure General Settings header is responsive - moved from tablet view */
#settingsSection .section-header {
flex-wrap: wrap !important;
}
/* Move Save button to its own row when space is limited */
/* Move Save button to its own row when space is limited - moved from tablet view */
#settingsSection .settings-actions {
margin-top: 10px;
width: 100%;
@@ -63,16 +63,13 @@
justify-content: flex-end;
}
/* Fix the positioning of the Save button on narrow screens */
/* Fix the positioning of the Save button on narrow screens - moved from tablet view */
#saveSettingsButton {
position: relative !important;
top: auto !important;
right: auto !important;
}
}
/* Mobile-specific settings adjustments */
@media (max-width: 768px) {
/* Fix General Settings section header on mobile */
#settingsSection .section-header {
padding: 10px 15px !important;
frontend/templates/components/apps_section.html
+8 -10
View File
@@ -241,15 +241,13 @@
}
}
/* Desktop padding adjustments */
@media (min-width: 769px) {
.single-scroll-container {
padding-bottom: 200px;
}
.additional-options, .skip-series-refresh {
margin-bottom: 150px;
padding-bottom: 150px;
}
/* Default desktop padding */
.single-scroll-container {
padding-bottom: 200px;
}
.additional-options, .skip-series-refresh {
margin-bottom: 150px;
padding-bottom: 150px;
}
</style>
frontend/templates/components/history_section.html
+12 -7
View File
@@ -746,6 +746,7 @@
z-index: 1000;
}
/* Mobile-specific styling */
.mobile-sticky {
position: fixed;
bottom: 0;
@@ -756,13 +757,17 @@
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;
}
/* Desktop styling (default) */
@media (max-width: 768px) {
/* Mobile-specific styles remain */
}
/* Default desktop styling */
.mobile-sticky {
position: static;
box-shadow: none;
border-top: none;
background: transparent;
}
.pagination-button {
frontend/templates/components/topbar.html
-38
View File
@@ -262,44 +262,6 @@
margin: 0 0 4px 0;
}
}
@media (max-width: 1024px) {
/* Sidebar: icons only */
.sidebar .nav-item span {
display: none !important;
}
.sidebar {
width: 60px !important;
min-width: 60px !important;
max-width: 60px !important;
}
.sidebar .logo-container h1 {
display: none !important;
}
.logo-large {
display: none !important;
}
.logo-small {
display: block !important;
width: 32px !important;
height: 32px !important;
margin: 0 !important;
}
/* Top bar: only Version and Latest */
.version-item {
display: none !important;
}
.version-item:nth-child(1),
.version-item:nth-child(3) {
display: flex !important;
font-size: 14px !important;
}
.version-divider {
display: none !important;
}
.version-divider:nth-child(2) {
display: block !important;
}
}
</style>
<script>
frontend/templates/scheduling.html
+37 -34
View File
@@ -56,40 +56,43 @@
<style>
/* Critical scrolling fixes applied directly to the page */
@media (min-width: 769px) {
body, html {
overflow: auto !important;
height: 100% !important;
}
.app-container {
overflow: auto !important;
height: 100vh !important;
}
.main-content {
overflow-y: auto !important;
height: 100vh !important;
}
#schedulingPage,
.content-section.active {
overflow-y: auto !important;
height: auto !important;
min-height: calc(100vh - 60px) !important;
padding-bottom: 100px !important;
}
.scheduler-container {
overflow: visible !important;
height: auto !important;
}
.scheduler-panel,
.panel-content {
overflow: visible !important;
height: auto !important;
}
body, html {
overflow: auto !important;
height: 100% !important;
}
.app-container {
overflow: auto !important;
height: 100vh !important;
}
.main-content {
overflow-y: auto !important;
height: 100vh !important;
}
#schedulingPage,
.content-section.active {
overflow-y: auto !important;
height: auto !important;
min-height: calc(100vh - 60px) !important;
padding-bottom: 100px !important;
}
.scheduler-container {
overflow: visible !important;
height: auto !important;
}
.scheduler-panel,
.panel-content {
overflow: visible !important;
height: auto !important;
}
/* Mobile overrides handled in the 768px media query */
@media (max-width: 768px) {
/* Any mobile-specific overrides can go here */
}
</style>
</head>