Mattaton Posted September 15, 2023 Share Posted September 15, 2023 2 minutes ago, hernandito said: It would look better if that grey down arrow be on the right side and bigger…. This way all icons would line up. I would also place the top horizontal border above the folder icon. Also give the expanded folder icon and label their own class. This way, in custom.css, one could make the folder icon and name larger to show better hierarchy between folders and the folder contents…. Background of a wrapper for the folder icon and label should run full width as well. This way one could apply a custom background color, and radius corners - again to do better visual distinction between folder and its containers. i would leave all the non-expanded folders as shown above. i wish I could illustrate w some mock-ups… but I’m still struggling to rebuild data… Agreed, this was a second version in case @Linguafoeda liked the arrow on the left better. I like your other ideas, too. The expanded folders and icons don't have a class, but the container does have an expanded="true", so can be selected with: .folder-showcase-outer[expanded="true"] I think that still allows what you're suggesting, right? I can only mess with custom CSS, @scolcipitato would have to add classes, if the above won't accomplish/allow what you're suggesting. Quote Link to comment
Mattaton Posted September 15, 2023 Share Posted September 15, 2023 (edited) @hernandito Here's an update based on your notes. Thoughts? And a little fancier: Edited September 15, 2023 by Mattaton 1 Quote Link to comment
Masterwishx Posted September 15, 2023 Share Posted September 15, 2023 50 minutes ago, scolcipitato said: I pushed an update, now should be fixed. Thanks it fixed ,but somehow still have some random containers without linked to webui when point on globe Draw.io in second picure: Quote Link to comment
Masterwishx Posted September 15, 2023 Share Posted September 15, 2023 @scolcipitato Also graph still without lines of CPU/MEM , using combined mode, in dynamix color black Quote Link to comment
Jaycedk Posted September 15, 2023 Share Posted September 15, 2023 (edited) 11 minutes ago, Masterwishx said: Thanks it fixed ,but somehow still have some random containers without linked to webui when point on globe Draw.io in second picure: I'm seeing that to. Can you see if you see this too ? In that docker All my dockers that work shows like this Edited September 15, 2023 by Jaycedk Quote Link to comment
Mattaton Posted September 15, 2023 Share Posted September 15, 2023 (edited) 5 minutes ago, Jaycedk said: I'm seeing that to. Can you see if you see this too ? In that docker Are you guys saying there are containers that should have globe icons (Web UIs) but the globe isn't showing up? That's what I have happening. Containers that should have the globe icon link, but do not. Not sure if it's coincidence or not, but for me it's the first container in three folders that should have the globe but don't. Edited September 15, 2023 by Mattaton Quote Link to comment
scolcipitato Posted September 15, 2023 Author Share Posted September 15, 2023 4 minutes ago, Jaycedk said: I'm seeing that to. Can you see if you see this too ? In that docker All my dockers that work shows like this This is the reason I don't want to mess with unraid code, I'll try to fix it. Quote Link to comment
scolcipitato Posted September 15, 2023 Author Share Posted September 15, 2023 5 minutes ago, Mattaton said: Are you guys saying there are containers that should have globe icons (Web UIs) but the globe isn't showing up? That's what I have happening. Containers that should have the globe icon link, but do not. For this I need the debug file. Quote Link to comment
Masterwishx Posted September 15, 2023 Share Posted September 15, 2023 12 minutes ago, Jaycedk said: Can you see if you see this too ? Sorry dont understand the question .... http://[IP]:[PORT:20211] this i have in both containers with and without showing ip in left corner that not linked 1 Quote Link to comment
Jaycedk Posted September 15, 2023 Share Posted September 15, 2023 Ok just think that was it 😁 Quote Link to comment
Masterwishx Posted September 15, 2023 Share Posted September 15, 2023 i meaned that @scolcipitato has fixed globe linked to ip:port of containers but some of them still not fixed ... Quote Link to comment
Mattaton Posted September 15, 2023 Share Posted September 15, 2023 8 minutes ago, scolcipitato said: For this I need the debug file. Are there instructions somewhere for doing that? Quote Link to comment
scolcipitato Posted September 15, 2023 Author Share Posted September 15, 2023 Just now, Mattaton said: Are there instructions somewhere for doing that? First post Quote Link to comment
scolcipitato Posted September 15, 2023 Author Share Posted September 15, 2023 41 minutes ago, Masterwishx said: @scolcipitato Also graph still without lines of CPU/MEM , using combined mode, in dynamix color black Any error in the browser console? Quote Link to comment
scolcipitato Posted September 15, 2023 Author Share Posted September 15, 2023 34 minutes ago, Jaycedk said: I'm seeing that to. Can you see if you see this too ? In that docker All my dockers that work shows like this I think I fixed it, now I'll wait for the other bug that have been reported and push the update. 2 Quote Link to comment
scolcipitato Posted September 15, 2023 Author Share Posted September 15, 2023 Pushed the new update with the fix. 🥳 1 1 Quote Link to comment
Mattaton Posted September 15, 2023 Share Posted September 15, 2023 4 minutes ago, scolcipitato said: Pushed the new update with the fix. 🥳 Unfortunately, I'm still missing those globe icons after the update. 😕 Quote Link to comment
Masterwishx Posted September 15, 2023 Share Posted September 15, 2023 (edited) 13 hours ago, Mattaton said: Unfortunately, I'm still missing those globe icons after the update. i have also missing globe icon for urBackup,Krusader Mostly webui now link ip:port is working but still have piAlert,Home-Assistant-Core ... no link (about:blank#blocked) Moslty i dont have lines of CPU/MEM but after refresh i have it for couple sec then it stuck /stop : Edited September 16, 2023 by Masterwishx Quote Link to comment
hernandito Posted September 16, 2023 Share Posted September 16, 2023 17 hours ago, Mattaton said: @hernandito Here's an update based on your notes. Thoughts? And a little fancier: Sweet! You did this all in custom.css? only tweaks would be to indent the rows of non-expanded folder icons so their left edges align w left edge of expanded large folder icon. also indent the whole block of expanded container icons so visually they look like a subset of the folder icon. would you mind sharing your code? excellent work! ps. I can’t tell the difference between the regular version and fancier versions above…. 1 Quote Link to comment
Mattaton Posted September 16, 2023 Share Posted September 16, 2023 2 hours ago, hernandito said: Sweet! You did this all in custom.css? only tweaks would be to indent the rows of non-expanded folder icons so their left edges align w left edge of expanded large folder icon. also indent the whole block of expanded container icons so visually they look like a subset of the folder icon. would you mind sharing your code? excellent work! ps. I can’t tell the difference between the regular version and fancier versions above…. Yeah, this is all with the custom css file. Here's where I am currently. Starting to get a little hacky with the indents. Getting the folder icons to line up is tricky and ends up making the docker pane look different than the vm pane. But I guess you could apply this to both panes. All the other panes have a 10px padding. I'm increasing the left padding to 20px and then giving a negative left margin of 10px to the expanded folder so it'll line up (other than the 1px border width - easily fixed). This works, more or less, but I can't figure out how to get the right margin of the expanded folder to extend another 10px to compensate for its negative left margin. Since it's set to be 100% width, I'm not sure how to add 10px to it. Tried negative right margin, but that had no effect. The only difference between the previous two images, was the fancy one had a rounded corner box around the child containers like a drawer instead of just the bottom border. Here's the code so far: /* Add a padding left to the entire docker icon area */ #docker_view tr:nth-child(2) td { padding-left: 20px; } /* Overcome 20px container padding-left by giving expanded folder a negative left margin */ .folder-showcase-outer[expanded="true"] { margin-left: -10px; } /* Push expanded folder and its children to full width and break them out of flow with non-expanded icons */ .folder-showcase-outer[expanded="true"], .folder-showcase-outer[expanded="true"] .folder-showcase { box-sizing: border-box; float: left; display: block; width: 100%; } /* Styles for the expanded folder header */ .folder-showcase-outer[expanded="true"] .folder-docker { position: relative; display: block; float: none; padding: 1rem; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.2); border-radius: 10px; margin-bottom: -10px; } /* Increase the size of the expanded folder's icon */ .folder-showcase-outer[expanded="true"] .folder-img-docker { width: 48px; height: 48px; } /* Increase the font size for the expanded folder */ .folder-showcase-outer[expanded="true"] .folder-appname-docker { font-size: 2rem; } /* Down arrow icon for the expanded folder header */ .folder-showcase-outer[expanded="true"] .folder-docker::after { position: absolute; content: "\f0d7"; display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: 3rem; right: 1rem; bottom: 0; } /* Styles for the child docker container icons "drawer" */ .folder-showcase-outer[expanded="true"] .folder-showcase { border: 1px solid rgba(255, 255, 255, 0.2); border-width: 0 1px 1px 1px; border-radius: 0 0 10px 10px; margin-bottom: 2rem; padding: 30px 20px 0 20px; } /* Hide the "started" and "stopped" text so that only the green arrow or red square shows on containers */ #docker_view .folder-element-docker .state { display: none; } Quote Link to comment
Mattaton Posted September 16, 2023 Share Posted September 16, 2023 @hernandito A few tweaks. Added border-box to all elements inside the docker pane. Border-box should just be the default, let's be honest. 😄 /* Apply border-box to all elements inside the docker pane */ #docker_view * { box-sizing: border-box; } Removed the width: 100% on the wrappers and used left: 0 and right: 0 to make sure it touches the edges at the 10px mark. /* Push expanded folder and its children to full width and break them out of flow with non-expanded icons */ .folder-showcase-outer[expanded="true"], .folder-showcase-outer[expanded="true"] .folder-showcase { float: left; display: block; /* width: 100%; */ left: 0; right: 0; } Also updated the expanded folder header to compensate for border and keep the icons lined up. /* Styles for the expanded folder header */ .folder-showcase-outer[expanded="true"] .folder-docker { position: relative; display: block; float: none; padding: 8px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.1); border-radius: 10px; margin-bottom: -10px; } Which gives me this: 1 Quote Link to comment
Mattaton Posted September 16, 2023 Share Posted September 16, 2023 (edited) @hernandito Okay. Sorry to blow things up with css code. Last tweak, I hope. 🙂 I realized that the left: 0 and right: 0 only worked on folders with enough container children to fill the width of the pane. Othwerwise it dropped back into flow with the unexpanded folders. That's fixed and I used a calc() to add 10px to the 100% width. I also refactored some code and cleaned things up. This should work pretty solid. I don't have any folders on my VMs, but this should style that area to match the docker pane with a few tweaks. /* Apply border-box to all elements inside the docker and vm panes */ #docker_view *, #vm_view * { box-sizing: border-box; } /* Add a padding left to the entire docker and vm icon area */ #docker_view tr:nth-child(2) td, #vm_view tr:nth-child(2) td { padding-left: 20px; } /* Expanded folder outer wrapper styles */ .folder-showcase-outer[expanded="true"] { border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.1); margin-bottom: 20px; margin-left: -10px; /* Overcome 20px container padding-left by giving expanded folder a negative left margin */ } /* Push expanded folder and its children to full width and break them out of flow with non-expanded icons */ .folder-showcase-outer[expanded="true"], .folder-showcase-outer[expanded="true"] .folder-showcase { float: left; display: block; width: calc( 100% + 10px ); /* Add 10px to the width to overcome negative margin */ } /* Expanded folder header styles */ .folder-showcase-outer[expanded="true"] .folder-docker { position: relative; /* Needed for absolute positioning of expanded arrow icon */ display: block; float: none; padding: 8px; border: 1px solid rgba(255, 255, 255, 0); /* transparent border for size */ background: rgba(255, 255, 255, 0.1); border-radius: 10px; } /* Increase the size of the expanded folder's icon */ .folder-showcase-outer[expanded="true"] .folder-img-docker { width: 48px; height: 48px; } /* Increase the font size for the expanded folder */ .folder-showcase-outer[expanded="true"] .folder-appname-docker { font-size: 2rem; } /* Down arrow icon for the expanded folder header */ .folder-showcase-outer[expanded="true"] .folder-docker::after { position: absolute; content: "\f0d7"; display: block; font: normal normal normal 14px/1 FontAwesome; font-size: 3rem; right: 1rem; bottom: 0; } /* Child docker container icons "drawer" styles */ .folder-showcase-outer[expanded="true"] .folder-showcase { padding: 0 20px; } /* Hide the "started" and "stopped" text so that only the green arrow or red square shows on containers */ #docker_view .folder-element-docker .state { display: none; } Edited September 16, 2023 by Mattaton 1 Quote Link to comment
hernandito Posted September 16, 2023 Share Posted September 16, 2023 (edited) 1 hour ago, Mattaton said: @hernandito Okay. Sorry to blow things up with css code. Last tweak, I hope. 🙂 I realized that the left: 0 and right: 0 only worked on folders with enough container children to fill the width of the pane. Othwerwise it dropped back into flow with the unexpanded folders. That's fixed and I used a calc() to add 10px to the 100% width. I also refactored some code and cleaned things up. This should work pretty solid. I don't have any folders on my VMs, but this should style that area to match the docker pane with a few tweaks. /* Apply border-box to all elements inside the docker and vm panes */ #docker_view *, #vm_view * { box-sizing: border-box; } /* Add a padding left to the entire docker and vm icon area */ #docker_view tr:nth-child(2) td, #vm_view tr:nth-child(2) td { padding-left: 20px; } /* Expanded folder outer wrapper styles */ .folder-showcase-outer[expanded="true"] { border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.1); margin-bottom: 20px; margin-left: -10px; /* Overcome 20px container padding-left by giving expanded folder a negative left margin */ } /* Push expanded folder and its children to full width and break them out of flow with non-expanded icons */ .folder-showcase-outer[expanded="true"], .folder-showcase-outer[expanded="true"] .folder-showcase { float: left; display: block; width: calc( 100% + 10px ); /* Add 10px to the width to overcome negative margin */ } /* Expanded folder header styles */ .folder-showcase-outer[expanded="true"] .folder-docker { position: relative; /* Needed for absolute positioning of expanded arrow icon */ display: block; float: none; padding: 8px; border: 1px solid rgba(255, 255, 255, 0); /* transparent border for size */ background: rgba(255, 255, 255, 0.1); border-radius: 10px; } /* Increase the size of the expanded folder's icon */ .folder-showcase-outer[expanded="true"] .folder-img-docker { width: 48px; height: 48px; } /* Increase the font size for the expanded folder */ .folder-showcase-outer[expanded="true"] .folder-appname-docker { font-size: 2rem; } /* Down arrow icon for the expanded folder header */ .folder-showcase-outer[expanded="true"] .folder-docker::after { position: absolute; content: "\f0d7"; display: block; font: normal normal normal 14px/1 FontAwesome; font-size: 3rem; right: 1rem; bottom: 0; } /* Child docker container icons "drawer" styles */ .folder-showcase-outer[expanded="true"] .folder-showcase { padding: 0 20px; } /* Hide the "started" and "stopped" text so that only the green arrow or red square shows on containers */ #docker_view .folder-element-docker .state { display: none; } this is fantastic…. Awesome work… can’t wait to try it… my serve is still in intensive care. Thank you! Edited September 16, 2023 by hernandito 1 Quote Link to comment
Masterwishx Posted September 16, 2023 Share Posted September 16, 2023 1 hour ago, Mattaton said: @hernandito Okay. Sorry to blow things up with css code. Last tweak, I hope. 🙂 I realized that the left: 0 and right: 0 only worked on folders with enough container children to fill the width of the pane. Othwerwise it dropped back into flow with the unexpanded folders. That's fixed and I used a calc() to add 10px to the 100% width. I also refactored some code and cleaned things up. This should work pretty solid. I don't have any folders on my VMs, but this should style that area to match the docker pane with a few tweaks. /* Apply border-box to all elements inside the docker and vm panes */ #docker_view *, #vm_view * { box-sizing: border-box; } /* Add a padding left to the entire docker and vm icon area */ #docker_view tr:nth-child(2) td, #vm_view tr:nth-child(2) td { padding-left: 20px; } /* Expanded folder outer wrapper styles */ .folder-showcase-outer[expanded="true"] { border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.1); margin-bottom: 20px; margin-left: -10px; /* Overcome 20px container padding-left by giving expanded folder a negative left margin */ } /* Push expanded folder and its children to full width and break them out of flow with non-expanded icons */ .folder-showcase-outer[expanded="true"], .folder-showcase-outer[expanded="true"] .folder-showcase { float: left; display: block; width: calc( 100% + 10px ); /* Add 10px to the width to overcome negative margin */ } /* Expanded folder header styles */ .folder-showcase-outer[expanded="true"] .folder-docker { position: relative; /* Needed for absolute positioning of expanded arrow icon */ display: block; float: none; padding: 8px; border: 1px solid rgba(255, 255, 255, 0); /* transparent border for size */ background: rgba(255, 255, 255, 0.1); border-radius: 10px; } /* Increase the size of the expanded folder's icon */ .folder-showcase-outer[expanded="true"] .folder-img-docker { width: 48px; height: 48px; } /* Increase the font size for the expanded folder */ .folder-showcase-outer[expanded="true"] .folder-appname-docker { font-size: 2rem; } /* Down arrow icon for the expanded folder header */ .folder-showcase-outer[expanded="true"] .folder-docker::after { position: absolute; content: "\f0d7"; display: block; font: normal normal normal 14px/1 FontAwesome; font-size: 3rem; right: 1rem; bottom: 0; } /* Child docker container icons "drawer" styles */ .folder-showcase-outer[expanded="true"] .folder-showcase { padding: 0 20px; } /* Hide the "started" and "stopped" text so that only the green arrow or red square shows on containers */ #docker_view .folder-element-docker .state { display: none; } Thanks, its really cool looking in dashboard 1 Quote Link to comment
Mattaton Posted September 16, 2023 Share Posted September 16, 2023 18 minutes ago, hernandito said: this is fantastic…. Awesome work… can’t wait to try it… my serve is still in intensive care. Thank you! Glad to help! Ugh. I recall you saying you were into some data recovery. Sorry, man. 😕 Quote Link to comment
Recommended Posts
Posted by Jaycedk,
6 reactions
Go to this post
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.