update

Amit0417 · Feb 27, 2022 · 46899d0 · 46899d0
1 parent 37efd29
commit 46899d0
Show file tree

Hide file tree

Showing 11 changed files with 309 additions and 50 deletions.
diff --git a/todolist/base/__pycache__/urls.cpython-310.pyc b/todolist/base/__pycache__/urls.cpython-310.pyc
diff --git a/todolist/base/__pycache__/views.cpython-310.pyc b/todolist/base/__pycache__/views.cpython-310.pyc
diff --git a/todolist/base/templates/base/login.html b/todolist/base/templates/base/login.html
@@ -1,10 +1,22 @@
-<h3>Login</h3>
+{% extends 'base/main.html'%}
+{% block content%}
+<div class="header-bar">
+    <h2>Login</h2>
+</div>
 
-<form method="POST">
-    {% csrf_token %}
-    {{form.as_p}}
-    <input type="submit" value="Login">
+<div class="card-body">
 
-</form>
+    <form method="POST">
+        {% csrf_token %}
+        {{form.as_p}}
+        <input class="button" type="submit" value="Login">
+
+    </form>
+
+    <p>Don't have an account ? <a href="{% url 'register' %}">Register</a></p>
+</div>
+
+
+
+{% endblock content %}
 
-<p>Don't have an account ? <a href="{% url 'register' %}">Register</a></p>
diff --git a/todolist/base/templates/base/main.html b/todolist/base/templates/base/main.html
@@ -0,0 +1,162 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset='utf-8'>
+    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
+    <title>To Do List</title>
+    <meta name='viewport' content='width=device-width, initial-scale=1'>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Shippori+Antique+B1&display=swap" rel="stylesheet">
+    <style>
+        body {
+            background-color: rgb(240, 233, 233);
+            font-family: 'Shippori Antique B1', sans-serif;
+            padding-top: 50px;
+        }
+
+        h1,
+        h2,
+        h3,
+        h4,
+        h5,
+        h6 {
+            font-family: cursive
+        }
+
+        a
+         {
+            color: rgb(179, 1, 1)
+        }
+        p{
+            color:#757575
+        }
+
+        .container {
+            max-width: 550px;
+            margin: auto;
+            background-color: white;
+            -webkit-box-shadow: 2px 2px 13px -4px rgba(0, 0, 0, 0.21);
+            box-shadow: 2px 2px 13px -4px rgba(0, 0, 0, 0.21);
+
+        }
+
+        .header-bar {
+
+            display: flex;
+            justify-content: space-between;
+            color: #fff;
+            padding: 10px;
+            border-radius: 5px 5px 0 0;
+            background: linear-gradient(90deg, #353535 0%, #d87970 43%, #50848d 100%);
+        }
+
+        .header-bar a {
+            color: rgb(255, 255, 255);
+            text-decoration: none;
+
+        }
+
+        .task-wrapper {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 20px;
+            background-color: #fff;
+            border-top: 1px solid rgb(226, 226, 226);
+
+
+        }
+
+        .task-title {
+            display: flex;
+        }
+
+        .task-title a {
+            text-decoration: none;
+            margin-left: 10px;
+            color: rgb(179, 1, 1)
+        }
+
+        .task-complete-icon {
+            height: 20px;
+            width: 20px;
+            border-radius: 50%;
+            background-color: rgb(105, 192, 105);
+        }
+
+        .task-incomplete-icon {
+            height: 20px;
+            width: 20px;
+            border-radius: 50%;
+            background-color: rgb(218, 218, 218);
+
+        }
+        .delete-link{
+            text-decoration: none;
+            font-weight: 900;
+            color: #cf4949;
+            font-size:22px ;
+            line-height: 0;
+        }
+
+        #search-add-wrapper{
+            display: flex;
+            justify-content:space-between ;
+            align-items: center;
+            padding: 10px;
+        }
+        #add-link{
+            color: #EB796F;
+            text-decoration: none ;
+            font-size: 42px ;
+            text-shadow:1px 1px #81413b;
+        }
+
+
+        input[type=text],
+        input[type=password],
+        textarea {
+            border: 1px solid #757575;
+            border-radius: 5px;
+            padding: 10px;
+            width: 90%;
+        }
+
+        label {
+            padding-top: 10px !important;
+            display: block;
+        }
+
+        .button {
+            border: 1px solid #757575;
+            background: linear-gradient(90deg, #353535 0%, #d87970 43%, #7dc0cc 100%) ;
+            color: #ffffff;
+            padding: 10px;
+            font-size: 18px;
+            border-radius: 5px;
+            cursor: pointer;
+            text-decoration: none;
+        }
+
+        .card-body {
+            padding: 20px;
+        }
+
+
+
+    </style>
+</head>
+
+<body>
+    <div class="container">
+        {% block content%}
+
+        {% endblock content %}
+
+    </div>
+
+</body>
+
+</html>
diff --git a/todolist/base/templates/base/register.html b/todolist/base/templates/base/register.html
@@ -1,10 +1,30 @@
-<h3>Register</h3>
+{% extends 'base/main.html'%}
+{% block content%}
+<div class="header-bar">
+    <h2>Register</h2>
+</div>
 
-<form method="POST">
-    {% csrf_token %}
-    {{form.as_p}}
-    <input type="submit" value="Register">
+<div class="card-body">
+    <form method="POST">
+        {% csrf_token %}
+        <label>{{form.username.label}}</label>
+        {{form.username}}
+        <ul>
+            <li><p>Your password can’t be too similar to your other personal information.</p> </li>
+            <li><p>Your password must contain at least 8 characters.</p></li>
+            <li><p>Your password can’t be a commonly used password.</p></li>
+            <li><p>Your password can’t be entirely numeric.</p></li>
+        </ul>
+        <label>{{form.password1.label}}</label>
+        {{form.password1}}
+        <label>{{form.password2.label}}</label>
+        {{form.password2}}
+        <input style="margin-top: 15px" class="button" type="submit" value="Register">
 
-</form>
+    </form>
 
-<p>Already have an account ? <a href="{% url 'login' %}">Login</a></p>
+    <p>Already have an account ? <a href="{% url 'login' %}">Login</a></p>
+
+</div>
+
+{% endblock content %}
diff --git a/todolist/base/templates/base/task_confirm_delete.html b/todolist/base/templates/base/task_confirm_delete.html
@@ -1,7 +1,21 @@
-<a href="{% url 'tasks'%}">Go Back</a>
-<form method = "POST" action="">
-    {% csrf_token %}
-    <p>Are you sure you want to delete this task ? "{{task}}" </p>
-    <input type="submit" value="Delete" />
+{% extends 'base/main.html'%}
+{% block content%}
+
+
+<div class="header-bar">
+    <a href="{% url 'tasks'%}"> &#8592; Back</a>
+</div>
+
+<div class="card-body">
+    <form method = "POST" action="">
+        {% csrf_token %}
+        <p>Are you sure you want to delete this task ? <a>"{{task}}"</a> </p>
+        <input class="button" type="submit" value="Delete" />
+
+    </form>
+
+</div>
+
+{% endblock content %}
+
 
-</form>
diff --git a/todolist/base/templates/base/task_form.html b/todolist/base/templates/base/task_form.html
@@ -1,12 +1,20 @@
-<a href="{% url 'tasks'%}">Go Back</a>
+{% extends 'base/main.html'%}
+{% block content%}
 
-<h3>Task Form</h3>
+<div class="header-bar">
+    <a href="{% url 'tasks'%}"> &#8592; Back</a>
+</div>
 
+<div class="card-body">
+    <form method ="POST"  action="">
+        {% csrf_token %}
+        {{form.as_p}}
+        <input class="button" type="submit" value =" Submit">    
+    </form>
+
+</div>
 
-<form method ="POST"  action="">
-    {% csrf_token %}
-    {{form.as_p}}
-    <input type="submit" value =" Submit">
+
+{% endblock content %}
 
 
-</form>
diff --git a/todolist/base/templates/base/task_from.html b/todolist/base/templates/base/task_from.html
diff --git a/todolist/base/templates/base/task_list.html b/todolist/base/templates/base/task_list.html
@@ -1,28 +1,66 @@
-{% if request.user.is_authenticated%}
-<p>{{request.user}}</p>
-<a href="{% url 'logout' %}">Logout</a>
-{% else %}
-<a href="{% url 'login' %}">Login</a>
-{% endif%}
-<hr>
-<h1>MY TODO LIST</h1>
-<a href="{% url 'task-create' %}">Add Task</a>
-<table>
-    <tr>
-        <th>Items</th>
-        <th></th>
-        <th></th>
-    </tr>
+{% extends 'base/main.html'%}
+{% block content %}
+
+<div class="header-bar">
+    <div>
+        <h1>Hello {{request.user|title}}</h1>
+        <h3 style="margin:0">You have <i>{{count}}</i> incompelete tasks{{count|pluralize:"s"}} </h3>
+
+
+    </div>
+    {% if request.user.is_authenticated%}
+    <a href="{% url 'logout' %}">Logout</a>
+    {% else %}
+    <a href="{% url 'login' %}">Login</a>
+    {% endif%}
+
+
+</div>
+
+<div id="search-add-wrapper">
+    <form method ="GET" style="margin-top :20px ; display:flex">
+        <input type='text' name = 'search-area' value = {{search_input}} >
+        <input class="button" type='submit' value = 'Search'>
+    </form>
+    <a id="add-link" href="{% url 'task-create' %}">&#x2b;</a>
+
+</div>
+
+
+
+
+
+
+<div class='task-items-wrapper'>
     {% for task in tasks %}
-    <tr>
-        <td>{{task.title}}</td>
-        <td><a href="{% url 'task' task.id %}">View</a></td>
-        <td><a href="{% url 'task-update' task.id %}">Edit</a></td>
-        <td><a href="{% url 'task-delete' task.id %}">Delete</a></td>
+    <div class='task-wrapper'>
+        {% if task.complete%}
+        <div class='task-title'>
+            <div class='task-complete-icon'></div>
+            <i><s><a href="{% url 'task-update' task.id %}">{{task}}</a></s></i>
+        </div>
+        <a class='delete-link' href="{% url 'task-delete' task.id %}">&#215;</a>
+        {% else %}
+        <div class='task-title'>
+            <div class='task-incomplete-icon'></div>
+            <a href="{% url 'task-update' task.id %}">{{task}}</a>
+        </div>
+
+        <a class='delete-link' href="{% url 'task-delete' task.id %}">&#215;</a>
+        {% endif %}
+
+
+
+    </div>
+
+
 
-    </tr>
     {% empty %}
     <h3>No items in the list</h3>
     {% endfor %}
 
-</table>
+
+</div>
+
+
+{% endblock content %}
diff --git a/todolist/base/views.py b/todolist/base/views.py
@@ -48,6 +48,12 @@ def get_context_data(self, **kwargs):
         context = super().get_context_data(**kwargs)
         context ['tasks'] = context ['tasks'].filter(user=self.request.user)
         context ['count'] = context ['tasks'].filter(complete = False).count()
+        search_input = self.request.GET.get('search-area') or ''
+        if search_input:
+            context['tasks'] = context['tasks'].filter( 
+                title__startswith = search_input)
+
+        context ['search_input'] = search_input
         return context
 
 

diff --git a/todolist/db.sqlite3 b/todolist/db.sqlite3