Ryan/Reactive-Resume
1
0
Fork 0
mirror of https://github.com/AmruthPillai/Reactive-Resume.git synced 2025-11-14 08:42:08 +10:00
Code Issues Packages Projects Releases Wiki Activity

fix styling issues and theme cascades across all templates

Browse Source
This commit is contained in:
Amruth Pillai
2022-11-23 15:20:04 +01:00
parent 9a42d684fb
commit 42d0e14b98
10 changed files with 100 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
client/templates/Castform/widgets/Masthead.tsx
View File

@ -35,34 +35,55 @@ export const MastheadSidebar: React.FC = () => {
/>
)}
<div>
<div className={clsx({ invert: contrast === 'light' })}>
<h1 className="mb-1">{name}</h1>
<p className="opacity-75">{headline}</p>
</div>
<div className={clsx('flex flex-col gap-2.5', css(`svg { color: ${color} }`))}>
<DataDisplay icon={<Room />} className="!gap-2 text-xs">
<DataDisplay icon={<Room />} className="!gap-2 text-xs" textClassName={clsx({ invert: contrast === 'light' })}>
{formatLocation(location)}
</DataDisplay>
<DataDisplay icon={<Cake />} className="!gap-2 text-xs">
<DataDisplay icon={<Cake />} className="!gap-2 text-xs" textClassName={clsx({ invert: contrast === 'light' })}>
{formatDateString(birthdate, dateFormat)}
</DataDisplay>
<DataDisplay icon={<Email />} className="!gap-2 text-xs" link={`mailto:${email}`}>
<DataDisplay
icon={<Email />}
className="!gap-2 text-xs"
link={`mailto:${email}`}
textClassName={clsx({ invert: contrast === 'light' })}
>
{email}
</DataDisplay>
<DataDisplay icon={<Phone />} className="!gap-2 text-xs" link={`tel:${phone}`}>
<DataDisplay
icon={<Phone />}
className="!gap-2 text-xs"
link={`tel:${phone}`}
textClassName={clsx({ invert: contrast === 'light' })}
>
{phone}
</DataDisplay>
<DataDisplay icon={<Public />} link={website && addHttp(website)} className="!gap-2 text-xs">
<DataDisplay
icon={<Public />}
link={website && addHttp(website)}
className="!gap-2 text-xs"
textClassName={clsx({ invert: contrast === 'light' })}
>
{website}
</DataDisplay>
{profiles.map(({ id, username, network, url }) => (
<DataDisplay key={id} icon={getProfileIcon(network)} link={url && addHttp(url)} className="!gap-2 text-xs">
<DataDisplay
key={id}
icon={getProfileIcon(network)}
link={url && addHttp(url)}
className="!gap-2 text-xs"
textClassName={clsx({ invert: contrast === 'light' })}
>
{username}
</DataDisplay>
))}

16
client/templates/Castform/widgets/Section.tsx
View File

@ -1,5 +1,6 @@
import { Email, Link, Phone } from '@mui/icons-material';
import { ListItem, Section as SectionType } from '@reactive-resume/schema';
import clsx from 'clsx';
import get from 'lodash/get';
import isArray from 'lodash/isArray';
import isEmpty from 'lodash/isEmpty';
@ -23,8 +24,10 @@ const Section: React.FC<SectionProps> = ({
}) => {
const section: SectionType = useAppSelector((state) => get(state.resume.present, path, {} as SectionType));
const dateFormat: string = useAppSelector((state) => get(state.resume.present, 'metadata.date.format'));
const layout: string[][][] = useAppSelector((state) => get(state.resume.present, 'metadata.layout'));
const sectionId = useMemo(() => section.id || path.replace('sections.', ''), [path, section]);
const isSidebarSection = useMemo(() => layout.some((row) => row[1].includes(sectionId)), [layout, sectionId]);
if (!section.visible) return null;
@ -35,7 +38,7 @@ const Section: React.FC<SectionProps> = ({
<Heading>{section.name}</Heading>
<div
className="grid items-start gap-4"
className={clsx('grid items-start gap-4', { invert: isSidebarSection })}
style={{ gridTemplateColumns: `repeat(${section.columns}, minmax(0, 1fr))` }}
>
{section.items.map((item: ListItem) => {
@ -76,8 +79,13 @@ const Section: React.FC<SectionProps> = ({
key={index}
className="mr-2 h-3 w-3 rounded-full border"
style={{
borderColor: 'var(--primary-color)',
backgroundColor: levelNum / (10 / 5) > index ? 'var(--primary-color)' : '',
borderColor: isSidebarSection ? 'var(--text-color)' : 'var(--primary-color)',
backgroundColor:
levelNum / (10 / 5) > index
? isSidebarSection
? 'var(--text-color)'
: 'var(--primary-color)'
: '',
}}
/>
))}
@ -94,7 +102,7 @@ const Section: React.FC<SectionProps> = ({
</DataDisplay>
)}
{keywords && <div>{keywords.join(', ')}</div>}
{keywords && <span>{keywords.join(', ')}</span>}
{(phone || email) && (
<div className="grid gap-1">