Initial work on some base templates

author: Gareth Coles <[email protected]> 2019-04-10 13:03:07 +0100
committer: Gareth Coles <[email protected]> 2019-04-10 13:03:07 +0100
commit: 57838a2e98f7e80117448562865b09733a1637a9 (patch)
tree: f226c3f32d79606f4ce0cc7463bf4cba8de35d5f /pydis_site/templates/base
parent: Merge pull request #198 from gdude2002/django+176/project-layout (diff)
3 files changed, 201 insertions, 0 deletions
diff --git a/pydis_site/templates/base/base-hero.html b/pydis_site/templates/base/base-hero.html
new file mode 100644
index 00000000..40de6deb
--- /dev/null
+++ b/pydis_site/templates/base/base-hero.html
@@ -0,0 +1,50 @@
+{% load django_simple_bulma %}
+{% load static %}
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+  <meta name="description"
+        content="{% block meta-description %}We're a large, friendly community focused around the Python programming language. Our community is open to those who wish to learn the language, as well as those looking to help others.{% endblock %}">
+
+  <title>Python Discord | {% block title %}Website{% endblock %}</title>
+
+  {% bulma %}
+
+  {# Font-awesome here is defined explicitly so that we can have Pro #}
+  <link rel="stylesheet"
+        href="https://pro.fontawesome.com/releases/v5.7.2/css/all.css"
+        integrity="sha384-6jHF7Z3XI3fF4XZixAuSu0gGKrXwoX/w3uFPxC56OtjChio7wtTGJWRW53Nhx6Ev"
+        crossorigin="anonymous"
+  >
+
+  {% block head %}{% endblock %}
+</head>
+<body>
+
+<section class="hero is-primary">
+  <div class="hero-head">
+    {% block hero-head %}{% endblock %}
+  </div>
+  <div class="hero-body">
+    {% block hero-body %}{% endblock %}
+  </div>
+  <div class="hero-foot">
+    {% block hero-foot %}{% endblock %}
+    {% include "base/navbar.html" with active_item=False dropdowns=True icon_weight="fas" use_logo=False %}
+  </div>
+</section>
+
+{% block content %}{% endblock %}
+
+<footer class="footer has-background-dark has-text-grey">
+  <div class="content has-text-centered">
+    <p>
+      &copy; 2019 Python Discord | Built with Django and Bulma
+    </p>
+  </div>
+</footer>
+</body>
+</html>
diff --git a/pydis_site/templates/base/base.html b/pydis_site/templates/base/base.html
new file mode 100644
index 00000000..a9edac49
--- /dev/null
+++ b/pydis_site/templates/base/base.html
@@ -0,0 +1,41 @@
+{# Base template, with a few basic style definitions. #}
+{% load django_simple_bulma %}
+{% load static %}
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+  <meta name="description"
+        content="{% block meta-description %}We're a large, friendly community focused around the Python programming language. Our community is open to those who wish to learn the language, as well as those looking to help others.{% endblock %}">
+
+  <title>Python Discord | {% block title %}Website{% endblock %}</title>
+
+  {% bulma %}
+
+  {# Font-awesome here is defined explicitly so that we can have Pro #}
+  <link rel="stylesheet"
+        href="https://pro.fontawesome.com/releases/v5.7.2/css/all.css"
+        integrity="sha384-6jHF7Z3XI3fF4XZixAuSu0gGKrXwoX/w3uFPxC56OtjChio7wtTGJWRW53Nhx6Ev"
+        crossorigin="anonymous"
+  >
+
+  {% block head %}{% endblock %}
+</head>
+<body>
+{% include "base/navbar.html" with active_item=True dropdowns=True icon_weight="fal" use_logo=True %}
+{% block content %}{% endblock %}
+
+<footer class="footer has-background-dark has-text-grey">
+  <div class="content has-text-centered">
+    <p>
+      &copy; 2019 Python Discord | Built with Django and Bulma
+    </p>
+  </div>
+</footer>
+
+</body>
+</html>
+
+<!-- vim: set ft=htmldjango: -->
diff --git a/pydis_site/templates/base/navbar.html b/pydis_site/templates/base/navbar.html
new file mode 100644
index 00000000..88a13aeb
--- /dev/null
+++ b/pydis_site/templates/base/navbar.html
@@ -0,0 +1,110 @@
+{% load extra_filters %}
+{% load static %}
+
+{% comment %}
+This template is responsible for rendering the main navigation on each page that uses it.
+It requires two arguments to be set in the include:
+
+* `dropdown` (bool):   True to render the dropdowns included, False to omit them
+* `icon_weight` (str): Either "fas", "far" or "fal" to correspond with Font-Awesome's weight classes.
+                       This will not affect branding icons, which have the "fab" class.
+* use_logo (bool):     True to render the navbar with the site logo on the left side, False to use an
+                       icon with text instead
+
+For example, to use light icons and no dropdowns, you could use the following in your template:
+
+{% include "base/navbar.html" with icon_weight="fal" dropdowns=False %}
+{% endcomment %}
+
+<nav class="navbar is-primary" role="navigation" aria-label="main navigation">
+  <div class="container">
+    <div class="navbar-brand">
+        {% if use_logo %}
+          <a class="navbar-item" href="{% url "home.index" %}">
+            <img src="{% static 'images/logo_site_banner.svg' %}" class="navbar-brand navbar-icon" alt="Python Discord">
+          </a>
+        {% else %}
+          <a
+            {% if active_item and request.path == "/" %}
+              class="navbar-item is-active"
+            {% else %}
+              class="navbar-item"
+            {% endif %}
+            href="{% url "home.index" %}"
+          >
+
+            <span class="icon is-size-4 is-medium"><i class="{{ icon_weight }} fa-home"></i></span>
+            <span class="is-hidden-touch">&nbsp;Home</span>
+          </a>
+        {% endif %}
+
+      <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbar_menu">
+        <span aria-hidden="true"></span>
+        <span aria-hidden="true"></span>
+        <span aria-hidden="true"></span>
+      </a>
+    </div>
+    <div class="navbar-menu is-paddingless" id="navbar_menu">
+      <div class="navbar-start">
+        {#                    {% if dropdowns %}#}
+        {#                        <div class="navbar-item has-dropdown is-hoverable">#}
+        {#                            {% if request.path|starts_with:"/blog" %}#}
+        {#                                <a class="navbar-link is-active" href="{% url "blog.index" %}">#}
+        {#                            {% else %}#}
+        {#                                <a class="navbar-link" href="{% url "blog.index" %}">#}
+        {#                            {% endif %}#}
+        {#                                <span class="icon is-size-4 is-medium"><i class="{{ icon_weight }} fa-blog"></i></span>#}
+        {#                                <span>&nbsp;Blog</span>#}
+        {#                            </a>#}
+        {##}
+        {#                            <div class="navbar-dropdown is-paddingless">#}
+        {#                                <a class="navbar-item" href="{% url "blog.posts" page=1 %}">#}
+        {#                                    <span class="icon is-size-4 is-medium"><i class="{{ icon_weight }} fa-quote-right"></i></span>#}
+        {#                                    <span>&nbsp;Posts</span>#}
+        {#                                </a>#}
+        {##}
+        {#                                <a class="navbar-item" href="{% url "blog.categories" %}">#}
+        {#                                    <span class="icon is-size-4 is-medium"><i class="{{ icon_weight }} fa-tag"></i></span>#}
+        {#                                    <span>&nbsp;Categories</span>#}
+        {#                                </a>#}
+        {#                            </div>#}
+        {#                        </div>#}
+        {#                    {% else %}#}
+        {#                        <a class="navbar-item" href="{% url "blog.index" %}">#}
+        {#                            <span class="icon is-size-4 is-medium"><i class="{{ icon_weight }} fa-blog"></i></span>#}
+        {#                            <span>&nbsp;Blog</span>#}
+        {#                        </a>#}
+        {#                    {% endif %}#}
+      </div>
+      <div class="navbar-end">
+        {#                    {% if request.user.is_authenticated %}#}
+        {#                        {% if user.is_staff %}#}
+        {#                            <a class="navbar-item" href="{% url "admin:index" %}">#}
+        {#                                <span class="icon is-size-4 is-medium"><i class="{{ icon_weight }} fa-cog"></i></span>#}
+        {#                                <span>&nbsp;Admin</span>#}
+        {#                            </a>#}
+        {#                        {% endif %}#}
+        {##}
+        {#                        <a class="navbar-item" href="{% url "logout" %}">#}
+        {#                            <span class="icon is-size-4 is-medium"><i class="{{ icon_weight }} fa-unlock"></i></span>#}
+        {#                            <span>&nbsp;Logout</span>#}
+        {#                        </a>#}
+        {#                    {% else %}#}
+        {#                        {% if request.path == "/login" %}#}
+        {#                            <a class="navbar-item is-active" href="{% url "login" %}">#}
+        {#                                <span class="icon is-size-4 is-medium"><i class="{{ icon_weight }} fa-lock"></i></span>#}
+        {#                                <span>&nbsp;Login</span>#}
+        {#                            </a>#}
+        {#                        {% else %}#}
+        {#                            <a class="navbar-item" href="{% url "login" %}">#}
+        {#                                <span class="icon is-size-4 is-medium"><i class="{{ icon_weight }} fa-lock"></i></span>#}
+        {#                                <span>&nbsp;Login</span>#}
+        {#                            </a>#}
+        {#                        {% endif %}#}
+        {#                    {% endif %}#}
+      </div>
+    </div>
+  </div>
+</nav>
+
+<!-- vim: set ft=htmldjango: -->
author	Gareth Coles <[email protected]>	2019-04-10 13:03:07 +0100
committer	Gareth Coles <[email protected]>	2019-04-10 13:03:07 +0100
commit	57838a2e98f7e80117448562865b09733a1637a9 (patch)
tree	f226c3f32d79606f4ce0cc7463bf4cba8de35d5f /pydis_site/templates/base
parent	Merge pull request #198 from gdude2002/django+176/project-layout (diff)