Refactoring

src/jakecharman/templates/projects.html

@@ -0,0 +1,54 @@
+{% include 'header.html' %}
+<main id="project-main">
+    <nav id="filter">
+        <label for="filter_category">Filter:</label>
+        <select id="filter_category" name="filter_category" onchange="update_filter()">
+            <option value="all">All Categories</option>
+            {% for category in all_categories %}
+            <option {{ 'selected' if current_category==category }} value="{{ category }}">
+                {{all_categories.get(category).get('title')}}</option>
+            {% endfor %}
+        </select>
+    </nav>
+    <h2>{{ title }}</h2>
+    <p>{{ description }}</p>
+    <p style="text-align: center; font-weight: bold; font-style: italic;">This page is relatively new. I'm adding projects as fast as I can but feel free to <a href="/contact">contact me</a> if you want to know about something in particular.</p>
+    <section id="projects">
+        {% for row in articles %}
+        <div class="project">
+            {% if row.get('link') is not none %}
+                <a href="{{ row.link }}">
+            {% else %}
+                <a href="/projects/{{ row.id }}">
+            {% endif %}
+                <img class="project-thumb" 
+                srcset="
+                    {% for i in range(200, 5100, 100) %}
+                        /projects/image/{{ row.image }}?w={{i}} {{i}}w{{"," if not loop.last}}
+                    {% endfor %}
+                    "
+                    sizes="
+                        (max-width: 999px) 80vw,
+                        (min-width: 1000px) 20vw
+                    "
+                src="/projects/image/{{ row.image }}">
+            </a>
+            <div class="project-text">
+                {% if row.get('link') is not none %}
+                    <a href="{{ row.link }}">
+                {% else %}
+                    <a href="/projects/{{ row.id }}">
+                {% endif %}
+                    <h3>{{ row.title }}</h3>
+                </a>
+                <p class="article-description">{{ row.description }}</p>
+                <p class="article-date">{{ row.date | human_date }}</p>
+                {% for category in row.categories %}
+                <a class="article-category" href="/projects/category/{{ category }}">{{ category | category_title }}{{ ", " if not loop.last }}</loop></a>
+                {% endfor %}
+            </div>
+        </div>
+        {% endfor %}
+    </section>
+</main>
+{% include 'footer.html' %}