clear: both;
}
- .sprite td.line-left {
+ .line-left {
border-left: 2px solid transparent;
}
+
+ .line-right {
+ border-right: 2px solid transparent;
+ }
- .sprite td.line-top {
+ .line-top {
border-top: 2px solid transparent;
}
- .sprite.measurements td.line-left {
+ .line-bottom {
+ border-bottom: 2px solid transparent;
+ }
+
+ .sprite.measurements .line-left {
border-left: 2px solid black;
}
- .sprite.measurements td.line-top {
+ .sprite.measurements .line-right {
+ border-right: 2px solid black;
+ }
+
+ .sprite.measurements .line-top {
border-top: 2px solid black;
}
+ .sprite.measurements .line-bottom {
+ border-bottom: 2px solid black;
+ }
+
+ .sprite.measurements .dimension-top {
+ transform: translate(50%, -50%);
+ }
+
+ .sprite.measurements .dimension-bottom {
+ transform: translate(50%, 50%);
+ }
+
+ .sprite.measurements .dimension-left {
+ transform: translateY(50%);
+ }
+
+ .sprite.measurements .dimension-right {
+ transform: translateY(50%);
+ }
+
+ .sprite.measurements .dimension-left .line-left, .sprite.measurements .dimension-right .line-right {
+ height: 100%;
+ }
+
.sprite .height {
visibility: hidden;
padding-left: 5px;
.sprite.measurements .height, .sprite.measurements .width {
visibility: visible;
}
+
+ .sprite .grid {
+ border: 1px solid red;
+ }
/*.sprite {
float: left;
<ul class="nav nav-tabs">
<li class="nav active"><a href="#comparison" data-toggle="tab">Comparison</a></li>
<li class="nav"><a href="#materials" data-toggle="tab">Materials</a></li>
- <li class="nav"><a href="#C" data-toggle="tab">C</a></li>
</ul>
<div class="tab-content">
</div>
<div class="tab-pane fade in" id="materials">
<div class="col-md-6">
- <h2>Dimensions</h2>
+ <h2>Summary</h2>
<div class="sprite measurements col-md-8">
<?php echo $ironlak_sprite; ?>
</div>
- <div class="col-md-4 vertical-line"> </div>
+ <div class="col-md-4">
+ <h3>Cost of materials</h3>
+ <?php $materials = $cost_of_lumber + $cost_of_cans; ?>
+ <?php $materials_used = $value_of_lumber_used + $value_of_can_used; ?>
+ <table class="table">
+ <tr>
+ <th>Wood</th>
+ <td><?php echo $cost_of_lumber; ?></td>
+ </tr>
+ <tr>
+ <th>Paint</th>
+ <td><?php echo $cost_of_cans; ?></td>
+ </tr>
+ <tr>
+ <td></td>
+ <td><strong><?php echo $materials; ?></strong></td>
+ </tr>
+ </table>
+
+ <h3>Value of materials used</h3>
+ <table class="table">
+ <tr>
+ <th>Wood</th>
+ <td><?php echo $value_of_lumber_used; ?></td>
+ </tr>
+ <tr>
+ <th>Paint</th>
+ <td><?php echo $value_of_can_used; ?></td>
+ </tr>
+ <tr>
+ <td></td>
+ <td><strong><?php echo $materials_used; ?></strong></td>
+ </tr>
+ </table>
+
+ <h3>Profit @ <?php echo $markup*100; ?>% Markup</h3>
+ <table class="table">
+ <tr>
+ <th>Sell price</th>
+ <td><?php echo $materials_used*$markup; ?></td>
+ </tr>
+ <tr>
+ <th>Less materials</th>
+ <td><?php echo $materials_used*$markup - $materials; ?></td>
+ </tr>
+ </table>
+
+ </div>
</div>
<div class="col-md-6">
- <h2>Paint</h2>
+ <h2>Materials Breakdown</h2>
<div class="col-md-12">
+ <h3>Paint</h3>
<?php echo $spray_can_breakdown; ?>
</div>
- <h2 class="clearfix">Wood</h2>
<div class="col-md-12">
+ <h3>Paint</h3>
<?php echo $lumber_breakdown; ?>
</div>
</div>
</div>
- <div class="tab-pane fade in" id="C">
- nice meme :]
- </div>
</div>
</div>
var width = $(".sprite:first table tr:first td").length;
$(sprite).find('tr').each(function() {
- $(this).append("<td></td>");
+ $(this).append("<td class=\"added\"></td>");
});
+ $(sprite).find('tr:first td:last').append('<div class="line-top"></div>');
+ $(sprite).find('tr:first td:last').addClass('dimension-top');
+
+ $(sprite).find('tr:last td:last').append('<div class="line-bottom"></div>');
+ $(sprite).find('tr:last td:last').addClass('dimension-bottom');
+
$(sprite).find('tr').each(function(){
- $(this).find('td').eq(0).before('<td></td>');
+ $(this).find('td').eq(0).before('<td class="added"></td>');
});
for (var i=0; i<$(sprite).find("tr:last td").length; i++) {
- var cells = cells ? cells + '<td></td>' : '<tr><td></td>';
+ var cells = cells ? cells + '<td class="added"></td>' : '<tr><td class="added"></td>';
}
- cells += "<td></td></tr><tr><td></td><td class=\"line-top width\" colspan=\"" + width + "\"><?php echo $sprite_width_cm; ?></td></tr>";
+ cells += "<td class=\"added\"></td></tr><tr><td class=\"added\"></td><td class=\"line-top width added\" colspan=\"" + width + "\"><?php echo $sprite_width_cm; ?></td></tr>";
$(sprite).find("tr:last").after(cells);
- $(sprite).find("tr:first td:last").after("<td class=\"line-left\ height\" rowspan=\"" + height + "\"><?php echo $sprite_height_cm; ?></td>")
+ $(sprite).find('tr:nth-last-child(2) td:nth-last-child(2)').append('<div class="line-left"></div>');
+ $(sprite).find('tr:nth-last-child(2) td:nth-last-child(2)').addClass('dimension-left');
+
+ $(sprite).find('tr:nth-last-child(2) td:first').append('<div class="line-right"></div>');
+ $(sprite).find('tr:nth-last-child(2) td:first').addClass('dimension-right');
+
+ $(sprite).find("tr:first td:last").after("<td class=\"line-left\ height added\" rowspan=\"" + height + "\"><?php echo $sprite_height_cm; ?></td>")
};
padSprite($(".measurements"));
var colour = $(this).attr('colour');
$("." + colour).toggleClass("highlighted");
});
+
+ function nextTab(elem) {
+ $(elem + ' li.active')
+ .next()
+ .find('a[data-toggle="tab"]')
+ .click();
+ }
+
+ $(document).keypress(function(e) {
+ if(e.which == 110) {
+ var active = $(".nav li.active");
+ var tabs = active.parent().children();
+ tabs.eq((tabs.index(active) + 1) % tabs.length).find('a[data-toggle="tab"]').click();
+ }
+
+ if(e.which == 103) {
+ $(".sprite tr td:not(.added)").toggleClass("grid");
+ }
+ });
</script>
</body>
</html>
projects / pixel-calc.git / blobdiff