Clean up styles and make them configurable.

app.py

@@ -3,7 +3,7 @@
 
 from pathlib import Path
 
-from flask import Flask, flash, g, redirect, request, url_for
+from flask import Flask, abort, flash, g, redirect, request, url_for
 from flask_mako import MakoTemplates, render_template
 
 import calefaction
@@ -76,12 +76,13 @@ def logout():
     flash(Messages.LOGGED_OUT, "success")
     return redirect(url_for("index"), 303)
 
-@app.route("/test")
+@app.route("/settings/style/<style>", methods=["POST"])
 @catch_exceptions
 @route_restricted
-def test():
-    ...
-    return "Success! You are authenticated!"
+def set_style(style):
+    if not auth.set_character_style(style):
+        abort(404)
+    return "", 204
 
 if __name__ == "__main__":
     app.run(debug=True, port=8080)

calefaction/auth.py

@@ -196,6 +196,23 @@ class AuthManager:
             g._character_props = g.db.read_character(cid)
         return g._character_props.get(prop)
 
+    def set_character_style(self, style):
+        """Update the current user's style and return whether successful."""
+        cid = self.get_character_id()
+        if not cid:
+            return False
+
+        style = style.strip().lower()
+        if style not in self._config.get("style.enabled"):
+            return False
+
+        self._debug("Setting style to %s for char id=%d", style, cid)
+        g.db.set_character_style(cid, style)
+
+        if hasattr(g, "_character_props"):
+            delattr(g, "_character_props")
+        return True
+
     def is_authenticated(self):
         """Return whether the user has permission to access this site.
 

calefaction/database.py

@@ -148,6 +148,12 @@ class Database:
         res = self._conn.execute(query, (cid,)).fetchall()
         return {"name": res[0][0], "style": res[0][1]} if res else {}
 
+    def set_character_style(self, cid, style):
+        """Update a character's style setting."""
+        with self._conn as conn:
+            conn.execute("""UPDATE character SET character_style = ?
+                WHERE character_id = ?""", (style, cid))
+
     def set_auth(self, cid, token, expires, refresh):
         """Set the authentication info for the given character."""
         with self._conn as conn:

config/config.yml.sample

@@ -33,9 +33,14 @@ auth:
   # SSO client secret:
   client_secret: XXAPGc0LM6wdOJAwSNQmliZ2QhQpoBuUutQY6Rlc
 
-# Default stylesheet from static/styles/*.css;
-# one of "amarr", "caldari", "gallente", "minmatar", or create your own:
-style: null
+style:
+  # Default stylesheet from static/styles/*.css:
+  default: null
+  enabled:
+    - amarr
+    - caldari
+    - gallente
+    - minmatar
 
 welcome: |-
   (If you are seeing this message on the public internet, someone forgot to

static/main.css

@@ -37,19 +37,21 @@ h1 {
     width: 100%;
 }
 
+.styled-border {
+    border-color: #4A4A4A;
+    border-style: solid;
+}
+
 main, header, footer {
     background-color: rgba(0, 0, 0, 0.8);
-    border-color: #4A4A4A;
 }
 
 main {
     border-width: 1px;
-    border-style: solid;
 }
 
 header {
-    border-bottom-width: 1px;
-    border-bottom-style: solid;
+    border-width: 0 0 1px 0;
 }
 
 footer {
@@ -57,8 +59,7 @@ footer {
     font-size: 85%;
     text-align: center;
     color: #BABABA;
-    border-top-width: 1px;
-    border-top-style: solid;
+    border-width: 1px 0 0;
 }
 
 header > div, footer > div {
@@ -164,18 +165,6 @@ footer ul li:not(:last-child):after {
     text-decoration: none;
 }
 
-#character-portrait {
-    height: 32px;
-    margin-right: 0.25em;
-    box-sizing: border-box;
-    border-width: 1px;
-    border-style: solid;
-}
-
-#character-summary {
-    font-size: 90%;
-}
-
 #flashes {
     margin-top: 0.5em;
 }
@@ -196,6 +185,74 @@ footer ul li:not(:last-child):after {
     background-color: rgba(255, 60, 30, 0.2);
 }
 
+#character-portrait {
+    height: 32px;
+    margin-right: 0.25em;
+    box-sizing: border-box;
+    border-width: 1px;
+}
+
+#character-summary {
+    font-size: 90%;
+}
+
+#character-options {
+    position: absolute;
+    margin-top: 1em;
+    margin-left: -10px;
+    padding: 0.5em;
+    background-color: rgba(0, 0, 0, 0.8);
+    border-width: 1px;
+}
+
+#character-options:after, #character-options:before {
+    bottom: 100%;
+    left: 20px;
+    border: solid transparent;
+    content: " ";
+    height: 0;
+    width: 0;
+    position: absolute;
+    pointer-events: none;
+}
+
+#character-options:after {
+    border-bottom-color: black;
+    border-width: 10px;
+    margin-left: -10px;
+}
+
+#character-options:before {
+    border-bottom-color: #4A4A4A;
+    border-width: 12px;
+    margin-left: -12px;
+}
+
+#style-options {
+    line-height: 0;
+}
+
+#style-options form {
+    display: inline-block;
+}
+
+#style-options form:not(:first-child) {
+    margin-left: 0.25em;
+}
+
+#style-options input[type=submit] {
+    display: inline-block;
+    height: 24px;
+    width: 24px;
+    background-color: transparent;
+    background-size: contain;
+    background-position: center;
+    background-repeat: no-repeat;
+    font-size: 0;
+    border: 0;
+    cursor: pointer;
+}
+
 #error pre {
     white-space: pre-wrap;
 }

static/main.js

@@ -1,3 +1,7 @@
+var overlaps = function(needle, haystack) {
+    return haystack.is(needle) || haystack.has(needle).length > 0;
+};
+
 $(function() {
     // Install logout auto-POST form:
     $("#logout").click(function() {
@@ -7,4 +11,23 @@ $(function() {
         }).appendTo($("body")).submit();
         return false;
     });
+
+    // Toggle character options on click:
+    var charopts = $("#character-options");
+    charopts.hide();
+    $("#character-portrait").click(function() {
+        if (charopts.is(":visible")) {
+            charopts.hide();
+            $(document).off("mouseup.charopts");
+        } else {
+            charopts.show();
+            $(document).on("mouseup.charopts", function(e) {
+                if (!overlaps(e.target, charopts) &&
+                        !overlaps(e.target, $("#character-portrait"))) {
+                    charopts.hide();
+                    $(document).off("mouseup.charopts");
+                }
+            });
+        }
+    }).css("cursor", "pointer");
 });

static/styles/amarr.css

@@ -1,11 +1,15 @@
 body {
-    background-image: url("/static/images/amarr.jpg?v=1");
+    background-image: url("/static/images/bg/amarr.jpg?v=1");
 }
 
-main, header, footer, #character-portrait {
+.styled-border {
     border-color: #5F4A26;
 }
 
+#character-options:before {
+    border-bottom-color: #5F4A26;
+}
+
 a {
     color: #FFDE78;
 }

static/styles/caldari.css

@@ -1,11 +1,15 @@
 body {
-    background-image: url("/static/images/caldari.jpg?v=1");
+    background-image: url("/static/images/bg/caldari.jpg?v=1");
 }
 
-main, header, footer, #character-portrait {
+.styled-border {
     border-color: #364A5F;
 }
 
+#character-options:before {
+    border-bottom-color: #364A5F;
+}
+
 a {
     color: #99CCEE;
 }

static/styles/gallente.css

@@ -1,11 +1,15 @@
 body {
-    background-image: url("/static/images/gallente.jpg?v=1");
+    background-image: url("/static/images/bg/gallente.jpg?v=1");
 }
 
-main, header, footer, #character-portrait {
+.styled-border {
     border-color: #365F4A;
 }
 
+#character-options:before {
+    border-bottom-color: #365F4A;
+}
+
 a {
     color: #66BB99;
 }

static/styles/minmatar.css

@@ -1,11 +1,15 @@
 body {
-    background-image: url("/static/images/minmatar.jpg?v=1");
+    background-image: url("/static/images/bg/minmatar.jpg?v=1");
 }
 
-main, header, footer, #character-portrait {
+.styled-border {
     border-color: #5F3C42;
 }
 
+#character-options:before {
+    border-bottom-color: #5F3C42;
+}
+
 a {
     color: #D89988;
 }

templates/_base.mako

@@ -8,12 +8,12 @@
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <link rel="canonical" href="${g.config.scheme}://${g.config.get('site.canonical')}${request.script_root}${request.path}">
         <link rel="stylesheet" type="text/css" href="${url_for('staticv', filename='main.css')}"/>
-        % if g.config.get("style"):
-            <%
-                charstyle = g.auth.get_character_prop("style")
-                style = charstyle if charstyle else g.config.get("style")
-                stylesheet = "styles/{}.css".format(style)
-            %>
+        <%
+            charstyle = g.auth.get_character_prop("style")
+            style = charstyle if charstyle else g.config.get("style.default")
+        %>
+        % if style:
+            <% stylesheet = "styles/{}.css".format(style) %>
             <link rel="stylesheet" type="text/css" href="${url_for('staticv', filename=stylesheet)}"/>
         % endif
         % for size in g.eve.image.corp_widths:
@@ -24,7 +24,7 @@
     </head>
     <body>
         <%block name="header">
-            <header>
+            <header class="styled-border">
                 <div>
                     <div class="left">
                         <%block name="lefthead">
@@ -45,7 +45,7 @@
         <%block name="container">
             <div id="container">
                 <div>
-                    <main>
+                    <main class="styled-border">
                         <%block name="flashes">
                             <% messages = get_flashed_messages(with_categories=True) %>
                             % if messages:
@@ -62,7 +62,7 @@
             </div>
         </%block>
         <%block name="footer">
-            <footer>
+            <footer class="styled-border">
                 <div>
                     <ul>
                         <li>YC&nbsp;${g.eve.clock.now()}</li>

templates/_default.mako

@@ -6,7 +6,16 @@
     </nav>
 </%block>
 <%block name="righthead">
-    <img id="character-portrait" class="aligned" title="${g.auth.get_character_prop('name')}" alt="" src="${g.eve.image.character(g.auth.get_character_id(), 256)}"/>
+    <img id="character-portrait" class="styled-border aligned" alt="" src="${g.eve.image.character(g.auth.get_character_id(), 256)}"/>
+    <div id="character-options" class="styled-border">
+        <div id="style-options">
+            % for style in g.config.get("style.enabled"):
+                <form action="${url_for('set_style', style=style)}" method="post">
+                    <input type="submit" title="${style.title()}" value="${style}" style="background-image: url('${url_for('staticv', filename='images/style/{}.png'.format(style))}')">
+                </form>
+            % endfor
+        </div>
+    </div>
     <span id="character-summary" class="aligned">
         ${g.auth.get_character_prop("name")}
         <span class="sep">[</span><a id="logout" title="Log out" href="${url_for('logout')}">log out</a><span class="sep">]</span>