Add styling to members module.

calefaction/modules/members.py

@@ -11,6 +11,8 @@ SCOPES = {"esi-corporations.read_corporation_membership.v1"}
 
 _Member = namedtuple("_Member", ["id", "name"])
 
+# ... show roles if possible
+
 def get_members():
     """Return a list of the members of the user's corporation.
 

static/main.css

@@ -1,3 +1,6 @@
+/* ~~~~~~~~~~~~~~~~~~~~~~~~~~ Calefaction Main CSS ~~~~~~~~~~~~~~~~~~~~~~~~~ */
+/* =============================== Universal =============================== */
+
 @import url(//fonts.googleapis.com/css?family=Open+Sans:400,400italic,700);
 
 body {
@@ -317,3 +320,28 @@ footer ul li:not(:last-child):after {
 #logout-form {
     margin-bottom: 1em;
 }
+
+/* ================================ Modules ================================ */
+/* -------------------------------- Members -------------------------------- */
+
+#members-list {
+    list-style: none;
+    margin: 1em 0 0.5em 0;
+    padding: 0;
+    column-count: 2;
+}
+
+#member-list > li {
+    margin-bottom: 0.5em;
+}
+
+#member-list > li > img {
+    width: 48px;
+    height: 48px;
+    vertical-align: middle;
+}
+
+#member-list > li > span {
+    margin-left: 0.5em;
+    vertical-align: middle;
+}

templates/members/members.mako

@@ -1,11 +1,13 @@
 <%inherit file="../_default.mako"/>
 <h2>Members</h2>
 <!-- ... handle case where members is empty - means something went wrong -->
-<ul>
+<ul id="members-list">
     % for member in members:
         <li>
-            <img title="${member.name}" alt="${member.name}'s Portrait" src="${g.eve.image.character(member.id, 256)}"/>
-            ${member.name}
+            <a href="${g.eve.image.character(member.id, 1024)}">
+                <img class="styled-border" title="${member.name}" alt="${member.name}'s Portrait" src="${g.eve.image.character(member.id, 256)}"/>
+            </a>
+            <span>${member.name}</span>
         </li>
     % endfor
 </ul>