<!-- 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);
align-items: center;
}
+ #edit .thumbnail {
+ max-height: 30vh;
+ max-width: 30vh;
+ padding: 0px;
+ }
+
#edit img {
height: 30vh;
width: 30vh;
width: 100%;
image-rendering: pixelated;
}
-
- #menu-container div{
+
+ .menu-container>div {
height: 72px;
+ }
+
+ .text-scroll{
left: 0;
text-align: center;
overflow: hidden;
margin: 5px;
}
- #menu-container div span{
+ .text-scroll span{
display: block;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
font-size: 72px;
- margin-top: 3px;
}
- #menu-container div:hover span{
+ .text-scroll:hover span{
margin: -85px 0 0 0;
cursor: default;
}
+ #edit .text-scroll:hover span {
+ margin-top: -75px;
+ }
+
+ #edit h2 {
+ background: #2ecc71;
+ color: white;
+ padding-bottom: 10px;
+ padding-top: 10px;
+ }
+
#upload {
background: #2ecc71;
}
#materials-presets a.active {
background-color: blue;
}
+
+ .text-scroll a, #text-scroll a:hover {
+ text-decoration: none;
+ color: #333;
+ }
</style>
</head>
<body>
<div id="menu" class="container-fluid vertical-center">
<div class="col-md-2 col-md-push-4 col-xs-4 col-xs-push-2">
- <div id="menu-container">
- <div>
+ <div class="menu-container">
+ <div class="text-scroll">
<span>
- <i class="fa fa-upload"></i><h2>UPLOAD</h2>
+ <a href="#upload"><i class="fa fa-upload"></i><h2>UPLOAD</h2></a>
</span>
</div>
</div>
</div>
<div class="col-md-2 col-md-push-4 col-xs-4 col-xs-push-2">
- <div id="menu-container">
- <div>
+ <div class="menu-container">
+ <div class="text-scroll">
<span>
- <i class="fa fa-edit"></i><h2>EDIT</h2>
+ <a href="#edit"><i class="fa fa-edit"></i><h2>EDIT</h2></a>
</span>
</div>
</div>
<?php $vars = unserialize(file_get_contents($file)); ?>
<?php $hash = basename($file, ".txt"); ?>
<div class="col-lg-4 col-sm-6 col-xs-12">
- <a href="upload.php?sprite=<?php echo $hash; ?>">
- <img src="uploads/<?php echo $hash; ?>.png" class="thumbnail img-responsive">
- </a>
+ <div class="text-scroll thumbnail">
+ <span>
+ <a href="upload.php?sprite=<?php echo $hash; ?>">
+ <img src="uploads/<?php echo $hash; ?>.png" class="img-responsive">
+ </a>
+ <h2><?php echo $vars['spritename']; ?></h2>
+ </span>
+ </div>
</div>
<?php endforeach; ?>
</div>
projects / pixel-calc.git / commitdiff
