maximator/ikrpg.github.io
1
0
Fork 0
mirror of https://github.com/ikrpg/ikrpg.github.io.git synced 2026-05-13 14:27:22 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Added support for images to character stats sheet. Introduced some basic css rules for print settings. The later does not render correctly in Firefox yet.

Browse source
This commit is contained in:
phil 2013-07-16 15:50:58 +02:00
parent 3bd4e25be2
commit f28126d145
16 changed files with 126 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
static/images/sheet/Colbie.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 112 KiB

54
static/javascripts/heroic.js
View file

@ -1,3 +1,8 @@
function addListener(elem, event, f) {
if (elem.addEventListener) elem.addEventListener(event, f, false);
else elem.attachEvent("on"+event, f);
}
function Heroic(Hero) {
var self = this;
self.search = "";
@ -89,7 +94,10 @@ function Heroic(Hero) {
Hero["focus"] = attribute;
redirect();
};
if (isDefined(input)) { input.addEventListener("change", updateSearchString, false); }
if (isDefined(input)) {
//input.addEventListener("change", updateSearchString, false);
addListener(input, "change", updateSearchString);
}
} else if (isObject(value)) {
var parent = document.querySelector("#"+attribute);
updateSearchString = function(key, input) {
@ -145,16 +153,54 @@ function Heroic(Hero) {
if (input != null) { input.focus(); input.scrollIntoView(); }
}
};
var setPortrait = function(hero) {
var portrait = hero["portrait"]
, portraitDiv = document.querySelector("#portrait");
if (portrait && portraitDiv) {
var url = portrait["url"]
, x = portrait["x"]
, y = portrait["y"]
, size = portrait["size"];
if (url != null && x != null && y != null && size != null) {
var sheet = document.querySelector("div.sheet");
if (sheet) {
sheet.style["backgroundImage"] = "url("+url+")";
sheet.style["backgroundPosition"] = y+"px "+x+"px";
sheet.style["backgroundSize"] = size == "auto" ? "auto" : size+"px";
}
}
}
};
for (var i = 0; i < textareas.length; i++) { autoresizableTextarea(textareas[i]); }
showWeapons(Hero);
for (attribute in Hero) { fillOut(attribute, Hero[attribute]); }
for (attribute in Hero) { saveOnChange(attribute, Hero[attribute]); }
setPortrait(Hero);
focusLastInput(Hero);
var names = document.querySelectorAll("section > input.name");
for (name in names) { names[name].value = Hero["name"]; }
//var names = document.querySelectorAll("section > input.name");
//for (name in names) { names[name].value = Hero["name"]; }
var displayPortrait = function(portrait, value, pointerEvent) {
return function(event) {
event.preventDefault();
event.stopPropagation();
var inputs = portrait.querySelectorAll("input");
for (var index = 0; index < inputs.length; index++) {
var input = inputs.item(index);
input.style["display"] = value;
portrait.style["pointerEvents"] = pointerEvent;
}
};
};
var portrait = document.querySelector("#portrait")
, button = portrait.querySelector("input[type='button']");
addListener(portrait, "click", displayPortrait(portrait, "block", "none"));
addListener(button, "click", function(event) { displayPortrait(portrait, "none", "auto")(event); setPortrait(Hero); });
redirect();
};

9
static/stylesheets/content.css
View file

@ -28,4 +28,11 @@ section.content em {
section.content > h2 + table,
section.content > h2 + table.left + table.right,
section.content > h2 + table.right + table.left {
margin-top: 2em; }
margin-top: 2em; }
@media print {
section.content {
padding: 0 !important; }
section.content > * {
display: none; }
}

44
static/stylesheets/content/character-sheet.css
View file

@ -1,18 +1,6 @@
/*form.sheet {
margin: 2em auto 0 auto;
width: 699px;
height: 988px;
background-image: url(/static/images/Stats.png);
background-repeat: no-repeat; }*/
div.sheet { margin: 2em auto 0 auto; width: 699px; height: 988px; background-repeat: no-repeat; }
div.sheet {
margin: 2em auto 0 auto;
width: 699px;
height: 988px;
}
div.sheet > form.card { height: 988px; width: 699px; overflow: hidden; }
div.sheet > form.card { height: 988px; width: 699px; background-repeat: no-repeat; overflow: hidden; }
div.sheet > form.card input,
div.sheet > form.card textarea { height: 30px; font-family: Georgia; font-size: 23px; text-align: justify; color: #333; background: none; border: none; }
@ -25,6 +13,16 @@ div.sheet > form#stats input#archetype { top: 58px; left: 180px; width: 190px; }
div.sheet > form#stats input#race { top: 58px; left: 370px; width: 150px; }
div.sheet > form#stats input#level { top: 58px; left: 520px; width: 150px; }
div.sheet > form#stats input#careers { top: 106px; left: 362px; width: 300px; }
div.sheet > form#stats div#portrait { top: 103px; left: 2px; width: 350px; height: 400px; cursor: pointer; }
div.sheet > form#stats div#portrait input { display: none; font-size: 1em; background-color: #BEB8AE; }
div.sheet > form#stats div#portrait input[type="button"] { top: 72px; left: 2px; font-weight: bold; border-radius: 5px; cursor: pointer; }
div.sheet > form#stats div#portrait input.url { width: 310px; }
div.sheet > form#stats div#portrait input.x,
div.sheet > form#stats div#portrait input.y,
div.sheet > form#stats div#portrait input.size { width: 40px; text-align: right; }
div.sheet > form#stats div#portrait input.x { top: 34px; }
div.sheet > form#stats div#portrait input.y { top: 34px; left: 44px; }
div.sheet > form#stats div#portrait input.size { top: 34px; left: 270px; }
div.sheet > form#stats div#battle.stats { top: 157px; }
div.sheet > form#stats div#battle.stats input { width: 30px; text-align: center; }
div.sheet > form#stats div#battle.stats input#ini { left: 360px; }
@ -79,28 +77,28 @@ div.sheet > form#stats input#wil { top: 784px; left: 572px; width: 92px; height:
div.sheet > form#stats input#xp { top: 918px; left: 570px; width: 40px; text-align: center; }
div.sheet > form#stats a#weapons-switch { height: 51px; width: 51px; background-image: url(/static/images/sheet/reload.png); }
div.sheet > form#skills { background-image: url(/static/images/sheet/Skills.png); }
div.sheet > form#skills { padding-top: 66px; background-image: url(/static/images/sheet/Skills.png); }
div.sheet > form#skills input#name { top: 47px; left: 143px; height: 46px; width: 526px; font-size: 37px; text-transform: uppercase; }
div.sheet > form#skills div.content { top: 180px; left: 20px; }
div.sheet > form#skills div.content div.skill { position: relative; }
div.sheet > form#skills div.content div.skill input { position: relative; width: 64px; text-align: center; }
div.sheet > form#skills div.content div.skill input.title { width: 376px; font-size: 17px; text-align: left; text-transform: uppercase; font-weight: bold; }
div.sheet > form#benefits { background-image: url(/static/images/sheet/Feats.png); }
div.sheet > form#benefits { padding-top: 66px; background-image: url(/static/images/sheet/Feats.png); }
div.sheet > form#benefits input#name { top: 47px; left: 143px; height: 46px; width: 526px; font-size: 37px; text-transform: uppercase; }
div.sheet > form#benefits div.content { top: 200px; left: 20px; }
div.sheet > form#benefits div.content div.benefit { position: relative; }
div.sheet > form#benefits div.content div.benefit input.title { position: relative; width: 658px; font-size: 17px; text-transform: uppercase; font-weight: bold; }
div.sheet > form#benefits div.content div.benefit textarea.description { position: relative; width: 658px; height: auto; font-size: 17px; }
div.sheet > form#abilities { background-image: url(/static/images/sheet/Abilities.png); }
div.sheet > form#abilities { padding-top: 66px; background-image: url(/static/images/sheet/Abilities.png); }
div.sheet > form#abilities input#name { top: 47px; left: 143px; height: 46px; width: 526px; font-size: 37px; text-transform: uppercase; }
div.sheet > form#abilities div.content { top: 130px; left: 20px; }
div.sheet > form#abilities div.content div.ability { position: relative; }
div.sheet > form#abilities div.content div.ability input.title { position: relative; width: 658px; font-size: 17px; text-transform: uppercase; font-weight: bold; }
div.sheet > form#abilities div.content div.ability textarea.description { position: relative; width: 658px; height: auto; font-size: 17px; }
div.sheet > form#spells { background-image: url(/static/images/sheet/Spells.png); }
div.sheet > form#spells { padding-top: 66px; background-image: url(/static/images/sheet/Spells.png); }
div.sheet > form#spells input#name { top: 47px; left: 143px; height: 46px; width: 526px; font-size: 37px; text-transform: uppercase; }
div.sheet > form#spells div.content { top: 180px; left: 20px; }
div.sheet > form#spells div.content div.spell { position: relative; }
@ -108,7 +106,7 @@ div.sheet > form#spells div.content div.spell input { position: relative; width:
div.sheet > form#spells div.content div.spell input.title { width: 236px; font-size: 17px; text-align: left; text-transform: uppercase; font-weight: bold; }
div.sheet > form#spells div.content div.spell textarea.description { position: relative; width: 658px; height: auto; font-size: 17px; }
div.sheet > form#gear { background-image: url(/static/images/sheet/Gear.png); }
div.sheet > form#gear { padding-top: 66px; background-image: url(/static/images/sheet/Gear.png); }
div.sheet > form#gear input#name { top: 47px; left: 143px; height: 46px; width: 526px; font-size: 37px; text-transform: uppercase; }
div.sheet > form#gear div.content { top: 180px; left: 20px; }
div.sheet > form#gear div.content div.gear { position: relative; }
@ -116,9 +114,13 @@ div.sheet > form#gear div.content div.gear input { position: relative; font-size
div.sheet > form#gear div.content div.gear input.title { width: 236px; text-transform: uppercase; font-weight: bold; }
div.sheet > form#gear div.content div.gear input.benefit { width: 410px; }
div.sheet > form#notes { background-image: url(/static/images/sheet/Abilities.png); }
div.sheet > form#notes { padding-top: 66px; background-image: url(/static/images/sheet/Abilities.png); }
div.sheet > form#notes input#name { top: 47px; left: 143px; height: 46px; width: 526px; font-size: 37px; text-transform: uppercase; }
div.sheet > form#notes div.content { top: 130px; left: 20px; }
div.sheet > form#notes div.content div.note { position: relative; }
div.sheet > form#notes div.content div.note input.title { position: relative; width: 658px; font-size: 17px; text-transform: uppercase; font-weight: bold; }
div.sheet > form#notes div.content div.note textarea.text { position: relative; width: 658px; height: auto; font-size: 17px; }
div.sheet > form#notes div.content div.note textarea.text { position: relative; width: 658px; height: auto; font-size: 17px; }
@media print {
section.content > div.sheet { display: block; -webkit-transform: scale(0.4); -o-transform: scale(0.4); transform: scale(0.4); }
}

7
static/stylesheets/foot.css
View file

@ -32,4 +32,9 @@ footer#foot > ul:after {
footer#foot > p:before {
margin-bottom: 24px; }
footer#foot > ul:after {
margin-top: 24px; }
margin-top: 24px; }
@media print {
footer#foot {
display: none; }
}

11
static/stylesheets/global.css
View file

@ -16,4 +16,13 @@ article {
background-color: rgba(252, 253, 246, 0.85);
transition: width 1s, background-color 1s; -webkit-transition: width 1s, background-color 1s; -moz-transition: width 1s, background-color 1s; -ms-transition: width 1s, background-color 1s; }
a {
text-decoration: none; }
text-decoration: none; }
@media print {
body {
background-image: none;
background-color: transparent; }
article {
background-color: transparent;
width: auto; }
}

7
static/stylesheets/head.css
View file

@ -30,4 +30,9 @@ header#head nav li:nth-of-type(1) > a {
header#head nav li:nth-of-type(2) > a {
color: #82B964; }
header#head nav li:nth-of-type(3) > a {
color: #D24D33; }
color: #D24D33; }
@media print {
header#head {
display: none; }
}

7
static/stylesheets/menu.css
View file

@ -19,4 +19,9 @@ nav#menu > ol > li > a {
nav#menu > ol > li:nth-of-type(5) > a {
color: #82B964; }
nav#menu > ol > li:nth-of-type(n+6) > a {
color: #D24D33; }
color: #D24D33; }
@media print {
nav#menu {
display: none; }
}