Trying to get look right for forms using Bootstrap 3.0

This commit is contained in:
Christoph Haas 2013-08-22 00:13:37 +02:00
parent 6aeb0600a6
commit c275f3e52d
2 changed files with 20 additions and 55 deletions

View file

@ -2,18 +2,15 @@
<% if @packages.length>0 %>
<%= paginate @packages %>
<ul class="thumbnails">
<% @packages.each do |package| %>
<li class="span3">
<div class="col-md-3">
<div class="thumbnail">
<% if package.screenshots.length>0 %>
<% screenshot = package.screenshots.first %>
<div style="text-align: center; height: 120px">
<%= link_to (
image_tag(screenshot.image_url('small'))
),
<%= link_to image_tag(screenshot.image_url('small')),
screenshot.image_url('large'),
:class => 'fancybox',
:class => 'fancybox thumbnail',
:title => (
"#{package.description}" +
(screenshot.description.blank? ? '' : " (#{screenshot.description})")
@ -31,9 +28,6 @@
<p><%= package.description %></p>
<% end %>
</div>
</li>
</div>
<% end %>
</ul>
<% end %>
<!--<button class="btn btn-large btn-block" type="button">More screenshots…</button>-->

View file

@ -1,4 +1,4 @@
<nav class="navbar navbar-default" role="navigation"
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
@ -6,7 +6,9 @@
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
<a class="navbar-brand" href="#">
Debian Screenshots
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
@ -14,46 +16,25 @@
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<%= form_tag(url_for, method: "get", class: "navbar-form navbar-left form-search", role: "search") do %>
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<% end %>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
<li><a href="#">Login</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
<div class="container">
<h1>Search for a package/description:</h1>
<%= form_tag(url_for, method: "get", class: "form-search") do %>
<div class="btn-toolbar">
<%= form_tag(url_for, method: "get", class: "form-search") do %>
<div class="input-append">
<%= text_field_tag :search, params[:search], autofocus: true, placeholder: 'What are you looking for...', class: "search-query" %>
<button class="btn" type="submit">Search!</button>
@ -70,28 +51,18 @@
<!-- <%= check_box_tag 'with_screenshots', 'yes', params[:with_screenshots] %> -->
<!-- Show only packages with screenshots -->
<!--</label>-->
</div>
<div class="btn-toolbar">
<div class="btn-group">
<a class="btn" href="#"><i class="icon-align-left"></i></a>
<a class="btn" href="#"><i class="icon-align-center"></i></a>
<a class="btn" href="#"><i class="icon-align-right"></i></a>
<a class="btn" href="#"><i class="icon-align-justify"></i></a>
</div>
</div>
</div>
<div class="btn-toolbar">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" name="options" id="option1"> Option 1
<label class="btn btn-default">
<input type="radio" name="display" value="grid"> <span class="glyphicon glyphicon-th"></span>
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2"> Option 2
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option3"> Option 3
<label class="btn btn-default">
<input type="radio" name="display" value="list"> <span class="glyphicon glyphicon-th-list"></span>
</label>
</div>
</div>
<% end %>