nhm91135 Posted October 6, 2023 Share Posted October 6, 2023 (edited) 6 hours ago, Squid said: Not all .page files (built in pages) are compatible with being able to be displayed as a tab due to their design. But, in this particular case, why would you want Docker Containers to be shown as a tab when they're already shown in the existing Docker tab??? I was hoping that it would be the Containers box from the Dashboard because when trying to open a WebGui from my phone, I have to zoom in on the Container box but then the Select List to open the gui opens off of the screen to the left, so I have to zoom out, a bit, hopefully enough to see the select list. I understand now that Custom Tab is not for that. Still, having the container box from dashboard by itself on a page would be amazing. We did something similar in our own software, maybe my mind is node locked, Thanks. Edited October 6, 2023 by nhm91135 Quote Link to comment
Squid Posted October 6, 2023 Author Share Posted October 6, 2023 8 hours ago, nhm91135 said: Dashboard Dashboard works completely different Quote Link to comment
dixtdf Posted October 17, 2023 Share Posted October 17, 2023 (edited) I have done everything for a better experience, and I hope not to be held accountable for using the following methods I hope the author of 'Custom Tab' can see this code, which implements adaptive window size The current form can only be set to a fixed size and is not friendly for devices with different resolutions I hope to add an adaptive window size option, and I can only temporarily resolve it this way until further updates arrive // ==UserScript== // @name Unraid Custom Tab自适应窗体大小 // @namespace https://github.com/dixtdf/Unraid-Custom-Tab-Adaptive-Window-Size // @version 1.0 // @description 窗体宽高随意设置即可 // @author dixtdf // @match http*://*/* // @icon https://upload.forums.unraid.net/live/monthly_2017_05/customlarge.png.e0cb690d73cea725de6927fc0abce6a7.png // @grant none // @license MIT // ==/UserScript== (function() { function onWindowResize() { let elementsByClassName = window.document.getElementsByClassName("content shift"); if (elementsByClassName.length>0){ let computedStyle = window.getComputedStyle(elementsByClassName[0].querySelector(".title")); if (computedStyle){ let height = window.innerHeight-( window.document.getElementById("header").offsetHeight +window.document.getElementById("menu").offsetHeight +(window.document.getElementById("footer")!=null?window.document.getElementById("footer").offsetHeight:26) +parseInt(computedStyle.getPropertyValue("height").replace("px",""), 10) +parseInt(computedStyle.getPropertyValue("padding-top").replace("px",""), 10) +parseInt(computedStyle.getPropertyValue("padding-bottom").replace("px",""), 10) +parseInt(computedStyle.getPropertyValue("margin-top").replace("px",""), 10) +parseInt(computedStyle.getPropertyValue("margin-bottom").replace("px",""), 10) +30 ) let width=parseInt(computedStyle.getPropertyValue("width").replace("px",""), 10) +parseInt(computedStyle.getPropertyValue("padding-left").replace("px",""), 10) +parseInt(computedStyle.getPropertyValue("padding-right").replace("px",""), 10) let iframeElement = window.document.querySelector(".content.shift iframe"); iframeElement.style.width = width+"px"; iframeElement.style.height = height+"px"; iframeElement.style.border = "0px"; } } } window.addEventListener("resize", function() { clearTimeout(window.resizedFinished); window.resizedFinished = setTimeout(onWindowResize, 200); }); onWindowResize(); })(); Of course, you can manually edit/usr/local/emhttp/plugins/customtabtemp/View *. page to insert the following code into the last line, which can achieve the same effect <script> function onWindowResize() { let elementsByClassName = window.document.getElementsByClassName("content shift"); if (elementsByClassName.length>0){ let computedStyle = window.getComputedStyle(elementsByClassName[0].querySelector(".title")); if (computedStyle){ let height = window.innerHeight-( window.document.getElementById("header").offsetHeight +window.document.getElementById("menu").offsetHeight +(window.document.getElementById("footer")!=null?window.document.getElementById("footer").offsetHeight:26) +parseInt(computedStyle.getPropertyValue("height").replace("px",""), 10) +parseInt(computedStyle.getPropertyValue("padding-top").replace("px",""), 10) +parseInt(computedStyle.getPropertyValue("padding-bottom").replace("px",""), 10) +parseInt(computedStyle.getPropertyValue("margin-top").replace("px",""), 10) +parseInt(computedStyle.getPropertyValue("margin-bottom").replace("px",""), 10) +30 ) let width=parseInt(computedStyle.getPropertyValue("width").replace("px",""), 10) +parseInt(computedStyle.getPropertyValue("padding-left").replace("px",""), 10) +parseInt(computedStyle.getPropertyValue("padding-right").replace("px",""), 10) let iframeElement = window.document.querySelector(".content.shift iframe"); iframeElement.style.width = width+"px"; iframeElement.style.height = height+"px"; iframeElement.style.border = "0px"; } } } window.addEventListener("resize", function() { clearTimeout(window.resizedFinished); window.resizedFinished = setTimeout(onWindowResize, 200); }); onWindowResize(); </script> Edited October 17, 2023 by dixtdf Quote Link to comment
cinereus Posted December 23, 2023 Share Posted December 23, 2023 On 6/18/2017 at 4:43 PM, Squid said: Added in support for custom tabs when using 6.4 RC3+ and the Azure / Gray themes Dynamix utilizes font-awesome for the new themes. A new entry on each Custom Tab setting will allow you to enter in the appropriate font-awesome code for the icon. This is a list of the font-awesome codes: http://fontawesome.io/cheatsheet/ When looking at it, you'll see entries like: fa-envelope [] What you need to enter for this particular icon is f0e0 Entering in an invalid code may result in strange results from dynamix (but doesn't appear to cause any crashing of unRaid's UI) Icons don't work... Quote Link to comment
Recommended Posts
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.