mirror of
https://gitee.com/nocobase/nocobase.git
synced 2025-07-01 18:52:20 +08:00
feat: make logo container width adaptive based on content type (#7075)
* feat: make logo container width adaptive based on content type * feat: add a minimum width to the text title
This commit is contained in:
parent
0e669c0bd3
commit
f1d9ea0336
@ -177,7 +177,6 @@ const layoutContentClass = css`
|
||||
`;
|
||||
|
||||
const className1 = css`
|
||||
width: 168px;
|
||||
height: var(--nb-header-height);
|
||||
margin-right: 4px;
|
||||
display: inline-flex;
|
||||
@ -186,6 +185,15 @@ const className1 = css`
|
||||
padding: 0;
|
||||
align-items: center;
|
||||
`;
|
||||
const className1WithFixedWidth = css`
|
||||
${className1}
|
||||
width: 168px;
|
||||
`;
|
||||
const className1WithAutoWidth = css`
|
||||
${className1}
|
||||
width: auto;
|
||||
min-width: 168px;
|
||||
`;
|
||||
const className2 = css`
|
||||
object-fit: contain;
|
||||
width: 100%;
|
||||
@ -263,7 +271,8 @@ const NocoBaseLogo = () => {
|
||||
const { token } = useToken();
|
||||
const fontSizeStyle = useMemo(() => ({ fontSize: token.fontSizeHeading3 }), [token.fontSizeHeading3]);
|
||||
|
||||
const logo = result?.data?.data?.logo?.url ? (
|
||||
const hasLogo = result?.data?.data?.logo?.url;
|
||||
const logo = hasLogo ? (
|
||||
<img className={className2} src={result?.data?.data?.logo?.url} />
|
||||
) : (
|
||||
<span style={fontSizeStyle} className={className3}>
|
||||
@ -271,7 +280,9 @@ const NocoBaseLogo = () => {
|
||||
</span>
|
||||
);
|
||||
|
||||
return <div className={className1}>{result?.loading ? null : logo}</div>;
|
||||
return (
|
||||
<div className={hasLogo ? className1WithFixedWidth : className1WithAutoWidth}>{result?.loading ? null : logo}</div>
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
|
Loading…
x
Reference in New Issue
Block a user