├── CHANGELOG.md ├── README.md └── custom.css /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # CHANGELOG 2 | 3 | ## 2024-03-24 4 | 5 | - Fix layouts with Unraid OS v6.12.x 6 | 7 | ## 2024-01-06 8 | 9 | - Fix sizing of menu when there are three lines of menu links (thanks DylanBorchert!) 10 | - Fix setup instructions for first-time users who need to enable advanced view (thanks ronschaeffer!) 11 | - Fix size of the upgrade notice 12 | 13 | ## 2023-04-25 14 | 15 | - Fix layout of the uptime counter for small phone screens such as iPhone Mini 16 | - Fit menu items into smaller space to fit more links within one line for tablets and within two lines on phones 17 | - Smaller button letter spacing to fit buttons better on small screens, especially on the Docker page 18 | 19 | ## 2023-04-24 20 | 21 | - Initial release 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # unraid-gui-responsive 2 | 3 | > Responsive design for the Unraid GUI 4 | 5 | ## Installation 6 | 7 | 1. Install the `Theme Engine` plugin in Unraid 8 | 2. Open the Theme Engine settings, from the Unraid Settings page 9 | 3. Toggle from `Basic view` to `Advanced view` 10 | 4. Set `Enable custom styling` to `Yes` 11 | 5. Copy and paste the following code into the `Custom styling (advanced)` field: 12 | ```html 13 | 14 | 15 | 16 | ``` 17 | 6. Click apply 18 | 7. Enjoy from your phone/tablet 19 | 20 | ## Why does this exist? 21 | 22 | These style overrides exist because the Unraid GUI does not have a responsive design, making it painful to use from a phone/tablet. 23 | 24 | ## Strategy 25 | 26 | - Avoid modifying the desktop layout so that the design will never become completely broken 27 | - Avoid use of colour 28 | - Use the minimum amount of changes 29 | - Expect breaking changes upstream 30 | 31 | ## Known issues 32 | 33 | Last tested with Unraid OS v6.12.8. 34 | 35 | - Some tables are too large and require scrolling left/right, eg. devices on the `Main` page 36 | - Tabs layout does not work 37 | - Footer statusbar is gone 38 | - Scrolling issues on the `Main` page on touch devices 39 | - Certainly more... Please tell me, or submit a pull request! 40 | 41 | ## Next steps 42 | 43 | - Collect bug reports from more users 44 | - See if it is possible to contribute to the [official Unraid theme dynamix](https://github.com/limetech/webgui/tree/master/plugins/dynamix) 45 | -------------------------------------------------------------------------------- /custom.css: -------------------------------------------------------------------------------- 1 | /** 2 | * https://github.com/ccmorris/unraid-gui-responsive 3 | * Last modified: 2025-02-26 4 | */ 5 | 6 | @media (max-width: 1260px) { 7 | p { 8 | text-align: left; 9 | } 10 | 11 | #displaybox, 12 | #template { 13 | min-width: auto; 14 | margin: 0; 15 | } 16 | #header { 17 | position: static; 18 | min-width: auto; 19 | height: 90px; 20 | } 21 | .logo { 22 | margin-right: -30px; 23 | } 24 | 25 | #menu { 26 | min-width: auto; 27 | height: auto; 28 | z-index: 10; 29 | } 30 | #nav-block { 31 | overflow: visible; 32 | height: auto; 33 | display: flex; 34 | flex-wrap: wrap; 35 | justify-content: space-between; 36 | } 37 | #nav-left { 38 | float: none; 39 | display: flex; 40 | flex-wrap: wrap; 41 | } 42 | #nav-right { 43 | float: none; 44 | display: flex; 45 | flex-wrap: wrap; 46 | } 47 | #nav-block #nav-item, #nav-block #nav-user { 48 | float: none; 49 | } 50 | 51 | div.tab { 52 | float: none; 53 | margin: 0; 54 | } 55 | div.tab [type=radio]+label { 56 | display: inline-block; 57 | } 58 | div.tab [type=radio]+label~.content, div.tab [type=radio]:checked+label~.content { 59 | display: block; 60 | } 61 | label+.content { 62 | margin-top: 5px; 63 | } 64 | div.content { 65 | position: static; 66 | } 67 | table.tablesorter.shift { 68 | margin: 0; 69 | } 70 | 71 | table.disk_status, 72 | table.share_status, 73 | table.plugins, 74 | table#docker_containers, 75 | table#kvm_table, 76 | table.usb_mounts, 77 | table.samba_mounts, 78 | table.usb_absent, 79 | table.local_usb, 80 | table.tablesorter.shift, 81 | table.dashboard > tbody, 82 | div.title.disable_diskio, 83 | div.title.ud { 84 | max-width: 100%; 85 | overflow-x: auto; 86 | display: block; 87 | } 88 | 89 | span.status.vhshift { 90 | margin-right: 0; 91 | } 92 | } 93 | 94 | @media (max-width: 980px) { 95 | #nav-block { 96 | letter-spacing: 1px; 97 | } 98 | 99 | #menu { 100 | position: static !important; 101 | display: flex; 102 | flex-direction: column-reverse; 103 | } 104 | 105 | div.tabs { 106 | margin-top: 0; 107 | } 108 | .tabs div.clone1, .tabs div.clone2 { 109 | position: static; 110 | margin: 0 10px; 111 | } 112 | 113 | table.plugins .desc_readmore { 114 | height: auto !important; 115 | } 116 | table.plugins .readmore-js-toggle { 117 | display: none; 118 | } 119 | 120 | .jGrowl, .jGrowl-notification, .jGrowl-closer { 121 | width: 100%; 122 | max-width: 380px; 123 | box-sizing: border-box; 124 | } 125 | 126 | .upgrade_notice { 127 | width: 100%; 128 | left: 0; 129 | margin-left: 0; 130 | top: 0; 131 | height: auto; 132 | line-height: normal; 133 | padding: 0.5rem 1rem; 134 | box-sizing: border-box; 135 | } 136 | } 137 | 138 | @media (max-width: 760px) { 139 | dt { 140 | float: none; 141 | } 142 | dd { 143 | white-space: normal; 144 | } 145 | 146 | .tile { 147 | width: 100vw; 148 | } 149 | 150 | #header .logo svg { 151 | width: 125px; 152 | } 153 | div.frame { 154 | float: none; 155 | } 156 | 157 | table.share_status.dashboard.box1, 158 | table.share_status.dashboard.box3, 159 | table.share_status.dashboard.box2 { 160 | float: none; 161 | width: 100%; 162 | } 163 | .frame #db-box2 { 164 | margin-bottom: 0; 165 | } 166 | #footer { 167 | display: none; 168 | } 169 | input[type=button], input[type=reset], input[type=submit], button, button[type=button], a.button { 170 | letter-spacing: 1px; 171 | } 172 | .notice { 173 | height: auto; 174 | line-height: inherit; 175 | padding: 15px 15px 15px 75px; 176 | background-position: 15px center; 177 | background-size: 45px auto; 178 | } 179 | } 180 | 181 | @media (max-width: 420px) { 182 | input[type=button], input[type=reset], input[type=submit], button, button[type=button], a.button { 183 | letter-spacing: 0; 184 | } 185 | 186 | .logo { 187 | margin-right: -60px; 188 | } 189 | #menu { 190 | height: auto; 191 | } 192 | #nav-block { 193 | letter-spacing: 0; 194 | } 195 | table.share_status.dashboard td i[class^="icon-"] { 196 | display: block; 197 | } 198 | .sys_view .left { 199 | width: auto; 200 | } 201 | .ct-name .inner { 202 | display: block; 203 | } 204 | .sweet-alert { 205 | width: 100vw; 206 | margin-left: 0; 207 | left: 0; 208 | box-sizing: border-box; 209 | } 210 | body .sweet-alert.nchan { 211 | width: 100vw; 212 | height: auto; 213 | max-height: 100vh; 214 | margin-left: 0; 215 | } 216 | div.Panel { 217 | margin: 0 1% 10px; 218 | height: 8rem; 219 | width: 31%; 220 | } 221 | 222 | .jGrowl, .jGrowl-notification, .jGrowl-closer { 223 | width: auto; 224 | left: 10px; 225 | right: 10px; 226 | } 227 | } 228 | 229 | 230 | /** 231 | * Community Apps plugin 232 | */ 233 | @media (max-width: 720px) { 234 | div.menuItems { 235 | position: static; 236 | width: auto; 237 | } 238 | div.mainArea { 239 | position: static; 240 | min-height: 0; 241 | } 242 | div.ca_homeTemplates { 243 | height: auto !important; 244 | } 245 | div.spotlightHome { 246 | min-width: 0 !important; 247 | max-width: none !important; 248 | height: auto !important; 249 | } 250 | div.cardDescription { 251 | height: auto; 252 | max-height: none; 253 | } 254 | div.ca_holder { 255 | float: none; 256 | margin-right: 0; 257 | position: relative; 258 | } 259 | div.betaCardBackground { 260 | left: 0; 261 | clip-path: none; 262 | margin-top: -2rem; 263 | margin-bottom: 2rem; 264 | width: 100%; 265 | height: auto; 266 | } 267 | div.betaPopupText { 268 | transform: none; 269 | position: static; 270 | line-height: 3rem; 271 | height: auto; 272 | } 273 | div.homespotlightIconArea { 274 | position: absolute; 275 | top: 20px; 276 | right: 20px; 277 | } 278 | div.spotlightCardBackground { 279 | left: 0; 280 | clip-path: none; 281 | width: 5rem; 282 | height: 5rem; 283 | border-radius: 100%; 284 | margin-left: 1rem; 285 | margin-top: -3rem; 286 | margin-bottom: 2rem; 287 | position: relative; 288 | } 289 | div.spotlightPopupText { 290 | text-align: center; 291 | position: static; 292 | line-height: 5rem; 293 | } 294 | div.officialCardBackground { 295 | left: 0; 296 | clip-path: none; 297 | height: auto; 298 | width: 100%; 299 | margin-top: -2rem; 300 | margin-bottom: 2rem; 301 | } 302 | div.officialPopupText { 303 | position: static; 304 | height: auto; 305 | transform: none; 306 | line-height: 3rem; 307 | } 308 | } 309 | @media (max-width: 420px) { 310 | #category_list { 311 | display: block; 312 | column-count: 2; 313 | } 314 | } --------------------------------------------------------------------------------