Add dropdown for campaign selection; titles.

calefaction/modules/campaigns.py

@@ -1,6 +1,6 @@
 # -*- coding: utf-8  -*-
 
-from flask import abort, g
+from flask import abort, g, request
 from flask_mako import render_template
 
 from ._provided import blueprint, config
@@ -16,7 +16,12 @@ def get_current():
 
 def home():
     """Render and return the main campaign page."""
-    return render_template("campaigns/campaign.mako", current=get_current())
+    current = get_current()
+    if current:
+        campaign = config["campaigns"][current]
+        return render_template(
+            "campaigns/campaign.mako", name=current, campaign=campaign)
+    return render_template("campaigns/empty.mako")
 
 def navitem():
     """Render and return the navigation item for this module."""
@@ -30,10 +35,11 @@ def campaign():
     """Render and return the current campaign page."""
     return home()
 
-@blueprint.rroute("/settings/campaign/<campaign>", methods=["POST"])
-def set_campaign(campaign):
+@blueprint.rroute("/settings/campaign", methods=["POST"])
+def set_campaign():
     """Update the user's currently selected campaign."""
+    campaign = request.args.get("campaign")
     if campaign not in config["enabled"]:
-        abort(404)
+        abort(400)
     g.auth.set_character_modprop("campaigns", "current", campaign)
     return "", 204

config/modules/campaigns.yml.sample

@@ -4,12 +4,12 @@
 
 # List of active campaigns, in your preferred order:
 enabled:
-  - Foo
-  - Bar
+  - foo
+  - bar
 
 campaigns:
   # ...
-  Foo:
-    a: b
-  Bar:
-    a: b
+  foo:
+    title: Foo
+  bar:
+    title: Bar

static/main.css

@@ -322,6 +322,27 @@ footer ul li:not(:last-child)::after {
 }
 
 /* ================================ 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;
+}
+
 /* -------------------------------- Members -------------------------------- */
 
 #members-list {

static/main.js

@@ -3,6 +3,8 @@ var overlaps = function(needle, haystack) {
 };
 
 $(function() {
+    /* ============================= Universal ============================= */
+
     // Install logout auto-POST form:
     $("#logout").click(function() {
         $("<form>", {
@@ -43,4 +45,12 @@ $(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();
 });

static/styles/amarr.css

@@ -17,3 +17,7 @@ a {
 a:hover {
     color: #DDBE68;
 }
+
+#campaigns-select {
+    background-image: url('data:image/svg+xml;utf8,<?xml version="1.0" standalone="no"?><svg height="60" width="60" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="13,20 48,20 30,45" style="fill:#584A26;"/></svg>');
+}

static/styles/caldari.css

@@ -17,3 +17,7 @@ a {
 a:hover {
     color: #88BBDD;
 }
+
+#campaigns-select {
+    background-image: url('data:image/svg+xml;utf8,<?xml version="1.0" standalone="no"?><svg height="60" width="60" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="13,20 48,20 30,45" style="fill:#364A5F;"/></svg>');
+}

static/styles/gallente.css

@@ -17,3 +17,7 @@ a {
 a:hover {
     color: #60AA90;
 }
+
+#campaigns-select {
+    background-image: url('data:image/svg+xml;utf8,<?xml version="1.0" standalone="no"?><svg height="60" width="60" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="13,20 48,20 30,45" style="fill:#284A36;"/></svg>');
+}

static/styles/minmatar.css

@@ -17,3 +17,7 @@ a {
 a:hover {
     color: #C88070;
 }
+
+#campaigns-select {
+    background-image: url('data:image/svg+xml;utf8,<?xml version="1.0" standalone="no"?><svg height="60" width="60" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="13,20 48,20 30,45" style="fill:#5F3632;"/></svg>');
+}

templates/campaigns/campaign.mako

@@ -1,7 +1,6 @@
 <%inherit file="../_default.mako"/>
-% if current:
-    <h2><span class="understate">Campaign:</span> ${current} <!-- select ... --></h2>
-    <p>Hello! ...</p>
-% else:
-    <p>No campaigns currently.</p>
-% endif
+<%block name="title">
+    ${campaign["title"] | h} &ndash; Campaign &ndash; ${g.config.get("corp.name") | h}
+</%block>
+<h2><span class="understate">Campaign:</span> ${campaign["title"] | h}</h2>
+<p>Hello! ...</p>

templates/campaigns/empty.mako

@@ -0,0 +1,2 @@
+<%inherit file="../_default.mako"/>
+<p>No campaigns currently.</p>

templates/campaigns/navitem.mako

@@ -1,6 +1,16 @@
 Campaign:
 % if request.url_rule.endpoint == "campaigns.campaign":
-    <strong>${current}</strong>
+    <form id="campaigns-select" action="${url_for('campaigns.set_campaign')}" method="post" class="styled-border">
+        <select name="campaign">
+            <% config = g.config.modules.campaigns.config %>
+            % for name in config["enabled"]:
+                <% params = config["campaigns"][name] %>
+                <option value="${name | h}"${" selected" if name == current else ""}>${params["title"] | h}</option>
+            % endfor
+        </select>
+        <input type="submit" value="Change">
+    </form>
 % else:
-    <a href="${url_for('campaigns.campaign')}">${current}</a>
+    <% campaign = g.config.modules.campaigns.config["campaigns"][current] %>
+    <a href="${url_for('campaigns.campaign')}">${campaign["title"]}</a>
 % endif

templates/members/members.mako

@@ -1,4 +1,7 @@
 <%inherit file="../_default.mako"/>
+<%block name="title">
+    Members &ndash; ${g.config.get("corp.name") | h}
+</%block>
 <h2>Members</h2>
 % if members:
     <ul id="members-list">