Added base template

DaniDiazTech · May 25, 2021 · 9e90b26 · 9e90b26
1 parent aca3560
commit 9e90b26
Show file tree

Hide file tree

Showing 2 changed files with 76 additions and 0 deletions.
diff --git a/config/templates/base.html b/config/templates/base.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Django Photo Sharing app</title>
+    <link
+      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+      integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0"
+      crossorigin="anonymous"
+    />
+
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
+      integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w=="
+      crossorigin="anonymous"
+    />
+  </head>
+  <body>
+    {% include 'navbar.html' %}
+
+    {% block body %} 
+
+
+    {% endblock body %}
+
+    <script
+      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
+      integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8"
+      crossorigin="anonymous"
+    ></script>
+
+  </body>
+</html>
diff --git a/config/templates/navbar.html b/config/templates/navbar.html
@@ -0,0 +1,39 @@
+<nav class="navbar navbar-expand-md navbar-dark bg-dark">
+  <div class="container-fluid">
+    <a class="navbar-brand" href="{% url 'photo:list' %}">Photo App</a>
+    <button
+      class="navbar-toggler"
+      type="button"
+      data-bs-toggle="collapse"
+      data-bs-target="#navbarTogglerDemo02"
+      aria-controls="navbarTogglerDemo02"
+      aria-expanded="false"
+      aria-label="Toggle navigation"
+    >
+      <span class="navbar-toggler-icon"></span>
+    </button>
+    <div
+      class="collapse navbar-collapse flex-row-reverse"
+      id="navbarTogglerDemo02"
+    >
+      <ul class="navbar-nav">
+        {% if user.is_authenticated %}
+
+        <li class="nav-item">
+          <a class="nav-link active" href="{% url 'photo:create' %}">Add a photo</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link active" href="#">Hi {{user.username}}</a>
+        </li>
+        {% else %}
+
+        <li class="nav-item">
+          <a href="{% url 'user:login' %}" class="btn btn-sm btn-danger"
+            >Sign In</a
+          >
+        </li>
+        {% endif %}
+      </ul>
+    </div>
+  </div>
+</nav>