Experimenting with bootstrap layouts
This commit is contained in:
parent
fad7634f73
commit
7999279aeb
2 changed files with 90 additions and 41 deletions
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
<% if @packages.length>0 %>
|
||||
<% @packages.each do |package| %>
|
||||
<div class="col-md-3 col-sm-4">
|
||||
<div class="col-xs-3">
|
||||
<div class="thumbnail">
|
||||
<% if package.screenshots.length>0 %>
|
||||
<% screenshot = package.screenshots.first %>
|
||||
|
|
@ -18,7 +18,7 @@
|
|||
%>
|
||||
</div>
|
||||
<h3><%= package.name %></h3>
|
||||
<p><%= package.description %></p>
|
||||
<p class="pkgdescr"><%= package.description %></p>
|
||||
<% else %>
|
||||
<div style="text-align: center; height: 120px">
|
||||
<%= link_to image_tag("/thumbnail-404.png"),
|
||||
|
|
|
|||
|
|
@ -1,54 +1,103 @@
|
|||
<nav class="navbar navbar-default">
|
||||
<a class="navbar-brand" href="#">
|
||||
Debian Screenshots
|
||||
</a>
|
||||
<div class="container">
|
||||
<a class="navbar-brand" href="#">
|
||||
Debian Screenshots
|
||||
</a>
|
||||
|
||||
<%= form_tag(url_for, method: 'get', class: 'navbar-form navbar-left form-search', role: 'search') do %>
|
||||
<div class="form-group">
|
||||
<%= search_field_tag('query', params['query'], placeholder:'Search...', size:30,
|
||||
maxlength:200, class:'form-control') %>
|
||||
</div> <button type="submit" class="btn btn-default">Submit</button>
|
||||
<%= form_tag(url_for, method: 'get', class: 'navbar-form navbar-left form-search', role: 'search') do %>
|
||||
<div class="form-group">
|
||||
<%= search_field_tag('query', params['query'], placeholder:'Search...', size:30, maxlength:200, class:'form-control') %>
|
||||
</div> <button type="submit" class="btn btn-default">Submit</button>
|
||||
<%= hidden_field_tag('show', params['show']) %>
|
||||
<% end %> <!-- /form -->
|
||||
<% end %> <!-- /form -->
|
||||
|
||||
<!-- Button group for grid/list view -->
|
||||
<span class="navbar-text">View:</span>
|
||||
<div class="navbar-nav btn-group">
|
||||
<%= link_to 'Grid', url_for(package_grid_path),
|
||||
{class: 'navbar-btn btn btn-default' + (params['display']=='grid' ? ' active' : '')} %>
|
||||
<%= link_to 'List', url_for(package_list_path),
|
||||
{class: 'navbar-btn btn btn-default' + (params['display']=='grid' ? '' : ' active')} %>
|
||||
<!-- Button group for grid/list view -->
|
||||
<span class="navbar-text">View:</span>
|
||||
<div class="navbar-nav btn-group">
|
||||
<%= link_to 'Grid', url_for(package_grid_path),
|
||||
{class: 'navbar-btn btn btn-default' + (params['display']=='grid' ? ' active' : '')} %>
|
||||
<%= link_to 'List', url_for(package_list_path),
|
||||
{class: 'navbar-btn btn btn-default' + (params['display']=='grid' ? '' : ' active')} %>
|
||||
</div>
|
||||
|
||||
<!-- Button group to show packages with screenshots or all packages -->
|
||||
<span class="navbar-text">Show:</span>
|
||||
<div class="nav navbar-nav btn-group">
|
||||
<%= link_to 'All packages', url_for(params.merge(:show=>'all')),
|
||||
{class: 'navbar-btn btn btn-default' + (params['show']=='onlywith' ? '' : ' active')} %>
|
||||
<%= link_to 'Only with screenshots', url_for(params.merge(:show=>'onlywith')),
|
||||
{class: 'navbar-btn btn btn-default' + (params['show']=='onlywith' ? ' active' : '')} %>
|
||||
</div>
|
||||
|
||||
<ul class="nav navbar-nav navbar-right">
|
||||
<li><a href="#">Login</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Button group to show packages with screenshots or all packages -->
|
||||
<span class="navbar-text">Show:</span>
|
||||
<div class="navbar-nav btn-group">
|
||||
<%= link_to 'All packages', url_for(params.merge(:show=>'all')),
|
||||
{class: 'navbar-btn btn btn-default' + (params['show']=='onlywith' ? '' : ' active')} %>
|
||||
<%= link_to 'Only with screenshots', url_for(params.merge(:show=>'onlywith')),
|
||||
{class: 'navbar-btn btn btn-default' + (params['show']=='onlywith' ? ' active' : '')} %>
|
||||
</div>
|
||||
|
||||
<ul class="nav navbar-nav navbar-right">
|
||||
<li><a href="#">Login</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<div class="container">
|
||||
<% if @packages.any? %>
|
||||
<ul class="pager">
|
||||
<li class="previous"><%= link_to_previous_page @packages, raw('← Previous'), :params => params %></li>
|
||||
<li>Page #<%= params[:page] or 1 %></li>
|
||||
<li class="next"><%= link_to_next_page @packages, raw('Next →'), :params => params %></li>
|
||||
</ul>
|
||||
<% if params[:display]=='grid' %>
|
||||
<%= render 'packages_search_results_grid', object: @packages %>
|
||||
<% else %>
|
||||
<%= render 'packages_search_results_list', object: @packages %>
|
||||
<% end %>
|
||||
<ul class="pager">
|
||||
<li class="previous"><%= link_to_previous_page @packages, raw('← Previous'), :params => params %></li>
|
||||
<li>Page #<%= params[:page] or 1 %></li>
|
||||
<li class="next"><%= link_to_next_page @packages, raw('Next →'), :params => params %></li>
|
||||
</ul>
|
||||
<% if params[:display]=='grid' %>
|
||||
<%= render 'packages_search_results_grid', object: @packages %>
|
||||
<% else %>
|
||||
<%= render 'packages_search_results_list', object: @packages %>
|
||||
<% end %>
|
||||
<% else %>
|
||||
<p class="alert alert-warning">
|
||||
Oh snap… I did not find software packages like that. Try looking for something else.
|
||||
</p>
|
||||
<% end %>
|
||||
</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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue