Sascha Peilicke ([email protected]) wrote: > On Sunday 24 November 2013 18:28:18 Victor Lowther wrote: > > CB 2.0 on opensuse 12.3 with all core Chef roles using the chef-solo jig: > > Nice, though we'll likely get bug reports such as "my neck hurts" :-) Any > chance to render the barclamp names with a 45 degrees pitch?
Good idea. > http://snook.ca/archives/html_and_css/css-text-rotation I can be more helpful than that page, because it just so happens that I implemented exactly this same idea of rotated table headers for a personal Rails project a few months ago. Attached is a sanitized version of that, with the text converted to roughly match the Crowbar matrix (the date still needs to be trimmed from the column headers, but I left that in for reference). The .css is just an expanded version of the .css.scss, in case you want to test it without an SCSS interpreter to hand. BTW I got the technique from http://s-church.net/Blog/Entry/464 but I cleaned it up and extended it, so I think mine would be a better starting point.
<<attachment: rotated-header-text.png>>
|
role 1
Sat 30 Nov 2013
|
role 2
Sun 1 Dec 2013
|
role 3
Mon 2 Dec 2013
|
role 4
Fri 6 Dec 2013
|
role 5
Sat 7 Dec 2013
|
role 6
Sun 8 Dec 2013
|
role 7
Sat 14 Dec 2013
|
|
|---|---|---|---|---|---|---|---|
| node1 | done |
done |
done |
done |
done |
FAIL |
|
| node2 | FAIL |
done |
done |
done† |
blocked |
blocked |
FAIL† |
| node3 | foo |
foo† |
blocked |
blocked |
blocked |
||
| node4 | foo |
foo |
foo |
FAIL |
a {
color: #3B5998;
text-decoration: none;
}
a:hover {
text-decoration: underline;
background-color: #ff9843;
}
table.rotated {
/* -- table-wide ----------------------------------------------*/
$odd_column_bg: #f5e7f5;
$odd_row_bg: #e4f5f5;
$odd_both_bg: #e4e7f5;
/*
Due to https://bugzilla.mozilla.org/show_bug.cgi?id=688556 we have
to take care to avoid using position: relative in normal <td>s if
using border-collapse, because it causes the border to vanish in
Firefox. This would mean we could only use z-index in the top
<th> row, but that would require negative depths to ensure it goes
below the reply rows, and for some reason that makes the links in
the top row unclickable. Instead, we use the evil old-fashioned
cellpadding / cellspacing.
*/
//border-collapse: collapse;
border-spacing: 0px;
td {
//border: 1px solid #555555;
}
td {
text-align: center;
}
/* -- header row ----------------------------------------------*/
tr.header {
position: relative;
}
/*
Each <th> has to be in front of the one to its left,
to avoid its <div> from being under the <th> to the left,
which would prevent the link from being clickable.
*/
$header_length: 120px;
th.role {
height: $header_length;
width: 58px;
$skew: 40deg;
div.skewed {
position: relative;
width: 100%;
height: 100%;
transform: skew(-$skew,0deg);
-webkit-transform: skew(-$skew,0deg);
-moz-transform: skew(-$skew,0deg);
-ms-transform: skew(-$skew,0deg);
-o-transform: skew(-$skew,0deg);
transform-origin: 0% 100%;
-webkit-transform-origin: 0% 100%;
-moz-transform-origin: 0% 100%;
-ms-transform-origin: 0% 100%;
-o-transform-origin: 0% 100%;
}
$angle: -90 + $skew;
div.rotated {
transform: skew($skew,0deg) rotate($angle);
-webkit-transform: skew($skew,0deg) rotate($angle);
-moz-transform: skew($skew,0deg) rotate($angle);
-ms-transform: skew($skew,0deg) rotate($angle);
-o-transform: skew($skew,0deg) rotate($angle);
// rotate about top-left corner
transform-origin: 0% 0%;
-webkit-transform-origin: 0% 0%;
-moz-transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%;
-o-transform-origin: 0% 0%;
position: absolute; // relative to containing th.role
top: $header_length; // + 50;
text-align: left;
padding-left: 24px;
padding-right: 5px;
padding-top: 0.18em;
height: 40px;
width: 210px;
vertical-align: middle;
a, div.date {
white-space: nowrap;
overflow: hidden;
}
div.date {
padding-left: 19px;
font-weight: normal;
font-size: 90%;
}
}
}
th.role.odd div.skewed {
background-color: $odd_column_bg;
border-left: 1px solid #555555;
border-right: 1px solid #555555;
border-top: 1px solid #555555;
//border-bottom: 1px solid #555555;
}
/* -- reply rows ----------------------------------------------*/
tr.first.node {
td.reply {
position: relative;
z-index: 9999;
border-top: 2px solid #555555;
margin: 15px;
}
}
tr.last.node {
td.reply {
border-bottom: 2px solid #555555;
}
}
tr.node {
td.node {
padding: 0px 6px;
}
td.node, td.last.reply {
border-right: 2px solid #555555;
}
td.reply div {
padding: 3px;
}
}
tr.node.odd {
td.node {
background-color: $odd_row_bg;
border-top: 1px solid #555555;
border-bottom: 1px solid #555555;
border-left: 1px solid #555555;
}
}
tr.even {
td.even {
background-color: #ffffff;
}
td.odd {
background-color: $odd_column_bg;
}
}
tr.odd {
td.even {
background-color: $odd_row_bg;
}
td.odd {
background-color: $odd_both_bg;
}
}
a {
/* Make hover work anywhere in the whole td cell */
display: block;
sup {
font-size: 70%;
}
}
a:hover {
text-decoration: none;
.hover-underline {
border-bottom: 1px solid #3B5998;
}
}
}
a {
color: #3B5998;
text-decoration: none;
}
table.rotated {
border-spacing: 0px;
}
table.rotated td {
text-align: center;
}
table.rotated tr.header {
position: relative;
}
table.rotated th.role {
height: 120px;
width: 58px;
}
table.rotated th.role div.skewed {
position: relative;
width: 100%;
height: 100%;
transform: skew(-40deg, 0deg);
-webkit-transform: skew(-40deg, 0deg);
-moz-transform: skew(-40deg, 0deg);
-ms-transform: skew(-40deg, 0deg);
-o-transform: skew(-40deg, 0deg);
transform-origin: 0% 100%;
-webkit-transform-origin: 0% 100%;
-moz-transform-origin: 0% 100%;
-ms-transform-origin: 0% 100%;
-o-transform-origin: 0% 100%;
}
table.rotated th.role div.rotated {
transform: skew(40deg, 0deg) rotate(-50deg);
-webkit-transform: skew(40deg, 0deg) rotate(-50deg);
-moz-transform: skew(40deg, 0deg) rotate(-50deg);
-ms-transform: skew(40deg, 0deg) rotate(-50deg);
-o-transform: skew(40deg, 0deg) rotate(-50deg);
transform-origin: 0% 0%;
-webkit-transform-origin: 0% 0%;
-moz-transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%;
-o-transform-origin: 0% 0%;
position: absolute;
top: 120px;
text-align: left;
padding-left: 24px;
padding-right: 5px;
padding-top: 0.18em;
height: 40px;
width: 210px;
vertical-align: middle;
}
table.rotated th.role div.rotated a,table.rotated th.role div.rotated div.date {
white-space: nowrap;
overflow: hidden;
}
table.rotated th.role div.rotated div.date {
padding-left: 19px;
font-weight: normal;
font-size: 90%;
}
table.rotated th.role.odd div.skewed {
background-color: #f5e7f5;
border-left: 1px solid #555555;
border-right: 1px solid #555555;
border-top: 1px solid #555555;
}
table.rotated tr.first.node td.reply {
position: relative;
z-index: 9999;
border-top: 2px solid #555555;
margin: 15px;
}
table.rotated tr.last.node td.reply {
border-bottom: 2px solid #555555;
}
table.rotated tr.node td.node {
padding: 0px 6px;
}
table.rotated tr.node td.node,table.rotated tr.node td.last.reply {
border-right: 2px solid #555555;
}
table.rotated tr.node td.reply div {
padding: 3px;
}
table.rotated tr.node.odd td.node {
background-color: #e4f5f5;
border-top: 1px solid #555555;
border-bottom: 1px solid #555555;
border-left: 1px solid #555555;
}
table.rotated tr.even td.even {
background-color: #ffffff;
}
table.rotated tr.even td.odd {
background-color: #f5e7f5;
}
table.rotated tr.odd td.even {
background-color: #e4f5f5;
}
table.rotated tr.odd td.odd {
background-color: #e4e7f5;
}
table.rotated tr.even td.yes,table.rotated tr.odd td.yes,table.rotated tr td.yes {
background-color: #aaffaa;
}
table.rotated tr.even td.maybe,table.rotated tr.odd td.maybe,table.rotated tr td.maybe {
background-color: #ffffaa;
}
table.rotated tr.even td.no,table.rotated tr.odd td.no,table.rotated tr td.no {
background-color: #ff8888;
}
table.rotated a {
display: block;
}
table.rotated a sup {
font-size: 70%;
}
table.rotated a:hover {
text-decoration: none;
}
table.rotated a:hover .hover-underline {
border-bottom: 1px solid #3B5998;
}
_______________________________________________ Crowbar mailing list [email protected] https://lists.us.dell.com/mailman/listinfo/crowbar For more information: http://crowbar.github.com/
