chaas/debshots
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Experimenting with bootstrap layouts

Browse source
This commit is contained in:
Christoph Haas 2013-11-17 15:53:52 +01:00
parent fad7634f73
commit 7999279aeb
2 changed files with 90 additions and 41 deletions
Download patch file Download diff file Expand all files Collapse all files

4
app/views/packages/_packages_search_results_grid.html.erb
View file

@ -2,7 +2,7 @@
<% if @packages.length>0 %> <% if @packages.length>0 %>
<% @packages.each do |package| %> <% @packages.each do |package| %>
<div class="col-md-3 col-sm-4"> <div class="col-xs-3">
<div class="thumbnail"> <div class="thumbnail">
<% if package.screenshots.length>0 %> <% if package.screenshots.length>0 %>
<% screenshot = package.screenshots.first %> <% screenshot = package.screenshots.first %>
@ -18,7 +18,7 @@
%> %>
</div> </div>
<h3><%= package.name %></h3> <h3><%= package.name %></h3>
<p><%= package.description %></p> <p class="pkgdescr"><%= package.description %></p>
<% else %> <% else %>
<div style="text-align: center; height: 120px"> <div style="text-align: center; height: 120px">
<%= link_to image_tag("/thumbnail-404.png"), <%= link_to image_tag("/thumbnail-404.png"),

55
app/views/packages/index.html.erb
View file

@ -1,12 +1,12 @@
<nav class="navbar navbar-default"> <nav class="navbar navbar-default">
<div class="container">
<a class="navbar-brand" href="#"> <a class="navbar-brand" href="#">
Debian Screenshots Debian Screenshots
</a> </a>
<%= form_tag(url_for, method: 'get', class: 'navbar-form navbar-left form-search', role: 'search') do %> <%= form_tag(url_for, method: 'get', class: 'navbar-form navbar-left form-search', role: 'search') do %>
<div class="form-group"> <div class="form-group">
<%= search_field_tag('query', params['query'], placeholder:'Search...', size:30, <%= search_field_tag('query', params['query'], placeholder:'Search...', size:30, maxlength:200, class:'form-control') %>
maxlength:200, class:'form-control') %>
</div> <button type="submit" class="btn btn-default">Submit</button> </div> <button type="submit" class="btn btn-default">Submit</button>
<%= hidden_field_tag('show', params['show']) %> <%= hidden_field_tag('show', params['show']) %>
<% end %> <!-- /form --> <% end %> <!-- /form -->
@ -22,7 +22,7 @@
<!-- Button group to show packages with screenshots or all packages --> <!-- Button group to show packages with screenshots or all packages -->
<span class="navbar-text">Show:</span> <span class="navbar-text">Show:</span>
<div class="navbar-nav btn-group"> <div class="nav navbar-nav btn-group">
<%= link_to 'All packages', url_for(params.merge(:show=>'all')), <%= link_to 'All packages', url_for(params.merge(:show=>'all')),
{class: 'navbar-btn btn btn-default' + (params['show']=='onlywith' ? '' : ' active')} %> {class: 'navbar-btn btn btn-default' + (params['show']=='onlywith' ? '' : ' active')} %>
<%= link_to 'Only with screenshots', url_for(params.merge(:show=>'onlywith')), <%= link_to 'Only with screenshots', url_for(params.merge(:show=>'onlywith')),
@ -32,6 +32,7 @@
<ul class="nav navbar-nav navbar-right"> <ul class="nav navbar-nav navbar-right">
<li><a href="#">Login</a></li> <li><a href="#">Login</a></li>
</ul> </ul>
</div>
</nav> </nav>
<div class="container"> <div class="container">
@ -52,3 +53,51 @@
</p> </p>
<% end %> <% end %>
</div> </div>
<div class="container">
<div class="col-xs-3" style="border-right: 1px solid gray">
<form role="form">
<div class="form-group">
<label for="search">Search…</label>
<input type="search" class="form-control" id="search" placeholder="What are you looking for?">
</div>
<div class="form-group">
<label for="onlywith">Show packages…</label>
<div class="radio">
<label>
<input type="radio" name="onlywith" value="all" checked>
All
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="onlywith" value="onlywith">
Only those with screenshots
</label>
</div>
</div>
<div class="form-group">
<label for="display">Show as…</label>
<div class="radio">
<label>
<input type="radio" name="display" value="grid" checked>
Grid
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="display" value="list">
List
</label>
</div>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
<div class="col-xs-9>">
Rechts
</div>
</div>