Skip to content

T
Todo
Commit df7f13da by Sujeeth AV
Options

Updated base components, added checkbox folder, removed old files

parent d244c658
Showing with 45 additions and 69 deletions
todo/db.json
{ {
"todos": [ "todos": []
{
"id": "2e07",
"task": "yuicxavv7i7vvsdca",
"completed": false
},
{
"id": "653e",
"task": " s s",
"completed": false
}
]
} }
\ No newline at end of file
todo/index.html
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React</title> <title>Todo</title>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>
......
todo/src/Form/form/Index.jsx
...@@ -261,7 +261,7 @@ export const Input = () => { ...@@ -261,7 +261,7 @@ export const Input = () => {
className={styles.button} className={styles.button}
disabled={loading || !task.trim()} disabled={loading || !task.trim()}
> >
{loading ? 'Adding...' : 'Submit'} Submit
</button> </button>
</div> </div>
</form> </form>
......
todo/src/Form/form/styles.module.css
...@@ -66,15 +66,24 @@ form, ...@@ -66,15 +66,24 @@ form,
font-size: 1.2rem; font-size: 1.2rem;
transition: border 0.2s ease; transition: border 0.2s ease;
color: #a0a0a0; color: #a0a0a0;
min-width: 18.5rem; width: 100%;
margin-left: 2rem; margin-left: 0;
padding: 1.3rem;
box-shadow: 0 1px rgb(217, 217, 217) inset;
} }
.input:focus { .input:focus {
outline: none; outline: none;
} }
.merge {
display: flex;
flex-direction: column;
gap: 0;
}
.button { .button {
width: 100%;
padding: 1.3rem;
color: black; color: black;
border: none; border: none;
border-radius: 6px; border-radius: 6px;
...@@ -111,22 +120,9 @@ form, ...@@ -111,22 +120,9 @@ form,
.task { .task {
padding: 3px 0 10px; padding: 3px 0 10px;
} }
.merge {
display: flex;
flex-direction: column;
gap: 0;
}
.button {
padding: 10px;
width: 100%;
}
.input {
margin-left: 0;
}
} }
input { /* input {
height: 2.5rem; height: 2.5rem;
max-width: 18.5rem; max-width: 18.5rem;
box-sizing: border-box; box-sizing: border-box;
...@@ -136,7 +132,7 @@ button { ...@@ -136,7 +132,7 @@ button {
height: 2rem; height: 2rem;
text-align: center; text-align: center;
padding: 2px; padding: 2px;
} } */
.task { .task {
font-size: 1.2rem; font-size: 1.2rem;
} }
...@@ -156,11 +152,21 @@ span[contenteditable] { ...@@ -156,11 +152,21 @@ span[contenteditable] {
height: 1rem; height: 1rem;
width: 1rem; width: 1rem;
} }
.merge {
display: flex;
flex-direction: row;
gap: 3%;
}
.todo { .todo {
padding: 0 1.3rem 0; padding: 0 1.3rem 0;
} }
.input { .input {
padding: 1.5rem; padding: 1.8rem;
min-width: 500px; margin-left: 1.5rem;
}
.button {
width: 12%;
margin-right: 1rem;
padding: 1.8rem;
} }
} }
todo/src/Layout/card/styles.module.css
...@@ -7,5 +7,5 @@ ...@@ -7,5 +7,5 @@
color: rgba(20, 10, 0, 255); color: rgba(20, 10, 0, 255);
text-align: center; text-align: center;
margin-bottom: 1rem; margin-bottom: 1rem;
padding: 1rem; padding: 1.5rem;
} }
todo/src/components/base/styles.module.css → todo/src/components/base/checkbox/styles.module.css
...@@ -3,6 +3,8 @@ ...@@ -3,6 +3,8 @@
} }
.check input { .check input {
border: 2px solid #888; border: 2px solid #888;
height: 1.2rem;
width: 1.2rem;
} }
input[type="checkbox"]:hover { input[type="checkbox"]:hover {
border-color: #888; border-color: #888;
...@@ -13,27 +15,10 @@ input[type="checkbox"]:checked { ...@@ -13,27 +15,10 @@ input[type="checkbox"]:checked {
border-color: #888; border-color: #888;
} }
input[type="checkbox"]:checked::after {
content: "";
position: absolute;
left: 3px;
top: 2px;
width: 4px;
height: 8px;
border: solid #333;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
@media (min-width: 768px) { @media (min-width: 768px) {
.check input { .check input {
height: 1.5rem; height: 1.2rem;
width: 1.5rem; width: 1.2rem;
margin-left: 2rem; margin-left: 2rem;
} }
input[type="checkbox"]:checked::after {
left: 3px;
top: 1px;
width: 4px;
height: 8px;
}
} }
todo/src/global.css
...@@ -29,7 +29,6 @@ ul { ...@@ -29,7 +29,6 @@ ul {
} }
input { input {
height: 2.5rem; height: 2.5rem;
max-width: 18.5rem;
box-sizing: border-box; box-sizing: border-box;
} }
...@@ -55,13 +54,6 @@ li { ...@@ -55,13 +54,6 @@ li {
ul li:last-child { ul li:last-child {
box-shadow: none; box-shadow: none;
} }
input {
height: 2.5rem;
max-width: 18.5rem;
box-sizing: border-box;
}
[contenteditable]:focus { [contenteditable]:focus {
outline: none; outline: none;
border: none; border: none;
......
todo/src/todo/List/Index.jsx
import React from "react"; import React from "react";
import { MdCancel } from "react-icons/md"; import { MdCancel } from "react-icons/md";
import { Checkbox } from "../../components/base/Index";
import styles from './styles.module.css'; import styles from './styles.module.css';
import { Checkbox } from "../../components/base/checkbox/Index";
const List = ({ const List = ({
store, store,
...@@ -21,13 +22,13 @@ const List = ({ ...@@ -21,13 +22,13 @@ const List = ({
<div className={styles.check}> <div className={styles.check}>
<Checkbox <Checkbox
checked={item.completed} checked={item.completed}
onChange={() => toggleComplete(index)} onChange={() => toggleComplete(index)}
id={item.id} id={item.id}
/> />
{editIndex === index ? ( {editIndex === index ? (
renderEditableContent() renderEditableContent()
) : ( ) : (
<span <span
className={`${styles.task} ${item.completed ? styles.completed : ''}`} className={`${styles.task} ${item.completed ? styles.completed : ''}`}
onClick={() => startEdit(index)} onClick={() => startEdit(index)}
> >
......
todo/src/todo/List/styles.module.css
...@@ -199,6 +199,7 @@ ul { ...@@ -199,6 +199,7 @@ ul {
.task { .task {
cursor: pointer; cursor: pointer;
word-break: break-word; word-break: break-word;
/* margin-left: 0.8rem; */
} }
.check { .check {
...@@ -219,7 +220,6 @@ ul { ...@@ -219,7 +220,6 @@ ul {
position: relative; position: relative;
transition: all 0.2s ease; transition: all 0.2s ease;
flex-shrink: 0; flex-shrink: 0;
padding-left: 2rem;
} }
.checkbox:hover { .checkbox:hover {
...@@ -253,8 +253,8 @@ ul { ...@@ -253,8 +253,8 @@ ul {
} }
.delete svg { .delete svg {
height: 33px; height: 35px;
width: 28px; width: 33px;
color: rgba(204, 204, 204, 255); color: rgba(204, 204, 204, 255);
} }
...@@ -274,7 +274,9 @@ ul { ...@@ -274,7 +274,9 @@ ul {
max-width: 750px; max-width: 750px;
min-height: 25svh; min-height: 25svh;
} }
.task {
margin-left: 0.5rem;
}
.merge { .merge {
flex-direction: row; flex-direction: row;
width: 98.5%; width: 98.5%;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment