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