I absolutely love the ability to hide and show sections that I do not need to look at (thank you!). Would we be able to reduce the height of the "hide" and "show" buttons on the Overview, just so they are a little less dominating on the page? Especially when the "show" button is visible — it is quite a large colourful button for something I'm trying to hide from view. I made a little mockup here:
I also noticed that when I sort my Active Leases by IP address, for example, my changes aren't remembered after logging out and back in. As I set static leases within .100 to .199, and have DHCP lease from .200 to .249, I always prefer seeing my leases sorted by IP address and would like this view saved.
This would be for the Overview page, and also would apply to the Active Leases tables in Network → DHCP.
I've looked further into the rationale behind why after finding the pull request (didn't realise you were the author!), and you are right, I think it would be nice to keep the buttons as-is for smaller screens, but use a smaller height on the buttons for all other screens via @media only screen and (min-width : 400px), matching the same style as the "refreshing" text in the header.
Also realised we are missing the cursor: pointer as well to indicate they are a button, so right now they are showing the text cursor and should be fixed. Putting it altogether:(Edit: Updated CSS in a later post in topic.)
Plus, utilise the var(--disabled-opacity) already present to soften the "show" button with less intensity (and show full intensity upon mouse hover): (Edit: Updated CSS in a later post in topic.)
Oh, that was me? I had forgotten until you mentioned it; I do recall testing on a phone (I only touch my phone a couple times a month, but thought it was important for this one).
Changing it to be mobile specific would be great, here's how I see them on my desktop in the 2020 theme:
Not in the official repos, but I know that lots of people use argon as I see it in the ASU error logs all the time. Not sure where it comes from, but someone here will probably clue us in.
According to that wiki page it is a popular community theme, so I will leave community themes alone.
I've gone ahead and looked through the four themes, and have placed any CSS modifications I would like to see implemented below. Screenshots are provided showing what the changes look like after my CSS. You can replicate it yourself by copying and pasting my CSS to the end of the existing CSS file cascade.css. I used Safari's Web Inspector.
This took about five hours… but it was worth it, as now they are looking pretty neat. They also now all have bigger buttons for smaller screens.
/* Resolve mismatched spacing for each heading in box, fixing spacing for when contents are hidden and adding spacing when contents are shown */
body[data-page='admin-status-overview'] .cbi-section {
padding-top: 1rem;
}
body[data-page='admin-status-overview'] .cbi-title h3 {
padding: 1rem 0 0 0;
margin: 0;
align-items: center;
}
body[data-page='admin-status-overview'] .cbi-section > div:last-child {
padding-top: 1rem;
}
body[data-page='admin-status-overview'] .cbi-section > div:empty {
display: none;
}
/* Looks like there's a tablet mode also done for 1600px, need to fix spacing changes for that too */
@media screen and (max-width: 1600px) {
body[data-page='admin-status-overview'] .cbi-section {
padding-top: 0.5rem;
}
body[data-page='admin-status-overview'] .cbi-title h3 {
padding-top: 0.5rem;
}
}
/* Change mouse icon from text cursor to pointer, and fix buttons not being same min-width */
body[data-page='admin-status-overview'] .cbi-title .label {
cursor: pointer;
min-width: 5.2em !important;
}
/* Create larger buttons for smaller screens (same behaviour as luci-theme-bootstrap) */
@media screen and (max-width: 480px) {
body[data-page='admin-status-overview'] .cbi-title .label {
line-height: 3em;
}
}
/* Slightly fade "show" button: no variable for disabled opacity like luci-theme-bootstrap, assuming 0.7 */
body[data-page='admin-status-overview'] .cbi-title .label.notice {
opacity: 0.7;
}
/* Remove fade when hovered */
body[data-page='admin-status-overview'] .cbi-title .label.notice:hover {
opacity: initial;
}
/* Set text to var(--secondary-bright-color) when using var(--main-bright-color) for background to match same behaviour as the header of the page, e.g. IPv4 Upstream and IPv6 Upstream boxes */
body[data-page='admin-status-overview'] .ifacebox-head {
color: var(--header-color);
}
/* Match "show" button style to IP table, change border colour to match font colour; fade it slightly: no variable for disabled opacity like luci-theme-bootstrap, assuming 0.7 */
body[data-page='admin-status-overview'] .cbi-title .label.notice {
background: #90c0e0;
color: #000;
border: 1px #000 solid;
opacity: 0.7;
}
/* Remove fade when hovered */
body[data-page='admin-status-overview'] .cbi-title .label.notice:hover {
opacity: initial;
}
/* Change mouse icon from text cursor to pointer, restore button text weight and font similar to indicators, add subtle border to compliment both states of button */
body[data-page='admin-status-overview'] .cbi-title .label {
cursor: pointer;
font-weight: normal;
font-family: Arial,Verdana,sans-serif;
border: 1px #888 solid;
}
/* Match rounded indicators to same style as "hide" and "show" buttons for design consistency, change mouse icon from text cursor to pointer (site wide) */
#indicators > span {
border-radius: 3px !important;
cursor: pointer;
}
/* Work with existing mobile styling for 480px and below, make bigger buttons and fix heading alignment */
@media screen and (max-width: 480px) {
body[data-page='admin-status-overview'] .cbi-title .label {
line-height: 3em;
}
body[data-page='admin-status-overview'] .cbi-title h3 {
align-items: center;
}
}
/* Match rounded indicators to same style as "hide" and "show" buttons for design consistency (site wide) */
#indicators > * {
line-height: 1.8em;
border-radius: .5rem;
padding: 0 .7em;
}
/* Update existing calculations with same new adjustments as above */
#indicators > [data-style="inactive"] {
line-height: calc(1.8em - 4px);
padding:0 calc(.7em - 2px);
}
/* Create larger buttons for smaller screens (same behaviour as luci-theme-bootstrap) */
@media screen and (max-width: 480px) {
body[data-page='admin-status-overview'] h3, .cbi-section > legend:first-child {
line-height: 2em;
}
}
/* Swap the "hide" and "show" button styles to match all other luci-theme, as "hide" is currently using primary style and "show" is currently using secondary style. Also, change mouse icon from text cursor to pointer */
body[data-page='admin-status-overview'] .cbi-title .label.notice {
background: var(--main-bright-color);
color: var(--secondary-bright-color);
border: 0;
}
body[data-page='admin-status-overview'] .cbi-title .label {
background: var(--secondary-bright-color);
color: var(--main-bright-color);
border: 1px solid var(--main-bright-color);
opacity: 1;
cursor: pointer;
}
/* Slightly fade "show" button: no variable for disabled opacity like luci-theme-bootstrap, assuming 0.7 */
body[data-page='admin-status-overview'] .cbi-title .label.notice {
opacity: 0.7;
}
/* Remove fade when hovered */
body[data-page='admin-status-overview'] .cbi-title .label.notice:hover {
opacity: initial;
}
/* Set text to var(--secondary-bright-color) when using var(--main-bright-color) for background to match same behaviour as the header of the page, e.g. IPv4 Upstream and IPv6 Upstream boxes */
body[data-page='admin-status-overview'] .ifacebox-head {
color: var(--secondary-bright-color)
}
I would go ahead and try to do a pull request/commit myself, but I have never done one before, and all the prerequisites were quite overwhelming.
By the way, do you (or anyone who is reading this) might know someone who would take this request on board? This one is out of my skillset, I only know front-end HTML & CSS development.
You should do it, it's not too bad. Since you've already got a github account, just fork the luci repo, clone it to your local machine, add a branch to master and add all your changes there. Commit message is easy, look at a couple other PRs and copy how they've done it. Once it looks good locally, git push --set-upstream origin branch-with-changes and go to the openwrt/luci repo to create the PR.
Thanks for the encouragement. I will give it a go now using GitHub Desktop. If I am having trouble with any step (most likely towards the end of 'pushing'), would you mind if I messaged you?
I think I was able to do it!
Fingers crossed everything is correct…
GitHub Desktop seemed to have helped me a lot as I could use a GUI for everything.
Edit: Well… I did it, but I did it quite poorly. Pull requests, commits, git, pre-reqs, submission guidelines, not using merge commits, rebasing on master… they are quite overwhelming for a newbie like me. But, I am slowly getting there. Now doing one commit and one pull request at a time per 'element' of what CSS I am updating.
Edit 2: After some hiccups, all pull requests are now done. I believe I have covered all CSS requests I made on here.
During this time there were some CSS validation errors I picked up on, and submitted those too.
Also, I also noticed .DS_Store files being included in GitHub Desktop, and learnt about .gitignore, and that luci didn't have it listed in there. So created that request too.
Marking as solved and closed as pull requests have been created for the CSS requests, and the feature request as a GitHub issue has been created for saving sorted DHCP leases.
I will give it a go now using GitHub Desktop. If I am having trouble with any step (most likely towards the end of 'pushing'), would you mind if I messaged you?