Browse Source

Add rendering code for campaign item boards.

master
Ben Kurtovic 4 years ago
parent
commit
52a0d9a291
3 changed files with 50 additions and 21 deletions
  1. +31
    -17
      static/main.css
  2. +1
    -1
      static/main.js
  3. +18
    -3
      templates/campaigns/renderers.mako

+ 31
- 17
static/main.css View File

@@ -167,7 +167,7 @@ header .spacer {
}

header .sep {
color: #777777;
color: #777;
}

footer ul {
@@ -446,77 +446,91 @@ h2 .disabled-info {
font-style: italic;
}

.operation .summary {
font-size: 14px;
}

.operation .summary .head {
margin-top: 1em;
font-size: 14px;
}

.operation .summary .contents {
position: relative;
margin-top: 0.5em;
border: 1px solid #282828;
font-size: 14px;
}

.operation .killboard {
.operation .board {
border-spacing: 0;
border-collapse: collapse;
text-align: left;
}

.operation .killboard:not(.expanded) tr:nth-child(2n) {
.operation .board:not(.expanded) tr:nth-child(2n) {
background-color: #181818;
}

.operation .killboard:not(.expanded) tr:nth-child(2n+1) {
.operation .board:not(.expanded) tr:nth-child(2n+1) {
background-color: #0A0A0A;
}

.operation .killboard td {
.operation .board td {
padding: 0.25em 0;
}

.operation .killboard td:first-child {
.operation .board td:first-child {
padding-left: 1em;
}

.operation .killboard td:last-child {
.operation .board td:last-child {
padding-right: 1em;
}

.operation .killboard .fluid {
.operation .board .fluid {
padding-right: 0.5em;
}

.operation .killboard .icon {
.operation .board .icon {
width: 46px;
}

.operation .killboard.expanded {
.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 .killboard:not(.expanded) .extra {
.operation .board:not(.expanded) .extra {
display: none;
}

.operation .killboard.expanded .spacer {
.operation .board.expanded .spacer {
display: none;
}

.operation .killboard img {
.operation .board img {
width: 42px;
height: 42px;
vertical-align: middle;
}

.operation .killboard abbr {
.operation .board abbr {
border-bottom: none;
}

.operation .itemboard .num {
padding-left: 0.5em;
text-align: right;
font-weight: bold;
}

.operation .itemboard .num::before {
content: "×";
font-weight: normal;
color: #AAA;
}

@media (min-width: 800px) {
#operations {
margin: 1em 0;
@@ -566,7 +580,7 @@ h2 .disabled-info {
margin-left: 0.15em;
}

.operation .killboard:not(.expanded) {
.operation .board:not(.expanded) {
width: 100%;
}
}


+ 1
- 1
static/main.js View File

@@ -67,7 +67,7 @@ $(function() {

//Campaigns: selectively reveal operation summary details:
$(".operation .killboard tr").mouseenter(function() {
var div = $("<table>", {addClass: "killboard expanded"})
var div = $("<table>", {addClass: "board expanded"})
.css($(this).position())
.css("background-color", $(this).css("background-color"))
.css("position", "fixed")


+ 18
- 3
templates/campaigns/renderers.mako View File

@@ -54,10 +54,21 @@
% endif
</tr>
</%def>
<%def name="_itemboard_item(item)">
<%
type_id, count = item
type = g.eve.universe.type(type_id)
%>
<tr>
<td class="icon"><img title="${type.name | h}" alt="" src="${g.eve.image.inventory(type_id, 64)}"/></td>
<td><a href="https://eve-central.com/home/quicklook.html?typeid=${type_id | u}">${type.name | h}</a></td>
<td class="num">${count | h}</td>
</tr>
</%def>
<%def name="_killboard_recent(summary)">
<div class="head">Most recent kills:</div>
<div class="contents">
<table class="killboard">
<table class="board killboard">
% for kill in summary:
${_killboard_kill(kill)}
% endfor
@@ -65,9 +76,13 @@
</div>
</%def>
<%def name="_collection_items(summary)">
<div class="head">XXX:</div>
<div class="head">Top items:</div>
<div class="contents">
${summary | h}
<table class="board itemboard">
% for item in summary:
${_itemboard_item(item)}
% endfor
</table>
</div>
</%def>



Loading…
Cancel
Save