Mattaton Posted September 24, 2023 Share Posted September 24, 2023 21 minutes ago, hernandito said: #2 - Reduce this margin... to tall compared to the bottom. Strange. Mine doesn't look like yours. Top and bottom space looks pretty even on mine: Quote Link to comment
scolcipitato Posted September 24, 2023 Author Share Posted September 24, 2023 20 minutes ago, hernandito said: #1 - Include (or option to include) the small icons for the UI's and Logs. I don't include them because I think the dashboard should be an overview of the server. If you want more access to information you should go to the tab, but I'll think about it, if this won't impact too badly the stock look. 9 minutes ago, Mattaton said: 26 minutes ago, hernandito said: #5 - Having to click to activate the mini menu and then select Expand / Compress seems unnecessary. Clicking on the icons and down arrows should toggle expand and compress. Clicking the Docker Icon when expanded can bring up that menu. Do people need that menu when clicking on a Folder icon? Hmmmm...this would involve @scolcipitato again. Making the down arrow close the folder will be somewhat impossible since they don't "exist" in the html code. I am adding it with CSS. So scolcipitato can't make that any sort of event handler for closing the folder. He can have the folder icon just open and close with a left-click, but what about all the other options in the context menu? I won't implement it for sure, as you said, I can't access the custom CSS you make. Even if I could, in the long run it would be a nightmare, having and maintaining custom code baked in for everyone who need something. I have a couple of ideas for making custom script, this is far, far away, I have other things to do before that. 1 Quote Link to comment
Mattaton Posted September 24, 2023 Share Posted September 24, 2023 2 minutes ago, scolcipitato said: I don't include them because I think the dashboard should be an overview of the server. If you want more access to information you should go to the tab, but I'll think about it, if this won't impact too badly the stock look. I won't implement it for sure, as you said, I can't access the custom CSS you make. Even if I could, in the long run it would be a nightmare, having and maintaining custom code baked in for everyone who need something. I have a couple of ideas for making custom script, this is far, far away, I have other things to do before that. Agreed. I, personally, rarely use the dashboard for anything and pretty much always go straight to the docker tab if I'm in unRAID for that reason. When I start unRAID it's on the Main tab, so it's one click to go to Dashboard or Docker. Easy choice. 🙂 1 Quote Link to comment
hernandito Posted September 24, 2023 Share Posted September 24, 2023 27 minutes ago, scolcipitato said: I don't include them because I think the dashboard should be an overview of the server. If you want more access to information you should go to the tab, but I'll think about it, if this won't impact too badly the stock look. I won't implement it for sure, as you said, I can't access the custom CSS you make. Even if I could, in the long run it would be a nightmare, having and maintaining custom code baked in for everyone who need something. I have a couple of ideas for making custom script, this is far, far away, I have other things to do before that. Tue enough... I was looking at the whole thing as Stand Alone user experience. For one, I am rarely in the dashboard. I'm normally on the Docker tab. It's nice to see all the great dockers up and running; knowing they are working for me. 1 Quote Link to comment
hernandito Posted September 24, 2023 Share Posted September 24, 2023 @scolcipitato Hi, I am trying to do tweaks to the Advanced context menu (with the graphs and such). Does it react to items in the Tooltipser elements inserted in custom-docker css? I try this and it does not respond: ========================================== Advanced Docker ToolTip Box ========================================== div.tooltipster-docker-folder { border: 1px solid #999999 !important; -webkit-box-shadow: 1px 1px 10px 3px #D1D1D1; box-shadow: 1px 1px 10px 3px #D1D1D1; } Quote Link to comment
hernandito Posted September 24, 2023 Share Posted September 24, 2023 Some Tooltipster items are common to the regular docker view. Would you consider making some items in there have their unique classes? Thanks. Quote Link to comment
scolcipitato Posted September 24, 2023 Author Share Posted September 24, 2023 4 minutes ago, hernandito said: @scolcipitato Hi, I am trying to do tweaks to the Advanced context menu (with the graphs and such). Does it react to items in the Tooltipser elements inserted in custom-docker css? I try this and it does not respond: ========================================== Advanced Docker ToolTip Box ========================================== div.tooltipster-docker-folder { border: 1px solid #999999 !important; -webkit-box-shadow: 1px 1px 10px 3px #D1D1D1; box-shadow: 1px 1px 10px 3px #D1D1D1; } I had similar issue when creating the stock css, you don't really want to style the root element. .tooltipster-docker-folder > .tooltipster-box { border: 1px solid #999999 !important; -webkit-box-shadow: 1px 1px 10px 3px #D1D1D1; box-shadow: 1px 1px 10px 3px #D1D1D1; } Quote Link to comment
hernandito Posted September 24, 2023 Share Posted September 24, 2023 Apologies some item are responding... I was updating the Dashboard custom css. It would be great to make the Docker Icon and the Docker Name both larger. Maybe add some padding below the top light gey box. Right now they have the same class as the regular items behind. Quote Link to comment
hernandito Posted September 24, 2023 Share Posted September 24, 2023 Sorry... I figure out how to resolve the icon size.... let me keep trying before I keep asking for crap.... Quote Link to comment
Mattaton Posted September 24, 2023 Share Posted September 24, 2023 11 minutes ago, hernandito said: Sorry... I figure out how to resolve the icon size.... let me keep trying before I keep asking for crap.... Check out the code near the bottom of this where I was styling the advanced context window for a dark mode. It has basically everything pulled into a selector you can play with. It's commented so you can see what's what. https://github.com/Tyree/folder.view.custom.css/blob/context-menu-dark-mode/docker-custom.css Although I did style the root tipster element, against @scolcipitato's advice. That's what has the border styles on it, so I'm not sure how else to affect/override the border without styling that element. Quote Link to comment
hernandito Posted September 24, 2023 Share Posted September 24, 2023 32 minutes ago, Mattaton said: Check out the code near the bottom of this where I was styling the advanced context window for a dark mode. It has basically everything pulled into a selector you can play with. It's commented so you can see what's what. https://github.com/Tyree/folder.view.custom.css/blob/context-menu-dark-mode/docker-custom.css Although I did style the root tipster element, against @scolcipitato's advice. That's what has the border styles on it, so I'm not sure how else to affect/override the border without styling that element. I missed this response... on my own I got this: With this code: /* ========================================== Advanced Docker ToolTip Box ========================================== */ div.tooltipster-content { border: 1px solid #888888 !important; -webkit-box-shadow: 1px 1px 10px 3px #D1D1D1; box-shadow: 1px 1px 10px 3px #999999; padding: 8px !important; border-radius: 10px; background-color: white; } div.tooltipster-content img.img, i.img { width: 58px !important; height: 58px !important; padding-left: 10px; font-size: 2.3rem; font-weight: bold; } div.tooltipster-content div.preview-actual-name { padding-left: 5px; } div.tooltipster-content span.appname { font-size: 2.3rem; font-weight: bold; } div.tooltipster-content div.info-ct { padding-right: 30px; } div.tooltipster-content div.second-row { padding-top: 17px; } div[id*='info-ports-'] { padding-top: 10px !important; background-color: #fff7eb !important; padding-left: 10px; color: #486dba !important; border: 1px solid #d6d6d6 !important; } div[id*='info-volumes-'] { padding-top: 10px !important; background-color: #fff7eb !important; padding-left: 10px; color: #486dba !important; border: 1px solid #d6d6d6 !important; } div.tooltipster-content canvas { border: 1px solid #e1e1e1; padding: 2px; } div.tooltipster-content div.preview-name { border-right: 1px solid #c2c2c2 !important; } Does this still violate the Tooltipster root? Quote Link to comment
hernandito Posted September 24, 2023 Share Posted September 24, 2023 Only problem w/ mine are if one has long Docker names. I keep mine short. I guess users can tweak. Quote Link to comment
hernandito Posted September 24, 2023 Share Posted September 24, 2023 Would the below also be altering the toooltipster root? div[id*='tooltipster-'] div.tooltipster-content { border: 1px solid #888888 !important; -webkit-box-shadow: 1px 1px 10px 3px #D1D1D1; box-shadow: 1px 1px 10px 3px #999999; padding: 8px !important; border-radius: 10px; background-color: white; } Quote Link to comment
Mattaton Posted September 24, 2023 Share Posted September 24, 2023 (edited) 20 minutes ago, hernandito said: Would the below also be altering the toooltipster root? div[id*='tooltipster-'] div.tooltipster-content { border: 1px solid #888888 !important; -webkit-box-shadow: 1px 1px 10px 3px #D1D1D1; box-shadow: 1px 1px 10px 3px #999999; padding: 8px !important; border-radius: 10px; background-color: white; } I'm not sure how it's used elsewhere in unRAID, so I don't know if this breaks something or not. This is still the toolstipster, though. Like I said, that is the element with the border, so there's no real way to get around styling it for the border (and shadow)... But, you can style the .preview-outbox for your padding and background color. Sorry, I had some other things to get done today, so I'm not focused on this at the moment. I'll look back at what you've accomplished later tonight. Edited September 24, 2023 by Mattaton Quote Link to comment
hernandito Posted September 24, 2023 Share Posted September 24, 2023 (edited) OK... Don't freak out... don't shoot me... I was just daydreaming and inspired by the Advanced View. This is only a Photoshop mock up, a lot of things would need to be designed/compacted/adjusted. This would be an alternative view to the Docker Folder. It would allow you to group Dockers that work together with each other and see the how they perform at the same time. Could add a network tab for download/upload... Transcoding in Plex, while downloading in Sab. Maybe this is not FolderView, but some other plug-in, call it DockerCards? Maybe you can get the same thing from one of those Grafana setups. Edited September 24, 2023 by hernandito Quote Link to comment
PilaScat Posted September 24, 2023 Share Posted September 24, 2023 Mine have some problems, latest version, I use dark reader dark theme, stats aren't visible and box is too big Quote Link to comment
Masterwishx Posted September 25, 2023 Share Posted September 25, 2023 7 hours ago, PilaScat said: Mine have some problems, latest version, I use dark reader dark theme, stats aren't visible and box is too big Statistic not working if other pages than docker page is opened , its some unraid bug, i opened issue for this on github. Check the count of your ports or volume mapping . The box is big when you have many ports like this: 1 Quote Link to comment
Mattaton Posted September 25, 2023 Share Posted September 25, 2023 (edited) Updated dark mode advanced context menu. Color scheme updated for stock unRAID. Most users will only need to tweak this section of variables to match their own color scheme: /* Color Scheme - Edit to your preferences */ --advc-cscheme-accent1: #ff8c2f; /* Main accent color */ --advc-cscheme-accent2: #2cabe3; /* Secondary accent color */ --advc-cscheme-light1: #ffffff; /* Light */ --advc-cscheme-light2: #cccccc; /* Lighter */ --advc-cscheme-light3: #a1a1a1; /* Lightest */ --advc-cscheme-dark1: #212121; /* Dark */ --advc-cscheme-dark2: #1c1b1b; /* Darker */ --advc-cscheme-dark3: #191818; /* Darkerer */ --advc-cscheme-dark4: #000000; /* Darkest */ https://github.com/Tyree/folder.view.custom.css/blob/context-menu-dark-mode/docker-custom.css This is a branch of my main Custom CSS. The Advanced Context Menu Dark Mode styles are at the bottom if you already have styles in place for the main docker table that you don't want to overwrite. Edited September 25, 2023 by Mattaton 1 1 Quote Link to comment
Masterwishx Posted September 25, 2023 Share Posted September 25, 2023 1 hour ago, Mattaton said: This is a branch of my main Custom CSS. The Advanced Context Menu Dark Mode styles are at the bottom if you already have styles in place for the main docker table that you don't want to overwrite. Many Thanks ,its Super cool looking Dark Mode 1 Quote Link to comment
actunr Posted September 25, 2023 Share Posted September 25, 2023 I cannot seem to figure out how to reorder the folders themselves on the Docker tab. Reordering dockers within a folder is fine but what about the folders. Quote Link to comment
scolcipitato Posted September 25, 2023 Author Share Posted September 25, 2023 Just now, actunr said: I cannot seem to figure out how to reorder the folders themselves on the Docker tab. Reordering dockers within a folder is fine but what about the folders. Take a look at the pinned comments. Quote Link to comment
SimonF Posted September 25, 2023 Share Posted September 25, 2023 Just now, actunr said: I cannot seem to figure out how to reorder the folders themselves on the Docker tab. Reordering dockers within a folder is fine but what about the folders. Have you clicked on padlock to unlock and allow movement? Quote Link to comment
actunr Posted September 25, 2023 Share Posted September 25, 2023 7 minutes ago, scolcipitato said: Take a look at the pinned comments. Thank you, totally glazed over it. 7 minutes ago, SimonF said: Have you clicked on padlock to unlock and allow movement? Got it, thanks. Quote Link to comment
scolcipitato Posted September 26, 2023 Author Share Posted September 26, 2023 I'm getting this out before the plugin update, so people will read it. The new version will change how the custom CSS works and will introduce custom scripts for at least the docker tab (I need to work a couple of things out on the dashboard) The new system will not work with current custom CSS file, no need to worry, all you need to do is rename the files. The new system will work with filenames, you can make a file specific for a page (dashboard, docker, vm) by naming the file SOMETHING.NAME_OF_THE_PAGE.(css/js) where something is what you want. The plugin won't check that, but it should be there, NAME_OF_THE_PAGE is the name of the page (dashboard, docker, vm) Ex. scolcipitato.docker.css will work only on the docker tab. scolcipitato.dashboard-docker-vm.css will work on the dashboard, docker and vm tabs The files will also be detected if inside a folder. Ex. test/scolcipitato.docker.css will work only on the docker tab. test/scolcipitato.dashboard-docker-vm.css will work on the dashboard, docker and vm tabs 2 Quote Link to comment
Mattaton Posted September 26, 2023 Share Posted September 26, 2023 14 minutes ago, scolcipitato said: The new system will work with filenames, you can make a file specific for a page (dashboard, docker, vm) by naming the file SOMETHING.NAME_OF_THE_PAGE.(css/js) where something is what you want. The plugin won't check that, but it should be there, NAME_OF_THE_PAGE is the name of the page (dashboard, docker, vm) Dude! You are awesome! This is so good I would like this post more than once if I could. My CSS files have gotten kinda long and this will allow me to break pieces out so people can pick and choose what they want. Ah man. Just awesome. Thank you 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.