mirror of
https://github.com/xitanggg/open-resume
synced 2024-11-03 09:19:21 +01:00
Fix some mobile web issues
This commit is contained in:
Xitang
parent
a9e3902a65
commit
346cb2ca07
@ -34,7 +34,7 @@ const ResumeControlBarComponent = ({
|
||||
}, [update, document]);
|
||||
|
||||
return (
|
||||
<div className="sticky bottom-0 left-0 right-0 flex h-[var(--resume-control-bar-height)] items-center justify-between px-[var(--resume-padding)] text-gray-600">
|
||||
<div className="sticky bottom-0 left-0 right-0 flex h-[var(--resume-control-bar-height)] items-center justify-center px-[var(--resume-padding)] text-gray-600 lg:justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<MagnifyingGlassIcon className="h-5 w-5" aria-hidden="true" />
|
||||
<input
|
||||
@ -49,7 +49,7 @@ const ResumeControlBarComponent = ({
|
||||
}}
|
||||
/>
|
||||
<div className="w-10">{`${Math.round(scale * 100)}%`}</div>
|
||||
<label className="flex items-center gap-1">
|
||||
<label className="hidden items-center gap-1 lg:flex">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="mt-0.5 h-4 w-4"
|
||||
@ -60,12 +60,12 @@ const ResumeControlBarComponent = ({
|
||||
</label>
|
||||
</div>
|
||||
<a
|
||||
className="ml-8 flex items-center gap-1 rounded-md border border-gray-300 px-3 py-0.5 hover:bg-gray-100"
|
||||
className="ml-1 flex items-center gap-1 rounded-md border border-gray-300 px-3 py-0.5 hover:bg-gray-100 lg:ml-8"
|
||||
href={instance.url!}
|
||||
download={fileName}
|
||||
>
|
||||
<ArrowDownTrayIcon className="h-4 w-4" />
|
||||
<span>Download Resume</span>
|
||||
<span className="whitespace-nowrap">Download Resume</span>
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -22,12 +22,10 @@ const Resume = () => {
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="relative flex">
|
||||
<FlexboxSpacer maxWidth={50} />
|
||||
<div className="relative flex justify-center md:justify-start">
|
||||
<FlexboxSpacer maxWidth={50} className="hidden md:block" />
|
||||
<div className="relative">
|
||||
<section
|
||||
className={`h-[calc(100vh-var(--top-nav-bar-height)-var(--resume-control-bar-height))] overflow-hidden p-[var(--resume-padding)]`}
|
||||
>
|
||||
<section className="h-[calc(100vh-var(--top-nav-bar-height)-var(--resume-control-bar-height))] overflow-hidden md:p-[var(--resume-padding)]">
|
||||
<ResumeIFrame
|
||||
documentSize={settings.documentSize}
|
||||
scale={scale}
|
||||
|
||||
@ -113,8 +113,8 @@ export const ResumeDropzone = ({
|
||||
>
|
||||
Browse a pdf file or drop it here
|
||||
</p>
|
||||
<p className="flex items-center justify-center text-sm text-gray-500">
|
||||
<LockClosedIcon className="mr-1 h-3 w-3 text-gray-400" />
|
||||
<p className="flex text-sm text-gray-500">
|
||||
<LockClosedIcon className="mr-1 mt-1 h-3 w-3 text-gray-400" />
|
||||
File data is used locally and never leaves your browser
|
||||
</p>
|
||||
</>
|
||||
|
||||
@ -59,7 +59,13 @@ export const SkillsForm = () => {
|
||||
<InputGroupWrapper
|
||||
label="Featured Skills (Optional)"
|
||||
className="col-span-full"
|
||||
/>
|
||||
>
|
||||
<p className="mt-2 text-sm font-normal text-gray-600">
|
||||
Featured skills is optional to highlight top skills, with more
|
||||
circles mean higher proficiency.
|
||||
</p>
|
||||
</InputGroupWrapper>
|
||||
|
||||
{featuredSkills.map(({ skill, rating }, idx) => (
|
||||
<FeaturedSkillInput
|
||||
key={idx}
|
||||
|
||||
@ -34,7 +34,7 @@ export const ResumeForm = () => {
|
||||
return (
|
||||
<div
|
||||
className={cx(
|
||||
"flex h-[calc(100vh-var(--top-nav-bar-height))] justify-end overflow-y-scroll scrollbar scrollbar-track-gray-100 scrollbar-w-3",
|
||||
"flex justify-center scrollbar scrollbar-track-gray-100 scrollbar-w-3 md:h-[calc(100vh-var(--top-nav-bar-height))] md:justify-end md:overflow-y-scroll",
|
||||
isHover && "scrollbar-thumb-gray-200"
|
||||
)}
|
||||
onMouseOver={() => setIsHover(true)}
|
||||
@ -49,7 +49,7 @@ export const ResumeForm = () => {
|
||||
<ThemeForm />
|
||||
<br />
|
||||
</section>
|
||||
<FlexboxSpacer maxWidth={50} />
|
||||
<FlexboxSpacer maxWidth={50} className="hidden md:block" />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -66,7 +66,7 @@ export const AutoTypingResume = () => {
|
||||
resume={resume}
|
||||
settings={{
|
||||
...initialSettings,
|
||||
fontSize: "12",
|
||||
fontSize: "12pt",
|
||||
formToHeading: {
|
||||
workExperiences: resume.workExperiences[0].company
|
||||
? "WORK EXPERIENCE"
|
||||
|
||||
@ -42,7 +42,8 @@ export const Features = () => {
|
||||
<div className="mx-auto lg:max-w-4xl">
|
||||
<dl className="grid grid-cols-1 justify-items-center gap-y-8 lg:grid-cols-2 lg:gap-x-6 lg:gap-y-16">
|
||||
{FEATURES.map(({ src, title, text }) => (
|
||||
<div className="relative w-96 self-center pl-16" key={title}>
|
||||
<div className="px-2" key={title}>
|
||||
<div className="relative w-96 self-center pl-16">
|
||||
<dt className="text-2xl font-bold">
|
||||
<Image
|
||||
src={src}
|
||||
@ -53,6 +54,7 @@ export const Features = () => {
|
||||
</dt>
|
||||
<dd className="mt-2">{text}</dd>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
@ -16,7 +16,7 @@ const LOGOS = [
|
||||
];
|
||||
|
||||
export const LogoCloud = () => (
|
||||
<section className="mt-10">
|
||||
<section className="mt-14 lg:mt-10">
|
||||
<h2 className="text-center font-semibold text-gray-500">
|
||||
Trusted by students and employees from top universities and companies
|
||||
worldwide
|
||||
@ -25,7 +25,7 @@ export const LogoCloud = () => (
|
||||
{LOGOS.map(({ src, alt }, idx) => (
|
||||
<Image
|
||||
key={idx}
|
||||
className="col-span-3 h-full max-h-10 max-w-[10rem] lg:col-span-1"
|
||||
className="col-span-3 h-full max-h-10 max-w-[130px] lg:col-span-1 lg:max-w-[160px]"
|
||||
src={src}
|
||||
alt={alt}
|
||||
/>
|
||||
|
||||
@ -8,7 +8,7 @@ export default function Create() {
|
||||
return (
|
||||
<Provider store={store}>
|
||||
<main className="relative h-full w-full overflow-hidden bg-gray-50">
|
||||
<div className="grid grid-cols-6">
|
||||
<div className="grid grid-cols-3 md:grid-cols-6">
|
||||
<div className="col-span-3">
|
||||
<ResumeForm />
|
||||
</div>
|
||||
|
||||
@ -145,7 +145,7 @@ export const ResumeParserAlgorithmArticle = ({
|
||||
<Table
|
||||
table={step1TextItemsTable}
|
||||
className="!border-none"
|
||||
tdClassNames={["", "", "whitespace-nowrap"]}
|
||||
tdClassNames={["", "", "md:whitespace-nowrap"]}
|
||||
/>
|
||||
</div>
|
||||
{/* Step 2. Group text items into lines */}
|
||||
|
||||
@ -53,17 +53,17 @@ export default function ResumeParser() {
|
||||
|
||||
return (
|
||||
<main className="h-full w-full overflow-hidden">
|
||||
<div className="grid sm:grid-cols-6">
|
||||
<div className="flex justify-end px-2 sm:col-span-3 sm:h-[calc(100vh-var(--top-nav-bar-height))]">
|
||||
<section className="mt-5 max-w-[600px] grow">
|
||||
<div className="grid md:grid-cols-6">
|
||||
<div className="flex justify-center px-2 md:col-span-3 md:h-[calc(100vh-var(--top-nav-bar-height))] md:justify-end">
|
||||
<section className="mt-5 grow px-4 md:max-w-[600px] md:px-0">
|
||||
<div className="aspect-h-[9.5] aspect-w-7">
|
||||
<iframe src={`${fileUrl}#navpanes=0`} className="h-full w-full" />
|
||||
</div>
|
||||
</section>
|
||||
<FlexboxSpacer maxWidth={45} className="hidden sm:block" />
|
||||
<FlexboxSpacer maxWidth={45} className="hidden md:block" />
|
||||
</div>
|
||||
<div className="flex px-6 text-gray-900 sm:col-span-3 sm:h-[calc(100vh-var(--top-nav-bar-height))] sm:overflow-y-scroll">
|
||||
<FlexboxSpacer maxWidth={45} />
|
||||
<div className="flex px-6 text-gray-900 md:col-span-3 md:h-[calc(100vh-var(--top-nav-bar-height))] md:overflow-y-scroll">
|
||||
<FlexboxSpacer maxWidth={45} className="hidden md:block" />
|
||||
<section className="max-w-[600px] grow">
|
||||
<Heading className="text-primary !mt-4">
|
||||
Resume Parser Playground
|
||||
|
||||
Loading…
Reference in New Issue
Block a user