yvan/jira-card-printer
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

adjust author position

Browse Source
This commit is contained in:
Bengt Brodersen 2015-04-19 12:11:58 +02:00
parent 47ebe0098a
commit 62441c343f
1 changed files with 256 additions and 244 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

500
bookmarklet.js
View File

@ -662,7 +662,8 @@
.html(multilineString(function() { .html(multilineString(function() {
/*! /*!
<div class="card"> <div class="card">
<div class="author">qoomon.com<br>Bengt Brodersen</div> <div class="author author-page">qoomon.com</div>
<div class="author author-name">Bengt Brodersen</div>
<div class="card-border"></div> <div class="card-border"></div>
<div class="card-header"> <div class="card-header">
<div class="type-icon badge circular"></div> <div class="type-icon badge circular"></div>
@ -701,256 +702,267 @@
.html(multilineString(function() { .html(multilineString(function() {
/*! /*!
* { * {
color: black; color: black;
font-family:"Droid Serif"; font-family:"Droid Serif";
} }
body { body {
margin: 0; margin: 0;
} }
.hidden { .hidden {
visibility: hidden; visibility: hidden;
} }
.card-header:after, .card-header:after,
.card-footer:after { .card-footer:after {
content:" "; content:" ";
display: block; display: block;
clear: both; clear: both;
height:0 height:0
} }
.card-border, .card-border,
.badge, .badge,
.shadow { .shadow {
border-style: solid; border-style: solid;
border-color: #2f2f2f; border-color: #2f2f2f;
border-top-width: 0.14rem; border-top-width: 0.14rem;
border-left-width: 0.14rem; border-left-width: 0.14rem;
border-bottom-width: 0.24rem; border-bottom-width: 0.24rem;
border-right-width: 0.24rem; border-right-width: 0.24rem;
-webkit-border-radius: 0.25rem; -webkit-border-radius: 0.25rem;
border-radius: 0.25rem; border-radius: 0.25rem;
// -webkit-filter: drop-shadow(0px 5px 10px black) // -webkit-filter: drop-shadow(0px 5px 10px black)
} }
.circular { .circular {
-moz-border-radius: 50%; -moz-border-radius: 50%;
-webkit-border-radius: 50%; -webkit-border-radius: 50%;
border-radius: 50%; border-radius: 50%;
} }
.badge { .badge {
width: 3.2rem; width: 3.2rem;
height: 3.2rem; height: 3.2rem;
background: #d0d0d0; background: #d0d0d0;
} }
.card { .card {
position: relative; position: relative;
min-width: 21.0rem; min-width: 21.0rem;
} }
.author { .author{
z-index: 999; z-index: 999;
position: absolute;
top:1.5rem;
right:-0.25rem;
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
font-size: 0.4rem;
line-height: 0.8rem;
text-align: center;
color: #2F4F4F;
}
.card-border {
position: absolute;
top:2.0rem;
left:0.4rem;
right:0.4rem;
height: calc(100% - 4.0rem);
background: #ffffff;
} line-height: 0.8rem;
.card-header { }
position: relative; .author-page {
} position: absolute;
.card-content { top:2.5rem;
position: relative; right:0.55rem;
margin-top: 0.3rem; font-size: 0.45rem;
margin-left: 1.0rem; -webkit-transform-origin: 100% 100%;
margin-right: 1.1rem; transform-origin: 100% 100%;
margin-bottom: 0.2rem; -webkit-transform: rotate(-90deg);
min-height: 1.2rem; transform: rotate(-90deg);
} }
.content-header { .author-name {
position: relative; position: absolute;
font-size: 1.1rem; top:3.26rem;
line-height: 1.1rem; right:-2.6rem;
margin-bottom: 0.6rem; font-size: 0.35rem;
} -webkit-transform-origin: 0% 0%;
.card-footer { transform-origin: 0% 0%;
position: relative; -webkit-transform: rotate(90deg);
page-break-inside: avoid; transform: rotate(90deg);
} }
.summary { .card-border {
font-weight: bold; position: absolute;
} top:2.0rem;
.description { left:0.4rem;
font-size: 0.6rem; right:0.4rem;
line-height: 0.6rem; height: calc(100% - 4.0rem);
} background: #ffffff;
.key {
position: absolute;
float: left;
width: auto;
min-width: 4.4rem;
height: 1.35rem;
left: 3.0rem;
margin-top: 1.2rem;
padding-left: 0.7rem;
padding-right: 0.4rem;
text-align: center;
font-weight: bold;
font-size: 1.0rem;
line-height: 1.5rem;
}
.type-icon {
position: relative;
float: left;
background-color: GREENYELLOW;
background-image: url(https://googledrive.com/host/0Bwgd0mVaLU_KU0N5b3JyRnJaNTA/resources/icons/Objects.png);
background-repeat: no-repeat;
-webkit-background-size: 70%;
background-size: 70%;
background-position: center;
z-index: 1;
}
.card[type="story"] .type-icon { }
background-color: GOLD; .card-header {
background-image: url(https://googledrive.com/host/0Bwgd0mVaLU_KU0N5b3JyRnJaNTA/resources/icons/Bulb.png); position: relative;
} }
.card[type="bug"] .type-icon { .card-content {
background-color: CRIMSON; position: relative;
background-image: url(https://googledrive.com/host/0Bwgd0mVaLU_KU0N5b3JyRnJaNTA/resources/icons/Bug.png); margin-top: 0.3rem;
} margin-left: 1.0rem;
.card[type="epic"] .type-icon { margin-right: 1.1rem;
background-color: ROYALBLUE; margin-bottom: 0.2rem;
background-image: url(https://googledrive.com/host/0Bwgd0mVaLU_KU0N5b3JyRnJaNTA/resources/icons/Flash.png); min-height: 1.2rem;
} }
.content-header {
position: relative;
font-size: 1.1rem;
line-height: 1.1rem;
margin-bottom: 0.6rem;
}
.card-footer {
position: relative;
page-break-inside: avoid;
}
.summary {
font-weight: bold;
}
.description {
font-size: 0.6rem;
line-height: 0.6rem;
}
.key {
position: absolute;
float: left;
width: auto;
min-width: 4.4rem;
height: 1.35rem;
left: 3.0rem;
margin-top: 1.2rem;
padding-left: 0.7rem;
padding-right: 0.4rem;
text-align: center;
font-weight: bold;
font-size: 1.0rem;
line-height: 1.5rem;
}
.type-icon {
position: relative;
float: left;
background-color: GREENYELLOW;
background-image: url(https://googledrive.com/host/0Bwgd0mVaLU_KU0N5b3JyRnJaNTA/resources/icons/Objects.png);
background-repeat: no-repeat;
-webkit-background-size: 70%;
background-size: 70%;
background-position: center;
z-index: 1;
}
.estimate { .card[type="story"] .type-icon {
position: relative; background-color: GOLD;
float: left; background-image: url(https://googledrive.com/host/0Bwgd0mVaLU_KU0N5b3JyRnJaNTA/resources/icons/Bulb.png);
left: -0.65rem; }
top:-1.5rem; .card[type="bug"] .type-icon {
height: 1.1rem; background-color: CRIMSON;
width: 1.1rem; background-image: url(https://googledrive.com/host/0Bwgd0mVaLU_KU0N5b3JyRnJaNTA/resources/icons/Bug.png);
text-align: center; }
font-weight: bold; .card[type="epic"] .type-icon {
font-size: 1rem; background-color: ROYALBLUE;
line-height: 1.15rem; background-image: url(https://googledrive.com/host/0Bwgd0mVaLU_KU0N5b3JyRnJaNTA/resources/icons/Flash.png);
margin-top:1.5rem; }
z-index: 999;
}
.due { .estimate {
position: relative; position: relative;
float: right; float: left;
} left: -0.65rem;
.due-icon { top:-1.5rem;
position: relative; height: 1.1rem;
float:right; width: 1.1rem;
width: 2.5rem; text-align: center;
height: 2.5rem; font-weight: bold;
margin-top: 0.4rem; font-size: 0.9rem;
background-color: MEDIUMPURPLE; line-height: 1.15rem;
background-image: url(https://googledrive.com/host/0Bwgd0mVaLU_KU0N5b3JyRnJaNTA/resources/icons/AlarmClock.png); margin-top:1.5rem;
background-repeat: no-repeat; z-index: 999;
-webkit-background-size: 65%; }
background-size: 65%;
background-position: center;
z-index: 1;
}
.due-date {
position: relative;
float: right;
right: -0.6rem;
width: auto;
min-width: 2.8rem;
height: auto;
margin-top: 1.3rem;
padding-top: 0.2rem;
padding-bottom: 0.2rem;
padding-left: 0.3rem;
padding-right: 0.6rem;
text-align: center;
font-weight: bold;
font-size: 0.7rem;
line-height: 0.7rem;
}
.attachment {
position: relative;
float: left;
margin-left: 0.6rem;
width: 2.1rem;
height: 2.1rem;
background-color: LIGHTSKYBLUE;
background-image: url(https://images.weserv.nl/?url=www.iconsdb.com/icons/download/color/2f2f2f/attach-256.png);
background-repeat: no-repeat;
-webkit-background-size: 70%;
background-size: 70%;
background-position: center;
} .due {
.assignee { position: relative;
position: relative; float: right;
float: right; }
width: 2.1rem; .due-icon {
height: 2.1rem; position: relative;
text-align: center; float:right;
font-weight: bold; width: 2.5rem;
font-size: 1.8rem; height: 2.5rem;
line-height: 2.2rem; margin-top: 0.4rem;
background-image: url(https://images.weserv.nl/?url=www.iconsdb.com/icons/download/color/aaaaaa/contacts-256.png); background-color: MEDIUMPURPLE;
background-repeat: no-repeat; background-image: url(https://googledrive.com/host/0Bwgd0mVaLU_KU0N5b3JyRnJaNTA/resources/icons/AlarmClock.png);
-webkit-background-size: cover; background-repeat: no-repeat;
background-size: cover; -webkit-background-size: 65%;
-webkit-background-size: 100%; background-size: 65%;
background-size: 100%; background-position: center;
-webkit-filter: contrast(150%) grayscale(100%); z-index: 1;
filter: contrast(150%) grayscale(100%); }
background-position: center; .due-date {
} position: relative;
.qr-code { float: right;
position: relative; right: -0.6rem;
float: left; width: auto;
width: 2.1rem; min-width: 2.8rem;
height: 2.1rem; height: auto;
background-image: url(https://chart.googleapis.com/chart?cht=qr&chs=256x256&chld=L|1&chl=blog.qoomon.com); margin-top: 1.3rem;
background-repeat: no-repeat; padding-top: 0.2rem;
-webkit-background-size: cover; padding-bottom: 0.2rem;
background-size: cover; padding-left: 0.3rem;
background-position: center; padding-right: 0.6rem;
} text-align: center;
.epic { font-weight: bold;
width: auto; font-size: 0.7rem;
height: auto; line-height: 0.7rem;
position: relative; }
float:right; .attachment {
margin-right:0.6rem; position: relative;
padding-top: 0.2rem; float: left;
padding-bottom: 0.2rem; margin-left: 0.6rem;
padding-left: 0.3rem; width: 2.1rem;
padding-right: 0.3rem; height: 2.1rem;
text-align: left; background-color: LIGHTSKYBLUE;
font-size: 0.7rem; background-image: url(https://images.weserv.nl/?url=www.iconsdb.com/icons/download/color/2f2f2f/attach-256.png);
line-height: 0.7rem; background-repeat: no-repeat;
max-width: calc( 100% - 10.2rem); -webkit-background-size: 70%;
} background-size: 70%;
.epic-key { background-position: center;
}
.epic-name { }
font-weight: bold; .assignee {
} position: relative;
float: right;
width: 2.1rem;
height: 2.1rem;
text-align: center;
font-weight: bold;
font-size: 1.8rem;
line-height: 2.2rem;
background-image: url(https://images.weserv.nl/?url=www.iconsdb.com/icons/download/color/aaaaaa/contacts-256.png);
background-repeat: no-repeat;
-webkit-background-size: cover;
background-size: cover;
-webkit-background-size: 100%;
background-size: 100%;
-webkit-filter: contrast(150%) grayscale(100%);
filter: contrast(150%) grayscale(100%);
background-position: center;
}
.qr-code {
position: relative;
float: left;
width: 2.1rem;
height: 2.1rem;
background-image: url(https://chart.googleapis.com/chart?cht=qr&chs=256x256&chld=L|1&chl=blog.qoomon.com);
background-repeat: no-repeat;
-webkit-background-size: cover;
background-size: cover;
background-position: center;
}
.epic {
width: auto;
height: auto;
position: relative;
float:right;
margin-right:0.6rem;
padding-top: 0.2rem;
padding-bottom: 0.2rem;
padding-left: 0.3rem;
padding-right: 0.3rem;
text-align: left;
font-size: 0.7rem;
line-height: 0.7rem;
max-width: calc( 100% - 10.2rem);
}
.epic-key {
}
.epic-name {
font-weight: bold;
}
*/ */
}).replace(/{RESOURCE_ORIGIN}/g, resourceOrigin)); }).replace(/{RESOURCE_ORIGIN}/g, resourceOrigin));
return result; return result;