Update: UI refactoring and code adjustments (#2)

* Update: Added a README>md file * Update README.md * FEAT: Designing a new landing page * Feat: Redesigned the UI for Django Cameroon Todo App * Feat: Added UI to the README.md * Update README.md * Update README.md --------- Co-authored-by: Steve Yonkeu <[email protected]>
djangocameroon · Apr 24, 2024 · fa5767c · fa5767c
1 parent 174b9b4
commit fa5767c
Show file tree

Hide file tree

Showing 14 changed files with 397 additions and 42 deletions.
diff --git a/.gitignore b/.gitignore
@@ -2,6 +2,13 @@
 __pycache__/
 *.py[cod]
 *$py.class
+env/
+
+
+#pipenv 
+Pipfile
+Pipfile.lock
+
 
 
 #pipenv 

diff --git a/README.md b/README.md
@@ -2,6 +2,8 @@
 
 This is a simple Django todo app to manage your tasks.
 
+## User Interface
+![UI](<WhatsApp Image 2024-04-23 at 09.59.07.jpeg>)
 
 ## Description
 This project was build during an a workshop. The title of the workshop was "Building a Django App and Deploying it on Azure" -  so you can check a working version of this app here [link](https://dj-cmr-todo.azurewebsites.net/)
@@ -45,9 +47,10 @@ Visit http://localhost:8000 in your browser to access the todo app.
 We welcome contributions! Please follow these guidelines:
 
 - Fork the repository.
-- Create a new branch: `git checkout -b feature-name`.
+- Create a new branch: `git checkout -b branch-name`.
 - Make your changes and commit them: `git commit -m 'Add new feature'`.
-- Push to the branch: `git push origin feature-name`.
+- Push to the branch: `git push origin branch-name`.
+
 - Submit a pull request.
 
 ## Contact

diff --git a/WhatsApp Image 2024-04-23 at 09.59.07.jpeg b/WhatsApp Image 2024-04-23 at 09.59.07.jpeg
diff --git a/static/css/style.css b/static/css/style.css
@@ -0,0 +1,107 @@
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    background-color: #1a1a1a;
+    color: white;
+    font-family: Arial, sans-serif;
+}
+.container {
+    max-width: 600px;
+    margin: 0 auto;
+    padding: 20px;
+}
+.logo {
+    font-size: 24px;
+    font-weight: bold;
+    margin-bottom: 20px;
+}
+.progress {
+    text-align: center;
+    margin-bottom: 20px;
+    height: 160px;
+}
+.progress-circle {
+    width: 125px;
+    height: 125px;
+    border-radius: 50%;
+    background-color: #e11111;
+    margin: 0 auto;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.progress-text {
+    font-size: 50px;
+    color: white;
+}
+.task-input {
+    width: 100%;
+    padding: 10px;
+    border: none;
+    background-color: #333;
+    color: white;
+    font-size: 14px;
+    margin-bottom: 10px;
+}
+.add-button {
+    height: 35px;
+    width: 35px;
+    background-color: red;
+    color: white;
+    border: none;
+    cursor: pointer;
+}
+.task-item {
+    background-color: #333;
+    padding: 10px;
+    margin-bottom: 10px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px;
+    border: 1px solid #ccc;
+    transition: background-color 0.3s; /* Smooth transition effect */
+
+    /* Additional styles */
+    cursor: pointer; /* Change cursor to pointer on hover */
+}
+.task-item.completed {
+    background-color: green;
+}
+.task-icons {
+    display: flex;
+    text-decoration: none;
+}
+.task-icons i {
+    margin-right: 10px;
+    cursor: pointer;
+}
+
+.task-item:hover {
+    /* Define styles for hover state */
+    background-color: #f0f0f0; /* Change background color on hover */
+    color: black; /* Change text color on hover */
+
+}
+
+/* Style for task-icons */
+.task-icons {
+    display: none; /* Hide task-icons by default */
+}
+
+/* Show task-icons on hover */
+.task-item:hover .task-icons {
+    display: inline-block;
+}
+
+.deco{
+    text-decoration: none;
+}
+
+a{
+    text-decoration: none;
+}
diff --git a/templates/base.html b/templates/base.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons"rel="stylesheet">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
+
+    <title>Todo App</title>
+</head>
+<body class="bg-dark">
+    <nav class="navbar navbar-light bg-dark text-light d-flex justify-content-around">
+        <a class="navbar-brand pl-6" href="#"><span class="text-light"><strong>Django Todo</strong></span> <span class="text-danger"><strong>App</strong></span></a>
+
+        <div class="d-flex justify-content-around">
+          <span class="material-icons">logout</span>
+        </div>
+    </nav>
+    <div class="d-flex justify-content-center">
+      {% block content %}
+
+      {% endblock content %}
+    </div>
+</body>
+</html>
diff --git a/templates/delete.html b/templates/delete.html
@@ -0,0 +1,22 @@
+{% extends "base.html" %}
+
+{% block content %}
+    <div>
+        <div>
+            <h1 class="text-white"> Delete Task - {{ task.title }}</h1>
+        </div>
+        <form action="" method="post" class="mt-5 ">
+            {% csrf_token %}
+            <div class="rounded">
+                <label class="text-white" for="">Title: </label>
+                <input type="text" name="title" value="{{task.title}}" id="" disabled>
+            </div>
+            <input type="number" name="id" value="{{ task.id }}" hidden>
+
+            <br><br>
+
+            <button class="btn btn-danger" type="submit">Delete</button>
+
+        </form>
+    </div>
+{% endblock content %}
diff --git a/templates/edit.html b/templates/edit.html
@@ -0,0 +1,23 @@
+{% extends "base.html" %}
+
+{% block content %}
+    <div>
+        <div>
+            <h1 class="text-white"> Edit Task - {{ task.title }}</h1>
+        </div>
+        <form action="" method="post" class="mt-5 ">
+            {% csrf_token %}
+            <div class="rounded">
+                <label class="text-white" for="">Title: </label>
+                <input type="text" name="title" value="{{task.title}}" id="">
+            </div>
+            <input type="number" name="id" value="{{ task.id }}" hidden>
+
+            <br><br>
+            <a href="delete/{{task.id}}"> 
+                <button class="btn btn-danger" type="submit">Delete</button>
+            </a>
+            <button class="btn btn-danger" type="submit">Edit</button>
+        </form>
+    </div>
+{% endblock content %}
diff --git a/templates/index.html b/templates/index.html
@@ -1,28 +1,71 @@
+{% extends "base.html" %}
+{% load static %}
+{% block content %}
+
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>My Todo</title>
-  </head>
-  <body>
-    <h2>My Django - Azure Todo</h2>
-    <ul>
-    {% for item in todo %} 
-        <li> 
-            {{ item.title }} - 
-            {% if item.completed %}
-                Completed
-            {% else %}
-                Not Completed
-            {% endif %}
-        </li>
-    {% endfor %}
-    <ul>
-    <form method="POST">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}">  
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
+
+</head>
+<body>
+    <div class="container">
+        <div class="progress bg-dark border border-white rounded-pill">
+            <div class="m-5">
+              <h2><b>Todo Done</b></h2>
+              <h5>Keep it up</h5>
+            </div>
+            <div class="progress-circle mt-3">
+                <span class="progress-text"> {{ dones }}/{{ total }}</span>
+            </div>
+        </div>
+       <form action="" method="post">
         {% csrf_token %}
-        {{ form.as_p }}
-        <button type="submit">Add(+)</button>
-    </form>
-  </body>
+          <div class="container flex d-flex">
+            <input name="todo" type="text" class="task-input rounded-pill" placeholder="write your next task">
+            <button class="add-button rounded-circle ml-2 mt-1" type="submit">+</button>
+          </div>
+       </form>
+        <form action="done_todo" method="post">
+          {% csrf_token %}
+          {% for todo in todos %}
+          <a href="{% url 'edit' todo.id %}">
+            <div class="task-item rounded-pill">
+              <div>
+                <input type="checkbox" name="dones[]" value="{{ todo.id }}" id="">
+              {{ todo.title }}
+              </div>
+              <div class="task-icons">
+                  <a href="{% url 'delete' todo.id %}">
+                    <i class="fas fa-trash-alt "></i>
+                  </a>
+              </div>
+            </div>
+          </a>
+        {% endfor %}
+        <button class="rounded-pill btn btn-danger" type="submit"><b>Done</b></button>
+        </form>
+        <br>
+        <h1>Already Done Tasks</h1>
+        <div class="container">
+          {% for done in done_todos %}
+          <div class="task-item rounded-pill">
+            <div>
+              <input type="checkbox" checked disabled>
+            {{ done.title }}
+            </div>
+            <a class="task-icons" href="{% url 'delete' done.id %}">
+              <i class="fas fa-trash-alt "></i>
+            </a>
+          </div>
+          {% endfor %}
+
+    </div>
+</body>
 </html>
+
+
+{% endblock content %}
diff --git a/todo/admin.py b/todo/admin.py
@@ -1,3 +1,5 @@
 from django.contrib import admin
+from .models import Todo
 
 # Register your models here.
+admin.site.register(Todo)
diff --git a/todo/migrations/0002_todo_date_added.py b/todo/migrations/0002_todo_date_added.py
@@ -0,0 +1,18 @@
+# Generated by Django 4.2.7 on 2024-04-23 06:25
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('todo', '0001_initial'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='todo',
+            name='date_added',
+            field=models.DateTimeField(auto_now=True),
+        ),
+    ]
diff --git a/todo/models.py b/todo/models.py
@@ -3,6 +3,7 @@
 class Todo(models.Model):
     title = models.CharField(max_length=30)
     completed  = models.BooleanField(default=False)
+    date_added = models.DateTimeField(auto_now=True, auto_now_add=False)
 
     def __str__(self):
         return self.title
diff --git a/todo/urls.py b/todo/urls.py
@@ -1,6 +1,9 @@
 from django.urls import path
-from .views import todolist
+from .views import CreateTask, DoneTaskView, DeleteTodo, EditTaskView
 
 urlpatterns = [
-    path("", todolist, name="todo"),
+    path("", CreateTask.as_view(), name="todo"),
+    path("done_todo", DoneTaskView.as_view(), name="done_todo"),
+    path('delete/<int:task_id>', DeleteTodo.as_view(), name="delete"),
+    path('edit/<int:task_id>', EditTaskView.as_view(), name="edit")
 ]