gypsydave5 · SolarLiner · Nov 27, 2018 · Nov 27, 2018 · Nov 27, 2018 · Nov 27, 2018
diff --git a/todos/django/Pipfile b/todos/django/Pipfile
@@ -0,0 +1,18 @@
+[[source]]
+url = "https://pypi.org/simple"
+verify_ssl = true
+name = "pypi"
+
+[packages]
+django = "*"
+
+[dev-packages]
+"flake8" = "*"
+"flake8-django" = "*"
+"autopep8" = "*"
+
+[requires]
+python_version = "3.6"
+
+[scripts]
+start = "django-admin runserver --pythonpath=. --settings=todomvp"
diff --git a/todos/django/Pipfile.lock b/todos/django/Pipfile.lock
diff --git a/todos/django/static/check.svg b/todos/django/static/check.svg
diff --git a/todos/django/static/plus.svg b/todos/django/static/plus.svg
diff --git a/todos/django/static/tick.png b/todos/django/static/tick.png
diff --git a/todos/django/static/todo.css b/todos/django/static/todo.css
@@ -0,0 +1,153 @@
+:root {
+    --text-color: rgb(20,20,20);
+    --border-color: black;
+    --title-color: rgb(60,60,60);
+    --done-color: rgb(200,200,200);
+    --background-color: white;
+    box-sizing: border-box;
+    padding: 0;
+    margin: 0;
+}
+
+body {
+    min-height: 100vh;
+    padding: 0;
+    align-content: center;
+    margin: 0;
+    font-family: sans-serif;
+    line-height: 1.3rem;
+    font-size: 24px;
+
+    background-color: var(--background-color);
+    color: var(--text-color);
+}
+
+label {
+    font-size: 0.8rem;
+}
+
+input {
+    box-sizing: border-box;
+    border: var(--border-color) solid 2px;
+    background-color: var(--background-color);
+}
+
+section {
+    padding: 1.5rem;
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 40rem;
+}
+
+.new-todo form {
+    display: grid;
+    grid-template-columns: auto 29px;
+    grid-template-rows: auto;
+    column-gap: 1rem;
+}
+
+.new-todo label[for="new-item"] {
+    grid-row: 1 / span 1;
+    grid-column: 1 / span 2;
+    margin: auto 1rem;
+}
+
+.new-todo input#new-item {
+    grid-row: 1 / span 1;
+    grid-column: 1 / span 1;
+    padding: 0.5rem;
+    font-size: 1rem;
+}
+
+.new-todo form input#add-new-item {
+    grid-row: 1 / span 1;
+    grid-column: 2 / span 1;
+    margin: auto;
+}
+
+.button-container {
+    float: right;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+
+ul {
+    margin: 0;
+    padding: 0;
+}
+
+ul:empty::after {
+    content: "You've not added any todos to the list. Use the box above to add a new todo.";
+    font-size: 1rem;
+    margin: 1rem;
+    font-style: italic;
+    border: 2px dotted black;
+    padding: 0.5rem;
+    display: block;
+    text-align: justify;
+    text-align-last: center;
+}
+
+li {
+    display: flex;
+    border-bottom: 1px dotted var(--border-color);
+}
+
+li:last-child {
+    border-bottom: none;
+}
+
+li .item-name {
+    flex: auto;
+    margin: auto;
+    padding: 0 1rem;
+}
+
+li form input,
+.new-todo form input#add-new-item {
+    width: 30px;
+    height: 30px;
+    padding: 0;
+
+    background-repeat: no-repeat;
+    background-size: contain;
+    background-position: center;
+
+    /* hide text */
+    text-indent: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+}
+
+.todo form input {
+    margin: 1em;
+}
+
+.todo form input.delete {
+    background-image: url('trashcan.svg');
+    border: none;
+}
+input#add-new-item { background-image: url('plus.svg'); }
+.todo form input.complete { background-image: none; }
+.todo form input.uncomplete { background-image: url('check.svg'); }
+
+.done {
+    color: var(--done-color);
+}
+
+.todo form {
+    display: contents;
+}
+
+h1 {
+    font-weight: 200;
+    color: var(--title-color);
+    margin: 2rem;
+    display: none;
+}
+
+h2 {
+    border-bottom: 1px solid black;
+    padding: 0 0 1rem 1rem;
+}
diff --git a/todos/django/static/trashcan.svg b/todos/django/static/trashcan.svg
diff --git a/todos/django/static/x.svg b/todos/django/static/x.svg
diff --git a/todos/django/templates/home.html b/todos/django/templates/home.html
@@ -0,0 +1,75 @@
+{% load static %}
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Todo MVP</title>
+    <meta charset="utf-8" />
+    <link rel="stylesheet" href="{% static 'todo.css' %}" />
+  </head>
+  <body>
+    <h1>Todo MVP</h1>
+    <section class="new-todo">
+      <form method="POST">
+        <input
+          type="text"
+          id="new-item"
+          name="item"
+          pattern=".{3,}"
+          required
+          aria-label="Write a new todo item"
+          title="3 characters minimum"
+        />
+        <input type="submit" value="Add new item" id="add-new-item" />
+      </form>
+    </section>
+
+    <section class="items">
+      <h2>Todo list</h2>
+      <ul>{% for todo in todos %}
+        {% if todo.done %}
+        <li class="todo done">
+          <span class="item-name">
+            <s>{{ todo.name }}</s>
+          </span>
+          <form method="post" action="{% url 'not-done' %}">
+            <input type="hidden" name="item" value="{{todo.id}}" />
+            <input
+              class="uncomplete"
+              type="submit"
+              value="Mark not done '{{todo.name}}'"
+            />
+          </form>
+          <form method="post" action="{% url 'delete' %}">
+            <input type="hidden" name="item" value="{{todo.id}}" />
+            <input
+              class="delete"
+              type="submit"
+              value="Delete '{{todo.name}}'"
+            />
+          </form>
+        </li>
+        {% else %}
+        <li class="todo">
+          <span class="item-name"> {{ todo.name }} </span>
+          <form method="post" action="{% url 'done' %}">
+            <input type="hidden" name="item" value="{{todo.id}}" />
+            <input
+              class="complete"
+              type="submit"
+              value="Mark done '{{todo.name}}'"
+            />
+          </form>
+          <form method="post" action="{% url 'delete' %}">
+            <input type="hidden" name="item" value="{{todo.id}}" />
+            <input
+              class="delete"
+              type="submit"
+              value="Delete '{{todo.name}}'"
+            />
+          </form>
+        </li>
+        {% endif %}
+      {% endfor %}</ul>
+    </section>
+  </body>
+</html>
diff --git a/todos/django/todomvp/__init__.py b/todos/django/todomvp/__init__.py
@@ -0,0 +1,38 @@
+# Note: I am manually creating a tiny project here since Django is much more
+# powerful and a bit too much of a powerhouse for this tiny project ;)
+# Django's new project command adds a whole lot more stuff that make sense for a
+# typical server, but not here.
+import os
+
+from todomvp.views import IndexView, todo_done, todo_undone, todo_delete
+from django.urls import path
+
+DEBUG = True
+SECRET_KEY = '4l0ngs3cr3tstr1ngw3lln0ts0l0ngw41tn0w1tsl0ng3n0ugh'
+ROOT_URLCONF = __name__
+BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
+TEMPLATES = [
+    {
+        'BACKEND': 'django.template.backends.django.DjangoTemplates',
+        'DIRS': [os.path.join(BASE_DIR, "templates")]
+    },
+]
+
+INSTALLED_APPS = [
+    "django.contrib.staticfiles"
+]
+
+STATIC_URL = "/static/"
+STATICFILES_FINDERS = [
+    'django.contrib.staticfiles.finders.FileSystemFinder'
+]
+STATICFILES_DIRS = [
+    os.path.join(BASE_DIR, "static")
+]
+
+urlpatterns = [
+    path("", IndexView.as_view(), name="index"),
+    path("done", todo_done, name="done"),
+    path("not-done", todo_undone, name="not-done"),
+    path("delete", todo_delete, name="delete")
+]