From fa61ba3e330a1902c95afce4856770634495f232 Mon Sep 17 00:00:00 2001 From: Ben Kurtovic Date: Mon, 2 Jan 2017 03:34:28 -0500 Subject: [PATCH] Refactor templates and split off static CSS/JS for modules. --- static/campaigns.css | 209 ++++++++++++++++++++++++++++++ static/campaigns.js | 26 ++++ static/main.css | 253 ------------------------------------- static/main.js | 29 ----- static/members.css | 34 +++++ templates/404.mako | 2 +- templates/_base.mako | 19 +-- templates/_base_support.mako | 14 ++ templates/campaigns/campaign.mako | 8 +- templates/campaigns/empty.mako | 2 +- templates/campaigns/operation.mako | 2 +- templates/error.mako | 2 +- templates/logout.mako | 2 +- templates/members/members.mako | 5 +- 14 files changed, 306 insertions(+), 301 deletions(-) create mode 100644 static/campaigns.css create mode 100644 static/campaigns.js create mode 100644 static/members.css create mode 100644 templates/_base_support.mako diff --git a/static/campaigns.css b/static/campaigns.css new file mode 100644 index 0000000..f235e7a --- /dev/null +++ b/static/campaigns.css @@ -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%; + } +} diff --git a/static/campaigns.js b/static/campaigns.js new file mode 100644 index 0000000..30ca5fe --- /dev/null +++ b/static/campaigns.js @@ -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 = $("", {addClass: "board expanded"}) + .css($(this).position()) + .css("background-color", $(this).css("background-color")) + .css("position", "fixed") + .append($("").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(); + }); +}); diff --git a/static/main.css b/static/main.css index ddedb70..d946df1 100644 --- a/static/main.css +++ b/static/main.css @@ -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: ", "; -} diff --git a/static/main.js b/static/main.js index 963edb0..dca6c02 100644 --- a/static/main.js +++ b/static/main.js @@ -3,8 +3,6 @@ var overlaps = function(needle, haystack) { }; $(function() { - /* ============================= Universal ============================= */ - // Install logout auto-POST form: $("#logout").click(function() { $("", { @@ -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 = $("
", {addClass: "board expanded"}) - .css($(this).position()) - .css("background-color", $(this).css("background-color")) - .css("position", "fixed") - .append($("").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(); - }); }); diff --git a/static/members.css b/static/members.css new file mode 100644 index 0000000..c1b0214 --- /dev/null +++ b/static/members.css @@ -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: ", "; +} diff --git a/templates/404.mako b/templates/404.mako index 6af7e5f..0a1afdc 100644 --- a/templates/404.mako +++ b/templates/404.mako @@ -1,6 +1,6 @@ <%inherit file="_base.mako"/> <%block name="title"> - ${self.maketitle("404")} + ${self.support.maketitle("404")}

Error 404

The page you asked for couldn't be found.

diff --git a/templates/_base.mako b/templates/_base.mako index 9782d9d..503cbc3 100644 --- a/templates/_base.mako +++ b/templates/_base.mako @@ -1,32 +1,27 @@ +<%namespace name="support" file="_base_support.mako" inheritable="True"/>\ - <%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> - + ${support.makecss("main.css")} <% style = g.auth.get_character_prop("style") or g.config.get("style.default") %> % if style: - <% stylesheet = "styles/{}.css".format(style) %> - + ${support.makecss("styles/{}.css".format(style), "user-style")} % endif + <%block name="extracss"> % for size in g.eve.image.corp_widths: % endfor - + ${support.makejs("main.js")} + <%block name="extrajs"> <%block name="header"> diff --git a/templates/_base_support.mako b/templates/_base_support.mako new file mode 100644 index 0000000..972091e --- /dev/null +++ b/templates/_base_support.mako @@ -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 name="makecss(filename, id_=None)" filter="trim"> + + +<%def name="makejs(filename)" filter="trim"> + + diff --git a/templates/campaigns/campaign.mako b/templates/campaigns/campaign.mako index 106d789..1ec59d8 100644 --- a/templates/campaigns/campaign.mako +++ b/templates/campaigns/campaign.mako @@ -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 name="extracss"> + ${self.support.makecss("campaigns.css")} + +<%block name="extrajs"> + ${self.support.makejs("campaigns.js")}

Campaign: diff --git a/templates/campaigns/empty.mako b/templates/campaigns/empty.mako index 4bcb3f9..47f2964 100644 --- a/templates/campaigns/empty.mako +++ b/templates/campaigns/empty.mako @@ -1,5 +1,5 @@ <%inherit file="../_default.mako"/> <%block name="title"> - ${self.maketitle("Campaigns")} + ${self.support.maketitle("Campaigns")}

No campaigns currently.

diff --git a/templates/campaigns/operation.mako b/templates/campaigns/operation.mako index 453f111..4882391 100644 --- a/templates/campaigns/operation.mako +++ b/templates/campaigns/operation.mako @@ -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")}

Operation: diff --git a/templates/error.mako b/templates/error.mako index 7a8e364..4ec8813 100644 --- a/templates/error.mako +++ b/templates/error.mako @@ -1,6 +1,6 @@ <%inherit file="_base.mako"/> <%block name="title"> - ${self.maketitle("Error")} + ${self.support.maketitle("Error")}

Error!

You may report the following information to the developers:

diff --git a/templates/logout.mako b/templates/logout.mako index c06ea9c..38c652b 100644 --- a/templates/logout.mako +++ b/templates/logout.mako @@ -1,6 +1,6 @@ <%inherit file="_base.mako"/> <%block name="title"> - ${self.maketitle("Log out")} + ${self.support.maketitle("Log out")}

Log out

Use the button below to safely log out and clear your session.

diff --git a/templates/members/members.mako b/templates/members/members.mako index c939081..ceae4ee 100644 --- a/templates/members/members.mako +++ b/templates/members/members.mako @@ -1,6 +1,9 @@ <%inherit file="../_default.mako"/> <%block name="title"> - ${self.maketitle("Members")} + ${self.support.maketitle("Members")} + +<%block name="extracss"> + ${self.support.makecss("members.css")}

Members

% if members: