Skip to content

Commit

Permalink
wam: Some additional content and styling tweaks
Browse files Browse the repository at this point in the history 
 * Relabeled the "Notes" column to "Translations" since that's what it
   really is.
 * Replaced the Download label with an icon and moved it to the add-on
   names column.
 * Restyled add-on version/author a bit.
 * Add-on type is now more or less aligned to the middle of the icon
   (regardless of what the cell height actually is -- there can be extra
   empty space below the type line if the add-on title is too long, for
   instance).
  • Loading branch information
@irydacea
irydacea committed Jul 24, 2017
1 parent 73a2e65 commit acf5e3e
Show file tree
Hide file tree
Showing 2 changed files with 61 additions and 38 deletions.
67 changes: 36 additions & 31 deletions data/tools/addon_manager/html.py
View file
Expand Up @@ -87,7 +87,7 @@ def w(x):
w("<table class=\"tablesorter\" id=\"campaigns\">")
w("<thead>")
w("<tr>")
for header in ["Type", "Icon", "Addon", "Size", "Traffic", "Date", "Notes"]:
for header in ["Type", "Icon", "Addon", "Size", "Traffic", "Date", "Translations"]:
w("<th>%s&nbsp;&nbsp;&nbsp;</th>" % header)
w("</tr>")
w("</thead>")
Expand Down Expand Up @@ -127,62 +127,67 @@ def w(x):
type = htmlescape(v("type", "none"))
size = float(v("size", "0"))
name = htmlescape(v("title", "unknown"))
w('<td class="addon-type">')
if type == "scenario":
w("""\
<td>Scenario<div class="type"><b>single player scenario</b><br/>
After install the scenario will show up in the list you get when choosing "Campaign" in the main menu. (Basically it's just a campaign with only one scenario.)</div></td>""")
Scenario<div class="type-tooltip"><b>single player scenario</b><br/>
After install the scenario will show up in the list you get when choosing "Campaign" in the main menu. (Basically it's just a campaign with only one scenario.)</div>""")
elif type == "campaign":
w("""\
<td>Campaign<div class="type"><b>single player campaign</b><br/>
After install the campaign will show up in the list you get when choosing "Campaign" in the main menu.</div></td>""")
Campaign<div class="type-tooltip"><b>single player campaign</b><br/>
After install the campaign will show up in the list you get when choosing "Campaign" in the main menu.</div>""")
elif type == "campaign_sp_mp":
w("""\
<td>SP/SP Campaign<div class="type"><b>single/multi player campaign</b><br />
After install the campaign will show up both in the list you get when choosing "Campaign" in the main menu, and in the map list in the multiplayer "Create Game" dialog.</div></td>""")
SP/SP Campaign<div class="type-tooltip"><b>single/multi player campaign</b><br />
After install the campaign will show up both in the list you get when choosing "Campaign" in the main menu, and in the map list in the multiplayer "Create Game" dialog.</div>""")
elif type == "campaign_mp":
w("""\
<td>MP Campaign<div class="type"><b>multiplayer campaign</b><br/>
After install the first scenario of the campaign will be available in the map list in the multiplayer "Create Game" dialog.</div></td>""")
MP Campaign<div class="type-tooltip"><b>multiplayer campaign</b><br/>
After install the first scenario of the campaign will be available in the map list in the multiplayer "Create Game" dialog.</div>""")
elif type == "scenario_mp":
w("""\
<td>MP Scenario<div class="type"><b>multiplayer scenario</b><br/>
After install the scenario will be available in the map list in the multiplayer "Create Game" dialog.</div></td>""")
MP Scenario<div class="type-tooltip"><b>multiplayer scenario</b><br/>
After install the scenario will be available in the map list in the multiplayer "Create Game" dialog.</div>""")
elif type == "map_pack":
w("""\
<td>MP map-pack<div class="type"><b>multiplayer map pack</b><br/>
After install the maps/scenarios will be available in the map list in the multiplayer "Create Game" dialog.</div></td>""")
MP map-pack<div class="type-tooltip"><b>multiplayer map pack</b><br/>
After install the maps/scenarios will be available in the map list in the multiplayer "Create Game" dialog.</div>""")
elif type == "era":
w("""\
<td>MP era<div class="type"><b>multiplayer era</b><br/>
After install the included era(s) will be available in the multiplayer "Create Game" dialog.</div></td>""")
MP era<div class="type-tooltip"><b>multiplayer era</b><br/>
After install the included era(s) will be available in the multiplayer "Create Game" dialog.</div>""")
elif type == "faction":
w("""\
<td>MP faction<div class="type"><b>multiplayer faction</b><br/>
Usually comes with an era or is dependency of another add-on.</div></td>""")
MP faction<div class="type-tooltip"><b>multiplayer faction</b><br/>
Usually comes with an era or is dependency of another add-on.</div>""")
elif type == "mod_mp":
w("""\
<td>MP modification<div class="type"><b>multiplayer modification</b><br />
After install the included MP gameplay modification(s) will be available in the multiplayer "Create Game" dialog.</div></td>""")
MP modification<div class="type-tooltip"><b>multiplayer modification</b><br />
After install the included MP gameplay modification(s) will be available in the multiplayer "Create Game" dialog.</div>""")
elif type == "media":
w("""\
<td>Resources<div class="type"><b>miscellaneous content/media</b><br/>
Unit packs, terrain packs, music packs, etc. Usually a (perhaps optional) dependency of another add-on.</div></td>""")
else: w(('<td>%s</td>') % type)
Resources<div class="type-tooltip"><b>miscellaneous content/media</b><br/>
Unit packs, terrain packs, music packs, etc. Usually a (perhaps optional) dependency of another add-on.</div>""")
else:
w(type)
w('</td>')
w(('<td><img alt="%s" src="%s" width="72" height="72"/>'
) % (icon, imgurl))
described = htmlescape(v("description", "(no description)"))
w('<div class="desc"><b>%s</b><pre>%s</pre></div></td>' % (
w('<div class="desc-tooltip"><b>%s</b><pre>%s</pre></div></td>' % (
name, described))
w("<td><b>%s</b><br/>" % name)
w("Version: %s<br/>" % htmlescape(v("version", "unknown")))
w("Author: %s</td>" % htmlescape(v("author", "unknown")))
MiB = 1024 * 1024
w("<td><span hidden>%d</span><b>%.2f</b>&nbsp;MiB" % (size, size / MiB))
w("<td><b>%s</b>" % name)
if url:
link = url.rstrip("/") + "/" + htmlescape(v("name")) + ".tar.bz2"
w("<br/><a href=\"%s\">Download</a></td>" % link)
else:
w("</td>")
w("""\
<a class='addon-download' href=\"%s\">
<i class='fa fa-fw fa-2x fa-download' aria-hidden='true'></i>
<span class='sr-only'>Download</span>
</a>""" % link)
w("<br /><span class='addon-meta'><span class='addon-meta-label'>Version:</span> %s<br/>" % htmlescape(v("version", "unknown")))
w("<span class='addon-meta-label'>Author:</span> %s</span></td>" % htmlescape(v("author", "unknown")))
MiB = 1024 * 1024
w("<td><span hidden>%d</span><b>%.2f</b>&nbsp;MiB</td>" % (size, size / MiB))
downloads = int(v("downloads", "0"))
w("<td><b>%d</b> down<br/>" % (downloads))
w("%s up</td>" % htmlescape(v("uploads", "unknown")))
Expand Down
32 changes: 25 additions & 7 deletions data/tools/addon_manager/style.css
View file
Expand Up @@ -18,21 +18,21 @@ table#campaigns td img {
float: left;
}

div.type,
div.desc {
div.type-tooltip,
div.desc-tooltip {
display: none;
}

tbody td {
position: relative;
}

td:hover div.type,
td:hover div.desc {
td:hover div.type-tooltip,
td:hover div.desc-tooltip {
display: block;
position: absolute;
left: 0;
top: 2em;
top: 100%;
width: 16em;
padding: 0.3em 0.6em;
z-index: 1;
Expand All @@ -43,11 +43,11 @@ td:hover div.desc {
border-radius: 4px;
}

td:hover div.desc {
td:hover div.desc-tooltip {
width: 28em;
}

div.desc pre {
div.desc-tooltip pre {
border: none;
background: transparent;
white-space: pre-wrap;
Expand Down Expand Up @@ -95,3 +95,21 @@ table.tablesorter thead tr .headerSortDown {
background-image: url(desc.gif);
background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2222%22%20height%3D%2216%22%3E%3Cpath%20d%3D%22m%2015.502%2C11.002%20-5%2C-5.001%20-5%2C5.001%20z%22%20fill%3D%22%23333333%22%2F%3E%3C%2Fsvg%3E');
}

.addon-type {
padding-top: 24px; /* a little bit more than 25% image height (72px) */
}

.addon-meta {
font-size: 0.9em;
}

.addon-meta-label {
color: #724f2e; /* $wui-border-dark */
}

.addon-download {
display: inline-block;
float: right;
margin: 0 0 0.9em 0.9em;
}

0 comments on commit acf5e3e

Please sign in to comment.