Refactor templates and split off static CSS/JS for modules.

static/campaigns.css

@@ -0,0 +1,209 @@
+#campaigns-select {
+    display: inline-block;
+    padding-right: 1em;
+    background: transparent 100% 50%/contain no-repeat;
+    border-width: 1px;
+}
+
+#campaigns-select select {
+    max-width: 120px;
+    padding: 0 0.25em;
+    font-size: 100%;
+    color: inherit;
+    background: transparent;
+    border: none;
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+}
+
+h2 .disabled {
+    color: #989898;
+    text-decoration: line-through;
+}
+
+h2 .disabled-info {
+    margin-left: 0.5em;
+    color: #989898;
+    font-size: 85%;
+    font-variant: none;
+}
+
+#operations {
+    margin-bottom: 1em;
+}
+
+#operations section {
+    display: flex;
+}
+
+.operation {
+    flex: 1;
+}
+
+.operation .primary .num {
+    height: 60px;
+    line-height: 60px;
+}
+
+.operation .big {
+    font-size: 300%;
+}
+
+.operation .medium {
+    font-size: 200%;
+}
+
+.operation .small {
+    font-size: 150%;
+}
+
+.operation .secondary {
+    font-size: 105%;
+}
+
+.operation .unit {
+    font-style: italic;
+}
+
+.operation .summary {
+    font-size: 14px;
+}
+
+.operation .summary .head {
+    margin-top: 1em;
+}
+
+.operation .summary .contents {
+    position: relative;
+    margin-top: 0.5em;
+    border: 1px solid #282828;
+}
+
+.operation .board {
+    border-spacing: 0;
+    border-collapse: collapse;
+    text-align: left;
+}
+
+.operation .board:not(.expanded) tr:nth-child(2n) {
+    background-color: #181818;
+}
+
+.operation .board:not(.expanded) tr:nth-child(2n+1) {
+    background-color: #0A0A0A;
+}
+
+.operation .board td {
+    padding: 0.25em 0;
+}
+
+.operation .board td:first-child {
+    padding-left: 1em;
+}
+
+.operation .board td:last-child {
+    padding-right: 1em;
+}
+
+.operation .board .fluid {
+    padding-right: 0.5em;
+}
+
+.operation .board .icon {
+    width: 46px;
+}
+
+.operation .board.expanded {
+    position: absolute;
+    z-index: 1;
+    transition: clip-path 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    clip-path: inset(0 100% 0 0);
+}
+
+.operation .board:not(.expanded) .extra {
+    display: none;
+}
+
+.operation .board.expanded .spacer {
+    display: none;
+}
+
+.operation .board img {
+    width: 42px;
+    height: 42px;
+    vertical-align: middle;
+}
+
+.operation .board abbr {
+    border-bottom: none;
+}
+
+.operation .itemboard td:last-child {
+    padding-left: 0.5em;
+    text-align: right;
+}
+
+.operation .itemboard .count {
+    font-weight: bold;
+}
+
+.operation .itemboard .count::before {
+    content: "×";
+    font-weight: normal;
+    color: #AAA;
+}
+
+@media (min-width: 800px) {
+    #operations {
+        margin: 1em 0;
+    }
+
+    #operations section {
+        margin-bottom: 2em;
+    }
+
+    .operation {
+        margin: 0 0.75em;
+        text-align: center;
+    }
+
+    .operation .secondary {
+        margin-top: 0.5em;
+    }
+
+    .operation .secondary .unit {
+        margin-left: 0.15em;
+    }
+
+    .operation .summary .contents {
+        display: inline-block;
+        margin-bottom: -4px;
+    }
+}
+
+@media (max-width: 799px) {
+    #operations section {
+        flex-direction: column;
+    }
+
+    .operation {
+        margin: 0.5em 0;
+    }
+
+    .operation .overview {
+        margin-left: 1em;
+    }
+
+    .operation .primary, .operation .primary .unit {
+        display: inline-block;
+    }
+
+    .operation .unit {
+        margin-left: 0.15em;
+    }
+
+    .operation .board:not(.expanded) {
+        width: 100%;
+    }
+}

static/campaigns.js

@@ -0,0 +1,26 @@
+$(function() {
+    // Enable form auto-submit on campaign change:
+    $("#campaigns-select select").change(function() {
+        this.form.submit();
+    });
+    $('#campaigns-select input[type="submit"]').hide();
+
+    //Selectively reveal operation summary details:
+    $(".operation .killboard tr").mouseenter(function() {
+        var div = $("<table>", {addClass: "board expanded"})
+            .css($(this).position())
+            .css("background-color", $(this).css("background-color"))
+            .css("position", "fixed")
+            .append($("<tr>").html($(this).html()))
+            .mouseleave(function() { $(this).remove(); });
+        div.find(".spacer").remove();
+        $(this).closest(".summary").find(".expanded").remove();
+        $(this).closest(".contents").prepend(div);
+        div.css("width", Math.max(div.width(), $(this).width()));
+        div.css("position", "");
+        div.css("clip-path", "inset(0 0% 0 0)");
+    });
+    $(".operation .summary").mouseleave(function() {
+        $(this).find(".expanded").remove();
+    });
+});

static/main.css

@@ -1,6 +1,3 @@
-/* ~~~~~~~~~~~~~~~~~~~~~~~~~~ Calefaction Main CSS ~~~~~~~~~~~~~~~~~~~~~~~~~ */
-/* =============================== Universal =============================== */
-
 @import url(//fonts.googleapis.com/css?family=Open+Sans:400,400italic,700);
 
 body {
@@ -374,253 +371,3 @@ footer ul li:not(:last-child)::after {
 .sec-1_0 {
     color: #33F9F9;
 }
-
-/* ================================ Modules ================================ */
-/* ------------------------------- Campaigns ------------------------------- */
-
-#campaigns-select {
-    display: inline-block;
-    padding-right: 1em;
-    background: transparent 100% 50%/contain no-repeat;
-    border-width: 1px;
-}
-
-#campaigns-select select {
-    max-width: 120px;
-    padding: 0 0.25em;
-    font-size: 100%;
-    color: inherit;
-    background: transparent;
-    border: none;
-    appearance: none;
-    -webkit-appearance: none;
-    -moz-appearance: none;
-}
-
-h2 .disabled {
-    color: #989898;
-    text-decoration: line-through;
-}
-
-h2 .disabled-info {
-    margin-left: 0.5em;
-    color: #989898;
-    font-size: 85%;
-    font-variant: none;
-}
-
-#operations {
-    margin-bottom: 1em;
-}
-
-#operations section {
-    display: flex;
-}
-
-.operation {
-    flex: 1;
-}
-
-.operation .primary .num {
-    height: 60px;
-    line-height: 60px;
-}
-
-.operation .big {
-    font-size: 300%;
-}
-
-.operation .medium {
-    font-size: 200%;
-}
-
-.operation .small {
-    font-size: 150%;
-}
-
-.operation .secondary {
-    font-size: 105%;
-}
-
-.operation .unit {
-    font-style: italic;
-}
-
-.operation .summary {
-    font-size: 14px;
-}
-
-.operation .summary .head {
-    margin-top: 1em;
-}
-
-.operation .summary .contents {
-    position: relative;
-    margin-top: 0.5em;
-    border: 1px solid #282828;
-}
-
-.operation .board {
-    border-spacing: 0;
-    border-collapse: collapse;
-    text-align: left;
-}
-
-.operation .board:not(.expanded) tr:nth-child(2n) {
-    background-color: #181818;
-}
-
-.operation .board:not(.expanded) tr:nth-child(2n+1) {
-    background-color: #0A0A0A;
-}
-
-.operation .board td {
-    padding: 0.25em 0;
-}
-
-.operation .board td:first-child {
-    padding-left: 1em;
-}
-
-.operation .board td:last-child {
-    padding-right: 1em;
-}
-
-.operation .board .fluid {
-    padding-right: 0.5em;
-}
-
-.operation .board .icon {
-    width: 46px;
-}
-
-.operation .board.expanded {
-    position: absolute;
-    z-index: 1;
-    transition: clip-path 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-    clip-path: inset(0 100% 0 0);
-}
-
-.operation .board:not(.expanded) .extra {
-    display: none;
-}
-
-.operation .board.expanded .spacer {
-    display: none;
-}
-
-.operation .board img {
-    width: 42px;
-    height: 42px;
-    vertical-align: middle;
-}
-
-.operation .board abbr {
-    border-bottom: none;
-}
-
-.operation .itemboard td:last-child {
-    padding-left: 0.5em;
-    text-align: right;
-}
-
-.operation .itemboard .count {
-    font-weight: bold;
-}
-
-.operation .itemboard .count::before {
-    content: "×";
-    font-weight: normal;
-    color: #AAA;
-}
-
-@media (min-width: 800px) {
-    #operations {
-        margin: 1em 0;
-    }
-
-    #operations section {
-        margin-bottom: 2em;
-    }
-
-    .operation {
-        margin: 0 0.75em;
-        text-align: center;
-    }
-
-    .operation .secondary {
-        margin-top: 0.5em;
-    }
-
-    .operation .secondary .unit {
-        margin-left: 0.15em;
-    }
-
-    .operation .summary .contents {
-        display: inline-block;
-        margin-bottom: -4px;
-    }
-}
-
-@media (max-width: 799px) {
-    #operations section {
-        flex-direction: column;
-    }
-
-    .operation {
-        margin: 0.5em 0;
-    }
-
-    .operation .overview {
-        margin-left: 1em;
-    }
-
-    .operation .primary, .operation .primary .unit {
-        display: inline-block;
-    }
-
-    .operation .unit {
-        margin-left: 0.15em;
-    }
-
-    .operation .board:not(.expanded) {
-        width: 100%;
-    }
-}
-
-/* -------------------------------- Members -------------------------------- */
-
-#members-list {
-    list-style: none;
-    margin: 1em 0 0.5em 0;
-    padding: 0;
-    column-count: 2;
-}
-
-#members-list li {
-    margin-bottom: 0.5em;
-}
-
-#members-list a:hover {
-    text-decoration: none;
-}
-
-#members-list img {
-    width: 48px;
-    height: 48px;
-    vertical-align: middle;
-    border-width: 1px;
-}
-
-#members-list span {
-    margin-left: 0.5em;
-    vertical-align: middle;
-}
-
-#members-list em {
-    font-size: 90%;
-}
-
-#members-list em::before {
-    content: ", ";
-}

static/main.js

@@ -3,8 +3,6 @@ var overlaps = function(needle, haystack) {
 };
 
 $(function() {
-    /* ============================= Universal ============================= */
-
     // Install logout auto-POST form:
     $("#logout").click(function() {
         $("<form>", {
@@ -56,31 +54,4 @@ $(function() {
             .prop("disabled", false);
         $(this).addClass("cur").find(":submit").prop("disabled", true);
     });
-
-    /* ============================== Modules ============================== */
-
-    // Campaigns: enable form auto-submit on campaign change:
-    $("#campaigns-select select").change(function() {
-        this.form.submit();
-    });
-    $('#campaigns-select input[type="submit"]').hide();
-
-    //Campaigns: selectively reveal operation summary details:
-    $(".operation .killboard tr").mouseenter(function() {
-        var div = $("<table>", {addClass: "board expanded"})
-            .css($(this).position())
-            .css("background-color", $(this).css("background-color"))
-            .css("position", "fixed")
-            .append($("<tr>").html($(this).html()))
-            .mouseleave(function() { $(this).remove(); });
-        div.find(".spacer").remove();
-        $(this).closest(".summary").find(".expanded").remove();
-        $(this).closest(".contents").prepend(div);
-        div.css("width", Math.max(div.width(), $(this).width()));
-        div.css("position", "");
-        div.css("clip-path", "inset(0 0% 0 0)");
-    });
-    $(".operation .summary").mouseleave(function() {
-        $(this).find(".expanded").remove();
-    });
 });

static/members.css

@@ -0,0 +1,34 @@
+#members-list {
+    list-style: none;
+    margin: 1em 0 0.5em 0;
+    padding: 0;
+    column-count: 2;
+}
+
+#members-list li {
+    margin-bottom: 0.5em;
+}
+
+#members-list a:hover {
+    text-decoration: none;
+}
+
+#members-list img {
+    width: 48px;
+    height: 48px;
+    vertical-align: middle;
+    border-width: 1px;
+}
+
+#members-list span {
+    margin-left: 0.5em;
+    vertical-align: middle;
+}
+
+#members-list em {
+    font-size: 90%;
+}
+
+#members-list em::before {
+    content: ", ";
+}

templates/404.mako

@@ -1,6 +1,6 @@
 <%inherit file="_base.mako"/>
 <%block name="title">
-    ${self.maketitle("404")}
+    ${self.support.maketitle("404")}
 </%block>
 <h2>Error 404</h2>
 <p>The page you asked for couldn't be found.</p>

templates/_base.mako

@@ -1,32 +1,27 @@
+<%namespace name="support" file="_base_support.mako" inheritable="True"/>\
 <!DOCTYPE html>
 <html lang="en">
     <head>
         <meta charset="utf-8">
         <title>
-            <%def name="maketitle(*parts)">
-                <%
-                    if request.url_rule and request.url_rule.endpoint == "index":
-                        parts = ()
-                %>
-                ${" | ".join(parts + (g.config.get("corp.name"),)) | h}
-            </%def>
             <%block name="title">
-                ${maketitle()}
+                ${support.maketitle()}
             </%block>
         </title>
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <link rel="canonical" href="${g.config.scheme}://${g.config.get('site.canonical')}${request.script_root}${request.path}">
-        <link rel="stylesheet" type="text/css" href="${url_for('staticv', filename='main.css')}"/>
+        ${support.makecss("main.css")}
         <% style = g.auth.get_character_prop("style") or g.config.get("style.default") %>
         % if style:
-            <% stylesheet = "styles/{}.css".format(style) %>
-            <link id="user-style" rel="stylesheet" type="text/css" href="${url_for('staticv', filename=stylesheet)}"/>
+            ${support.makecss("styles/{}.css".format(style), "user-style")}
         % endif
+        <%block name="extracss"></%block>
         % for size in g.eve.image.corp_widths:
             <link rel="icon" type="image/png" sizes="${size}x${size}" href="${g.eve.image.corp(g.config.get('corp.id'), size)}"/>
         % endfor
         <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
-        <script src="${url_for('staticv', filename='main.js')}"></script>
+        ${support.makejs("main.js")}
+        <%block name="extrajs"></%block>
     </head>
     <body>
         <%block name="header">

templates/_base_support.mako

@@ -0,0 +1,14 @@
+<%! import markupsafe %>
+<%def name="maketitle(*parts)" filter="trim">
+    <%
+        if request.url_rule and request.url_rule.endpoint == "index":
+            parts = ()
+    %>
+    ${" | ".join(parts + (g.config.get("corp.name"),)) | h}
+</%def>
+<%def name="makecss(filename, id_=None)" filter="trim">
+    <link ${'id="{}" '.format(markupsafe.escape(id_)) if id_ else ""}rel="stylesheet" type="text/css" href="${url_for('staticv', filename=filename)}"/>
+</%def>
+<%def name="makejs(filename)" filter="trim">
+    <script src="${url_for('staticv', filename=filename)}"></script>
+</%def>

templates/campaigns/campaign.mako

@@ -4,7 +4,13 @@
 <%inherit file="../_default.mako"/>
 <%namespace file="renderers.mako" import="render_summary"/>
 <%block name="title">
-    ${self.maketitle(campaign["title"], "Campaigns")}
+    ${self.support.maketitle(campaign["title"], "Campaigns")}
+</%block>
+<%block name="extracss">
+    ${self.support.makecss("campaigns.css")}
+</%block>
+<%block name="extrajs">
+    ${self.support.makejs("campaigns.js")}
 </%block>
 <h2>
     <span class="understate">Campaign:</span>

templates/campaigns/empty.mako

@@ -1,5 +1,5 @@
 <%inherit file="../_default.mako"/>
 <%block name="title">
-    ${self.maketitle("Campaigns")}
+    ${self.support.maketitle("Campaigns")}
 </%block>
 <p>No campaigns currently.</p>

templates/campaigns/operation.mako

@@ -1,6 +1,6 @@
 <%inherit file="../_default.mako"/>
 <%block name="title">
-    ${self.maketitle(operation["title"], campaign["title"], "Campaigns")}
+    ${self.support.maketitle(operation["title"], campaign["title"], "Campaigns")}
 </%block>
 <h2> <!-- ... breadcrumb -->
     <span class="understate">Operation:</span>

templates/error.mako

@@ -1,6 +1,6 @@
 <%inherit file="_base.mako"/>
 <%block name="title">
-    ${self.maketitle("Error")}
+    ${self.support.maketitle("Error")}
 </%block>
 <h2>Error!</h2>
 <p>You may report the following information to the developers:</p>

templates/logout.mako

@@ -1,6 +1,6 @@
 <%inherit file="_base.mako"/>
 <%block name="title">
-    ${self.maketitle("Log out")}
+    ${self.support.maketitle("Log out")}
 </%block>
 <h2>Log out</h2>
 <p>Use the button below to safely log out and clear your session.</p>

templates/members/members.mako

@@ -1,6 +1,9 @@
 <%inherit file="../_default.mako"/>
 <%block name="title">
-    ${self.maketitle("Members")}
+    ${self.support.maketitle("Members")}
+</%block>
+<%block name="extracss">
+    ${self.support.makecss("members.css")}
 </%block>
 <h2>Members</h2>
 % if members: