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
parent: Merge pull request #198 from gdude2002/django+176/project-layout (diff)
6 files changed, 259 insertions, 72 deletions
diff --git a/pydis_site/templates/base.html b/pydis_site/templates/base.html
deleted file mode 100644
index 1dcdfdc4..00000000
--- a/pydis_site/templates/base.html
+++ /dev/null
@@ -1,22 +0,0 @@
-{# Base template, with a few basic style definitions. #}
-{% load django_simple_bulma %}
-{% load static %}
-
-<!DOCTYPE html>
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
-  <title>Python Discord | {% block page_title %}Website{% endblock %}</title>
-  <meta name="description" content="{% block page_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 %}">
-
-  {% bulma %}
-  {% font_awesome %}
-  {% block head %}{% endblock %}
-</head>
-<body>
-  {% block body %}
-  {% endblock %}
-</body>
-
-
-<!-- vim: set ft=htmldjango: -->
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: -->
diff --git a/pydis_site/templates/home/index.html b/pydis_site/templates/home/index.html
index cc99763b..c69f7bcd 100644
--- a/pydis_site/templates/home/index.html
+++ b/pydis_site/templates/home/index.html
@@ -1,42 +1,66 @@
-{% extends 'navbar.html' %}
+{% extends 'base/base-hero.html' %}
 {% load static %}
 
-{% block page_title %}Home{% endblock %}
+{% block title %}Home{% endblock %}
 {% block head %}
-  {{ block.super }}
-  <link rel="stylesheet" href="{% static 'home/css/index.css' %}">
+  <link rel="stylesheet" href="{% static "css/home/index.css" %}">
 {% endblock %}
-{% block body %}
-  {{ block.super }}
-  <div class="overview has-text-centered container">
-    <h1 class="has-text-white has-text-weight-semibold is-size-2">Python Discord</h1>
-    <p class="has-text-grey-lighter is-size-7">
-      The official Discord server of
-      <a class="has-text-white" href="https://reddit.com/r/Python">r/Python</a>
-    </p>
-
-    <p class="has-text-light is-size-4">
-      We're a large, friendly community focused around the Python programming language, open to those
-      who wish to learn the language or improve their skills, as well as those looking to help others.
-    </p>
-
-    <p class="has-text-light is-size-6">
-      We organise regular community events and have a dedicated staff of talented Python
-      developers available to assist around the clock. Whether you're looking to learn the
-      language or working on a complex project, we've got someone who can help you if you get stuck.
-    </p>
-
-    <img src="https://discordapp.com/api/guilds/267624335836053506/embed.png?style=banner3">
-
-    <p class="divider has-text-grey-light">
-      ------------------------------------------------------------------------------------------------------------&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;O&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-------------------------------------------------------------------------------------------------------------
-    </p>
-
-    <p class="has-text-grey-lighter is-size-7">
-      Please note: this site is under construction. What you see now may be vastly different
-      from the final project state. Feel free to chat to us on Discord if you're curious!
-    </p>
+
+{% block hero-body %}
+  <div class="container is-flex">
+    <img class="hero-image is-centered" src="{% static "images/logo_site_banner.svg" %}" alt="Python Discord logo" />
+  </div>
+  <div class="container has-text-centered">
+    <h1 class="title is-4">
+      The hottest Python community on the web
+    </h1>
   </div>
 {% endblock %}
+{% block content %}
+  <section class="section">
+    <div class="container is-spaced">
+      <div class="columns">
+        <div class="column is-two-thirds">
+          <p>
+            We're a large, friendly community focused around the Python programming
+            language, open to those who wish to learn the language or improve their
+            skills, as well as those looking to help others.
+
+            <br /><br />
+
+            We organise regular community events and have a dedicated staff of
+            talented Python developers available to assist around the clock.
+
+            <br /><br />
+
+            Whether you're looking to learn the language or working on a complex project,
+            we've got someone who can help you if you get stuck.
+          </p>
+        </div>
+        <div class="column is-one-third is-first has-text-centered">
+          <h1 class="title">Join the community</h1>
+
+          {# TODO: Fix URL #}
+          <a href="https://pythondiscord.com/invite">
+            <img class="discord-banner" src="https://discordapp.com/api/guilds/267624335836053506/embed.png?style=banner3" alt="Discord banner" />
+          </a>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <section class="section-sp hero is-light">
+    <div class="hero-body">
+      <div class="container">
+        <h1 class="title is-6 has-text-grey">
+          Sponsors
+        </h1>
+        <img src="{% static "images/sponsors/linode.png" %}" alt="" />
+        <img src="{% static "images/sponsors/jetbrains.png" %}" alt="" />
+        <img src="{% static "images/sponsors/adafruit.png" %}" alt="" />
+      </div>
+    </div>
+  </section>
+{% endblock %}
 
 <!-- vim: set ft=htmldjango: -->
diff --git a/pydis_site/templates/navbar.html b/pydis_site/templates/navbar.html
deleted file mode 100644
index 0efa51c2..00000000
--- a/pydis_site/templates/navbar.html
+++ /dev/null
@@ -1,16 +0,0 @@
-{% extends 'base.html' %}
-{% load static %}
-
-{% block head %}
-  <link rel="stylesheet" href="{% static 'css/navbar.css' %}">
-{% endblock %}
-{% block body %}
-  <nav class="navbar is-dark" role="navigation" aria-label="main navigation">
-    <div class="navbar-brand">
-      <img src="{% static 'assets/logo-banner.svg' %}" class="navbar-brand navbar-icon" alt="Python Discord">
-    </div>
-  </nav>
-  {{ block.super }}
-{% endblock %}
-
-<!-- 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
parent	Merge pull request #198 from gdude2002/django+176/project-layout (diff)