Skip to content

Instantly share code, notes, and snippets.

@r2p2

r2p2/index.html

Created September 7, 2014 23:05
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save r2p2/f04c72f97a2d3623f125 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save r2p2/f04c72f97a2d3623f125 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script>
$(window).resize(function() {
$('.panel.full-height').each(function() {
$(this).height($(window).height() - $(this).offset().top - 20);
});
$('#results').height($(window).height() - $('#results').offset().top - 106);
});
setTimeout(function() { $(window).resize(); },200);
</script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="page-header">
<h1><img src="http://www.rr-ortner.com/fileadmin/template/layout/img/logo-ortner.png"/>Cluster Controller <small>Subtext for header</small></h1>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-sm-2" style="padding-right:0px">
<div class="panel panel-default full-height">
<div class="panel-heading">
<h3 class="panel-title">Cluster</h3>
</div>
<div style="overflow-y:auto; height:90%">
<a href="#" class="list-group-item">Alle</a>
<a href="#" class="list-group-item active">NN200C<span class="badge">4</span></a>
<a href="#" class="list-group-item">NF</a>
<a href="#" class="list-group-item">NI</a>
<a href="#" class="list-group-item">SP<span class="badge">8</span></a>
</div>
</div>
</div>
<div class="col-sm-2" style="padding-right:0px">
<div class="panel panel-default full-height">
<div class="panel-heading">
<h3 class="panel-title">Zellen</h3>
</div>
<div style="overflow-y:auto; height:90%">
<a href="#" class="list-group-item">Alle</a>
<a href="#" class="list-group-item">NN200C-I01</a>
<a href="#" class="list-group-item active">NN200C-I02<span class="badge">3</span></a>
<a href="#" class="list-group-item">NN200C-R01</a>
<a href="#" class="list-group-item">NN200C-R02</a>
<a href="#" class="list-group-item">NN200C-R03</a>
<a href="#" class="list-group-item">NN200C-R04<span class="badge">1</span></a>
<a href="#" class="list-group-item">NN200C-R05</a>
<a href="#" class="list-group-item">NN200C-X01</a>
<a href="#" class="list-group-item">NN200C-C01</a>
<a href="#" class="list-group-item">NN200C-C01</a>
</div>
</div>
</div>
<div class="col-md-8" style="padding-left:0px">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<ul class="nav nav-tabs nav-justified" role="tablist">
<li><a href="#">Übersicht</a></li>
<li class="active"><a href="#">Carrier</a></li>
<li><a href="#">Transfers</a></li>
<li><a href="#">Batches</a></li>
<li><a href="#">Alarme</a></li>
</ul>
</div>
</div>
<div class="row" style="padding-top:5px">
<div class="col-md-9" style="padding-right:0px">
<table class="table table-striped table-hover">
<tr>
<th>ID</th>
<th>Platz</th>
<th>Ziel</th>
<th>Status</th>
</tr>
<tr>
<td>E00700076F3EEF11</td>
<td>NN200C-I01:MI1</td>
<td>NN200C-I01:CI2</td>
<td>transferring</td>
</tr>
<tr>
<td>E00700076F3EEF11</td>
<td>NN200C-I01:MI1</td>
<td>NN200C-I01:CI2</td>
<td>transferring</td>
</tr>
<tr>
<td>E00700076F3EEF11</td>
<td>NN200C-I01:MI1</td>
<td>NN200C-I01:CI2</td>
<td>transferring</td>
</tr>
<tr>
<td>E00700076F3EEF11</td>
<td>NN200C-I01:MI1</td>
<td>NN200C-I01:CI2</td>
<td>transferring</td>
</tr>
<tr>
<td>E00700076F3EEF11</td>
<td>NN200C-I01:MI1</td>
<td>NN200C-I01:CI2</td>
<td>transferring</td>
</tr>
<tr>
<td>E00700076F3EEF11</td>
<td>NN200C-I01:MI1</td>
<td>NN200C-I01:CI2</td>
<td>transferring</td>
</tr>
<tr>
<td>E00700076F3EEF11</td>
<td>NN200C-I01:MI1</td>
<td>NN200C-I01:CI2</td>
<td>transferring</td>
</tr>
<tr>
<td>E00700076F3EEF11</td>
<td>NN200C-I01:MI1</td>
<td>NN200C-I01:CI2</td>
<td>transferring</td>
</tr>
<tr>
<td>E00700076F3EEF11</td>
<td>NN200C-I01:MI1</td>
<td>NN200C-I01:CI2</td>
<td>transferring</td>
</tr>
</table>
</div>
<div class="col-md-3">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Carrier</h3>
</div>
<div class="panel-body text-center">
<div class="btn-group-vertical btn-block">
<button type="button" class="btn btn-default">Bewegen</button>
<button type="button" class="btn btn-default">Löschen</button>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Filter</h3>
</div>
<div class="panel-body text-center">
<div class="btn-group-vertical btn-block">
<input type="text" class="form-control" placeholder="Suchbegriff">
<button type="button" class="btn btn-default">Zurücksetzen</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery.min.js"><\/script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"><\/script>
<script>
$(window).resize(function() {
$('.panel.full-height').each(function() {
$(this).height($(window).height() - $(this).offset().top - 20);
});
$('#results').height($(window).height() - $('#results').offset().top - 106);
});
setTimeout(function() { $(window).resize(); },200);
<\/script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="page-header">
<h1><img src="http://www.rr-ortner.com/fileadmin/template/layout/img/logo-ortner.png"/>Cluster Controller <small>Subtext for header</small></h1>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-sm-2" style="padding-right:0px">
<div class="panel panel-default full-height">
<div class="panel-heading">
<h3 class="panel-title">Cluster</h3>
</div>
<div style="overflow-y:auto; height:90%">
<a href="#" class="list-group-item">Alle</a>
<a href="#" class="list-group-item active">NN200C<span class="badge">4</span></a>
<a href="#" class="list-group-item">NF</a>
<a href="#" class="list-group-item">NI</a>
<a href="#" class="list-group-item">SP<span class="badge">8</span></a>
</div>
</div>
</div>
<div class="col-sm-2" style="padding-right:0px">
<div class="panel panel-default full-height">
<div class="panel-heading">
<h3 class="panel-title">Zellen</h3>
</div>
<div style="overflow-y:auto; height:90%">
<a href="#" class="list-group-item">Alle</a>
<a href="#" class="list-group-item">NN200C-I01</a>
<a href="#" class="list-group-item active">NN200C-I02<span class="badge">3</span></a>
<a href="#" class="list-group-item">NN200C-R01</a>
<a href="#" class="list-group-item">NN200C-R02</a>
<a href="#" class="list-group-item">NN200C-R03</a>
<a href="#" class="list-group-item">NN200C-R04<span class="badge">1</span></a>
<a href="#" class="list-group-item">NN200C-R05</a>
<a href="#" class="list-group-item">NN200C-X01</a>
<a href="#" class="list-group-item">NN200C-C01</a>
<a href="#" class="list-group-item">NN200C-C01</a>
</div>
</div>
</div>
<div class="col-md-8" style="padding-left:0px">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<ul class="nav nav-tabs nav-justified" role="tablist">
<li><a href="#">Übersicht</a></li>
<li class="active"><a href="#">Carrier</a></li>
<li><a href="#">Transfers</a></li>
<li><a href="#">Batches</a></li>
<li><a href="#">Alarme</a></li>
</ul>
</div>
</div>
<div class="row" style="padding-top:5px">
<div class="col-md-9" style="padding-right:0px">
<table class="table table-striped table-hover">
<tr>
<th>ID</th>
<th>Platz</th>
<th>Ziel</th>
<th>Status</th>
</tr>
<tr>
<td>E00700076F3EEF11</td>
<td>NN200C-I01:MI1</td>
<td>NN200C-I01:CI2</td>
<td>transferring</td>
</tr>
<tr>
<td>E00700076F3EEF11</td>
<td>NN200C-I01:MI1</td>
<td>NN200C-I01:CI2</td>
<td>transferring</td>
</tr>
<tr>
<td>E00700076F3EEF11</td>
<td>NN200C-I01:MI1</td>
<td>NN200C-I01:CI2</td>
<td>transferring</td>
</tr>
<tr>
<td>E00700076F3EEF11</td>
<td>NN200C-I01:MI1</td>
<td>NN200C-I01:CI2</td>
<td>transferring</td>
</tr>
<tr>
<td>E00700076F3EEF11</td>
<td>NN200C-I01:MI1</td>
<td>NN200C-I01:CI2</td>
<td>transferring</td>
</tr>
<tr>
<td>E00700076F3EEF11</td>
<td>NN200C-I01:MI1</td>
<td>NN200C-I01:CI2</td>
<td>transferring</td>
</tr>
<tr>
<td>E00700076F3EEF11</td>
<td>NN200C-I01:MI1</td>
<td>NN200C-I01:CI2</td>
<td>transferring</td>
</tr>
<tr>
<td>E00700076F3EEF11</td>
<td>NN200C-I01:MI1</td>
<td>NN200C-I01:CI2</td>
<td>transferring</td>
</tr>
<tr>
<td>E00700076F3EEF11</td>
<td>NN200C-I01:MI1</td>
<td>NN200C-I01:CI2</td>
<td>transferring</td>
</tr>
</table>
</div>
<div class="col-md-3">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Carrier</h3>
</div>
<div class="panel-body text-center">
<div class="btn-group-vertical btn-block">
<button type="button" class="btn btn-default">Bewegen</button>
<button type="button" class="btn btn-default">Löschen</button>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Filter</h3>
</div>
<div class="panel-body text-center">
<div class="btn-group-vertical btn-block">
<input type="text" class="form-control" placeholder="Suchbegriff">
<button type="button" class="btn btn-default">Zurücksetzen</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment