gcg/static-cms
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: styles for custom logo and use custom logo in top nav bar (#789)

Browse Source
This commit is contained in:
Daniel Lautzenheiser 2023-05-09 17:58:40 -04:00 committed by GitHub
parent 473b265c2d
commit f96bb026d9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 19 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/core/dev-test/backends/gitlab/config.yml
View File

@ -7,6 +7,7 @@ backend:
media_folder: assets/upload media_folder: assets/upload
public_folder: /assets/upload public_folder: /assets/upload
logo_url: http://localhost:8080/assets/uploads/lobby.jpg
media_library: media_library:
max_file_size: 100000000 max_file_size: 100000000
collections: collections:

9
packages/core/src/components/login/Login.tsx
View File

@ -32,7 +32,14 @@ const Login = ({
return ( return (
<div className="flex flex-col h-screen items-center justify-center bg-slate-50 dark:bg-slate-900"> <div className="flex flex-col h-screen items-center justify-center bg-slate-50 dark:bg-slate-900">
{config?.logo_url ? <img src={config.logo_url} /> : <StaticCmsLogo className="h-40 w-80" />} {config?.logo_url ? (
<div
className="h-40 w-80 mb-4 bg-cover bg-no-repeat bg-center object-cover"
style={{ backgroundImage: `url('${config.logo_url}')` }}
/>
) : (
<StaticCmsLogo className="h-40 w-80" />
)}
{error ? ( {error ? (
<div <div
className="flex px-4 py-3 mb-6 text-sm text-red-800 border border-red-300 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400 dark:border-red-800" className="flex px-4 py-3 mb-6 text-sm text-red-800 border border-red-300 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400 dark:border-red-800"

12
packages/core/src/components/navbar/Navbar.tsx
View File

@ -4,7 +4,7 @@ import { translate } from 'react-polyglot';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { checkBackendStatus } from '@staticcms/core/actions/status'; import { checkBackendStatus } from '@staticcms/core/actions/status';
import { selectDisplayUrl } from '@staticcms/core/reducers/selectors/config'; import { selectConfig, selectDisplayUrl } from '@staticcms/core/reducers/selectors/config';
import { useAppDispatch, useAppSelector } from '@staticcms/core/store/hooks'; import { useAppDispatch, useAppSelector } from '@staticcms/core/store/hooks';
import Button from '../common/button/Button'; import Button from '../common/button/Button';
import { StaticCmsIcon } from '../images/_index'; import { StaticCmsIcon } from '../images/_index';
@ -26,6 +26,7 @@ const Navbar = ({
breadcrumbs = [], breadcrumbs = [],
}: TranslatedProps<NavbarProps>) => { }: TranslatedProps<NavbarProps>) => {
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const config = useAppSelector(selectConfig);
const displayUrl = useAppSelector(selectDisplayUrl); const displayUrl = useAppSelector(selectDisplayUrl);
@ -45,7 +46,14 @@ const Navbar = ({
<div className="relative flex h-16 items-center justify-between"> <div className="relative flex h-16 items-center justify-between">
<div className="flex flex-1 items-center justify-center h-full sm:items-stretch sm:justify-start gap-4"> <div className="flex flex-1 items-center justify-center h-full sm:items-stretch sm:justify-start gap-4">
<div className="flex flex-shrink-0 items-center justify-center bg-slate-500 dark:bg-slate-700 w-16"> <div className="flex flex-shrink-0 items-center justify-center bg-slate-500 dark:bg-slate-700 w-16">
<StaticCmsIcon className="inline-flex w-10 h-10" /> {config?.logo_url ? (
<div
className="inline-flex h-10 w-10 bg-cover bg-no-repeat bg-center object-cover"
style={{ backgroundImage: `url('${config.logo_url}')` }}
/>
) : (
<StaticCmsIcon className="inline-flex w-10 h-10" />
)}
</div> </div>
<div className="flex h-full items-center text-xl font-semibold gap-1 text-gray-800 dark:text-white"> <div className="flex h-full items-center text-xl font-semibold gap-1 text-gray-800 dark:text-white">
{breadcrumbs.map((breadcrumb, index) => {breadcrumbs.map((breadcrumb, index) =>