From ce66786573ad989791321e479f6168734c3315ed Mon Sep 17 00:00:00 2001
From: Ben Kurtovic <ben.kurtovic@gmail.com>
Date: Wed, 21 Dec 2016 22:07:21 -0500
Subject: [PATCH] Make style picker indicate current selection.

---
 static/main.css         | 22 +++++++++++++++-------
 templates/_base.mako    |  5 +----
 templates/_default.mako | 17 ++++++++++++++---
 3 files changed, 30 insertions(+), 14 deletions(-)

diff --git a/static/main.css b/static/main.css
index 78154df..fa96cd0 100644
--- a/static/main.css
+++ b/static/main.css
@@ -187,6 +187,7 @@ footer ul li:not(:last-child):after {
 
 #character-portrait {
     height: 32px;
+    width: 32px;
     margin-right: 0.25em;
     box-sizing: border-box;
     border-width: 1px;
@@ -200,7 +201,6 @@ footer ul li:not(:last-child):after {
     position: absolute;
     margin-top: 1em;
     margin-left: -5px;
-    padding: 0.5em;
     background-color: rgba(0, 0, 0, 0.8);
     border-width: 1px;
 }
@@ -229,27 +229,35 @@ footer ul li:not(:last-child):after {
 }
 
 #style-options {
+    margin: 4px;
     line-height: 0;
 }
 
-#style-options form {
+#style-options > * {
     display: inline-block;
+    padding: 4px;
 }
 
-#style-options form:not(:first-child) {
-    margin-left: 0.25em;
-}
-
-#style-options input[type="submit"] {
+#style-options > * > * {
     display: inline-block;
     height: 24px;
     width: 24px;
+    margin: 0;
+    padding: 0;
     background-color: transparent;
     background-size: contain;
     background-position: center;
     background-repeat: no-repeat;
     font-size: 0;
     border: 0;
+    vertical-align: middle;
+}
+
+#style-options .cur {
+    background-color: rgba(255, 255, 255, 0.3);
+}
+
+#style-options > :not(.cur) > * {
     cursor: pointer;
 }
 
diff --git a/templates/_base.mako b/templates/_base.mako
index 51ec8ed..31a95c7 100644
--- a/templates/_base.mako
+++ b/templates/_base.mako
@@ -8,10 +8,7 @@
         <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')}"/>
-        <%
-            charstyle = g.auth.get_character_prop("style")
-            style = charstyle if charstyle else g.config.get("style.default")
-        %>
+        <% style = g.auth.get_character_prop("style") or g.config.get("style.default") %>
         % if style:
             <% stylesheet = "styles/{}.css".format(style) %>
             <link id="user-style" rel="stylesheet" type="text/css" href="${url_for('staticv', filename=stylesheet)}"/>
diff --git a/templates/_default.mako b/templates/_default.mako
index f4fd142..9aa0573 100644
--- a/templates/_default.mako
+++ b/templates/_default.mako
@@ -9,10 +9,21 @@
     <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">
+            <% cur_style = g.auth.get_character_prop("style") or g.config.get("style.default") %>
             % 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>
+                <%
+                    stitle = style.title()
+                    url = url_for('staticv', filename='images/style/{}.png'.format(style))
+                %>
+                % if style == cur_style:
+                    <div class="cur">
+                        <div style="background-image: url('${url}')">${stitle}</div>
+                    </div>
+                % else:
+                    <form action="${url_for('set_style', style=style)}" method="post">
+                        <input type="submit" title="${stitle}" value="${stitle}" style="background-image: url('${url}')">
+                    </form>
+                % endif
             % endfor
         </div>
     </div>