cst1/openstreetmap-website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Refactor away from global form control styling

Browse source 
This enables forms to be converted one-by-one to bootstrap. Without this
refactoring, these global styles interfere with form control styling from
bootstrap.

The rearrangement of the search and directions styling is to solve CSS selector specitivity issues.
This commit is contained in:
Andy Allan 2020-06-10 20:33:18 +02:00
parent 5c3f549492
commit 627f2493fa
26 changed files with 224 additions and 226 deletions
Download patch file Download diff file Expand all files Collapse all files

2
app/assets/javascripts/leaflet.layers.js
View file

@ -119,7 +119,7 @@ L.OSM.layers = function (options) {
.attr("class", "deemphasize")
.appendTo(overlaySection);
var overlays = $("<ul class='list-unstyled'>")
var overlays = $("<ul class='list-unstyled standard-form'>")
.appendTo(overlaySection);
var addOverlay = function (layer, name, maxArea) {

391
app/assets/stylesheets/common.scss
View file

@ -734,118 +734,6 @@ header .search_forms,
display: none;
}
.search_form,
.directions_form {
position: relative;
padding: $lineheight/2;
background-color: $lightgrey;
.query_wrapper {
position: relative;
overflow: hidden;
border-radius: 2px 0 0 2px;
}
input[type=text] {
width: 100%;
height: 30px;
transition: 300ms linear;
}
input[type=text].overflow {
border-right: none;
border-radius: 3px 0px 0px 3px;
}
input:focus {
outline: none;
box-shadow: 0px 0px 7px $vibrant-green;
}
input[type=submit].float {
float: right;
width: auto;
min-width: 0;
border-radius: 0 2px 2px 0;
}
input.error {
background-color: rgba($red, 0.4);
}
select {
/* this next line is to polyfill the vertical alignment of text within a select element,
* which is different between firefox and chrome. */
padding: 0.3em 0;
}
.query_options {
text-align: right;
font-size: 10px;
color: $blue;
}
.describe_location {
position: absolute;
top: 6px;
right: 6px;
font-size: 10px;
color: $blue;
}
.switch_link {
float: right;
width: auto;
min-width: 0;
margin-left: 6px;
}
img.button {
display: block;
width: 20px;
height: 20px;
}
span.force_width {
width: 100%;
padding-right: 25px;
display: block;
}
select.routing_engines {
min-height: 30px;
margin: 0px 0px 5px 25px;
}
input.routing_go {
min-width: 100px;
float: right;
}
div.header {
width: 100%;
height: 30px;
}
div.line {
width: 100%;
margin: 0px 0px 5px 0px;
}
div.loader_copy {
display: none;
img {
vertical-align: middle;
}
}
a.reverse_directions {
cursor: pointer;
margin: 0px 0px 5px 25px;
}
}
/* Rules for the map key which appears in the popout sidebar */
#mapkey {
@ -1774,44 +1662,205 @@ tr.turn:hover {
float: left;
margin-top: 5px;
}
}
#remember_me_openid {
display: block;
}
select {
padding: 2px;
}
input[type="checkbox"],
input[type="radio"] {
margin-right: 5px;
}
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
textarea {
color: #222;
background-color: #fff;
border: 1px solid $grey;
border-radius: 3px;
padding: 2px 5px;
margin: 0;
width: 200px;
&.field_with_errors {
border: 2px solid #ff7070;
#remember_me_openid {
display: block;
}
}
textarea {
padding: 5px;
width: 100%;
min-height: 50px;
resize: vertical;
select {
padding: 2px;
}
input[type="checkbox"],
input[type="radio"] {
margin-right: 5px;
}
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
textarea {
color: #222;
background-color: #fff;
border: 1px solid $grey;
border-radius: 3px;
padding: 2px 5px;
margin: 0;
width: 200px;
&.field_with_errors {
border: 2px solid #ff7070;
}
}
textarea {
padding: 5px;
width: 100%;
min-height: 50px;
resize: vertical;
}
/* Utility for general button styles */
input[type="button"],
input[type="submit"],
input[type="reset"],
a.button {
cursor: pointer;
border: 0;
display: inline-block;
padding: $lineheight/4 $lineheight/2;
min-height: 20px + $lineheight/2;
min-width: 120px;
margin: 0 0 $lineheight/2 0;
color: white;
background: $blue;
text-align: center;
border-radius: 2px;
&:hover {
background: darken($blue, $hovercolor);
text-decoration: none;
}
&.deemphasize {
background: $lightblue;
&:hover {
background: darken($lightblue, $hovercolor);
}
}
&:disabled {
background: $lightgrey;
&:hover {
background: $lightgrey;
}
}
&:last-child {
margin-bottom: 0;
}
}
input[type="button"],
input[type="submit"],
input[type="reset"] {
line-height: normal;
}
a.button {
line-height: 20px;
}
.search_form,
.directions_form {
position: relative;
padding: $lineheight/2;
background-color: $lightgrey;
.query_wrapper {
position: relative;
overflow: hidden;
border-radius: 2px 0 0 2px;
}
input[type=text] {
width: 100%;
height: 30px;
transition: 300ms linear;
}
input[type=text].overflow {
border-right: none;
border-radius: 3px 0px 0px 3px;
}
input:focus {
outline: none;
box-shadow: 0px 0px 7px $vibrant-green;
}
input[type=submit].float {
float: right;
width: auto;
min-width: 0;
border-radius: 0 2px 2px 0;
}
input.error {
background-color: rgba($red, 0.4);
}
select {
/* this next line is to polyfill the vertical alignment of text within a select element,
* which is different between firefox and chrome. */
padding: 0.3em 0;
}
.query_options {
text-align: right;
font-size: 10px;
color: $blue;
}
.describe_location {
position: absolute;
top: 6px;
right: 6px;
font-size: 10px;
color: $blue;
}
.switch_link {
float: right;
width: auto;
min-width: 0;
margin-left: 6px;
}
img.button {
display: block;
width: 20px;
height: 20px;
}
span.force_width {
width: 100%;
padding-right: 25px;
display: block;
}
select.routing_engines {
min-height: 30px;
margin: 0px 0px 5px 25px;
}
input.routing_go {
min-width: 100px;
float: right;
}
div.header {
width: 100%;
height: 30px;
}
div.line {
width: 100%;
margin: 0px 0px 5px 0px;
}
div.loader_copy {
display: none;
img {
vertical-align: middle;
}
}
a.reverse_directions {
cursor: pointer;
margin: 0px 0px 5px 25px;
}
}
}
/* Rules for user images */
@ -1891,54 +1940,6 @@ div.secondary-actions {
.inner02 { padding: 0 $lineheight;}
/* Utility for general button styles */
input[type="button"],
input[type="submit"],
input[type="reset"],
a.button {
cursor: pointer;
border: 0;
display: inline-block;
padding: $lineheight/4 $lineheight/2;
min-height: 20px + $lineheight/2;
min-width: 120px;
margin: 0 0 $lineheight/2 0;
color: white;
background: $blue;
text-align: center;
border-radius: 2px;
&:hover {
background: darken($blue, $hovercolor);
text-decoration: none;
}
&.deemphasize {
background: $lightblue;
&:hover {
background: darken($lightblue, $hovercolor);
}
}
&:disabled {
background: $lightgrey;
&:hover {
background: $lightgrey;
}
}
&:last-child {
margin-bottom: 0;
}
}
input[type="button"],
input[type="submit"],
input[type="reset"] {
line-height: normal;
}
a.button {
line-height: 20px;
}
.buttons {
min-width: 200px;
input[type="submit"],

6
app/views/browse/changeset.html.erb
View file

@ -15,7 +15,7 @@
<% if current_user %>
<div class="buttons clearfix subscribe-buttons">
<form action="#">
<form action="#" class="standard-form">
<% if @changeset.subscribers.exists?(current_user.id) %>
<input class="action-button" type="submit" name="unsubscribe" value="<%= t("javascripts.changesets.show.unsubscribe") %>" data-method="POST" data-url="<%= changeset_unsubscribe_url(@changeset) %>" />
<% else %>
@ -29,7 +29,7 @@
<% if @comments.length > 0 %>
<div class='changeset-comments'>
<form action="#">
<form action="#" class="standard-form">
<ul class="list-unstyled">
<% @comments.each do |comment| %>
<% if comment.visible %>
@ -71,7 +71,7 @@
<% if current_user %>
<% unless @changeset.is_open? %>
<form action="#">
<form action="#" class="standard-form">
<textarea class="comment" name="text" cols="40" rows="5"></textarea>
<div class="buttons clearfix">
<input type="submit" name="comment" value="<%= t("javascripts.changesets.show.comment") %>" data-changeset-id="<%= @changeset.id %>" data-method="POST" data-url="<%= changeset_comment_url(@changeset) %>" disabled="1" />

2
app/views/browse/new_note.html.erb
View file

@ -7,7 +7,7 @@
<div class="note browse-section">
<p class="warning"><%= t("javascripts.notes.new.intro") %></p>
<form action="#">
<form action="#" class="standard-form">
<input type="hidden" name="lon">
<input type="hidden" name="lat">
<textarea class="comment" name="text" cols="40" rows="10" maxlength="2000" placeholder="<%= t("javascripts.notes.new.advice") %>"></textarea>

4
app/views/browse/note.html.erb
View file

@ -42,7 +42,7 @@
<% if @note.status == "open" %>
<% if current_user -%>
<form action="#">
<form action="#" class="standard-form">
<textarea class="comment" name="text" cols="40" rows="5" maxlength="2000"></textarea>
<div class="buttons clearfix">
<% if current_user.moderator? -%>
@ -54,7 +54,7 @@
</form>
<% end -%>
<% else %>
<form action="#">
<form action="#" class="standard-form">
<input type="hidden" name="text" value="">
<div class="buttons clearfix">
<% if current_user and current_user.moderator? -%>

2
app/views/diary_entries/show.html.erb
View file

@ -13,7 +13,7 @@
<%= render :partial => "diary_comment", :collection => @comments %>
</div>
<div>
<div class="standard-form">
<% if current_user %>
<h3 id="newcomment"><%= t ".leave_a_comment" %></h3>

2
app/views/friendships/make_friend.html.erb
View file

@ -2,7 +2,7 @@
<h1><%= t ".heading", :user => @new_friend.display_name %></h1>
<% end %>
<%= form_tag do %>
<%= form_tag(nil, :class => "standard-form") do %>
<% if params[:referer] -%>
<%= hidden_field_tag("referer", params[:referer]) %>
<% end -%>

2
app/views/friendships/remove_friend.html.erb
View file

@ -2,7 +2,7 @@
<h1><%= t ".heading", :user => @friend.display_name %></h1>
<% end %>
<%= form_tag do %>
<%= form_tag(nil, :class => "standard-form") do %>
<% if params[:referer] -%>
<%= hidden_field_tag("referer", params[:referer]) %>
<% end -%>

2
app/views/issues/_comments.html.erb
View file

@ -14,7 +14,7 @@
<% end %>
</div>
<br />
<div class="comment">
<div class="comment standard-form">
<%= form_for @new_comment, :url => issue_comments_path(@issue) do |f| %>
<%= richtext_area :issue_comment, :body, :cols => 10, :rows => 8, :required => true %>
<%= label_tag :reassign, t(".reassign_param") %> <%= check_box_tag :reassign, true %>

2
app/views/issues/index.html.erb
View file

@ -2,7 +2,7 @@
<h1><%= t ".title" %></h1>
<% end %>
<%= form_tag(issues_path, :method => :get) do %>
<%= form_tag(issues_path, :method => :get, :class => "standard-form") do %>
<p><%= t ".search_guidance" %></p>
<%= select_tag :status, options_for_select(Issue.aasm.states.map(&:name).map { |state| [t(".states.#{state}"), state] }, params[:status]), :include_blank => t(".select_status"), :data => { :behavior => "category_dropdown" } %>
<%= select_tag :issue_type, options_for_select(@issue_types, params[:issue_type]), :include_blank => t(".select_type"), :data => { :behavior => "category_dropdown" } %>

2
app/views/layouts/_search.html.erb
View file

@ -1,4 +1,4 @@
<div class="search_forms">
<div class="search_forms standard-form">
<form method="GET" action="<%= search_path %>" class="search_form">
<%= link_to image_tag("directions.png", :class => "button"), directions_path, :class => "button switch_link", :title => t("site.search.get_directions_title") %>
<%= submit_tag t("site.search.submit_text"), :class => "float", :data => { :disable_with => false } %>

2
app/views/messages/_message_summary.html.erb
View file

@ -1,4 +1,4 @@
<tr id="inbox-<%= message_summary.id %>" class="inbox-row<%= "-unread" unless message_summary.message_read? %>">
<tr id="inbox-<%= message_summary.id %>" class="standard-form inbox-row<%= "-unread" unless message_summary.message_read? %>">
<td class="inbox-sender"><%= link_to message_summary.sender.display_name, user_path(message_summary.sender) %></td>
<td class="inbox-subject"><%= link_to message_summary.title, message_path(message_summary) %></td>
<td class="inbox-sent"><%= l message_summary.sent_on, :format => :friendly %></td>

2
app/views/oauth_clients/edit.html.erb
View file

@ -2,7 +2,7 @@
<h1><%= t ".title" %></h1>
<% end %>
<%= form_for @client_application, :url => oauth_client_path(@client_application.user.display_name, @client_application), :html => { :method => :put } do |f| %>
<%= form_for @client_application, :url => oauth_client_path(@client_application.user.display_name, @client_application), :html => { :method => :put, :class => "standard-form" } do |f| %>
<%= render :partial => "form", :locals => { :f => f } %>
<%= f.submit %>
<% end %>

2
app/views/oauth_clients/index.html.erb
View file

@ -18,7 +18,7 @@
<td><%= link_to token.client_application.name, token.client_application.url %></td>
<td><%= token.authorized_at %></td>
<td>
<%= form_tag :controller => "oauth", :action => "revoke" do %>
<%= form_tag({ :controller => "oauth", :action => "revoke" }, { :class => "standard-form" }) do %>
<%= hidden_field_tag "token", token.token %>
<%= submit_tag t(".revoke") %>
<% end %>

2
app/views/oauth_clients/show.html.erb
View file

@ -27,7 +27,7 @@
<p><%= t ".support_notice" %></p>
</div>
<div class="buttons">
<div class="buttons standard-form">
<%= button_to t(".edit"), edit_oauth_client_path(@client_application.user.display_name, @client_application), :method => :get, :class => "oauth-edit" %>
<%= button_to t(".delete"), oauth_client_path(@client_application.user.display_name, @client_application), :method => :delete, :data => { :confirm => t(".confirm") }, :class => "oauth-delete deemphasize" %>
</div>

2
app/views/redactions/edit.html.erb
View file

@ -4,7 +4,7 @@
<h1><%= t ".heading" %></h1>
<% end %>
<%= form_for(@redaction) do |f| %>
<%= form_for(@redaction, :html => { :class => "standard-form" }) do |f| %>
<%= f.error_messages %>
<p>

2
app/views/redactions/new.html.erb
View file

@ -3,7 +3,7 @@
<h1><%= t ".heading" %></h1>
<% end %>
<%= form_for(@redaction) do |f| %>
<%= form_for(@redaction, :html => { :class => "standard-form" }) do |f| %>
<%= f.error_messages %>
<p>

2
app/views/site/export.html.erb
View file

@ -5,7 +5,7 @@
<%= t ".title" %>
</h2>
<%= form_tag({ :controller => "export", :action => "finish" }, { :class => "export_form" }) do %>
<%= form_tag({ :controller => "export", :action => "finish" }, { :class => "export_form standard-form" }) do %>
<%= hidden_field_tag "format", "osm" %>
<div class='export_area_inputs'>

5
app/views/traces/edit.html.erb
View file

@ -47,9 +47,6 @@
<%= f.select :visibility, [[t("traces.visibility.private"), "private"], [t("traces.visibility.public"), "public"], [t("traces.visibility.trackable"), "trackable"], [t("traces.visibility.identifiable"), "identifiable"]] %> (<a href="<%= t ".visibility_help_url" %>"><%= t ".visibility_help" %></a>)
</div>
</fieldset>
<%= f.submit %>
</div>
<%= f.submit %>
<% end %>

2
app/views/traces/show.html.erb
View file

@ -55,7 +55,7 @@
<br /><br />
<% if current_user && (current_user==@trace.user || current_user.administrator? || current_user.moderator?) %>
<div class="buttons">
<div class="buttons standard-form">
<% if current_user == @trace.user %>
<%= link_to t(".edit_trace"), edit_trace_path(@trace), :class => "button" %>
<% end %>

2
app/views/user_blocks/edit.html.erb
View file

@ -9,7 +9,7 @@
</ul>
<% end %>
<%= form_for(@user_block) do |f| %>
<%= form_for(@user_block, :html => { :class => "standard-form" }) do |f| %>
<%= f.error_messages %>
<p>

2
app/views/user_blocks/new.html.erb
View file

@ -4,7 +4,7 @@
:name => link_to(@user.display_name,
user_path(@user))) %></h1>
<% end %>
<%= form_for(@user_block) do |f| %>
<%= form_for(@user_block, :html => { :class => "standard-form" }) do |f| %>
<%= f.error_messages %>
<p>

2
app/views/user_blocks/revoke.html.erb
View file

@ -15,7 +15,7 @@
<%= t(".time_future", :time => distance_of_time_in_words_to_now(@user_block.ends_at)) %>
</b></p>
<%= form_for :revoke, :url => { :action => "revoke" } do |f| %>
<%= form_for :revoke, :url => { :action => "revoke" }, :html => { :class => "standard-form" } do |f| %>
<%= f.error_messages %>
<p>
<%= check_box_tag "confirm", "yes" %>

2
app/views/users/confirm.html.erb
View file

@ -12,7 +12,7 @@
<p><%= t ".press confirm button" %></p>
<%= form_tag({}, { :id => "confirm" }) do %>
<%= form_tag({}, { :id => "confirm", :class => "standard-form" }) do %>
<input type="display_name" name="confirm_string" value="<%= params[:display_name] %>">
<input type="hidden" name="confirm_string" value="<%= params[:confirm_string] %>">
<input type="submit" name="confirm_action" value="<%= t ".button" %>">

2
app/views/users/confirm_email.html.erb
View file

@ -10,7 +10,7 @@
<p><%= t ".press confirm button" %></p>
<%= form_tag({}, { :id => "confirm" }) do %>
<%= form_tag({}, { :id => "confirm", :class => "standard-form" }) do %>
<input type="hidden" name="confirm_string" value="<%= params[:confirm_string] %>">
<input type="submit" name="confirm_action" value="<%= t ".button" %>">
<% end %>

2
app/views/users/logout.html.erb
View file

@ -2,7 +2,7 @@
<h1><%= t ".heading" %></h1>
<% end %>
<%= form_tag :action => "logout" do %>
<%= form_tag({ :action => "logout" }, { :class => "standard-form" }) do %>
<%= hidden_field_tag("referer", h(params[:referer])) %>
<%= submit_tag t(".logout_button") %>
<% end %>