Merge branch 'django' into django+200/wiki

# Conflicts: # Pipfile # Pipfile.lock # pydis_site/apps/home/tests/test_app_basics.py # pydis_site/apps/home/urls.py # pydis_site/hosts.py # pydis_site/settings.py
author: Gareth Coles <[email protected]> 2019-04-20 14:39:16 +0100
committer: Gareth Coles <[email protected]> 2019-04-20 14:39:16 +0100
commit: 43039cd13afd19ea59addc3bb92c3c600826d8a3 (patch)
tree: 1aaaf8b862a7b55836c6a64a16d2fc4cb4100e60 /pydis_site/templates
parent: Address reviews (diff)
parent: Merge pull request #213 from python-discord/django_front_page (diff)
4 files changed, 144 insertions, 86 deletions
diff --git a/pydis_site/templates/base/base.html b/pydis_site/templates/base/base.html
index 7164ce47..99e00fe4 100644
--- a/pydis_site/templates/base/base.html
+++ b/pydis_site/templates/base/base.html
@@ -20,15 +20,20 @@
         crossorigin="anonymous"
   >
 
+  <link rel="stylesheet" href="{% static "css/base/base.css" %}">
   {% block head %}{% endblock %}
 
   {% render_block "css" %}
 </head>
-<body>
+<body class="site">
 
-{% block content %}
-  {{ block.super }}
-{% endblock %}
+<main class="site-content">
+  {% block content %}
+    {{ block.super }}
+  {% endblock %}
+</main>
+
+{% include "base/footer.html" %}
 
 {% render_block "js" %}
 </body>
diff --git a/pydis_site/templates/base/footer.html b/pydis_site/templates/base/footer.html
index ff868160..90f06f3c 100644
--- a/pydis_site/templates/base/footer.html
+++ b/pydis_site/templates/base/footer.html
@@ -1,7 +1,7 @@
 <footer class="footer has-background-dark has-text-light">
   <div class="content has-text-centered">
     <p>
-      &copy; 2019 Python Discord | Built with Django and Bulma
+      Built with <a href="https://www.djangoproject.com/"><span id="django-logo">django</span></a> and <a href="https://bulma.io"><span id="bulma-logo">Bulma</span></a> <br/> &copy; {% now "Y" %} <span id="pydis-text">Python Discord</span>
     </p>
   </div>
 </footer>
diff --git a/pydis_site/templates/base/navbar.html b/pydis_site/templates/base/navbar.html
index 73e3917a..5e76b3a6 100644
--- a/pydis_site/templates/base/navbar.html
+++ b/pydis_site/templates/base/navbar.html
@@ -1,60 +1,90 @@
 {% 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:
+<nav class="navbar is-primary" role="navigation" aria-label="main navigation">
+  <div class="navbar-brand">
 
-* `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
+    <a id="navbar-banner" class="navbar-item has-left-margin-1" href="/">
+      <img src="{% static "images/navbar/pydis_banner_no_square.svg" %}" alt="Python Discord logo"/>
+    </a>
 
-For example, to use light icons and no dropdowns, you could use the following in your template:
+    {# The navbar "burger" which appears when rendered on screens that can't fit the entire nav #}
+    <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>
 
-{% include "base/navbar.html" with icon_weight="fal" dropdowns=False %}
+  {# Content on the right side of the navbar #}
+  <div class="navbar-menu is-paddingless" id="navbar_menu">
+    <div class="navbar-end">
 
-This template is based on the navbar template found here:
-  https://github.com/gdude2002/gserv.me/blob/20f491836342925dc67b08e1bd0ea2ed29610da8/base/templates/base/navbar.html
+      {# Discord invite - only visible in the hamburger on mobile sizes. #}
+      <a class="navbar-item is-hidden-desktop" href="https://discord.gg/python">
+        <span class="icon is-size-4 is-medium"><i class="fab fa-discord"></i></span>
+        <span>&nbsp;Discord</span>
+      </a>
 
-{% endcomment %}
+      {# GitHub #}
+      <a class="navbar-item" href="https://github.com/python-discord">
+        <span class="icon is-size-4 is-medium"><i class="fab fa-github"></i></span>
+        <span>&nbsp;GitHub</span>
+      </a>
 
-<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 %}
+      {# Reddit #}
+      <a class="navbar-item" href="https://reddit.com/r/python">
+        <span class="icon is-size-4 is-medium"><i class="fab fa-reddit-alien"></i></span>
+        <span>&nbsp;Reddit</span>
+      </a>
 
-      <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>
+      {# YouTube #}
+      <a class="navbar-item" href="https://youtube.com/pythondiscord">
+        <span class="icon is-size-4 is-medium"><i class="fab fa-youtube"></i></span>
+        <span>&nbsp;YouTube</span>
       </a>
-    </div>
-    <div class="navbar-menu is-paddingless" id="navbar_menu">
-      <div class="navbar-start">
-        {# Content on the left side of the navbar #}
-      </div>
-      <div class="navbar-end">
-        {# Content on the right sside of the navbar #}
+
+      {# Patreon #}
+      <a class="navbar-item" href="http://patreon.com/python_discord">
+        <span class="icon is-size-4 is-medium"><i class="fab fa-patreon"></i></span>
+        <span>&nbsp;Patreon</span>
+      </a>
+
+      {# Merch #}
+      <a class="navbar-item" href="https://www.redbubble.com/people/PythonDiscord/shop">
+        <span class="icon is-size-4 is-medium"><i class="fas fa-tshirt"></i></span>
+        <span>&nbsp;Merch</span>
+      </a>
+
+      {# More #}
+      <div class="navbar-item has-dropdown is-hoverable has-left-margin-1">
+        <a class="navbar-link">
+          More
+        </a>
+        <div class="navbar-dropdown">
+          <a class="navbar-item">
+            Resources
+          </a>
+          <a class="navbar-item">
+            FAQ
+          </a>
+          <a class="navbar-item">
+            Rules
+          </a>
+          <a class="navbar-item">
+            Privacy
+          </a>
+          <hr class="navbar-divider">
+          <a class="navbar-item">
+            Code Jams
+          </a>
+        </div>
       </div>
     </div>
+
+    {# Join us on Discord! #}
+    <a class="navbar-item is-fullsize has-no-highlight has-left-margin-1" href="https://discord.gg/python">
+      <img class="is-hidden-touch" src="{% static "images/navbar/navbar_discordjoin.svg" %}" alt="Join us on Discord!"/>
+    </a>
   </div>
 </nav>
diff --git a/pydis_site/templates/home/index.html b/pydis_site/templates/home/index.html
index 3d5f386e..205e92ff 100644
--- a/pydis_site/templates/home/index.html
+++ b/pydis_site/templates/home/index.html
@@ -7,65 +7,88 @@
 {% endblock %}
 
 {% block content %}
-  <section class="hero is-primary">
-    <div class="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>
-    </div>
-    <div class="hero-foot">
-      {% include "base/navbar.html" with active_item=False dropdowns=True icon_weight="fas" use_logo=False %}
-    </div>
-  </section>
+  {% include "base/navbar.html" %}
+
   <section class="section">
+
+    {# Who are we? #}
     <div class="container is-spaced">
+      <h1 class="is-size-1">Who are we?</h1>
+      <br>
       <div class="columns">
-        <div class="column is-two-thirds">
+        <div class="column is-half">
           <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.
+            We're a large community focused around the Python programming language.
+            We believe anyone can learn programming, and are very dedicated to helping
+            novice developers take their first steps into the world of code. We also
+            attract a lot of expert developers who are seeking friendships, collaborators,
+            or looking to hone their craft by teaching and getting involved in the community.
 
-            <br /><br />
+            <br/><br/>
 
-            We organise regular community events and have a dedicated staff of
-            talented Python developers available to assist around the clock.
+            We organise regular community events like code jams, open source hackathons,
+            seasonal events and community challenges. Through our sponsorships and with
+            help from donations, we are even able to award prizes to the winners of our events.
 
-            <br /><br />
+            <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.
+            You can find help with most Python-related problems in one of our help channels.
+            Our staff of nearly 50 dedicated expert Helpers are available around the clock
+            in every timezone. 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>
+        {# Intro video #}
+        <div class="column is-half video-container">
+          <iframe src="https://www.youtube.com/embed/DIBXg8Qh7bA" frameborder="0"
+                  allow="accelerometer; encrypted-media; gyroscope; picture-in-picture"
+                  allowfullscreen></iframe>
         </div>
       </div>
+
+      {# Projects #}
+      <h1 class="is-size-1">Projects</h1>
+      <br>
+      <div class="columns is-multiline">
+
+        {# Display projects from HomeView.repos #}
+        {% for repo in repo_data %}
+          <div class="column is-one-third">
+            <div class="card has-equal-height github-card">
+              <div class="card-content">
+                <div class="repo-headline">
+                  <i class="fab fa-github"></i>
+                  <a href="https://github.com/{{ repo.repo_name }}"> <strong>{{ repo.repo_name }}</strong></a>
+                </div>
+                <div>
+                  {{ repo.description }}
+                  <br><br>
+                  </span><span class="repo-language-dot {{ repo.language | lower }}"></span> {{ repo.language }}
+                  <span id="repo-footer-item"><i class="fas fa-star"></i> {{ repo.stargazers }}</span>
+                  <span id="repo-footer-item"><i class="fas fa-code-branch"></i> {{ repo.forks }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        {% endfor %}
+
+      </div>
     </div>
   </section>
 
+  {# Sponsors #}
   <section class="section-sp hero is-light">
-    <div class="hero-body">
+    <div id="sponsors-hero" 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="" />
+        <a href="https://linode.com"><img src="{% static "images/sponsors/linode.png" %}" alt="Linode"/></a>
+        <a href="https://jetbrains.com"><img src="{% static "images/sponsors/jetbrains.png" %}" alt="JetBrains"/></a>
+        <a href="https://adafruit.com"><img src="{% static "images/sponsors/adafruit.png" %}" alt="Adafruit"/></a>
       </div>
     </div>
   </section>
 
-  {% include "base/footer.html" %}
 {% endblock %}
author	Gareth Coles <[email protected]>	2019-04-20 14:39:16 +0100
committer	Gareth Coles <[email protected]>	2019-04-20 14:39:16 +0100
commit	43039cd13afd19ea59addc3bb92c3c600826d8a3 (patch)
tree	1aaaf8b862a7b55836c6a64a16d2fc4cb4100e60 /pydis_site/templates
parent	Address reviews (diff)
parent	Merge pull request #213 from python-discord/django_front_page (diff)