ben
/
calefaction
kopie van https://github.com/earwig/calefaction
1
1
Vork 0
Code Publicaties 0 Activiteit
Bladeren bron

Refactor templates and split off static CSS/JS for modules.

master
Ben Kurtovic 8 jaren geleden
bovenliggende
bb51e2ab1e
commit
fa61ba3e33
14 gewijzigde bestanden met toevoegingen van 306 en 301 verwijderingen
Zij-aan-zij weergave
Diff opties
Statistieken weergeven Download Patch-bestand Download Diff-bestand
  1. +209
    -0
      static/campaigns.css
  2. +26
    -0
      static/campaigns.js
  3. +0
    -253
      static/main.css
  4. +0
    -29
      static/main.js
  5. +34
    -0
      static/members.css
  6. +1
    -1
      templates/404.mako
  7. +7
    -12
      templates/_base.mako
  8. +14
    -0
      templates/_base_support.mako
  9. +7
    -1
      templates/campaigns/campaign.mako
  10. +1
    -1
      templates/campaigns/empty.mako
  11. +1
    -1
      templates/campaigns/operation.mako
  12. +1
    -1
      templates/error.mako
  13. +1
    -1
      templates/logout.mako
  14. +4
    -1
      templates/members/members.mako

+ 209
- 0
static/campaigns.css Bestand weergeven

@@ -0,0 +1,209 @@
#campaigns-select {
display: inline-block;
padding-right: 1em;
background: transparent 100% 50%/contain no-repeat;
border-width: 1px;
}

#campaigns-select select {
max-width: 120px;
padding: 0 0.25em;
font-size: 100%;
color: inherit;
background: transparent;
border: none;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}

h2 .disabled {
color: #989898;
text-decoration: line-through;
}

h2 .disabled-info {
margin-left: 0.5em;
color: #989898;
font-size: 85%;
font-variant: none;
}

#operations {
margin-bottom: 1em;
}

#operations section {
display: flex;
}

.operation {
flex: 1;
}

.operation .primary .num {
height: 60px;
line-height: 60px;
}

.operation .big {
font-size: 300%;
}

.operation .medium {
font-size: 200%;
}

.operation .small {
font-size: 150%;
}

.operation .secondary {
font-size: 105%;
}

.operation .unit {
font-style: italic;
}

.operation .summary {
font-size: 14px;
}

.operation .summary .head {
margin-top: 1em;
}

.operation .summary .contents {
position: relative;
margin-top: 0.5em;
border: 1px solid #282828;
}

.operation .board {
border-spacing: 0;
border-collapse: collapse;
text-align: left;
}

.operation .board:not(.expanded) tr:nth-child(2n) {
background-color: #181818;
}

.operation .board:not(.expanded) tr:nth-child(2n+1) {
background-color: #0A0A0A;
}

.operation .board td {
padding: 0.25em 0;
}

.operation .board td:first-child {
padding-left: 1em;
}

.operation .board td:last-child {
padding-right: 1em;
}

.operation .board .fluid {
padding-right: 0.5em;
}

.operation .board .icon {
width: 46px;
}

.operation .board.expanded {
position: absolute;
z-index: 1;
transition: clip-path 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
clip-path: inset(0 100% 0 0);
}

.operation .board:not(.expanded) .extra {
display: none;
}

.operation .board.expanded .spacer {
display: none;
}

.operation .board img {
width: 42px;
height: 42px;
vertical-align: middle;
}

.operation .board abbr {
border-bottom: none;
}

.operation .itemboard td:last-child {
padding-left: 0.5em;
text-align: right;
}

.operation .itemboard .count {
font-weight: bold;
}

.operation .itemboard .count::before {
content: "×";
font-weight: normal;
color: #AAA;
}

@media (min-width: 800px) {
#operations {
margin: 1em 0;
}

#operations section {
margin-bottom: 2em;
}

.operation {
margin: 0 0.75em;
text-align: center;
}

.operation .secondary {
margin-top: 0.5em;
}

.operation .secondary .unit {
margin-left: 0.15em;
}

.operation .summary .contents {
display: inline-block;
margin-bottom: -4px;
}
}

@media (max-width: 799px) {
#operations section {
flex-direction: column;
}

.operation {
margin: 0.5em 0;
}

.operation .overview {
margin-left: 1em;
}

.operation .primary, .operation .primary .unit {
display: inline-block;
}

.operation .unit {
margin-left: 0.15em;
}

.operation .board:not(.expanded) {
width: 100%;
}
}

+ 26
- 0
static/campaigns.js Bestand weergeven

@@ -0,0 +1,26 @@
$(function() {
// Enable form auto-submit on campaign change:
$("#campaigns-select select").change(function() {
this.form.submit();
});
$('#campaigns-select input[type="submit"]').hide();

//Selectively reveal operation summary details:
$(".operation .killboard tr").mouseenter(function() {
var div = $("<table>", {addClass: "board expanded"})
.css($(this).position())
.css("background-color", $(this).css("background-color"))
.css("position", "fixed")
.append($("<tr>").html($(this).html()))
.mouseleave(function() { $(this).remove(); });
div.find(".spacer").remove();
$(this).closest(".summary").find(".expanded").remove();
$(this).closest(".contents").prepend(div);
div.css("width", Math.max(div.width(), $(this).width()));
div.css("position", "");
div.css("clip-path", "inset(0 0% 0 0)");
});
$(".operation .summary").mouseleave(function() {
$(this).find(".expanded").remove();
});
});

+ 0
- 253
static/main.css Bestand weergeven

@@ -1,6 +1,3 @@
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~ Calefaction Main CSS ~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* =============================== Universal =============================== */

@import url(//fonts.googleapis.com/css?family=Open+Sans:400,400italic,700);

body {
@@ -374,253 +371,3 @@ footer ul li:not(:last-child)::after {
.sec-1_0 {
color: #33F9F9;
}

/* ================================ Modules ================================ */
/* ------------------------------- Campaigns ------------------------------- */

#campaigns-select {
display: inline-block;
padding-right: 1em;
background: transparent 100% 50%/contain no-repeat;
border-width: 1px;
}

#campaigns-select select {
max-width: 120px;
padding: 0 0.25em;
font-size: 100%;
color: inherit;
background: transparent;
border: none;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}

h2 .disabled {
color: #989898;
text-decoration: line-through;
}

h2 .disabled-info {
margin-left: 0.5em;
color: #989898;
font-size: 85%;
font-variant: none;
}

#operations {
margin-bottom: 1em;
}

#operations section {
display: flex;
}

.operation {
flex: 1;
}

.operation .primary .num {
height: 60px;
line-height: 60px;
}

.operation .big {
font-size: 300%;
}

.operation .medium {
font-size: 200%;
}

.operation .small {
font-size: 150%;
}

.operation .secondary {
font-size: 105%;
}

.operation .unit {
font-style: italic;
}

.operation .summary {
font-size: 14px;
}

.operation .summary .head {
margin-top: 1em;
}

.operation .summary .contents {
position: relative;
margin-top: 0.5em;
border: 1px solid #282828;
}

.operation .board {
border-spacing: 0;
border-collapse: collapse;
text-align: left;
}

.operation .board:not(.expanded) tr:nth-child(2n) {
background-color: #181818;
}

.operation .board:not(.expanded) tr:nth-child(2n+1) {
background-color: #0A0A0A;
}

.operation .board td {
padding: 0.25em 0;
}

.operation .board td:first-child {
padding-left: 1em;
}

.operation .board td:last-child {
padding-right: 1em;
}

.operation .board .fluid {
padding-right: 0.5em;
}

.operation .board .icon {
width: 46px;
}

.operation .board.expanded {
position: absolute;
z-index: 1;
transition: clip-path 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
clip-path: inset(0 100% 0 0);
}

.operation .board:not(.expanded) .extra {
display: none;
}

.operation .board.expanded .spacer {
display: none;
}

.operation .board img {
width: 42px;
height: 42px;
vertical-align: middle;
}

.operation .board abbr {
border-bottom: none;
}

.operation .itemboard td:last-child {
padding-left: 0.5em;
text-align: right;
}

.operation .itemboard .count {
font-weight: bold;
}

.operation .itemboard .count::before {
content: "×";
font-weight: normal;
color: #AAA;
}

@media (min-width: 800px) {
#operations {
margin: 1em 0;
}

#operations section {
margin-bottom: 2em;
}

.operation {
margin: 0 0.75em;
text-align: center;
}

.operation .secondary {
margin-top: 0.5em;
}

.operation .secondary .unit {
margin-left: 0.15em;
}

.operation .summary .contents {
display: inline-block;
margin-bottom: -4px;
}
}

@media (max-width: 799px) {
#operations section {
flex-direction: column;
}

.operation {
margin: 0.5em 0;
}

.operation .overview {
margin-left: 1em;
}

.operation .primary, .operation .primary .unit {
display: inline-block;
}

.operation .unit {
margin-left: 0.15em;
}

.operation .board:not(.expanded) {
width: 100%;
}
}

/* -------------------------------- Members -------------------------------- */

#members-list {
list-style: none;
margin: 1em 0 0.5em 0;
padding: 0;
column-count: 2;
}

#members-list li {
margin-bottom: 0.5em;
}

#members-list a:hover {
text-decoration: none;
}

#members-list img {
width: 48px;
height: 48px;
vertical-align: middle;
border-width: 1px;
}

#members-list span {
margin-left: 0.5em;
vertical-align: middle;
}

#members-list em {
font-size: 90%;
}

#members-list em::before {
content: ", ";
}

+ 0
- 29
static/main.js Bestand weergeven

@@ -3,8 +3,6 @@ var overlaps = function(needle, haystack) {
};

$(function() {
/* ============================= Universal ============================= */

// Install logout auto-POST form:
$("#logout").click(function() {
$("<form>", {
@@ -56,31 +54,4 @@ $(function() {
.prop("disabled", false);
$(this).addClass("cur").find(":submit").prop("disabled", true);
});

/* ============================== Modules ============================== */

// Campaigns: enable form auto-submit on campaign change:
$("#campaigns-select select").change(function() {
this.form.submit();
});
$('#campaigns-select input[type="submit"]').hide();

//Campaigns: selectively reveal operation summary details:
$(".operation .killboard tr").mouseenter(function() {
var div = $("<table>", {addClass: "board expanded"})
.css($(this).position())
.css("background-color", $(this).css("background-color"))
.css("position", "fixed")
.append($("<tr>").html($(this).html()))
.mouseleave(function() { $(this).remove(); });
div.find(".spacer").remove();
$(this).closest(".summary").find(".expanded").remove();
$(this).closest(".contents").prepend(div);
div.css("width", Math.max(div.width(), $(this).width()));
div.css("position", "");
div.css("clip-path", "inset(0 0% 0 0)");
});
$(".operation .summary").mouseleave(function() {
$(this).find(".expanded").remove();
});
});

+ 34
- 0
static/members.css Bestand weergeven

@@ -0,0 +1,34 @@
#members-list {
list-style: none;
margin: 1em 0 0.5em 0;
padding: 0;
column-count: 2;
}

#members-list li {
margin-bottom: 0.5em;
}

#members-list a:hover {
text-decoration: none;
}

#members-list img {
width: 48px;
height: 48px;
vertical-align: middle;
border-width: 1px;
}

#members-list span {
margin-left: 0.5em;
vertical-align: middle;
}

#members-list em {
font-size: 90%;
}

#members-list em::before {
content: ", ";
}

+ 1
- 1
templates/404.mako Bestand weergeven

@@ -1,6 +1,6 @@
<%inherit file="_base.mako"/>
<%block name="title">
${self.maketitle("404")}
${self.support.maketitle("404")}
</%block>
<h2>Error 404</h2>
<p>The page you asked for couldn't be found.</p>

+ 7
- 12
templates/_base.mako Bestand weergeven

@@ -1,32 +1,27 @@
<%namespace name="support" file="_base_support.mako" inheritable="True"/>\
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>
<%def name="maketitle(*parts)">
<%
if request.url_rule and request.url_rule.endpoint == "index":
parts = ()
%>
${" | ".join(parts + (g.config.get("corp.name"),)) | h}
</%def>
<%block name="title">
${maketitle()}
${support.maketitle()}
</%block>
</title>
<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')}"/>
${support.makecss("main.css")}
<% 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)}"/>
${support.makecss("styles/{}.css".format(style), "user-style")}
% endif
<%block name="extracss"></%block>
% for size in g.eve.image.corp_widths:
<link rel="icon" type="image/png" sizes="${size}x${size}" href="${g.eve.image.corp(g.config.get('corp.id'), size)}"/>
% endfor
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="${url_for('staticv', filename='main.js')}"></script>
${support.makejs("main.js")}
<%block name="extrajs"></%block>
</head>
<body>
<%block name="header">


+ 14
- 0
templates/_base_support.mako Bestand weergeven

@@ -0,0 +1,14 @@
<%! import markupsafe %>
<%def name="maketitle(*parts)" filter="trim">
<%
if request.url_rule and request.url_rule.endpoint == "index":
parts = ()
%>
${" | ".join(parts + (g.config.get("corp.name"),)) | h}
</%def>
<%def name="makecss(filename, id_=None)" filter="trim">
<link ${'id="{}" '.format(markupsafe.escape(id_)) if id_ else ""}rel="stylesheet" type="text/css" href="${url_for('staticv', filename=filename)}"/>
</%def>
<%def name="makejs(filename)" filter="trim">
<script src="${url_for('staticv', filename=filename)}"></script>
</%def>

+ 7
- 1
templates/campaigns/campaign.mako Bestand weergeven

@@ -4,7 +4,13 @@
<%inherit file="../_default.mako"/>
<%namespace file="renderers.mako" import="render_summary"/>
<%block name="title">
${self.maketitle(campaign["title"], "Campaigns")}
${self.support.maketitle(campaign["title"], "Campaigns")}
</%block>
<%block name="extracss">
${self.support.makecss("campaigns.css")}
</%block>
<%block name="extrajs">
${self.support.makejs("campaigns.js")}
</%block>
<h2>
<span class="understate">Campaign:</span>


+ 1
- 1
templates/campaigns/empty.mako Bestand weergeven

@@ -1,5 +1,5 @@
<%inherit file="../_default.mako"/>
<%block name="title">
${self.maketitle("Campaigns")}
${self.support.maketitle("Campaigns")}
</%block>
<p>No campaigns currently.</p>

+ 1
- 1
templates/campaigns/operation.mako Bestand weergeven

@@ -1,6 +1,6 @@
<%inherit file="../_default.mako"/>
<%block name="title">
${self.maketitle(operation["title"], campaign["title"], "Campaigns")}
${self.support.maketitle(operation["title"], campaign["title"], "Campaigns")}
</%block>
<h2> <!-- ... breadcrumb -->
<span class="understate">Operation:</span>


+ 1
- 1
templates/error.mako Bestand weergeven

@@ -1,6 +1,6 @@
<%inherit file="_base.mako"/>
<%block name="title">
${self.maketitle("Error")}
${self.support.maketitle("Error")}
</%block>
<h2>Error!</h2>
<p>You may report the following information to the developers:</p>


+ 1
- 1
templates/logout.mako Bestand weergeven

@@ -1,6 +1,6 @@
<%inherit file="_base.mako"/>
<%block name="title">
${self.maketitle("Log out")}
${self.support.maketitle("Log out")}
</%block>
<h2>Log out</h2>
<p>Use the button below to safely log out and clear your session.</p>


+ 4
- 1
templates/members/members.mako Bestand weergeven

@@ -1,6 +1,9 @@
<%inherit file="../_default.mako"/>
<%block name="title">
${self.maketitle("Members")}
${self.support.maketitle("Members")}
</%block>
<%block name="extracss">
${self.support.makecss("members.css")}
</%block>
<h2>Members</h2>
% if members:


Schrijf Voorbeeld
Laden…
Annuleren
Opslaan