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

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

@ -14,7 +14,7 @@ import ResolvedIcon from "components/resolvedicon";
export default function Item({ service, group }) {
const hasLink = service.href && service.href !== "#";
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 [statsClosing, setStatsClosing] = useState(false);
@ -58,16 +58,16 @@ export default function Item({ service, group }) {
href={service.href}
target={service.target ?? settings.target ?? "_blank"}
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}
<p className="text-theme-500 dark:text-theme-300 text-xs font-light">{service.description}</p>
</div>
</a>
) : (
<div className="flex-1 flex items-center justify-between rounded-r-md ">
<div className="flex-1 px-2 py-2 text-sm text-left">
<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 text-ellipsis whitespace-nowrap overflow-hidden ...">
{service.name}
<p className="text-theme-500 dark:text-theme-300 text-xs font-light">{service.description}</p>
</div>
@ -92,7 +92,7 @@ export default function Item({ service, group }) {
<span className="sr-only">View container stats</span>
</button>
)}
{(service.app && !service.external) && (
{service.app && !service.external && (
<button
type="button"
onClick={() => (statsOpen ? closeStats() : setStatsOpen(true))}
@ -112,7 +112,9 @@ export default function Item({ service, group }) {
"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>
)}
{service.app && (
@ -122,7 +124,13 @@ export default function Item({ service, group }) {
"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>
)}

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

@ -17,13 +17,13 @@ const columnMap = [
const subcolumnMap = [
"grid-cols-1",
"grid-cols-1",
"grid-cols-[repeat(auto-fit,minmax(11rem,1fr))]",
"grid-cols-[repeat(auto-fit,minmax(9rem,1fr))]",
"grid-cols-[repeat(auto-fit,minmax(7rem,1fr))]",
"grid-cols-[repeat(auto-fit,minmax(7rem,1fr))]",
"grid-cols-[repeat(auto-fit,minmax(7rem,1fr))]",
"grid-cols-[repeat(auto-fit,minmax(7rem,1fr))]",
"grid-cols-[repeat(auto-fit,minmax(7rem,1fr))]",
"grid-cols-1 @[11rem]:grid-cols-2",
"grid-cols-1 @[9rem]:grid-cols-2 @[18rem]:grid-cols-3",
"grid-cols-1 @[7rem]:grid-cols-2 @[14rem]:grid-cols-3 @[21rem]:grid-cols-4",
"grid-cols-1 @[7rem]:grid-cols-2 @[14rem]:grid-cols-3 @[21rem]:grid-cols-4 @[28rem]:grid-cols-5",
"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-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-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 }) {