Skip to content

Commit

Permalink
Update form to use Twitter Bootstraps built in form classes.
Browse files Browse the repository at this point in the history
  • Loading branch information
@scotdalton
scotdalton committed Sep 25, 2012
1 parent 584c5cc commit 2a8ad86
Show file tree
Hide file tree
Showing 2 changed files with 99 additions and 82 deletions.
44 changes: 36 additions & 8 deletions app/assets/stylesheets/umlaut.css.scss
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,15 @@
// Bootstrap Variables
$baseFontSize: 12px;
$baseLineHeight: 12px;
$linkColor: #0066CC;
$azLinkColor: $linkColor;
$azBorderColor: #bbb;
$azBackground: #eee;
$clBackground: $azBackground;
// Umlaut Variables
// General Styles
$umlautBorderColor: #EEB211;
$umlautBackgroundColor: #FFFDEA;
// A-Z List
$umlautAzLinkColor: $linkColor;
$umlautAzBorderColor: #bbb;
$umlautAzBackground: #eee;
@import "bootstrap";
@import "bootstrap-responsive";
@mixin inner-padding {
Expand Down Expand Up @@ -47,6 +50,20 @@ legend {
}
}

label {
margin: {
left: 10px;
top: 10px;
bottom: 10px;
}
}

select {
height: auto; /* In IE7, the height of the select element cannot be changed by height, only font-size */
*margin-top: 4px; /* For IE7, add top margin to align select with labels */
line-height: auto;
}

.umlaut-container {
padding: 0px;
margin: {
Expand Down Expand Up @@ -89,7 +106,7 @@ legend {
font-size:11px;
padding: 5px;
border: 1px solid #ebb211;
background-color: $azBackground;
background-color: $umlautAzBackground;
margin-bottom: 12px;
margin-top: 12px;
a:link {
Expand All @@ -107,12 +124,12 @@ legend {
font-size: 1.1em;
font-weight: bold;
padding:.15em .3em .15em .3em;
border: 1px solid $azBorderColor;
border: 1px solid $umlautAzBorderColor;
text-decoration: none;
color: $azLinkColor;
color: $umlautAzLinkColor;
line-height: 2em;
&:hover {
background-color: $azBackground;
background-color: $umlautAzBackground;
}
}
}
Expand Down Expand Up @@ -144,8 +161,19 @@ dl.citation {
text-align: right;
}

.form-inline {
.control-group {
display: inline;
}
}

@media (max-width: 767px) {
.citation_link {
text-align: left;
}
.form-inline {
.control-group {
display: block;
}
}
}
137 changes: 63 additions & 74 deletions app/views/search/journals.html.erb
View file
Original file line number Diff line number Diff line change
@@ -1,76 +1,65 @@
<div class="row">
<div class="span12">
<h2>Journals</h2>
<%= render :partial=>"a_to_z" %>
<% if flash[:error] %>
<div id="error" class="notice citationLinker"><strong>(!) Problems:</strong> <%= flash[:error] %></div>
<% end %>
<h3>Looking for a specific journal or article</h3>
<%= form_tag(@submit_hash, {:method => "get", :class => "OpenURL form-search", :name => "OpenURL", :id=>"OpenURL"}) %>
<div class="citationLinker">
<fieldset>
<legend>Enter the journal title or the ISSN. If you have both the journal title and ISSN, use the ISSN.</legend>
<%= hidden_field_tag "rfr_id", "info:sid/sfxit.com:citation" %>
<%= hidden_field_tag "rft.date", "" %>
<%= hidden_field_tag "rft.title", "", {:class => "rft_title"} %>
<%= hidden_field_tag "rft.object_id", "", {:class => "rft_object_id"} %>
<div class="row-fluid">
<div class="span6">
<%= label :journal, :title, "Journal Title:" %>
<%= text_field :journal, :title, {:name=>'rft.jtitle', :class=>"title_search input-xlarge"} %>
<select name="umlaut.title_search_type" class="sfx_title_search input-medium">
<%= options_for_select({"contains" => "contains", "begins with" => "begins", "exact match" => "exact"}, params["umlaut.title_search_type"]) %>
</select>
</div>
<div class="span2">
<%= label :journal, :isbn, "ISSN:" %>
<%= text_field :journal, :isbn, {:name=>'rft.issn', :max_length => "9", :class=>"issn input-small"} %>
</div>
</div>
</fieldset>
<h2>Journals</h2>
<%= render :partial=>"a_to_z" %>
<% if flash[:error] %>
<div id="error" class="notice citationLinker"><strong>(!) Problems:</strong> <%= flash[:error] %></div>
<% end %>
<h3>Looking for a specific journal or article</h3>
<%= form_tag(@submit_hash, {:method => "get", :class => "OpenURL form-inline", :name => "OpenURL", :id=>"OpenURL"}) %>
<div class="citationLinker">
<fieldset>
<legend>Enter the journal title or the ISSN. If you have both the journal title and ISSN, use the ISSN.</legend>
<%= hidden_field_tag "rfr_id", "info:sid/sfxit.com:citation" %>
<%= hidden_field_tag "rft.date", "" %>
<%= hidden_field_tag "rft.title", "", {:class => "rft_title"} %>
<%= hidden_field_tag "rft.object_id", "", {:class => "rft_object_id"} %>
<div class="control-group">
<%= label :journal, :title, "Journal Title:" %>
<%= text_field :journal, :title, {:name=>'rft.jtitle', :class=>"title_search input-xlarge"} %>
<select name="umlaut.title_search_type" class="sfx_title_search input-medium">
<%= options_for_select({"contains" => "contains", "begins with" => "begins", "exact match" => "exact"}, params["umlaut.title_search_type"]) %>
</select>
</div>
<div class="citationLinker">
<fieldset>
<legend>Optional information - Enter as much as you know of the following:</legend>
<div class="row-fluid">
<div class="span4">
<label for="year">Date:</label>
<%= label :journal, :volume, "Volume:" %>
<%= date %>
</div>
<div class="span2">
<%= label :journal, :volume, "Volume:" %>
<%= text_field :journal, :volume, {:name=>'rft.volume', :max_length => "5", :class=>"volume input-small"} %>
</div>
<div class="span2">
<%= label :journal, :issue, "Issue:" %>
<%= text_field :journal, :issue, {:name=>'rft.issue', :class=>"issue input-small"} %>
</div>
<div class="span2">
<%= label :journal, :spage, "Start page:" %>
<%= text_field :journal, :spage, {:name=>'rft.spage', :class=>"spage input-small"} %>
</div>
</div>
<div class="row-fluid">
<div class="span4">
<label for="rft_id_type">DOI or Pubmed Identifier:</label>
<select id="rft_id_type" name="rft_id_type" class="input-small">
<option value="doi">DOI:</option>
<option value="pmid">PMID:</option>
</select>
<input name="rft_id_value" class="input-small" type="text" value="">
</div>
</div>
</fieldset>
</div>
<%= submit_tag "Search", {:name=>"Generate_OpenURL2"} %>
</form>
<h3 class="help-block separator"><i class="icon-question-sign"></i> Having Trouble?</h3>
<ul class="help-block">
<li>Try entering less information about your article. If one piece of information is wrong, it could be causing the problem.</li>
<% if umlaut_config.help_url %>
<li>For technical support, including access problems, please <a href="<%= umlaut_config.help_url %>">contact us</a>.</li>
<% end %>
</ul>
<div class="control-group">
<%= label :journal, :isbn, "ISSN:" %>
<%= text_field :journal, :isbn, {:name=>'rft.issn', :max_length => "9", :class=>"issn input-small"} %>
</div>
</fieldset>
</div>
</div>
<div class="citationLinker">
<fieldset>
<legend>Optional information - Enter as much as you know of the following:</legend>
<div class="control-group">
<label for="year">Date:</label>
<%= date %>
</div>
<div class="control-group">
<%= label :journal, :volume, "Volume:" %>
<%= text_field :journal, :volume, {:name=>'rft.volume', :max_length => "5", :class=>"volume input-small"} %>
</div>
<div class="control-group">
<%= label :journal, :issue, "Issue:" %>
<%= text_field :journal, :issue, {:name=>'rft.issue', :class=>"issue input-small"} %>
</div>
<div class="control-group">
<%= label :journal, :spage, "Start page:" %>
<%= text_field :journal, :spage, {:name=>'rft.spage', :class=>"spage input-small"} %><br />
</div>
<div class="control-group">
<label for="rft_id_type">DOI or Pubmed Identifier:</label>
<select id="rft_id_type" name="rft_id_type" class="input-small">
<option value="doi">DOI:</option>
<option value="pmid">PMID:</option>
</select>
<input name="rft_id_value" class="input-small" type="text" value="">
</div>
</fieldset>
</div>
<%= submit_tag "Search", {:name=>"Generate_OpenURL2"} %>
</form>
<h3 class="help-block separator"><i class="icon-question-sign"></i> <span>Having Trouble?</span></h3>
<ul class="help-block unstyled">
<li>Try entering less information about your article. If one piece of information is wrong, it could be causing the problem.</li>
<% if umlaut_config.help_url %>
<li>For technical support, including access problems, please <a href="<%= umlaut_config.help_url %>">contact us</a>.</li>
<% end %>
</ul>

0 comments on commit 2a8ad86

Please sign in to comment.