lib/wraith/gallery_template/basic_template.erb
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<style type="text/css">
.short-screenshot {
max-width: 200px;
}
.panel li{
word-wrap: break-word;
}
</style>
</head>
<body>
<div class="container">
<div class="row page-header">
<h1>List of screenshots for <%= location %> <small>taken <%= Time.now.strftime('%Y/%m/%d %H:%M:%S') %></small></h1>
</div>
<div class="row">
<div class="col-lg-2">
<div class="panel">
<div class="panel-heading">Screenshots:</div>
<ul class="list-group list-group-flush">
<% directories.keys.each do |dir| %>
<li class="list-group-item"><a href="#<%=path%><%=dir%>"><%=dir.gsub('__', '/')%></a></li>
<% end %>
</ul>
</div>
</div>
<div class="col-lg-10">
<% directories.each do |dir, sizes| %>
<% sizes.to_a.sort.each do |size, files| %>
<div class="row">
<a name="<%= dir %>"></a>
<% if threshold.nil? %>
<h2><%= dir.gsub('__', '/') %></h2>
<% else %>
<% if files[:data] > threshold %>
<h2 style="color:#CC0101"><%= dir.gsub('__', '/') %> <span class="glyphicon glyphicon-remove"></span></h2>
<% else %>
<h2><%= dir.gsub('__', '/') %></h2>
<% end %>
<% end %>
</div>
<div class="row">
<h3 class="col-lg-1 text-muted"><%=size%>px</h3>
<% files[:variants].each do |file| %>
<div class="col-lg-3">
<a href="<%=file[:filename]%>">
<img class="short-screenshot img-thumbnail" src="<%=path%><%=file[:thumb]%>">
</a>
<p class="text-center">
<a href="<%=file[:url]%>" target="_blank"><%=file[:name]%></a>
</p>
</div>
<% end %>
<div class="col-lg-3">
<% if files[:diff] %>
<a href="<%=files[:diff][:filename]%>">
<img class="short-screenshot img-thumbnail" src="<%=path%><%=files[:diff][:thumb]%>">
</a>
<% end %>
<p class="text-center">diff</p>
<% if threshold.nil? %>
<p class="text-center text-muted"><%=files[:data]%> % different</p>
<% else %>
<% if files[:data] > threshold %>
<p style="color:#CC0101" class="text-center text-muted"><%=files[:data]%> % different</p>
<% else %>
<p class="text-center text-muted"><%=files[:data]%> % different</p>
<% end %>
<% end %>
</div>
</div>
<% end %>
<% end %>
</div>
</div>
</div>
</body>
</html>