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

- recreating onyx template

Browse Source 
- profile section complete
This commit is contained in:
Amruth Pillai
2020-07-05 16:45:29 +05:30
parent 03e1de1d14
commit 49a867dd37
17 changed files with 159 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/builder/center/Artboard.js
View File

@ -1,21 +1,16 @@
import React, { useContext } from "react";
import ResumeContext from "../../../contexts/ResumeContext";
import TemplateContext from "../../../contexts/TemplateContext";
import Onyx from "../../../templates/Onyx";
import styles from "./Artboard.module.css";
const Artboard = () => {
const { blocks } = useContext(TemplateContext);
const { blocks, colors } = useContext(TemplateContext);
const { state } = useContext(ResumeContext);
return (
<div className={styles.container}>
<div className={`grid gap-8 grid-cols-${blocks.length}`}>
{blocks.map((block, ind) => (
<div key={ind} className="col-span-1">
{block.map((x) => (
<div key={x.id}>{x.name}</div>
))}
</div>
))}
</div>
<div id="artboard" className={styles.container}>
<Onyx data={state} layout={blocks} colors={colors} />
</div>
);
};

5
src/components/builder/center/Artboard.module.css
View File

@ -1,6 +1,7 @@
.container {
width: 400px;
height: 600px;
width: 210mm;
height: 297mm;
zoom: 0.8;
box-shadow: var(--shadow);
@apply bg-white;
}

18
src/components/builder/sections/Layout.js
View File

@ -1,4 +1,3 @@
import cx from "classnames";
import React, { useContext } from "react";
import { DragDropContext, Draggable, Droppable } from "react-beautiful-dnd";
import TemplateContext from "../../../contexts/TemplateContext";
@ -21,21 +20,18 @@ const Layout = () => {
<DragDropContext onDragEnd={onDragEnd}>
{blocks.map((el, ind) => (
<Droppable key={ind} droppableId={`${ind}`}>
{(provided, snapshot) => (
{(provided) => (
<div
ref={provided.innerRef}
className={cx(styles.droppable, {
[styles.draggingOver]: snapshot.isDraggingOver,
})}
className={styles.droppable}
{...provided.droppableProps}
>
<div className="grid gap-3">
<span className="uppercase font-semibold text-xs">
Block {ind + 1}
</span>
{el.map((item, index) => (
<Draggable
key={item.id}
draggableId={item.id}
index={index}
>
<Draggable key={item} draggableId={item} index={index}>
{(provided) => (
<div
ref={provided.innerRef}
@ -43,7 +39,7 @@ const Layout = () => {
{...provided.draggableProps}
{...provided.dragHandleProps}
>
{item.name}
{item}
</div>
)}
</Draggable>

8
src/components/builder/sections/Layout.module.css
View File

@ -1,11 +1,7 @@
.droppable {
@apply px-4 py-6 bg-gray-100 col-span-1 rounded;
}
.droppable.dragging-over {
@apply bg-gray-200;
@apply p-6 bg-secondary-light col-span-1 rounded;
}
.draggable {
@apply px-4 py-2 font-medium rounded bg-gray-300;
@apply px-4 py-2 capitalize font-medium rounded bg-secondary;
}

22
src/components/builder/sections/Profile.js
View File

@ -10,16 +10,34 @@ const Profile = () => {
<Heading>Profile</Heading>
<div className="flex items-center">
<div className={styles.circle}>
<MdFileUpload size="22px" className="text-secondary-dark" />
<MdFileUpload size="22px" />
</div>
<Input label="Photograph" className="ml-6" path="profile.photograph" />
</div>
<div className="grid grid-cols-2 gap-8">
<div className="grid grid-cols-2 gap-6">
<Input label="First Name" path="profile.firstName" />
<Input label="Last Name" path="profile.lastName" />
</div>
<Input label="Subtitle" path="profile.subtitle" />
<hr />
<Input label="Address Line 1" path="profile.address.line1" />
<Input label="Address Line 2" path="profile.address.line2" />
<div className="grid grid-cols-2 gap-6">
<Input label="City" path="profile.address.city" />
<Input label="Pincode" path="profile.address.pincode" />
</div>
<hr />
<Input label="Phone Number" path="profile.phone" />
<Input label="Website" path="profile.website" />
<Input label="Email Address" path="profile.email" />
</section>
);
};

2
src/components/builder/sections/Profile.module.css
View File

@ -2,5 +2,5 @@
width: 60px;
height: 60px;
flex: 0 0 60px;
@apply flex items-center justify-center bg-secondary rounded-full;
@apply flex items-center justify-center bg-secondary text-secondary-dark rounded-full;
}

4
src/components/dashboard/CreateResume.js
View File

@ -13,7 +13,7 @@ const CreateResume = () => {
return (
<div className={styles.resume}>
<div className={styles.backdrop}>
<MdAdd color="#FFF" size="48" />
<MdAdd size="48" />
</div>
<div
tabIndex="0"
@ -22,7 +22,7 @@ const CreateResume = () => {
onClick={handleClick}
onKeyDown={() => {}}
>
<MdAdd color="#444" size="48" />
<MdAdd size="48" />
</div>
<div className={styles.meta}>
<p>Create New Resume</p>

8
src/components/dashboard/CreateResume.module.css
View File

@ -5,16 +5,16 @@
.resume > .backdrop {
max-width: 184px;
height: 260px;
@apply rounded absolute w-full bg-black shadow;
@apply absolute text-gray-500 flex justify-center items-center;
@apply rounded absolute w-full bg-black text-white shadow;
@apply absolute flex justify-center items-center;
}
.resume > .page {
max-width: 184px;
height: 260px;
@apply rounded absolute w-full bg-inverse;
@apply rounded absolute w-full bg-secondary-light;
@apply transition-opacity duration-200 ease-in-out;
@apply cursor-pointer absolute text-gray-500 flex justify-center items-center;
@apply cursor-pointer absolute flex justify-center items-center;
}
.resume > .page:hover {

4
src/components/shared/Input.module.css
View File

@ -7,7 +7,7 @@
}
.container > label > span {
@apply mb-1 text-secondary-dark font-medium text-xs uppercase;
@apply mb-1 text-secondary-dark font-semibold tracking-wide text-xs uppercase;
}
.container > label > input {
@ -19,7 +19,7 @@
}
.container > label > input:focus {
@apply outline-none border-secondary-dark;
@apply outline-none border-gray-500;
}
.container > label > p {