Get server console page rendering (mostly) correctly
This commit is contained in:
parent
43ff67238c
commit
1e163aa792
18 changed files with 140 additions and 160 deletions
|
@ -3,10 +3,10 @@ import ContentContainer from '@/components/elements/ContentContainer';
|
|||
import { CSSTransition } from 'react-transition-group';
|
||||
import tw from 'twin.macro';
|
||||
|
||||
const PageContentBlock: React.FC = ({ children }) => (
|
||||
const PageContentBlock: React.FC<{ className?: string }> = ({ children, className }) => (
|
||||
<CSSTransition timeout={250} classNames={'fade'} appear in>
|
||||
<>
|
||||
<ContentContainer css={tw`my-10`}>
|
||||
<ContentContainer css={tw`my-10`} className={className}>
|
||||
{children}
|
||||
</ContentContainer>
|
||||
<ContentContainer css={tw`mb-4`}>
|
||||
|
|
31
resources/scripts/components/elements/SubNavigation.tsx
Normal file
31
resources/scripts/components/elements/SubNavigation.tsx
Normal file
|
@ -0,0 +1,31 @@
|
|||
import styled from 'styled-components/macro';
|
||||
import tw from 'twin.macro';
|
||||
// @ts-ignore
|
||||
import config from '../../../../tailwind.config';
|
||||
|
||||
const SubNavigation = styled.div`
|
||||
${tw`w-full bg-neutral-700 shadow`};
|
||||
|
||||
& > div {
|
||||
${tw`flex items-center text-sm mx-auto px-2`};
|
||||
max-width: 1200px;
|
||||
|
||||
& > a, & > div {
|
||||
${tw`inline-block py-3 px-4 text-neutral-300 no-underline transition-all duration-150`};
|
||||
|
||||
&:not(:first-of-type) {
|
||||
${tw`ml-2`};
|
||||
}
|
||||
|
||||
&:active, &:hover {
|
||||
${tw`text-neutral-100`};
|
||||
}
|
||||
|
||||
&:active, &:hover, &.active {
|
||||
box-shadow: inset 0 -2px ${config.theme.colors.cyan['500']};
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export default SubNavigation;
|
|
@ -1,10 +1,11 @@
|
|||
import React, { Suspense } from 'react';
|
||||
import Spinner from '@/components/elements/Spinner';
|
||||
import tw from 'twin.macro';
|
||||
|
||||
const SuspenseSpinner = ({ children }: { children?: React.ReactNode }) => (
|
||||
<Suspense
|
||||
fallback={
|
||||
<div className={'mx-4 w-3/4 mr-4 flex items-center justify-center'}>
|
||||
<div css={tw`mx-4 w-3/4 mr-4 flex items-center justify-center`}>
|
||||
<Spinner centered/>
|
||||
</div>
|
||||
}
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
import React from 'react';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { IconProp } from '@fortawesome/fontawesome-svg-core';
|
||||
import tw from 'twin.macro';
|
||||
|
||||
interface Props {
|
||||
icon?: IconProp;
|
||||
|
@ -10,17 +11,17 @@ interface Props {
|
|||
}
|
||||
|
||||
const TitledGreyBox = ({ icon, title, children, className }: Props) => (
|
||||
<div className={`rounded shadow-md bg-neutral-700 ${className}`}>
|
||||
<div className={'bg-neutral-900 rounded-t p-3 border-b border-black'}>
|
||||
<div css={tw`rounded shadow-md bg-neutral-700`} className={className}>
|
||||
<div css={tw`bg-neutral-900 rounded-t p-3 border-b border-black`}>
|
||||
{typeof title === 'string' ?
|
||||
<p className={'text-sm uppercase'}>
|
||||
{icon && <FontAwesomeIcon icon={icon} className={'mr-2 text-neutral-300'}/>}{title}
|
||||
<p css={tw`text-sm uppercase`}>
|
||||
{icon && <FontAwesomeIcon icon={icon} css={tw`mr-2 text-neutral-300`}/>}{title}
|
||||
</p>
|
||||
:
|
||||
title
|
||||
}
|
||||
</div>
|
||||
<div className={'p-3'}>
|
||||
<div css={tw`p-3`}>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
|
|
Reference in a new issue