Browse Source

Make style picker indicate current selection.

master
Ben Kurtovic 4 years ago
parent
commit
ce66786573
3 changed files with 30 additions and 14 deletions
  1. +15
    -7
      static/main.css
  2. +1
    -4
      templates/_base.mako
  3. +14
    -3
      templates/_default.mako

+ 15
- 7
static/main.css View File

@@ -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;
}



+ 1
- 4
templates/_base.mako View File

@@ -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)}"/>


+ 14
- 3
templates/_default.mako View File

@@ -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>


Loading…
Cancel
Save