Skip to content

Commit 58a6920

Browse files
jcf-juniorjcf-junior
authored
Merge pull request #17 from jcf-junior/ui/editor-rework
UI/editor rework
2 parents bb82261 + f1d0ec1 commit 58a6920

10 files changed

Lines changed: 80 additions & 69 deletions

File tree

‎TODO.md‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,23 +2,26 @@
22
TODO
33
[X] Skills input doesn't work
44
[X] Implement Certifications input. It already exists, but has no input logic.
5-
[ ] Allow the custom fields in inputs
6-
[ ] Add hyperlinks to text in CV Socials, Projects and Certifications
7-
[ ] Add other sections:
8-
Recommendations, Articles, Awards, etc...
95
[X] Create Homepage
106
[X] Fix PDF Print
117
[X] Create Credits section in readme and thank Jake Gutierrez for the template
128
[X] Create Roadmap section in readme - Add multiple Template selection
139
[X] Create new release when homepage is done and when pdf printing works
10+
[ ] Allow the custom fields in inputs
11+
[ ] Add hyperlinks to text in CV Socials, Projects and Certifications
12+
[ ] Add other sections:
13+
Recommendations, Articles, Awards, etc...
1414
[ ] Add Drag & Drop functionality
15+
[ ] Create /tips page
16+
[ ] Create 404 Page
1517
~~[ ] Recreate CV without Tailwind~~
1618

1719
#########
1820
Bugs (create issue and add to Kanban):
1921
[X] Removing all experience inputs does not remove Experience title from CV
2022
[X] Adding an empty project show a separator ("|") in the CV Preview and date renders.
2123
[X] Fix socials spacing in CV preview
24+
[X] Fix CV position (add scrollable)
25+
[X] Certifications remove button triggers on input border.
2226
[ ] Fix CV Pagination
23-
[ ] Fix CV position (add scrollable)
24-
[X] Certifications remove button triggers on input border.
27+
[ ] Remove outside scrollbar

‎src/App.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
11
import { Outlet } from "react-router";
22
import Navbar from "./components/Navbar";
3-
import Footer from "./components/Footer";
43

54
export default function App() {
65
return (
76
<>
87
<Navbar />
98
<Outlet />
10-
<Footer />
119
</>
1210
);
1311
}

‎src/components/EditorInputs.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ type Props = {
1313

1414
export default function EditorInputs({ cvData, setCvData }: Props) {
1515
return (
16-
<div className="bg-white p-4 rounded-3xl">
16+
<div className="bg-white p-4">
1717
<h2 className="text-2xl font-bold text-slate-900 mb-2">Editor Inputs</h2>
1818
<p className="text-slate-500 text-sm mb-6">
1919
Your progress is saved automatically on Local Storage.

‎src/components/Navbar.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { NavLink } from "react-router";
22
export default function Navbar() {
33
return (
4-
<nav className="w-full bg-white sticky top-0 z-50 shadow-sm mx-auto p-4 lg:px-8 lg:py-5 flex items-center justify-between">
4+
<nav className="w-full bg-white shadow-sm mx-auto p-4 lg:px-8 lg:py-5 flex items-center justify-between border-b border-gray-300">
55
<NavLink
66
to="/"
77
>

‎src/components/Toolbar.tsx‎

Lines changed: 23 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -16,55 +16,58 @@ export default function Toolbar({
1616
resetCv,
1717
}: Props) {
1818
return (
19-
<div className="flex gap-5 justify-center items-center">
20-
<div className="bg-white flex items-center justify-center rounded-2xl gap-1 text-gray-100">
19+
<div className="fixed bottom-10 mx-auto flex gap-5 w-fit justify-center items-center bg-white rounded-full px-2 py-2 border border-slate-200 shadow-lg z-9999">
20+
<div className="bg-white flex gap-1 items-center justify-center text-gray-100">
2121
<button
22-
className="flex gap-2 items-center px-5 py-2 rounded-l-2xl bg-slate-900 hover:bg-slate-800 hover:scale-105 cursor-pointer transition-all"
23-
onClick={() => zoomIn()}
22+
className="text-slate-500 hover:text-slate-800 cursor-pointer transition-all"
23+
onClick={() => zoomOut()}
2424
>
25-
<i className="fas fa-magnifying-glass-plus"></i>
26-
Zoom In
25+
<i className="fas fa-minus"></i>
2726
</button>
2827

2928
<input
3029
key={scaleFactor}
3130
aria-label="Zoom percentage"
3231
defaultValue={(scaleFactor * 100).toFixed(0) + "%"}
33-
className="text-black font-bold w-[50px] text-center focus:outline-none"
32+
className="text-slate-500 w-[5ch] font-bold px-1 text-center focus:outline-none text-xs"
3433
onKeyDown={(e) => {
3534
if (e.key == "Enter") {
3635
const val = parseInt(e.currentTarget.value);
3736
if (!isNaN(val)) {
38-
const clamped = Math.min(MAX_ZOOM * 100, Math.max(MIN_ZOOM * 100, val));
37+
const clamped = Math.min(
38+
MAX_ZOOM * 100,
39+
Math.max(MIN_ZOOM * 100, val),
40+
);
3941
setScaleFactor(clamped / 100);
4042
}
4143
}
4244
}}
4345
/>
4446

4547
<button
46-
className="flex gap-2 items-center px-5 py-2 rounded-r-2xl bg-slate-900 hover:bg-slate-800 hover:scale-105 cursor-pointer transition-all"
47-
onClick={() => zoomOut()}
48+
className="text-slate-500 hover:text-slate-800 cursor-pointer transition-all"
49+
onClick={() => zoomIn()}
4850
>
49-
<i className="fas fa-magnifying-glass-minus"></i>
50-
Zoom Out
51+
<i className="fas fa-plus"></i>
5152
</button>
5253
</div>
5354

54-
<button
55-
className="flex items-center gap-2 bg-slate-900 text-white px-5 py-2 rounded-xl font-bold hover:bg-slate-800 hover:scale-105 cursor-pointer transition-all shadow-md active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed"
56-
onClick={() => window.print()}
57-
>
58-
<i className="fas fa-download"></i>Download PDF
59-
</button>
55+
<span className="w-px h-4 bg-slate-300"></span>
6056

6157
<button
62-
className="flex items-center gap-2 bg-red-500 text-white px-5 py-2 rounded-xl font-bold hover:bg-red-600 hover:scale-105 cursor-pointer transition-all shadow-md active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed"
58+
className="text-slate-500 hover:text-slate-800 cursor-pointer transition-all"
6359
onClick={() => {
6460
resetCv();
6561
}}
6662
>
67-
<i className="fas fa-redo"></i>Reset CV
63+
<i className="fas fa-redo"></i>
64+
</button>
65+
66+
<button
67+
className="flex items-center gap-2 bg-indigo-600 text-white px-6 py-2 rounded-full font-bold hover:bg-slate-800 cursor-pointer transition-all shadow-md active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed text-sm"
68+
onClick={() => window.print()}
69+
>
70+
<i className="fas fa-print"></i>Print PDF
6871
</button>
6972
</div>
7073
);

‎src/index.css‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,6 @@
44
font-family: "Inter";
55
}
66

7-
.screen-height {
8-
height: calc(100vh - 150px);
9-
}
10-
117
@media print {
128
@page {
139
size: A4;
@@ -21,6 +17,8 @@
2117
#print-target,
2218
#print-target > * {
2319
display: block !important;
20+
-webkit-print-color-adjust: exact !important;
21+
print-color-adjust: exact !important;
2422
}
2523
}
2624

‎src/pages/Editor.tsx‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -36,14 +36,16 @@ export default function Editor() {
3636
document.getElementById("print-target")!,
3737
)}
3838

39-
<div className="flex px-6 py-6 gap-4 screen-height">
40-
<div className="w-1/2 border border-gray-500 rounded-lg p-6 overflow-y-scroll">
39+
<div className="flex h-[calc(100vh-72px)]">
40+
<div className="w-2/5 border-r border-gray-500 overflow-y-scroll z-1">
4141
<EditorInputs cvData={cvData} setCvData={setCvData} />
4242
</div>
4343

4444
<div
4545
ref={containerRef}
46-
className="w-1/2 flex flex-col items-center gap-4 border border-gray-500 rounded-lg p-6 overflow-y-scroll"
46+
className="w-3/5 flex flex-col items-center gap-4 rounded-lg z-0
47+
bg-gray-100 pt-6 h-full overflow-scroll"
48+
4749
>
4850
<Toolbar
4951
scaleFactor={scaleFactor}
@@ -54,8 +56,8 @@ export default function Editor() {
5456
/>
5557

5658
<div
57-
className="w-fit shadow"
58-
style={{ scale: `${scaleFactor}`, transformOrigin: "top center" }}
59+
className="w-fit shadow mx-auto block"
60+
style={{ zoom: `${scaleFactor}` }}
5961
>
6062
<JakesResume cvData={cvData} />
6163
</div>

‎src/pages/Home.tsx‎

Lines changed: 35 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,50 @@
1+
import Footer from "../components/Footer";
2+
13
export default function Home() {
24
return (
3-
<div className="w-full min-h-screen bg-gray-50">
4-
<div className="p-5 ">
5-
<div className="text-center items-center mt-16">
6-
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-indigo-50 text-indigo-700 text-xs font-bold uppercase tracking-wider">
7-
<span className="relative flex h-2 w-2">
8-
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-indigo-400 opacity-75"></span>
9-
<span className="relative inline-flex rounded-full h-2 w-2 bg-indigo-500"></span>
10-
</span>
11-
100% free and open-source
12-
</div>
5+
<>
6+
<div className="w-full min-h-screen bg-gray-50">
7+
<div className="p-5 ">
8+
<div className="text-center items-center mt-16">
9+
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-indigo-50 text-indigo-700 text-xs font-bold uppercase tracking-wider">
10+
<span className="relative flex h-2 w-2">
11+
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-indigo-400 opacity-75"></span>
12+
<span className="relative inline-flex rounded-full h-2 w-2 bg-indigo-500"></span>
13+
</span>
14+
100% free and open-source
15+
</div>
1316

14-
<h1 className="text-5xl font-bold text-center text-gray-900 mt-3">
15-
<span className="text-indigo-700">Getcv.dev</span> is the easiest
16-
way to create a<span className="block">recruiter-approved CV </span>
17-
</h1>
18-
<p className="mt-3 text-gray-500 text-base">
19-
Create an ATS-optimized CV in minutes, using a template made by
20-
engineers for engineers.
21-
</p>
17+
<h1 className="text-5xl font-bold text-center text-gray-900 mt-3">
18+
<span className="text-indigo-700">Getcv.dev</span> is the easiest
19+
way to create a
20+
<span className="block">recruiter-approved CV </span>
21+
</h1>
22+
<p className="mt-3 text-gray-500 text-base">
23+
Create an ATS-optimized CV in minutes, using a template made by
24+
engineers for engineers.
25+
</p>
26+
</div>
2227
</div>
23-
</div>
2428

25-
<div className="relative mt-6">
26-
<div className="h-[50vh]"></div>
29+
<div className="relative mt-6">
30+
<div className="h-[50vh]"></div>
2731

28-
{/* <img
32+
{/* <img
2933
className="w-[600px] absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-10 shadow-2xl"
3034
src="https://placehold.co/794x1123/png"
3135
alt="Preview"
3236
/> */}
3337

34-
<img
35-
className="w-[800px] absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-10 shadow-2xl"
36-
src="/assets/hero-cropped.jpg"
37-
alt="Preview"
38-
/>
38+
<img
39+
className="w-[800px] absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-10 shadow-2xl"
40+
src="/assets/hero-cropped.jpg"
41+
alt="Preview"
42+
/>
3943

40-
<div className="h-[50vh] bg-neutral-800"></div>
44+
<div className="h-[50vh] bg-neutral-800"></div>
45+
</div>
4146
</div>
42-
</div>
47+
<Footer />
48+
</>
4349
);
4450
}

‎src/templates/JakesResume.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ export default function JakesResume({ cvData }: CvProps) {
2323

2424
return (
2525
<div>
26-
<div className="my-0 mx-auto lm leading-[1em] text-[10.91pt] w-[8.27in] h-[11.69in] p-[0.5in] bg-white text-black box-border">
26+
<div className="m-0 lm leading-[1em] text-[10.91pt] w-[8.27in] h-[11.69in] p-[0.5in] bg-white text-black box-border block z-10">
2727
<section className="mt-[5pt] mb-[5pt]">
2828
<h1 className="text-center text-[24.79pt] font-bold mb-[9pt]">
2929
{cvData.personalInfo.name}

‎src/templates/jakesResume.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,7 @@
6161
display: block;
6262
width: 100%;
6363
height: 1px;
64+
border-top: 1px solid black;
6465
background-color: black;
6566
margin-top: 3pt;
6667
}

0 commit comments

Comments
 (0)