nessi/language-dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add mobile performance optimizations with scroll-behavior and animation disabling for screens below 700px

Browse Source 
Add media query to disable smooth scrolling with scroll-behavior:auto on html. Remove backdrop-filter from header/dashboard/cards/panels/tables and box-shadow from panels. Disable transform/animation on table rows and series items with transform:none/animation:none. Add contain:layout paint to tablewrap with overscroll-behavior-x:contain and contain:layout style to view for performance
This commit is contained in:
nessi
2026-08-17 19:42:54 +02:00
parent f5d8b4189c
commit 58c8ad3bcc
1 changed files with 12 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/index.html
+12
View File
@@ -1,5 +1,17 @@
<!doctype html> <!doctype html>
<style> <style>
@media(max-width:700px){
html{scroll-behavior:auto!important}
header{backdrop-filter:none!important;box-shadow:0 2px 8px rgba(0,0,0,.22)!important}
.dashboard-hero,.overview-card,.insight-card,.system-panel,.service-panel,.datastore-panel,.storage-card,.download-card,.download-section,.tablewrap,.series-category,.missing-table{backdrop-filter:none!important;box-shadow:none!important}
tbody tr,.series-category>.series,.missing-table .missing-series{transform:none!important;animation:none!important}
tbody tr:hover,.series-category>.series:hover{transform:none!important}
.series table tbody tr:not(.season-divider){animation:none!important}
.tablewrap{contain:layout paint;overscroll-behavior-x:contain}
.view{contain:layout style}
}
</style>
<style>
#ioPressurePanel{max-width:none;margin:0;padding:14px}.io-pressure-bars{display:grid;gap:10px}.io-pressure-bars>div{display:grid;grid-template-columns:42px 48px 1fr;align-items:center;gap:8px;color:#9da5b2;font-size:11px}.io-pressure-bars b{color:#e8eef5;text-align:right}.io-pressure-bars .datastore-progress{height:8px}.datastore-grid{align-items:stretch}.datastore-grid>.datastore-panel>.datastore-capacity{margin:0 0 12px;padding:14px}.datastore-right-stack{display:flex;flex-direction:column;gap:12px;min-height:100%}.datastore-right-stack .raid-panel{flex:1;margin:0}.datastore-right-stack #ioPressurePanel{flex:0 0 auto}@media(max-width:900px){ #ioPressurePanel{max-width:none}.datastore-right-stack{min-height:0}} #ioPressurePanel{max-width:none;margin:0;padding:14px}.io-pressure-bars{display:grid;gap:10px}.io-pressure-bars>div{display:grid;grid-template-columns:42px 48px 1fr;align-items:center;gap:8px;color:#9da5b2;font-size:11px}.io-pressure-bars b{color:#e8eef5;text-align:right}.io-pressure-bars .datastore-progress{height:8px}.datastore-grid{align-items:stretch}.datastore-grid>.datastore-panel>.datastore-capacity{margin:0 0 12px;padding:14px}.datastore-right-stack{display:flex;flex-direction:column;gap:12px;min-height:100%}.datastore-right-stack .raid-panel{flex:1;margin:0}.datastore-right-stack #ioPressurePanel{flex:0 0 auto}@media(max-width:900px){ #ioPressurePanel{max-width:none}.datastore-right-stack{min-height:0}}
</style> </style>
<style> <style>