OpenSource/homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix columns number && elipsis

Browse Source
This commit is contained in:
lukylix 2023-07-08 15:30:09 +02:00
parent 0dcc789980
commit 5c78a1f00a
2 changed files with 48 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
src/components/services/item.jsx
View File

@ -14,7 +14,7 @@ import ResolvedIcon from "components/resolvedicon";
export default function Item({ service, group }) { export default function Item({ service, group }) {
const hasLink = service.href && service.href !== "#"; const hasLink = service.href && service.href !== "#";
const { settings } = useContext(SettingsContext); const { settings } = useContext(SettingsContext);
const showStats = (service.showStats === false) ? false : settings.showStats; const showStats = service.showStats === false ? false : settings.showStats;
const [statsOpen, setStatsOpen] = useState(service.showStats); const [statsOpen, setStatsOpen] = useState(service.showStats);
const [statsClosing, setStatsClosing] = useState(false); const [statsClosing, setStatsClosing] = useState(false);
@ -58,16 +58,16 @@ export default function Item({ service, group }) {
href={service.href} href={service.href}
target={service.target ?? settings.target ?? "_blank"} target={service.target ?? settings.target ?? "_blank"}
rel="noreferrer" rel="noreferrer"
className="flex-1 flex items-center justify-between rounded-r-md " className="flex-1 flex items-center justify-between rounded-r-md w-full overflow-hidden"
> >
<div className="flex-1 px-2 py-2 text-sm text-left"> <div className="flex-1 px-2 py-2 text-sm text-left text-ellipsis whitespace-nowrap overflow-hidden ...">
{service.name} {service.name}
<p className="text-theme-500 dark:text-theme-300 text-xs font-light">{service.description}</p> <p className="text-theme-500 dark:text-theme-300 text-xs font-light">{service.description}</p>
</div> </div>
</a> </a>
) : ( ) : (
<div className="flex-1 flex items-center justify-between rounded-r-md "> <div className="flex-1 flex items-center justify-between rounded-r-md w-full overflow-hidden">
<div className="flex-1 px-2 py-2 text-sm text-left"> <div className="flex-1 px-2 py-2 text-sm text-left text-ellipsis whitespace-nowrap overflow-hidden ...">
{service.name} {service.name}
<p className="text-theme-500 dark:text-theme-300 text-xs font-light">{service.description}</p> <p className="text-theme-500 dark:text-theme-300 text-xs font-light">{service.description}</p>
</div> </div>
@ -75,33 +75,33 @@ export default function Item({ service, group }) {
)} )}
<div className="absolute top-0 right-0 w-1/2 flex flex-row justify-end gap-2 mr-2"> <div className="absolute top-0 right-0 w-1/2 flex flex-row justify-end gap-2 mr-2">
{service.ping && ( {service.ping && (
<div className="flex-shrink-0 flex items-center justify-center cursor-pointer"> <div className="flex-shrink-0 flex items-center justify-center cursor-pointer">
<Ping group={group} service={service.name} /> <Ping group={group} service={service.name} />
<span className="sr-only">Ping status</span> <span className="sr-only">Ping status</span>
</div> </div>
)} )}
{service.container && ( {service.container && (
<button <button
type="button" type="button"
onClick={() => (statsOpen ? closeStats() : setStatsOpen(true))} onClick={() => (statsOpen ? closeStats() : setStatsOpen(true))}
className="flex-shrink-0 flex items-center justify-center cursor-pointer" className="flex-shrink-0 flex items-center justify-center cursor-pointer"
> >
<Status service={service} /> <Status service={service} />
<span className="sr-only">View container stats</span> <span className="sr-only">View container stats</span>
</button> </button>
)} )}
{(service.app && !service.external) && ( {service.app && !service.external && (
<button <button
type="button" type="button"
onClick={() => (statsOpen ? closeStats() : setStatsOpen(true))} onClick={() => (statsOpen ? closeStats() : setStatsOpen(true))}
className="flex-shrink-0 flex items-center justify-center cursor-pointer" className="flex-shrink-0 flex items-center justify-center cursor-pointer"
> >
<KubernetesStatus service={service} /> <KubernetesStatus service={service} />
<span className="sr-only">View container stats</span> <span className="sr-only">View container stats</span>
</button> </button>
)} )}
</div> </div>
</div> </div>
@ -112,7 +112,9 @@ export default function Item({ service, group }) {
"w-full overflow-hidden transition-all duration-300 ease-in-out" "w-full overflow-hidden transition-all duration-300 ease-in-out"
)} )}
> >
{(showStats || statsOpen) && <Docker service={{ widget: { container: service.container, server: service.server } }} />} {(showStats || statsOpen) && (
<Docker service={{ widget: { container: service.container, server: service.server } }} />
)}
</div> </div>
)} )}
{service.app && ( {service.app && (
@ -122,7 +124,13 @@ export default function Item({ service, group }) {
"w-full overflow-hidden transition-all duration-300 ease-in-out" "w-full overflow-hidden transition-all duration-300 ease-in-out"
)} )}
> >
{(showStats || statsOpen) && <Kubernetes service={{ widget: { namespace: service.namespace, app: service.app, podSelector: service.podSelector } }} />} {(showStats || statsOpen) && (
<Kubernetes
service={{
widget: { namespace: service.namespace, app: service.app, podSelector: service.podSelector },
}}
/>
)}
</div> </div>
)} )}

14
src/components/services/list.jsx
View File

@ -17,13 +17,13 @@ const columnMap = [
const subcolumnMap = [ const subcolumnMap = [
"grid-cols-1", "grid-cols-1",
"grid-cols-1", "grid-cols-1",
"grid-cols-[repeat(auto-fit,minmax(11rem,1fr))]", "grid-cols-1 @[11rem]:grid-cols-2",
"grid-cols-[repeat(auto-fit,minmax(9rem,1fr))]", "grid-cols-1 @[9rem]:grid-cols-2 @[18rem]:grid-cols-3",
"grid-cols-[repeat(auto-fit,minmax(7rem,1fr))]", "grid-cols-1 @[7rem]:grid-cols-2 @[14rem]:grid-cols-3 @[21rem]:grid-cols-4",
"grid-cols-[repeat(auto-fit,minmax(7rem,1fr))]", "grid-cols-1 @[7rem]:grid-cols-2 @[14rem]:grid-cols-3 @[21rem]:grid-cols-4 @[28rem]:grid-cols-5",
"grid-cols-[repeat(auto-fit,minmax(7rem,1fr))]", "grid-cols-1 @[7rem]:grid-cols-2 @[14rem]:grid-cols-3 @[21rem]:grid-cols-4 @[28rem]:grid-cols-5 @[35rem]:grid-cols-6",
"grid-cols-[repeat(auto-fit,minmax(7rem,1fr))]", "grid-cols-1 @[7rem]:grid-cols-2 @[14rem]:grid-cols-3 @[21rem]:grid-cols-4 @[28rem]:grid-cols-5 @[35rem]:grid-cols-6 @[42rem]:grid-cols-7",
"grid-cols-[repeat(auto-fit,minmax(7rem,1fr))]", "grid-cols-1 @[7rem]:grid-cols-2 @[14rem]:grid-cols-3 @[21rem]:grid-cols-4 @[28rem]:grid-cols-5 @[35rem]:grid-cols-6 @[42rem]:grid-cols-7 @[49rem]:grid-cols-8",
]; ];
export default function List({ group, services, layout, isGroup = false }) { export default function List({ group, services, layout, isGroup = false }) {