<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
+ <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
+
<!-- Latest compiled and minified JavaScript -->
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
.sprite .grid {
border: 1px solid red;
}
-
+
+ #home {
+ margin-right: 10px;
+ }
+
/*.sprite {
float: left;
margin-right: 20px;
</head>
<body>
<div class="container-fluid">
- <h1><?php echo $name; ?></h1>
+ <h1><a id="home" href="/" title="Return"><i class="fa fa-arrow-left"></i></a><?php echo $name; ?></h1>
<ul class="nav nav-tabs">
<li class="nav active"><a href="#comparison" data-toggle="tab">Comparison</a></li>
+ <li class="nav"><a href="#cost" data-toggle="tab">Cost</a></li>
<li class="nav"><a href="#materials" data-toggle="tab">Materials</a></li>
</ul>
</div>
</div>
</div>
- <div class="tab-pane fade in" id="materials">
+ <div class="tab-pane fade in" id="cost">
<div class="col-md-6">
<h2>Summary</h2>
<div class="sprite measurements col-md-8">
</div>
</div>
</div>
+ <div class="tab-pane fade in" id="materials">
+ <div class="col-md-6">
+ <h2>Materials</h2>
+ <div class="sprite col-md-8">
+ <?php echo $ironlak_sprite; ?>
+ </div>
+ <div class="col-md-4">
+ <h3>Measurements (in m)</h3>
+ <form action="upload.php" method="POST" class="form-horizontal">
+ <div class="form-group">
+ <label for="spritename" class="control-label col-md-3">Name:</label>
+ <div class="col-md-8"><input id="spritename" name="spritename" class="form-control" type="text" value="<?php echo $vars['spritename']; ?>"></input></div>
+ </div>
+
+ <div class="form-group">
+ <label for="wood_size" class="control-label col-md-3">Size:</label>
+ <div class="col-md-8"><input id="wood_size" name="wood_size" class="form-control" type="text" value="<?php echo $vars['wood_size']; ?>"></input></div>
+ </div>
+
+ <div class="form-group">
+ <label for="wood_length" class="control-label col-md-3">Length:</label>
+ <div class="col-md-8"><input id="wood_length" name="wood_length" class="form-control" type="text" value="<?php echo $vars['wood_length']; ?>"></input></div>
+ </div>
+
+ <div class="form-group">
+ <label for="wood_cost" class="control-label col-md-3">Cost:</label>
+ <div class="col-md-8"><input id="wood_cost" name="wood_cost" class="form-control" type="text" value="<?php echo $vars['wood_cost']; ?>"></input></div>
+ </div>
+
+ <div class="form-group">
+ <label for="markup" class="control-label col-md-3">Markup:</label>
+ <div class="col-md-8"><input id="markup" name="markup" class="form-control" type="text" value="<?php echo $vars['markup']; ?>"></input></div>
+ </div>
+
+ <input type="hidden" name="hash" value="<?php echo $hash; ?>"></input>
+ <input class="btn btn-success" type="submit" name="submit" value="Save">
+ </form>
+ </div>
+ </div>
+ </div>
</div>
</div>
<script>
- padSprite = function(sprite) {
- var height = $(".sprite:first table tr").length;
- var width = $(".sprite:first table tr:first td").length;
+ padSprite = function(sprite, width, height) {
+ console.log(sprite);
+
$(sprite).find('tr').each(function() {
$(this).append("<td class=\"added\"></td>");
$(sprite).find("tr:first td:last").after("<td class=\"line-left\ height added\" rowspan=\"" + height + "\"><?php echo $sprite_height_cm; ?></td>")
};
-
- padSprite($(".measurements"));
- $(".sprite:not(.measurements").each(function() {
- padSprite(this);
+
+ var height = $(".sprite:first table tr").length;
+ var width = $(".sprite:first table tr:first td").length;
+ $(".sprite").each(function() {
+ padSprite($(this), width, height);
});
+
var pixelSize = Math.floor($(".sprite:first").width()*0.75 / $(".sprite:first table tr:first td").length);
projects / pixel-calc.git / blobdiff