From b19b9027a56fef1e60ad6adc64714008947120a3 Mon Sep 17 00:00:00 2001
From: Daniel Diaz <danieldiazgonza52@gmail.com>
Date: Tue, 25 May 2021 23:08:23 -0500
Subject: [PATCH] Modified Photoapp templates

---
 .../photoapp/templates/photoapp/create.html   | 15 +++++++++
 .../photoapp/templates/photoapp/delete.html   | 32 +++++++++++++++++++
 .../photoapp/templates/photoapp/detail.html   | 29 +++++++++++++++++
 config/photoapp/templates/photoapp/list.html  | 16 +++++++---
 .../photoapp/templates/photoapp/taglist.html  | 11 +++++++
 .../photoapp/templates/photoapp/update.html   | 15 +++++++++
 6 files changed, 114 insertions(+), 4 deletions(-)
 create mode 100644 config/photoapp/templates/photoapp/update.html

diff --git a/config/photoapp/templates/photoapp/create.html b/config/photoapp/templates/photoapp/create.html
index e69de29..101f342 100644
--- a/config/photoapp/templates/photoapp/create.html
+++ b/config/photoapp/templates/photoapp/create.html
@@ -0,0 +1,15 @@
+{% extends 'base.html' %}
+{% load crispy_forms_tags %}
+
+{% block body %}
+<div class="mx-auto">
+  <h1 class="mt-3 text-center">Add photo</h1>
+</div>
+<div class="form-group">
+  <form action="" method="post" enctype="multipart/form-data">
+    {% csrf_token %}
+    {{ form|crispy }}
+    <button type="submit" class="btn btn-success mb-3">Add Photo</button>
+  </form>
+</div>
+{% endblock body %}
diff --git a/config/photoapp/templates/photoapp/delete.html b/config/photoapp/templates/photoapp/delete.html
index e69de29..4b34237 100644
--- a/config/photoapp/templates/photoapp/delete.html
+++ b/config/photoapp/templates/photoapp/delete.html
@@ -0,0 +1,32 @@
+{% extends 'base.html' %} {% block body %}
+<div class="form-group mx-auto">
+  <h2 class="text-center">
+    You are going to <span class="text-danger">delete</span>: "<i
+      >{{ photo }}</i
+    >
+    "
+  </h2>
+  <p class="text-center">Are you sure, you want to delete the photo ?</p>
+  <div class="form-group">
+    <form
+      action=""
+      method="post"
+      class="d-flex flex-column align-items-center justify-content-center"
+    >
+      {% csrf_token %}
+      <div class="row">
+        <div class="col">
+          <a href="{% url 'photo:detail' photo.id %}" class="btn btn-primary"
+            >Cancel</a
+          >
+        </div>
+        <div class="col">
+          <button type="submit" class="btn btn-danger">Delete</button>
+        </div>
+      </div>
+      <p>This action is irreversible</p>
+    </form>
+  </div>
+</div>
+
+{% endblock body %}
diff --git a/config/photoapp/templates/photoapp/detail.html b/config/photoapp/templates/photoapp/detail.html
index e69de29..3411b2d 100644
--- a/config/photoapp/templates/photoapp/detail.html
+++ b/config/photoapp/templates/photoapp/detail.html
@@ -0,0 +1,29 @@
+{% extends 'base.html' %} 
+
+{% block body %}
+<div class="mx-auto">
+  <h1 class="text-center">{{ photo.title }}</h1>
+  <p class="text-center fw-light">Uploaded on: {{photo.created}} <br> By {{photo.submitter.username}}</p>
+  {% if user == photo.submitter %}
+    <p class="text-center">
+      <span><a href="{% url 'photo:update' photo.id %}" class="text-primary px-2">Update</a></span>
+      <span><a href="{% url 'photo:delete' photo.id %}" class="text-danger px-2">Delete</a></span>
+    </p>
+  {% endif %}
+</div>
+<div class="row pb-5">
+  <div class="col-md-8">
+    <img src="{{photo.image.url}}" alt="" width="100%" />
+  </div>
+  <div class="col-md-4">
+    <h4>More about this photo:</h4>
+    <ul class="list-group list-group-horizontal-lg list-unstyled py-4">
+      {% for tag in photo.tags.all %}
+        <li><a href="{% url 'photo:tag' tag.slug %}" class="btn btn-sm list-group-item list-group-item-primary">{{tag.name}}</a></li>
+      {% endfor %}
+    </ul>
+    <p>{{ photo.description }}</p>
+  </div>
+</div>
+
+{% endblock body %}
diff --git a/config/photoapp/templates/photoapp/list.html b/config/photoapp/templates/photoapp/list.html
index d7c5b6c..bc37761 100644
--- a/config/photoapp/templates/photoapp/list.html
+++ b/config/photoapp/templates/photoapp/list.html
@@ -1,7 +1,15 @@
-{% extends 'base.html' %}
+{% extends 'base.html' %} 
 
 {% block body %}
 
-
-
-{% endblock body %}
\ No newline at end of file
+<div class="row">
+  {% for photo in photos %}
+  <div class="col-lg-3 col-md-4 col-xs-6">
+    <a href="{% url 'photo:detail' photo.id %}" class="d-block mb-4 h-100">
+      <img src="{{photo.image.url}}" class="img-fluid rounded" alt="{{photo.title}}" />
+    </a>
+  </div>
+  {% endfor %}
+</div>
+
+{% endblock body %}
diff --git a/config/photoapp/templates/photoapp/taglist.html b/config/photoapp/templates/photoapp/taglist.html
index e69de29..50771c1 100644
--- a/config/photoapp/templates/photoapp/taglist.html
+++ b/config/photoapp/templates/photoapp/taglist.html
@@ -0,0 +1,11 @@
+{% extends 'photoapp/list.html' %}
+
+{% block body %}
+
+<div class="alert alert-primary">
+    <h2 class="text-center">Photos with the tag {{tag}}</h2>
+</div>
+
+{{ block.super }}
+
+{% endblock body %}
\ No newline at end of file
diff --git a/config/photoapp/templates/photoapp/update.html b/config/photoapp/templates/photoapp/update.html
new file mode 100644
index 0000000..10f00c8
--- /dev/null
+++ b/config/photoapp/templates/photoapp/update.html
@@ -0,0 +1,15 @@
+{% extends 'base.html' %}
+{% load crispy_forms_tags %}
+
+{% block body %}
+<div class="mx-auto">
+  <h1 class="mt-3 text-center">Edit photo {{photo}}</h1>
+</div>
+<div class="form-group">
+  <form action="" method="post" enctype="multipart/form-data">
+    {% csrf_token %}
+    {{ form|crispy }}
+    <button type="submit" class="btn btn-success mb-3">Edit Photo</button>
+  </form>
+</div>
+{% endblock body %}