Omada UI
This thread has been locked for further replies. You can start a new thread to share your ideas or ask questions.
The UI of Omadas web portal leaves much to be desired primarially due to the lack of responsive design elements.
As far as I can tell the CSS cannot be edited nor are any scale options provided (unless I missed something?)
This is particularly painful when attempting to manage a switch or AP as the pop out side panel is hardcoded to 450px and has no responsive resize... (450px is less than 1/7th of my screen (and makes the window near useless))
I'd be happy with just being able to edit the CSS and upload it myself similarly to how we can for captive portal. (I can technically tweak it in the DOM but it does not persist changes).
So to give some context (note It's not much better on 1080p, the columns are all invisible and utterly useless)
3440x1440 at 100%
3440x1440@80%
3440x1440@100% with a single css variable changed from 450px to "min-content" ( still has issues but at least the settings are visible)
change made (brute force fudge, not a true solution as the contents have arbirtary limits like adding elipsis to strings over a certain length (i.e. MAC addresses are truncated in the render, and only fully visible in the mouseover)
Unfortunately as the css file is hosted on the OC200 I cannot make a permanent change, so will have to either write custom overwrite styles and add them to an extension or tapermonkey :/
.drawer-container .drawer-wrap-outer .drawer-wrap {
width: min-content; /*fit the damn content*/
height: 100%;
padding: 0 20px 30px;
}
I wrote some custom CSS overrides for chrome incase anyone cares, I'm using an open source extension to inject the CSS for now.
I have run through the tabs and it doesn't appear to adversely affect any other areas of the web-app (I am unable to check the gateway related sections as I use pfSense)
The stock images are posted above, modified view is below, I'm sure I'll tweak further but I'm happy that I can finally read and see info on my controller that was previously hidden by the fixed width:
3440x1440
1080p
The css >
.drawer-container .drawer-wrap-outer .drawer-wrap {
width: min-content !important; /*force sidebar to content width*/
min-width: 450px !important; /* prevent sidebar being smaller than the current hard coded 450px setting */
}
.grid-content-td { /*overkill targeting but it fixes the padding so rows aren't miles apart */
padding: 0.5em 1em !important; /* changed to em units allowing them to be dynamic depending on font size as this element is used for other parts of the web-app */
white-space: normal !important; /* prevent pre-wrapping, instead allow normal wrap */
font-size: inherit !important; /* inherit the parent font size (14px) */
box-sizing: unset !important; /* disinherit the box-sizing falling back to the default*/
}
.drawer-content .grid-content-td {
padding: 0.5em 1em !important; /* fix padding in the sidebar content section */
}
.grid-content-td .content {
white-space: normal !important; /* disables pre-wrap, instead using normal wrap */
}