Implement individual operation pages.

static/campaigns.css

@@ -29,6 +29,15 @@ h2 .disabled-info {
     font-variant: none;
 }
 
+.breadcrumb {
+    margin-top: 1em;
+    font-size: 90%;
+}
+
+.breadcrumb::after {
+    content: "»";
+}
+
 #operations {
     margin-bottom: 1em;
 }
@@ -72,6 +81,7 @@ h2 .disabled-info {
 
 .operation .summary .head {
     margin-top: 1em;
+    font-weight: normal;
 }
 
 .operation .summary .contents {
@@ -110,10 +120,14 @@ h2 .disabled-info {
     padding-right: 0.5em;
 }
 
-.operation .board .icon {
+.operation:not(.detail) .board .icon {
     width: 46px;
 }
 
+.operation.detail .board .icon {
+    width: 52px;
+}
+
 .operation .board.expanded {
     position: absolute;
     z-index: 1;
@@ -121,7 +135,7 @@ h2 .disabled-info {
     clip-path: inset(0 100% 0 0);
 }
 
-.operation .board:not(.expanded) .extra {
+.operation:not(.detail) .board:not(.expanded) .extra {
     display: none;
 }
 
@@ -130,15 +144,27 @@ h2 .disabled-info {
 }
 
 .operation .board img {
+    vertical-align: middle;
+}
+
+.operation:not(.detail) .board img {
     width: 42px;
     height: 42px;
-    vertical-align: middle;
+}
+
+.operation.detail .board img {
+    width: 48px;
+    height: 48px;
 }
 
 .operation .board abbr {
     border-bottom: none;
 }
 
+.operation .board a:hover {
+    text-decoration: none;
+}
+
 .operation .itemboard td:last-child {
     padding-left: 0.5em;
     text-align: right;
@@ -154,6 +180,36 @@ h2 .disabled-info {
     color: #AAA;
 }
 
+.operation.detail {
+    margin-bottom: 1em;
+}
+
+.operation.detail .overview {
+    margin-left: 1em;
+}
+
+.operation.detail .primary, .operation.detail .primary .unit {
+    display: inline-block;
+}
+
+.operation.detail .unit {
+    margin-left: 0.15em;
+}
+
+.operation.detail .contents, .operation.detail .board:not(.expanded) {
+    width: 100%;
+}
+
+.operation.detail .detail-item {
+    padding-left: 0.5em;
+}
+
+.operation.detail .detail-list > :not(:last-child)::after {
+    margin-left: 0.25em;
+    content: "/";
+    color: #AAA;
+}
+
 @media (min-width: 800px) {
     #operations {
         margin: 1em 0;
@@ -163,12 +219,12 @@ h2 .disabled-info {
         margin-bottom: 2em;
     }
 
-    .operation {
+    .operation:not(.detail) {
         margin: 0 0.75em;
         text-align: center;
     }
 
-    .operation .secondary {
+    .operation:not(.detail) .secondary {
         margin-top: 0.5em;
     }
 

static/campaigns.js

@@ -6,7 +6,7 @@ $(function() {
     $('#campaigns-select input[type="submit"]').hide();
 
     //Selectively reveal operation summary details:
-    $(".operation .killboard tr").mouseenter(function() {
+    $(".operation:not(.detail) .killboard tr").mouseenter(function() {
         var div = $("<table>", {addClass: "board expanded"})
             .css($(this).position())
             .css("background-color", $(this).css("background-color"))

templates/campaigns/operation.mako

@@ -1,4 +1,8 @@
+<%!
+    from calefaction.format import format_isk
+%>
 <%inherit file="../_default.mako"/>
+<%namespace file="renderers.mako" import="render_summary"/>
 <%block name="title">
     ${self.support.maketitle(operation["title"], campaign["title"], "Campaigns")}
 </%block>
@@ -8,8 +12,42 @@
 <%block name="extrajs">
     ${self.support.makejs("campaigns.js")}
 </%block>
-<h2> <!-- ... breadcrumb -->
+<div class="breadcrumb">
+    Campaign: <a href="${url_for('.campaign', name=cname)}">${campaign["title"] | h}</a>
+</div>
+<h2>
     <span class="understate">Operation:</span>
     <span${"" if enabled else ' class="disabled"'}>${operation["title"] | h}</span>
+    % if not enabled:
+        <abbr class="disabled-info" title="Operation inactive">&#10008;</abbr>
+    % endif
 </h2>
-<p>...</p>
+<div class="operation detail">
+    <%
+        mod = g.config.modules.campaigns
+        primary, secondary = mod.get_overview(cname, opname)
+        summary, renderer = mod.get_summary(cname, opname, limit=-1)
+        klass = "big" if primary < 1000 else "medium" if primary < 1000000 else "small"
+        punit = mod.get_unit(operation, primary)
+        sunit = mod.get_unit(operation, secondary, primary=False)
+    %>
+    <div class="overview">
+        <div class="primary">
+            <span class="num ${klass}">${"{:,}".format(primary)}</span>
+            <div class="unit">${punit}</div>
+        </div>
+        % if secondary is not None:
+            <div class="secondary">
+                <abbr title="${"{:,.2f}".format(secondary)} ${sunit}">
+                    <span class="num">${format_isk(secondary) | h}</span>
+                    <span class="unit">${sunit}</span>
+                </abbr>
+            </div>
+        % endif
+    </div>
+    % if summary:
+        <div class="summary">
+            ${render_summary(renderer, summary, detail=True)}
+        </div>
+    % endif
+</div>

templates/campaigns/renderers.mako

@@ -3,7 +3,7 @@
         format_quantity, format_isk_compact, format_utctime_compact,
         format_security, get_security_class)
 %>
-<%def name="_killboard_kill(kill)">
+<%def name="_killboard_kill(kill, detail, any_alliances, any_factions)">
     <%
         victim = kill["victim"]
         system = g.eve.universe.system(kill["system"])
@@ -30,28 +30,49 @@
                 <img title="${victim['char_name'] | h}" alt="${victim['char_name'] | h}" src="${g.eve.image.character(victim["char_id"], 128)}"/>
             </a>
         </td>
+        % if detail:
+            <td class="detail-item">
+                <a href="https://zkillboard.com/character/${victim['char_id']}/">${victim['char_name'] | h}</a>
+                (${killed.name | h})
+            </td>
+        % endif
         <td class="icon${' extra' if victim["alliance_id"] and victim["faction_id"] else ''}">
             <a href="https://zkillboard.com/corporation/${victim['corp_id']}/">
                 <img title="${victim['corp_name'] | h}" alt="${victim['corp_name'] | h}" src="${g.eve.image.corp(victim["corp_id"], 128)}"/>
             </a>
         </td>
-        <td class="icon${'' if victim["alliance_id"] else ' extra'}">
-        % if victim["alliance_id"]:
-            <a href="https://zkillboard.com/alliance/${victim['alliance_id']}/">
-                <img title="${victim['alliance_name'] | h}" alt="${victim['alliance_name'] | h}" src="${g.eve.image.alliance(victim["alliance_id"], 128)}"/>
-            </a>
+        % if any_alliances:
+            <td class="icon${'' if victim["alliance_id"] else ' extra'}">
+            % if victim["alliance_id"]:
+                <a href="https://zkillboard.com/alliance/${victim['alliance_id']}/">
+                    <img title="${victim['alliance_name'] | h}" alt="${victim['alliance_name'] | h}" src="${g.eve.image.alliance(victim["alliance_id"], 128)}"/>
+                </a>
+            % endif
+            </td>
         % endif
-        </td>
-        <td class="icon${'' if victim["faction_id"] else ' extra'}">
-        % if victim["faction_id"]:
-            <a href="https://zkillboard.com/faction/${victim['faction_id']}/">
-                <img title="${victim['faction_name'] | h}" alt="${victim['faction_name'] | h}" src="${g.eve.image.faction(victim["faction_id"], 128)}"/>
-            </a>
+        % if any_factions:
+            <td class="icon${'' if victim["faction_id"] else ' extra'}">
+            % if victim["faction_id"]:
+                <a href="https://zkillboard.com/faction/${victim['faction_id']}/">
+                    <img title="${victim['faction_name'] | h}" alt="${victim['faction_name'] | h}" src="${g.eve.image.faction(victim["faction_id"], 128)}"/>
+                </a>
+            % endif
+            </td>
         % endif
-        </td>
-        % if not victim["alliance_id"] and not victim["faction_id"]:
+        % if not detail and (any_alliances or any_factions) and not victim["alliance_id"] and not victim["faction_id"]:
             <td class="icon spacer"></td>
         % endif
+        % if detail:
+            <td class="detail-item detail-list">
+                <a href="https://zkillboard.com/corporation/${victim['corp_id']}/">${victim['corp_name'] | h}</a>
+                % if victim['alliance_name']:
+                    <a href="https://zkillboard.com/alliance/${victim['alliance_id']}/">${victim['alliance_name'] | h}</a>
+                % endif
+                % if victim['faction_name']:
+                    <a href="https://zkillboard.com/faction/${victim['faction_id']}/">${victim['faction_name'] | h}</a>
+                % endif
+            </td>
+        % endif
     </tr>
 </%def>
 <%def name="_itemboard_item(item)">
@@ -72,18 +93,30 @@
         </td>
     </tr>
 </%def>
-<%def name="_killboard_recent(summary)">
-    <div class="head">Most recent kills:</div>
+<%def name="_killboard_recent(summary, detail)">
+    % if detail:
+        <h3 class="head">Kills:</h3>
+    % else:
+        <div class="head">Most recent kills:</div>
+    % endif
+    <%
+        any_alliances = any(kill["victim"]["alliance_id"] for kill in summary)
+        any_factions = any(kill["victim"]["faction_id"] for kill in summary)
+    %>
     <div class="contents">
         <table class="board killboard">
             % for kill in summary:
-                ${_killboard_kill(kill)}
+                ${_killboard_kill(kill, detail, any_alliances, any_factions)}
             % endfor
         </table>
     </div>
 </%def>
-<%def name="_collection_items(summary)">
-    <div class="head">Top items:</div>
+<%def name="_collection_items(summary, detail)">
+    % if detail:
+        <h3 class="head">Items:</h3>
+    % else:
+        <div class="head">Top items:</div>
+    % endif
     <div class="contents">
         <table class="board itemboard">
             % for item in summary:
@@ -93,10 +126,10 @@
     </div>
 </%def>
 
-<%def name="render_summary(renderer, summary)"><%
+<%def name="render_summary(renderer, summary, detail=False)"><%
     if renderer == "killboard_recent":
-        return _killboard_recent(summary)
+        return _killboard_recent(summary, detail)
     if renderer == "collection_items":
-        return _collection_items(summary)
+        return _collection_items(summary, detail)
     raise RuntimeError("Unknown renderer: %s" % renderer)
 %></%def>